/* Four Voices · FreeCell — a teak card table with a green-baize top and brass corners, a lacquered
   head with two ember LED counters and a brass deal plate, and cream cards that each carry a
   little staff. The family-PC game remembered as an object, never as a desktop. */
.hero-art svg{overflow:visible}
.deal-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px}
.deal-pick label{font-family:"Yeseva One",serif;color:var(--gold-text)}
.deal-pick input{font:inherit;font-size:1.08rem;color:var(--cream);background:rgba(0,0,0,.3);border:1.5px solid rgba(233,185,90,.4);border-radius:12px;min-height:44px;width:8.5em;padding:4px 12px}
.deal-pick small{flex-basis:100%;color:var(--cream-dim);font-size:.92rem}
.deal-pick[hidden]{display:none!important}
.fv-levels{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1000px){.fv-levels{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.fv-levels{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ================= the table ================= */
body.in-game{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
#play.active{flex:1 1 auto;min-height:0;width:100%;max-width:1500px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"rail" "stage" "side";gap:6px}
.stage{grid-area:stage;min-height:0;min-width:0;display:grid;place-items:center}
.board{--pad:10px;position:relative;display:flex;flex-direction:column;gap:8px;padding:var(--pad);border-radius:20px;color:var(--ink);
  background:
    repeating-linear-gradient(97deg,rgba(42,20,6,0) 0 9px,rgba(42,20,6,.16) 9px 10px,rgba(42,20,6,0) 10px 23px,rgba(255,210,150,.05) 23px 25px),
    linear-gradient(135deg,#7a4520,#5a3014 50%,#3c1e0a);
  border:2px solid #2a1406;
  box-shadow:inset 0 0 0 2px rgba(233,185,90,.3),0 3px 0 #1c0d04,0 24px 50px rgba(0,0,0,.55)}
/* brass corner pieces */
.board::before,.board::after{content:"";position:absolute;width:22px;height:22px;pointer-events:none;
  background:radial-gradient(circle at 35% 35%,#fff0c0,#caa04a 55%,#7a5418);clip-path:polygon(0 0,100% 0,0 100%);top:4px;left:4px;border-radius:4px}
.board::after{left:auto;right:4px;clip-path:polygon(0 0,100% 0,100% 100%)}
.bd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 12px;flex:none;border-radius:12px;min-height:58px;
  background:linear-gradient(180deg,var(--lacquer-1),var(--lacquer-2) 55%,var(--lacquer-3));border:1.5px solid var(--gold-1);
  box-shadow:inset 0 1px 0 rgba(255,225,170,.35),inset 0 -2px 0 rgba(0,0,0,.25),0 2px 0 rgba(0,0,0,.3)}
.bd-count{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none}
.bd-count>span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#f3d9b8;opacity:.85;line-height:1;white-space:nowrap}
.led{display:inline-flex;gap:2px;padding:4px 5px;background:#140604;line-height:0;border-radius:6px;border:1.5px solid var(--gold-2);box-shadow:inset 0 2px 7px rgba(0,0,0,.85),0 1px 0 rgba(255,225,170,.25)}
.led svg{width:14px;height:24px;display:block;filter:drop-shadow(0 0 2.5px rgba(255,80,30,.6))}
.led .on{fill:#ff5a2a}.led .off{fill:#3a1208}
.plate{display:flex;align-items:baseline;gap:8px;padding:4px 16px;border-radius:8px;color:#3a2406;
  background:linear-gradient(180deg,#f6dc95,#caa04a 60%,#9a7224);border:1px solid #5a3a10;box-shadow:inset 0 1px 0 rgba(255,250,220,.8),0 2px 4px rgba(0,0,0,.35)}
.plate-k{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}
.plate b{font-family:"Yeseva One",serif;font-weight:400;font-size:1.3rem;letter-spacing:.04em}
/* the music stand (Ears): the note to read, big, on cream manuscript paper where the free cells would be */
.stand{position:absolute;display:flex;align-items:center;justify-content:center;gap:4%;padding:3% 4%;border-radius:calc(var(--cw) * .12);
  background:linear-gradient(180deg,#fffaf0,#efe0bd);border:2px solid #caa04a;box-shadow:inset 0 1px 0 #fff,0 4px 12px rgba(0,0,0,.4);color:#3a2406}
.stand svg{height:100%;width:auto;max-width:62%;display:block}
.stand .count{font-family:"Yeseva One",serif;font-size:max(14px,calc(var(--cw) * .2));line-height:1.1;text-align:center}
.stand .count b{display:block;font-weight:400;font-size:1.9em;color:#8a2413}
.stand .count small{display:block;font-family:Alegreya,Georgia,serif;font-style:italic;font-size:max(12px,calc(var(--cw) * .13));opacity:.8;margin-top:.3em}
.stand.flash{animation:standIn .35s ease-out}
@keyframes standIn{0%{transform:scale(.96);filter:brightness(1.15)}100%{transform:none}}
.stand .timebar{position:relative;flex:none;width:7px;height:80%;border-radius:4px;background:#d8c49a;overflow:hidden}
.stand .timebar i{position:absolute;left:0;right:0;bottom:0;background:#a3291a;height:100%}
@media (max-width:560px){.stand .count small{display:none}}

.baize{position:relative;border-radius:14px;flex:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.3 0 0 0 0 0.15 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 30%,#2f7a52,#1d5a3c 60%,#123f2a);
  box-shadow:inset 0 3px 14px rgba(0,0,0,.55),0 0 0 1.5px rgba(233,185,90,.45)}
/* the slots: free cells (left) and the four voices' home cells (right) */
.slot{position:absolute;border-radius:calc(var(--cw) * .1);border:1.5px solid rgba(233,185,90,.42);background:rgba(0,0,0,.16);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:rgba(244,231,201,.55);text-align:center;pointer-events:auto}
.slot .sp{font-size:calc(var(--cw) * .42);line-height:1;opacity:.6}
.slot.home .sp.red{color:#e58a74}
.slot small{font-size:max(10px,calc(var(--cw) * .14));letter-spacing:.06em;text-transform:uppercase;line-height:1.05}
.slot.col{border-style:dashed;background:rgba(0,0,0,.08);box-shadow:none}
.slot.hot,.pc.hot{box-shadow:0 0 0 3px #f2cf7e,0 0 18px rgba(242,207,126,.7)}
.slot .sh{display:none}
.baize.narrow .slot .lg{display:none}.baize.narrow .slot .sh{display:inline;font-size:11px;letter-spacing:.04em}
.stand.tall .count small{display:block}
.labels{position:absolute;left:0;right:0;pointer-events:none;color:rgba(244,231,201,.7);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}

/* ---------- a card ---------- */
.pc{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:calc(var(--cw) * .09);cursor:pointer;
  background:linear-gradient(180deg,#fffaf0,#f1e3c2);border:1px solid #8a6a40;color:#1d140e;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 1px 2px rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.18);
  transition:transform .24s cubic-bezier(.2,.75,.3,1),box-shadow .15s;will-change:transform;touch-action:none}
.pc.red{color:#a3291a}
.pc::after{content:"";position:absolute;inset:3px;border-radius:calc(var(--cw) * .07);border:1px solid rgba(202,160,74,.45);pointer-events:none}
.pc .ix{position:absolute;left:7%;top:2%;display:flex;align-items:baseline;gap:1px;font-family:"Yeseva One",serif;font-size:max(14px,calc(var(--cw) * .3));line-height:1.1;white-space:nowrap;letter-spacing:-.02em}
.pc .ix i{font-style:normal;font-family:Georgia,"Times New Roman",serif;font-size:.86em}
.pc .bd{position:absolute;left:6%;right:6%;top:30%;bottom:5%;display:grid;place-items:center;pointer-events:none}
.pc .bd .pip{font-family:Georgia,"Times New Roman",serif;font-size:calc(var(--cw) * .62);line-height:1}
.pc .bd .court{display:grid;place-items:center;width:84%;height:92%;border-radius:6px;border:1.5px solid currentColor;
  background:radial-gradient(circle at 50% 40%,rgba(233,185,90,.28),rgba(233,185,90,0) 70%);font-family:"Yeseva One",serif;font-size:calc(var(--cw) * .44);line-height:1}
.pc .bd .court small{display:block;font-family:Georgia,serif;font-size:.55em;margin-top:-.1em}
.pc .bd svg.staff{width:100%;height:100%}
.pc .nm{font-family:"Yeseva One",serif;font-size:calc(var(--cw) * .5);line-height:1}
.pc.ears .ix{font-size:max(14px,calc(var(--cw) * .32))}
.pc.sel{box-shadow:0 0 0 3px #f2cf7e,0 0 16px rgba(242,207,126,.8),0 3px 8px rgba(0,0,0,.3)}
.pc.lift{transition:none;z-index:500!important;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.pc.home{cursor:default}
.pc.nope{animation:nope .32s}
@keyframes nope{20%{translate:-5px 0}50%{translate:5px 0}80%{translate:-3px 0}}
.pc.glow{animation:glow .6s ease-out}
@keyframes glow{0%{filter:brightness(1.2) drop-shadow(0 0 10px #f2cf7e)}100%{filter:none}}
.pc:focus-visible{outline:3px solid #1f4fa3;outline-offset:1px}
.no-anim .pc{transition:none!important}

/* ---------- the side: words and tools ---------- */
.side{grid-area:side;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.say{text-align:center;font-size:1.02rem;line-height:1.25;height:auto;overflow:visible;min-height:2.7em;max-width:46ch;display:flex;flex-direction:column;justify-content:center}
.say b{font-family:"Yeseva One",serif;font-weight:400;font-size:1.18rem;color:var(--cream)}
.say small{display:block;color:var(--cream-dim);font-size:1rem;margin-top:2px}

@media (min-aspect-ratio:5/4){
  #play{--side:clamp(210px,24vw,330px)}
  #play.active{grid-template-columns:minmax(0,1fr) var(--side);grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr);
    grid-template-areas:"stage ." "stage rail" "stage side" "stage .";column-gap:clamp(12px,2vw,28px)}
  .rail{justify-content:flex-start}
  .side{align-items:stretch}
  .say{text-align:left;max-width:none}
  .tools{justify-content:flex-start}
}
/* big landscape screens: the table and the words stand together in the middle */
@media (min-aspect-ratio:5/4) and (min-height:621px){
  #play.active{grid-template-columns:minmax(0,1fr) auto var(--side) minmax(0,1fr);
    grid-template-areas:". stage . ." ". stage rail ." ". stage side ." ". stage . .";max-width:none}
}
@media (min-aspect-ratio:5/4) and (max-height:620px){
  body.in-game .top{position:fixed;top:0;right:0;width:calc(var(--side) + max(8px,env(safe-area-inset-right)) + 8px);max-width:none;margin:0;
    padding:calc(6px + env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 0 8px;min-height:0;gap:6px;z-index:6}
  body.in-game .back{padding:6px;min-height:44px}
  body.in-game .back>span{display:none}
  body.in-game .top .title{display:none}
  .say small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #play{padding-top:calc(6px + env(safe-area-inset-top))}
  #play.active{grid-template-rows:calc(46px + env(safe-area-inset-top)) auto auto minmax(0,1fr)}
  .board{--pad:6px;border-radius:14px;gap:5px}
  .bd-head{padding:2px 8px;min-height:0}
  .bd-count>span{display:none}
  .led svg{width:11px;height:19px}
  .plate{padding:2px 10px}.plate b{font-size:1.05rem}
  .say{font-size:1rem;min-height:0}
  .say b{font-size:1.04rem}
  .tool{min-width:0;padding:4px 10px}
}
@media (max-aspect-ratio:5/4) and (max-width:560px){
  #play{padding-left:max(4px,env(safe-area-inset-left));padding-right:max(4px,env(safe-area-inset-right))}
  .board{--pad:5px;border-radius:14px;gap:5px}
  .bd-head{padding:3px 8px;min-height:0;gap:6px}
  .bd-count>span{display:none}
  .led svg{width:11px;height:19px}
  .plate{padding:2px 10px}.plate-k{display:none}.plate b{font-size:1.1rem}
  .tool{min-width:0;padding:4px 12px}
}
/* the win: cards leap off the home cells */
.leap{position:fixed;z-index:60;pointer-events:none}
@media (prefers-reduced-motion:reduce){.pc{transition:none}}