/* Bigfoot e le Streghe del Kah — placeholder art direction.
   Storybook night: deep pine/ink background, parchment cards.
   Swap placeholders by setting GRAPHICS.url in js/ui.js
   and adding background-image rules to .ph-* classes. */

:root {
  --ink: #101820; --pine: #16281f; --parch: #f2e8d5; --parch2: #e7d9bd;
  --gold: #d8a94e; --blood: #a83a32; --moss: #6fa287; --mist: #9fb3c8;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(1200px 800px at 50% -10%, #1d3327, var(--ink)); color: var(--parch); font-family: Georgia, 'Times New Roman', serif; min-height: 100vh; }
.hidden { display: none !important; }
h1, h2, h3, h4 { font-weight: normal; letter-spacing: .04em; }
button { font-family: inherit; }

/* ---------- generic ---------- */
.btn { background: var(--gold); color: #241a08; border: none; border-radius: 8px; padding: .55em 1.1em; font-size: 1rem; cursor: pointer; margin: .2em; }
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; color: var(--parch); border: 1px solid var(--gold); }
.btn.pick { background: #243b32; color: var(--parch); border: 1px solid var(--moss); min-width: 120px; }
.btn.pick small { color: var(--mist); }
.btn.obj { display: block; width: 100%; text-align: left; background: #243b32; color: var(--parch); border: 1px solid var(--moss); }
input, select { background: #0d1512; color: var(--parch); border: 1px solid #3a4a42; border-radius: 8px; padding: .55em .8em; font-size: 1rem; width: 100%; margin-top: .3em; }
label { display: block; margin: .7em 0; text-align: left; }
.hint { color: var(--mist); font-size: .9em; margin: .5em 0; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #2a2118; border: 1px solid var(--gold); color: var(--parch); padding: .7em 1.2em; border-radius: 10px; opacity: 0; transition: all .3s; z-index: 99; max-width: 90vw; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- lobby ---------- */
#screen-lobby { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1em; }
.lobby-box { background: rgba(13, 21, 18, .85); border: 1px solid #3a4a42; border-radius: 16px; padding: 2em; max-width: 480px; width: 100%; text-align: center; box-shadow: 0 12px 60px rgba(0,0,0,.5); }
.lobby-box h1 { font-size: 2.2em; margin: 0; color: var(--gold); }
.lobby-box h1 span { font-size: .62em; color: var(--parch); }
.sub { color: var(--mist); margin-top: .2em; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.btnrow { margin-top: 1em; }
#wait-players { margin: 1em 0; }
.wp { background: #1c2b24; border: 1px solid #3a4a42; border-radius: 8px; padding: .4em .8em; margin: .25em; display: inline-block; }

/* ---------- HUD ---------- */
#hud { display: flex; gap: 1em; align-items: center; justify-content: space-between; padding: .6em 1em; background: rgba(13,21,18,.9); border-bottom: 1px solid #3a4a42; position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
#hud-turn { font-size: 1.15em; color: var(--gold); }
#hud-obj { font-style: italic; }
#hud-deck { color: var(--mist); }

/* ---------- thrones ---------- */
#thrones { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8em; max-width: 900px; margin: 1em auto; padding: 0 1em; }
.throne { background: rgba(20, 32, 26, .9); border: 2px solid #4a5a52; border-radius: 14px; padding: .8em .4em; text-align: center; min-height: 170px; }
.throne.is-cenere { border-color: #333; opacity: .75; }
.t-label { font-size: .75em; letter-spacing: .2em; color: var(--mist); }
.w-hood { font-size: 3em; color: var(--mist); }
.w-skull { font-size: 3em; }
.w-face { width: 56px; height: 56px; border-radius: 50%; margin: .3em auto; background: radial-gradient(circle at 35% 30%, #c9a06a, #7a5230); border: 2px solid var(--gold); }
.ph-witch { /* future: background-image per witch */ }
.w-name { font-size: 1.05em; color: var(--gold); }
.w-signs { font-size: .75em; color: var(--moss); }
.w-vita { margin-top: .4em; font-size: 1.1em; color: #e08a80; }
.w-vita.vd { color: var(--gold); font-weight: bold; }
.w-vita.vlow { color: var(--blood); font-weight: bold; }

/* ---------- trees ---------- */
#trees { max-width: 1100px; margin: 0 auto; padding: 0 1em; display: flex; flex-direction: column; gap: .6em; }
.tree { display: flex; align-items: stretch; gap: .3em; background: rgba(13,21,18,.7); border: 1px solid #3a4a42; border-radius: 10px; padding: .5em; overflow-x: auto; }
.tree.pickable { border-color: var(--gold); cursor: pointer; box-shadow: 0 0 0 2px var(--gold); }
.tcard { min-width: 130px; max-width: 150px; background: var(--parch); color: #2a2118; border-radius: 8px; padding: .45em; font-size: .82em; }
.tcard .tt { font-size: .7em; letter-spacing: .12em; color: #7a6a4a; }
.tcard .tn { font-weight: bold; margin: .15em 0; }
.tcard .tx, .tcard .tby { font-size: .78em; color: #5a4a32; }
.tcard.facedown { background: #2b3550; color: #b9c6e4; border: 1px dashed #7a8ab8; display: flex; align-items: center; justify-content: center; }
.tcard.open { background: transparent; color: var(--moss); border: 1px dashed var(--moss); display: flex; align-items: center; justify-content: center; }
.tcard.leaf { background: #dcebd4; }
.tarrow { align-self: center; color: var(--mist); }
.fuse { color: var(--blood); font-weight: bold; margin-top: .3em; }
.empty { color: var(--mist); font-style: italic; text-align: center; padding: 1em; }

/* ---------- mid row ---------- */
#midrow { display: grid; grid-template-columns: 200px 1fr 260px; gap: .8em; max-width: 1200px; margin: 1em auto; padding: 0 1em; align-items: start; }
#players .pl { background: rgba(20,32,26,.9); border: 1px solid #3a4a42; border-radius: 10px; padding: .5em .7em; margin-bottom: .5em; font-size: .9em; }
#players .pl.is-turn { border-color: var(--gold); }
#players .pl.disc { opacity: .5; }
.phand { float: right; color: var(--mist); }
.pobj { font-size: .78em; font-style: italic; color: var(--gold); margin-top: .2em; }
#logwrap { background: rgba(13,21,18,.85); border: 1px solid #3a4a42; border-radius: 10px; padding: .6em; max-height: 420px; overflow: hidden; }
#logwrap h4 { margin: 0 0 .4em; color: var(--mist); font-size: .85em; letter-spacing: .15em; }
#log { font-size: .82em; max-height: 360px; overflow-y: auto; }
#log div { padding: .25em 0; border-bottom: 1px dotted #2a3a32; color: #cfd8cc; }

/* ---------- hand ---------- */
#handwrap { background: rgba(13,21,18,.6); border: 1px solid #3a4a42; border-radius: 12px; padding: .7em; }
#hand-count { color: var(--mist); font-size: .85em; margin-bottom: .4em; }
#hand { display: flex; gap: .5em; flex-wrap: wrap; }
.card { width: 132px; background: var(--parch); color: #2a2118; border-radius: 10px; padding: .45em; cursor: pointer; border: 2px solid transparent; font-size: .8em; transition: transform .12s; }
.card:hover { transform: translateY(-4px); }
.card.sel { border-color: var(--gold); box-shadow: 0 0 12px rgba(216,169,78,.6); }
.card.sel-disc { border-color: var(--blood); }
.card-kind { font-size: .65em; letter-spacing: .14em; color: #7a6a4a; }
.card-art { height: 56px; border-radius: 6px; margin: .3em 0; }
.ph-seme { background: radial-gradient(circle, #8fce7a 20%, #3f6b3a 70%); }
.ph-ramo { background: linear-gradient(135deg, #a0714f, #5f4128); }
.ph-foglia { background: radial-gradient(ellipse, #bfe3a8, #5d8a4a); }
.ph-azione { background: radial-gradient(circle, #d8b46a, #8a5f2a); }
.card.k-ramo .card-kind { color: #6b4a2a; }
.card.k-foglia .card-kind { color: #4a6b3a; }
.card.k-azione .card-kind { color: #8a5f2a; }
.card-name { font-weight: bold; margin: .15em 0; font-size: .95em; }
.card-text { font-size: .78em; color: #5a4a32; }
#actions { margin-top: .7em; min-height: 2.5em; }
.cab { margin-left: .6em; }
#bid-amt { width: 90px; }

/* ---------- modal ---------- */
#modal { position: fixed; inset: 0; background: rgba(5, 8, 6, .75); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1em; }
#modal-box { background: #16241d; border: 1px solid var(--gold); border-radius: 14px; padding: 1.4em; max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto; position: relative; }
#modal-close { position: absolute; top: .5em; right: .7em; background: none; border: none; color: var(--mist); font-size: 1.2em; cursor: pointer; }
.pickrow { display: flex; flex-wrap: wrap; gap: .4em; margin: .6em 0; }
.peek { background: #0d1512; border: 1px solid var(--moss); border-radius: 8px; padding: 1em; margin: .8em 0; font-size: 1.1em; }
.scores { width: 100%; border-collapse: collapse; margin: .8em 0; }
.scores th, .scores td { border-bottom: 1px solid #3a4a42; padding: .4em; text-align: left; }

@media (max-width: 900px) {
  #midrow { grid-template-columns: 1fr; }
  #thrones { grid-template-columns: repeat(2, 1fr); }
  .card { width: 112px; }
}