:root {
  --ink: #171426;
  --navy: #24213d;
  --felt: #244e48;
  --felt-dark: #173a37;
  --felt-light: #3f6c5f;
  --cream: #f5e9c9;
  --paper: #fff8df;
  --gold: #f2bc4d;
  --gold-dark: #a66f25;
  --red: #dc4a48;
  --red-dark: #802c38;
  --blue: #56b6c4;
  --shadow: #0d2727;
  --pixel: 3px;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--cream);
  background: var(--ink);
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  overflow-x: hidden;
}

.game-hidden { visibility: hidden; height: 100vh; overflow: hidden; }

.dream-menu {
  position: fixed; inset: 0; z-index: 40; overflow: hidden; isolation: isolate;
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse at 18% 30%, rgba(86,182,196,.2), transparent 34%),
    radial-gradient(ellipse at 82% 24%, rgba(139,103,199,.27), transparent 38%),
    radial-gradient(ellipse at 50% 67%, rgba(229,140,176,.24), transparent 40%),
    linear-gradient(180deg, #100f27 0 24%, #25234b 50%, #665078 74%, #d48683 100%);
  image-rendering: pixelated;
}
.dream-menu::before {
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .24;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.025) 50%, transparent 50%),
    linear-gradient(rgba(255,255,255,.025) 50%, transparent 50%);
  background-size: 6px 6px;
}
.dream-menu::after {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: min(720px, 155vw); aspect-ratio: 1;
  pointer-events: none; opacity: .56; transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, transparent 0 47%, rgba(207,189,255,.23) 48% 50%, transparent 51% 59%, rgba(110,205,211,.16) 60% 61%, transparent 62%),
    radial-gradient(circle, rgba(115,92,180,.14), transparent 64%);
  clip-path: polygon(30% 0,70% 0,70% 3%,82% 3%,82% 8%,90% 8%,90% 15%,96% 15%,96% 28%,100% 28%,100% 72%,96% 72%,96% 85%,90% 85%,90% 92%,82% 92%,82% 97%,70% 97%,70% 100%,30% 100%,30% 97%,18% 97%,18% 92%,10% 92%,10% 85%,4% 85%,4% 72%,0 72%,0 28%,4% 28%,4% 15%,10% 15%,10% 8%,18% 8%,18% 3%,30% 3%);
  filter: drop-shadow(0 0 34px rgba(157,129,223,.45));
  animation: dream-gate-pulse 9s steps(8) infinite alternate;
}
.dream-menu.leaving { animation: dream-exit .48s steps(6) forwards; }
.dream-stars {
  position: absolute; z-index: 2; inset: 0 0 35%; opacity: .8;
  background-image:
    radial-gradient(circle at 12% 18%, #fff2be 0 2px, transparent 3px),
    radial-gradient(circle at 24% 38%, #fff2be 0 1px, transparent 2px),
    radial-gradient(circle at 39% 13%, #fff2be 0 1px, transparent 2px),
    radial-gradient(circle at 58% 26%, #fff2be 0 2px, transparent 3px),
    radial-gradient(circle at 73% 12%, #fff2be 0 1px, transparent 2px),
    radial-gradient(circle at 86% 33%, #fff2be 0 2px, transparent 3px),
    radial-gradient(circle at 94% 15%, #fff2be 0 1px, transparent 2px);
  animation: star-blink 3.5s steps(2) infinite;
}
.dream-stars::before, .dream-stars::after {
  content: ""; position: absolute; left: -120px; top: 22%; width: 92px; height: 3px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,242,190,.38), #fff2be);
  box-shadow: 8px 4px 0 rgba(115,205,214,.18); transform: rotate(-17deg);
  animation: dream-shooting-star 13s steps(10) infinite;
}
.dream-stars::after { top: 58%; animation-delay: -6.5s; animation-duration: 17s; scale: .72; }
.pixel-moon {
  position: absolute; z-index: 2; top: 8%; right: 12%; width: 86px; height: 86px;
  background: #ffe9a8; box-shadow: 0 0 0 5px #e6ae6c, 12px 12px 0 rgba(15,13,39,.35);
  clip-path: polygon(24% 0,76% 0,76% 6%,88% 6%,88% 18%,94% 18%,94% 30%,100% 30%,100% 70%,94% 70%,94% 82%,88% 82%,88% 94%,76% 94%,76% 100%,24% 100%,24% 94%,12% 94%,12% 82%,6% 82%,6% 70%,0 70%,0 30%,6% 30%,6% 18%,12% 18%,12% 6%,24% 6%);
  animation: moon-float 18s steps(12) infinite;
  will-change: transform;
}
.pixel-moon span { position: absolute; width: 9px; height: 9px; left: 24px; top: 23px; background: #e8bd7d; box-shadow: 30px 13px 0 #e8bd7d, 8px 34px 0 #e8bd7d; }
.cloud {
  position: absolute; z-index: 2; left: -280px; width: 220px; height: 54px; background: currentColor;
  clip-path: polygon(0 58%,8% 58%,8% 42%,18% 42%,18% 25%,31% 25%,31% 9%,48% 9%,48% 20%,65% 20%,65% 34%,82% 34%,82% 48%,94% 48%,94% 60%,100% 60%,100% 100%,0 100%);
  animation: cloud-drift linear infinite;
}
.cloud-far { color: #69678c; opacity: .42; transform: scale(.72); }
.cloud-near { color: #ded3c5; filter: drop-shadow(0 9px 0 rgba(38,34,67,.22)); }
.cloud-a { top: 16%; animation-duration: 42s; animation-delay: -8s; }
.cloud-b { top: 36%; animation-duration: 52s; animation-delay: -31s; }
.cloud-c { top: 27%; animation-duration: 31s; animation-delay: -20s; }
.cloud-d { top: 55%; animation-duration: 38s; animation-delay: -4s; transform: scale(.82); }
.cloud-e { top: 70%; animation-duration: 46s; animation-delay: -35s; transform: scale(1.15); opacity: .7; }
.dream-hills { position: absolute; z-index: 2; inset: auto 0 0; height: 26%; overflow: hidden; opacity: .8; }
.dream-hills i { position: absolute; width: 42vw; height: 42vw; bottom: -34vw; background: #252746; transform: rotate(45deg); box-shadow: inset 8px 8px 0 #34365a; }
.dream-hills i:nth-child(1) { left: -8%; }.dream-hills i:nth-child(2) { left: 30%; bottom: -37vw; }.dream-hills i:nth-child(3) { right: -10%; bottom: -31vw; background: #20213d; }
.dream-panel {
  position: relative; z-index: 3; width: min(520px, calc(100% - 34px)); padding: 26px 36px 24px;
  text-align: center; color: var(--cream); background: rgba(23,20,48,.92);
  border: 4px solid var(--cream); outline: 5px solid #151329;
  box-shadow: 12px 12px 0 rgba(10,9,25,.65), inset 0 0 0 3px #555174;
}
.dream-panel::before, .dream-panel::after { content: ""; position: absolute; width: 15px; height: 15px; background: var(--gold); top: 10px; }
.dream-panel::before { left: 10px; }.dream-panel::after { right: 10px; }
.dream-kicker { color: #aaa4c5; font-size: 9px; letter-spacing: 3px; }
.dream-eye { position: relative; width: 112px; height: 62px; margin: 13px auto 5px; animation: dream-eye-float 4.5s steps(6) infinite alternate; }
.dream-eye::before {
  content: ""; position: absolute; inset: 0; background: var(--cream);
  clip-path: polygon(0 50%,12% 34%,25% 22%,40% 12%,60% 12%,75% 22%,88% 34%,100% 50%,88% 66%,75% 78%,60% 88%,40% 88%,25% 78%,12% 66%);
  box-shadow: 0 0 24px rgba(244,225,180,.28); animation: dream-eye-blink 6s steps(2) infinite;
}
.dream-eye::after {
  content: ""; position: absolute; left: 38px; top: 8px; width: 36px; height: 46px; background: #302b56;
  clip-path: polygon(25% 0,75% 0,75% 8%,88% 8%,88% 22%,100% 22%,100% 78%,88% 78%,88% 92%,75% 92%,75% 100%,25% 100%,25% 92%,12% 92%,12% 78%,0 78%,0 22%,12% 22%,12% 8%,25% 8%);
  animation: dream-eye-blink 6s steps(2) infinite;
}
.dream-eye > span { position: absolute; z-index: 2; left: 45px; top: 18px; width: 22px; height: 26px; display: grid; place-items: center; color: var(--red); font-family: Georgia, serif; font-size: 22px; animation: dream-eye-blink 6s steps(2) infinite; }
.dream-z { position: absolute; z-index: 3; color: var(--blue); font-size: 10px; font-style: normal; text-shadow: 2px 2px 0 #15132b; animation: dream-z-rise 3.8s steps(5) infinite; }
.dream-z-one { right: -10px; top: 7px; }.dream-z-two { right: -25px; top: -12px; font-size: 7px; animation-delay: -1.8s; }
.dream-panel h1 { margin: 5px 0 0; color: var(--gold); font-size: clamp(31px, 6vw, 46px); line-height: .92; letter-spacing: 5px; text-shadow: 5px 5px 0 #73512b; }
.dream-panel h1 small { display: block; margin-bottom: 7px; color: #aaa4c5; font-size: 9px; letter-spacing: 5px; text-shadow: none; }
.dream-game-name { margin: 8px 0 10px; color: white; font-size: 13px; letter-spacing: 8px; text-indent: 8px; }
.dream-tagline { margin: 0 0 13px; color: #b7b0ce; font-size: 9px; line-height: 1.65; letter-spacing: 1px; }
.dream-cycle { margin-bottom: 16px; padding: 8px 7px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 5px; background: rgba(17,16,38,.72); border: 2px solid #4f4a69; }
.dream-cycle > span { min-width: 0; color: var(--cream); font-size: 8px; line-height: 1.35; }
.dream-cycle b, .dream-cycle small { display: block; }.dream-cycle b { color: var(--gold); font-size: 7px; }.dream-cycle small { color: #77718e; font-size: 5px; letter-spacing: 1px; }
.dream-cycle > i { color: #6f6988; font-size: 10px; font-style: normal; }
.dream-actions { display: grid; gap: 10px; }.dream-play { min-height: 52px; font-size: 13px; }.dream-rules { background: #292643; }
.dream-online { min-height: 46px; color: #b9f4ed; background: #24524f; box-shadow: inset 0 0 0 2px #4d8a80, 4px 4px 0 #0a0911; }
.dream-footer { position: absolute; z-index: 3; left: 22px; right: 22px; bottom: 16px; display: flex; justify-content: space-between; color: #e0cba6; font-size: 8px; letter-spacing: 1px; }

.story-cutscene {
  position: fixed; z-index: 60; inset: 0; display: grid; grid-template-rows: minmax(260px, 1fr) auto;
  overflow: hidden; color: var(--cream); background: #080719; image-rendering: pixelated;
}
.story-cutscene[hidden] { display: none; }
.story-cutscene::before { content: ""; position: absolute; z-index: 6; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,.12) 5px); mix-blend-mode: multiply; }
.story-cutscene::after { content: ""; position: absolute; z-index: 6; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px rgba(2,2,16,.92); }
.cutscene-skip { position: absolute; z-index: 12; top: 17px; right: 18px; padding: 8px 10px; color: #aaa4c5; background: rgba(17,16,38,.85); border: 2px solid #514c6c; cursor: pointer; font: inherit; font-size: 8px; transition: .18s steps(2); }
.cutscene-skip:hover { color: var(--cream); border-color: var(--gold); box-shadow: 0 0 20px rgba(242,188,77,.2); }
.cutscene-world {
  --dream-x: 0px; --dream-y: 0px; --dream-far-x: 0px; --dream-far-y: 0px; --dream-opposite-x: 0px; --dream-opposite-y: 0px;
  --pointer-x: 50%; --pointer-y: 50%; position: relative; overflow: hidden; cursor: pointer; perspective: 900px; touch-action: manipulation;
  background: radial-gradient(ellipse at 50% 100%, rgba(235,129,168,.48), transparent 36%), radial-gradient(circle at 50% 30%, rgba(113,108,204,.3), transparent 35%), linear-gradient(#08071c, #252749 66%, #875b72);
}
.cutscene-world::before { content: ""; position: absolute; z-index: 0; inset: -10%; pointer-events: none; background: radial-gradient(circle at 50% 115%, rgba(255,203,157,.32), transparent 38%); animation: cutscene-horizon-breathe 4s steps(8) infinite alternate; }
.cutscene-world::after { content: ""; position: absolute; z-index: 5; inset: 0; pointer-events: none; opacity: .46; background: radial-gradient(circle 160px at var(--pointer-x) var(--pointer-y), rgba(200,190,255,.22), transparent 70%); mix-blend-mode: screen; transition: opacity .3s; }
.cutscene-aurora { position: absolute; z-index: 0; inset: -25% -15%; opacity: .36; filter: blur(22px); background: conic-gradient(from 210deg at 50% 65%, transparent 0 17%, rgba(96,232,218,.45) 22%, transparent 31%, rgba(201,104,237,.5) 42%, transparent 53%, rgba(242,188,77,.35) 60%, transparent 72%); transform: translate3d(var(--dream-far-x), var(--dream-far-y), 0); animation: cutscene-aurora 11s steps(12) infinite alternate; }
.cutscene-stars { position: absolute; z-index: 1; inset: -4%; opacity: .78; transform: translate3d(var(--dream-far-x), var(--dream-far-y), 0); background-image: radial-gradient(circle at 12% 18%, #fff2be 0 2px, transparent 3px), radial-gradient(circle at 28% 38%, #c8f9ff 0 1px, transparent 2px), radial-gradient(circle at 58% 15%, #fff2be 0 2px, transparent 3px), radial-gradient(circle at 79% 34%, #ddbfff 0 1px, transparent 2px), radial-gradient(circle at 92% 12%, #fff2be 0 2px, transparent 3px), radial-gradient(circle at 68% 48%, #fff 0 1px, transparent 2px), radial-gradient(circle at 38% 8%, #fff 0 1px, transparent 2px); animation: star-blink 3s steps(2) infinite; }
.cutscene-cloud { position: absolute; z-index: 1; left: -260px; width: 220px; height: 57px; opacity: .18; background: #cfccf1; filter: drop-shadow(0 9px 0 rgba(86,77,145,.35)); clip-path: polygon(0 58%,8% 58%,8% 42%,18% 42%,18% 25%,31% 25%,31% 9%,48% 9%,48% 20%,65% 20%,65% 34%,82% 34%,82% 48%,94% 48%,94% 60%,100% 60%,100% 100%,0 100%); transform: translate3d(var(--dream-opposite-x), var(--dream-opposite-y), 0); animation: cutscene-cloud-cross 24s linear infinite; transition: opacity .8s steps(5); }
.cutscene-cloud-one { top: 28%; animation-delay: -8s; }.cutscene-cloud-two { top: 58%; width: 310px; height: 78px; opacity: .11; animation-duration: 34s; animation-delay: -25s; }
.cutscene-moon { position: absolute; z-index: 3; top: 9%; left: 50%; width: 92px; height: 92px; translate: -50% 0; transform: translate3d(var(--dream-x), var(--dream-y), 45px); background: #ffe9a8; clip-path: polygon(24% 0,76% 0,76% 6%,88% 6%,88% 18%,94% 18%,94% 30%,100% 30%,100% 70%,94% 70%,94% 82%,88% 82%,88% 94%,76% 94%,76% 100%,24% 100%,24% 94%,12% 94%,12% 82%,6% 82%,6% 70%,0 70%,0 30%,6% 30%,6% 18%,12% 18%,12% 6%,24% 6%); box-shadow: 0 0 35px rgba(255,226,164,.25); transition: top 1s steps(6), scale 1s steps(6), opacity 1s steps(6), box-shadow 1s steps(6); }
.cutscene-moon i { position: absolute; left: 23px; top: 26px; width: 10px; height: 10px; background: #e8bd7d; box-shadow: 36px 14px 0 #e8bd7d, 11px 34px 0 #e8bd7d; transition: .7s steps(4); }
.cutscene-moon span { position: absolute; inset: 0; display: grid; place-items: center; color: transparent; font-family: Georgia,serif; font-size: 28px; text-shadow: 0 0 18px currentColor; transition: .7s steps(4); }
.cutscene-gate { position: absolute; z-index: 1; left: 50%; top: 48%; width: 420px; height: 420px; translate: -50% -50%; transform: translate3d(var(--dream-far-x), var(--dream-far-y), 0); opacity: 0; background: radial-gradient(circle, rgba(255,255,255,.06) 0 14%, rgba(177,146,255,.12) 15% 28%, transparent 29% 40%, rgba(213,191,255,.5) 41% 44%, transparent 45% 54%, rgba(106,225,226,.28) 55% 58%, transparent 59%), conic-gradient(from 45deg, transparent, rgba(193,161,255,.18), transparent 20%, rgba(117,226,229,.16), transparent 46%, rgba(255,213,126,.12), transparent 70%); border-radius: 50%; filter: drop-shadow(0 0 24px rgba(150,116,224,.4)); transition: 1s steps(7); animation: cutscene-gate-turn 14s steps(24) infinite; }
.cutscene-particles { position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s; }.cutscene-particles i { --particle-delay: 0s; position: absolute; bottom: -12px; width: 5px; height: 5px; background: #d9c5ff; box-shadow: 0 0 12px #b19cf5; animation: cutscene-particle-rise 5s steps(10) infinite; animation-delay: var(--particle-delay); }.cutscene-particles i:nth-child(1) { left: 9%; --particle-delay: -1s; }.cutscene-particles i:nth-child(2) { left: 17%; --particle-delay: -3.6s; background: #ffe7a8; }.cutscene-particles i:nth-child(3) { left: 26%; --particle-delay: -2.2s; }.cutscene-particles i:nth-child(4) { left: 34%; --particle-delay: -.4s; background: #a8f7f2; }.cutscene-particles i:nth-child(5) { left: 42%; --particle-delay: -4.3s; }.cutscene-particles i:nth-child(6) { left: 49%; --particle-delay: -2.8s; background: #ffe7a8; }.cutscene-particles i:nth-child(7) { left: 57%; --particle-delay: -1.7s; }.cutscene-particles i:nth-child(8) { left: 65%; --particle-delay: -4.8s; background: #a8f7f2; }.cutscene-particles i:nth-child(9) { left: 72%; --particle-delay: -.8s; }.cutscene-particles i:nth-child(10) { left: 80%; --particle-delay: -3.1s; background: #ffe7a8; }.cutscene-particles i:nth-child(11) { left: 88%; --particle-delay: -1.4s; }.cutscene-particles i:nth-child(12) { left: 95%; --particle-delay: -4s; background: #a8f7f2; }
.cutscene-particles { display: none; }
.cutscene-skyline { position: absolute; z-index: 2; left: -2%; right: -2%; bottom: 0; height: 29%; transform: translate3d(var(--dream-opposite-x), var(--dream-opposite-y), 15px); background: #17172d; border-top: 5px solid #272848; box-shadow: 0 -8px 30px rgba(126,106,197,.12); transition: 1s steps(6); }
.cutscene-skyline i { position: absolute; bottom: 100%; width: 13%; height: 70%; background: #17172d; }
.cutscene-skyline i:nth-child(1) { left: 3%; height: 40%; }.cutscene-skyline i:nth-child(2) { left: 21%; }.cutscene-skyline i:nth-child(3) { left: 45%; height: 52%; }.cutscene-skyline i:nth-child(4) { right: 19%; height: 82%; }.cutscene-skyline i:nth-child(5) { right: 2%; height: 34%; }
.cutscene-table { position: absolute; z-index: 4; left: 50%; bottom: 7%; width: 190px; height: 58px; translate: -50% 0; transform: translate3d(var(--dream-x), var(--dream-y), 45px); display: flex; align-items: center; justify-content: center; gap: 18px; color: #171426; background: #244e48; border: 5px solid #80602e; box-shadow: 8px 8px 0 #0a0916, 0 0 32px rgba(92,230,217,.1); font: 25px Georgia,serif; transition: 1s steps(6); }
.cutscene-table span:last-child { color: var(--red); }
.cutscene-dreamers { position: absolute; z-index: 3; left: 50%; bottom: 15%; width: 300px; height: 90px; translate: -50% 0; transform: translate3d(var(--dream-x), var(--dream-y), 35px); transition: 1s steps(6); }
.cutscene-dreamers i {
  --skin: #d6a275; --hair: #2d1b1a; --shirt: #b95d53; --pants: #22243f; position: absolute; bottom: 9px; width: 25px; height: 32px;
  background: var(--shirt); border: 2px solid #171426; box-shadow: inset 0 -8px 0 var(--pants); transform-origin: 50% 100%; animation: cutscene-dreamer-idle 2.2s steps(4) infinite; animation-delay: var(--dreamer-delay, 0s);
}
.cutscene-dreamers i::before { content: ""; position: absolute; z-index: 1; left: -7px; top: 3px; width: 8px; height: 20px; background: var(--skin); border: 2px solid #171426; box-shadow: 29px 0 0 -2px var(--skin), 29px 0 0 0 #171426; animation: cutscene-dreamer-arms 1.8s steps(3) infinite alternate; animation-delay: var(--dreamer-delay, 0s); }
.cutscene-dreamers i::after { content: ""; position: absolute; left: 1px; bottom: -12px; width: 8px; height: 13px; background: var(--pants); border: 2px solid #171426; box-shadow: 12px 0 0 -2px var(--pants), 12px 0 0 0 #171426; }
.cutscene-dreamers b { position: absolute; z-index: 2; left: 3px; top: -20px; width: 19px; height: 20px; background: var(--skin); border: 2px solid #171426; box-shadow: 0 2px 0 rgba(255,220,178,.22); animation: cutscene-dreamer-look 3.4s steps(3) infinite; animation-delay: var(--dreamer-delay, 0s); }
.cutscene-dreamers b::before { content: ""; position: absolute; z-index: 2; left: -2px; top: -3px; width: 19px; height: 8px; background: var(--hair); box-shadow: -2px 4px 0 var(--hair), 15px 4px 0 var(--hair); }
.cutscene-dreamers b::after { content: ""; position: absolute; left: 3px; top: 9px; width: 3px; height: 3px; background: #191526; box-shadow: 8px 0 #191526, 4px 5px #9b4e4f; animation: cutscene-face-blink 4.5s steps(2) infinite; animation-delay: var(--dreamer-delay, 0s); }
.cutscene-dreamers i:nth-child(1) { --skin: #c8875e; --hair: #15151d; --shirt: #b94e50; --pants: #29223b; --dreamer-delay: -.4s; left: 0; }.cutscene-dreamers i:nth-child(1) b::before { height: 6px; box-shadow: -2px 3px 0 var(--hair), 15px 3px 0 var(--hair), 3px -3px 0 var(--hair); }
.cutscene-dreamers i:nth-child(2) { --skin: #e0ad7d; --hair: #6f3c26; --shirt: #d39b43; --pants: #263b4a; --dreamer-delay: -1.1s; left: 58px; }.cutscene-dreamers i:nth-child(2) b::before { clip-path: polygon(0 32%,20% 32%,20% 0,42% 0,42% 20%,66% 20%,66% 0,100% 0,100% 100%,0 100%); }
.cutscene-dreamers i:nth-child(3) { --skin: #b97452; --hair: #26151f; --shirt: #3c8f94; --pants: #252844; --dreamer-delay: -1.7s; right: 58px; }.cutscene-dreamers i:nth-child(3) b::before { height: 10px; border-radius: 0; box-shadow: -3px 5px 0 var(--hair), 15px 5px 0 var(--hair), -3px 10px 0 var(--hair), 15px 10px 0 var(--hair); }
.cutscene-dreamers i:nth-child(4) { --skin: #edba8b; --hair: #9a5433; --shirt: #7961a8; --pants: #29223e; --dreamer-delay: -2.2s; right: 0; }.cutscene-dreamers i:nth-child(4) b::before { left: 0; width: 6px; height: 6px; box-shadow: 5px -2px var(--hair), 10px 0 var(--hair), 15px -2px var(--hair), -2px 5px var(--hair), 17px 5px var(--hair); }
.cutscene-card { position: absolute; z-index: 4; left: 50%; top: 60%; width: 47px; height: 62px; padding: 5px; opacity: 0; transform: translate3d(var(--dream-x), var(--dream-y), 60px); color: var(--ink); background: var(--paper); border: 3px solid var(--ink); box-shadow: 4px 4px 0 #090817, 0 0 18px rgba(255,237,185,.24); font: 18px Georgia,serif; transition: 1s steps(7); }
.cutscene-card small { display: block; }.cutscene-card-two, .cutscene-card-three { color: var(--red); }
.cutscene-interaction { position: absolute; z-index: 6; right: 16px; bottom: 13px; padding: 6px 8px; color: rgba(255,244,205,.67); background: rgba(11,10,28,.62); border: 1px solid rgba(170,160,207,.35); font-size: 6px; letter-spacing: 1px; animation: cutscene-hint-blink 2s steps(2) infinite; }
.cutscene-wipe { position: absolute; z-index: 9; inset: -2px; pointer-events: none; opacity: 0; background: repeating-linear-gradient(90deg, transparent 0 7%, rgba(238,221,255,.62) 7% 8%, transparent 8% 15%), linear-gradient(90deg, transparent, rgba(255,235,177,.8), transparent); transform: translateX(-110%); }
.story-cutscene.transitioning .cutscene-wipe { animation: cutscene-pixel-wipe .34s steps(5); }
.cutscene-burst { --burst-color: #fff0b5; position: absolute; z-index: 10; width: 7px; height: 7px; pointer-events: none; background: var(--burst-color); box-shadow: 18px 0 var(--burst-color), -18px 0 var(--burst-color), 0 18px var(--burst-color), 0 -18px var(--burst-color), 13px 13px #b9f5ef, -13px -13px #d2b5ff, 13px -13px #f2bc4d, -13px 13px #ff8193; translate: -50% -50%; animation: cutscene-burst .62s steps(7) forwards; }
.cutscene-caption { position: relative; z-index: 10; min-height: 245px; padding: 28px max(24px, calc((100% - 760px) / 2)); text-align: center; background: linear-gradient(180deg, rgba(25,22,55,.98), rgba(12,11,31,.99)); border-top: 4px solid #756d98; box-shadow: 0 -10px 0 rgba(7,6,19,.45), 0 -18px 45px rgba(119,94,190,.18); }
.cutscene-caption.scene-enter > :not(.cutscene-progress) { animation: cutscene-caption-in .56s steps(7) both; }.cutscene-caption.scene-enter h1 { animation-delay: .07s; }.cutscene-caption.scene-enter p { animation-delay: .14s; }.cutscene-caption.scene-enter .pixel-button { animation-delay: .2s; }
.cutscene-caption > span { color: var(--gold); font-size: 8px; letter-spacing: 3px; }.cutscene-caption h1 { margin: 9px 0; color: var(--cream); font-size: 27px; letter-spacing: 4px; }.cutscene-caption p { min-height: 40px; margin: 0 auto 14px; max-width: 650px; color: #b5aecb; font-size: 10px; line-height: 1.65; }
.cutscene-progress { display: flex; justify-content: center; gap: 7px; margin-bottom: 15px; }.cutscene-progress i { position: relative; width: 38px; height: 5px; overflow: hidden; background: #47425f; }.cutscene-progress i.current::after { content: ""; position: absolute; inset: 0; background: var(--gold); box-shadow: 0 0 8px rgba(242,188,77,.35); transform-origin: left; animation: cutscene-progress var(--cutscene-scene-duration, 14820ms) linear forwards; }
.cutscene-caption .pixel-button { min-width: 180px; }
.story-cutscene[data-scene="1"] .cutscene-moon { scale: 1.2; box-shadow: 0 0 80px rgba(255,226,164,.5), 0 0 140px rgba(183,144,255,.2); }.story-cutscene[data-scene="1"] .cutscene-moon i { opacity: 0; }.story-cutscene[data-scene="1"] .cutscene-moon span { color: var(--red); animation: cutscene-heart-pulse 1.4s steps(4) infinite; }
.story-cutscene[data-scene="1"] .cutscene-card { opacity: 1; }.story-cutscene[data-scene="1"] .cutscene-card-one { translate: -150px -120px; rotate: -16deg; }.story-cutscene[data-scene="1"] .cutscene-card-two { translate: 96px -155px; rotate: 13deg; }.story-cutscene[data-scene="1"] .cutscene-card-three { translate: -65px -215px; rotate: -5deg; }.story-cutscene[data-scene="1"] .cutscene-card-four { translate: 18px -78px; rotate: 6deg; }
.story-cutscene[data-scene="2"] .cutscene-particles, .story-cutscene[data-scene="3"] .cutscene-particles { opacity: 1; }.story-cutscene[data-scene="2"] .cutscene-cloud, .story-cutscene[data-scene="3"] .cutscene-cloud { opacity: .3; }.story-cutscene[data-scene="2"] .cutscene-gate, .story-cutscene[data-scene="3"] .cutscene-gate { opacity: 1; scale: 1.1; }.story-cutscene[data-scene="2"] .cutscene-skyline, .story-cutscene[data-scene="3"] .cutscene-skyline { opacity: .12; translate: 0 58%; }.story-cutscene[data-scene="2"] .cutscene-table, .story-cutscene[data-scene="3"] .cutscene-table { translate: -50% -75px; scale: .86; }.story-cutscene[data-scene="2"] .cutscene-dreamers, .story-cutscene[data-scene="3"] .cutscene-dreamers { translate: -50% -70px; }
.story-cutscene[data-scene="1"] .cutscene-dreamers i { animation-name: cutscene-dreamer-startle; animation-duration: .9s; }.story-cutscene[data-scene="2"] .cutscene-dreamers i, .story-cutscene[data-scene="3"] .cutscene-dreamers i { animation-name: cutscene-dreamer-float; animation-duration: 1.8s; }
.story-cutscene[data-scene="2"] .cutscene-card-one { opacity: .9; translate: -225px -110px; rotate: -22deg; }.story-cutscene[data-scene="2"] .cutscene-card-two { opacity: .9; translate: 175px -135px; rotate: 18deg; }.story-cutscene[data-scene="2"] .cutscene-card-three { opacity: .7; translate: -145px -230px; rotate: -9deg; }.story-cutscene[data-scene="2"] .cutscene-card-four { opacity: .7; translate: 112px -245px; rotate: 12deg; }
.story-cutscene[data-scene="3"] .cutscene-moon { top: 5%; scale: .72; opacity: .7; }.story-cutscene[data-scene="3"] .cutscene-gate { scale: 1.48; filter: drop-shadow(0 0 55px rgba(242,188,77,.42)); }.story-cutscene[data-scene="3"] .cutscene-card { opacity: 1; translate: -50% -195px; rotate: 0deg; scale: .78; }.story-cutscene[data-scene="3"] .cutscene-card-one { rotate: -24deg; translate: -155px -185px; }.story-cutscene[data-scene="3"] .cutscene-card-two { rotate: -8deg; translate: -83px -218px; }.story-cutscene[data-scene="3"] .cutscene-card-three { rotate: 8deg; translate: 39px -218px; }.story-cutscene[data-scene="3"] .cutscene-card-four { rotate: 24deg; translate: 108px -185px; }
.story-cutscene.finishing .cutscene-world { animation: cutscene-enter-dream .42s steps(6) forwards; }.story-cutscene.finishing .cutscene-gate { opacity: 1; scale: 2.2; filter: brightness(1.5) drop-shadow(0 0 45px #fff); }.story-cutscene.finishing .cutscene-caption { opacity: 0; translate: 0 10px; transition: .25s steps(3); }
.cutscene-world::before, .cutscene-aurora, .cutscene-stars, .cutscene-gate { animation: none; }

button { font: inherit; }

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .11;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, #000 4px);
  mix-blend-mode: multiply;
}

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  height: 78px;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  background:
    radial-gradient(circle at 22% 0, rgba(86,182,196,.13), transparent 30%),
    radial-gradient(circle at 78% 100%, rgba(166,111,200,.14), transparent 34%),
    linear-gradient(90deg, #211e3b, #292545 50%, #201e39);
  border-bottom: 4px solid #0b0a13;
  box-shadow: 0 4px 0 var(--gold-dark);
  position: relative;
  z-index: 4;
}

.brand { color: var(--cream); text-decoration: none; display: flex; align-items: center; gap: 10px; min-width: 245px; }
.brand-mark {
  width: 45px; height: 45px; display: grid; place-items: center;
  color: var(--ink); background: var(--gold); border: 3px solid var(--cream);
  box-shadow: 4px 4px 0 #0d0b17; font-size: 28px; line-height: 1;
}
.brand strong { display: block; color: var(--gold); font-size: 17px; letter-spacing: 2px; line-height: 1; }
.brand small { display: block; font-size: 8px; letter-spacing: 1px; margin-top: 5px; }

.match-strip {
  flex: 1; max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: 1fr 110px 1fr;
  align-items: stretch; border: 2px solid #54506e; background: #17152b;
}
.team-score { min-width: 0; display: flex; gap: 9px; align-items: center; padding: 6px 12px; font-size: 11px; letter-spacing: .6px; }
.team-score strong { font-size: 25px; color: white; margin-left: auto; }
.team-score.moon-team strong { margin: 0; }
.team-score.moon-team span:nth-child(2) { margin-left: auto; }
.team-glyph { font-size: 17px; }
.sun-team { color: var(--gold); }
.moon-team { color: var(--blue); }
.round-counter { display: grid; place-items: center; align-content: center; border-inline: 2px solid #54506e; color: #9f99bd; }
.round-counter span { font-size: 8px; letter-spacing: 1px; }
.round-counter strong { color: var(--cream); font-size: 18px; }

.icon-button, .rules-button {
  color: var(--cream); background: transparent; border: 2px solid #625c7c; cursor: pointer;
}
.icon-button { width: 38px; height: 38px; font-size: 21px; }
.card-style-button { color: #cbc0ff; font-size: 15px; }.card-style-button[aria-pressed="true"] { color: #fff0ad; border-color: #a693dd; background: #3c345f; box-shadow: inset 0 0 0 2px #59507f, 0 0 16px rgba(190,168,255,.25); }
.pixel-button {
  min-height: 40px; padding: 8px 14px; color: var(--cream); background: #34304e;
  border: 0; outline: 3px solid #11101d; box-shadow: inset 0 0 0 2px #6a6485, 4px 4px 0 #0a0911;
  cursor: pointer; text-transform: uppercase; letter-spacing: .5px;
}
.pixel-button:hover:not(:disabled), .icon-button:hover { filter: brightness(1.18); transform: translateY(-1px); }
.pixel-button:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: inset 0 0 0 2px #6a6485, 1px 1px 0 #0a0911; }
.pixel-button:disabled { cursor: not-allowed; opacity: .4; }
.pixel-button.primary { background: var(--gold); color: var(--ink); box-shadow: inset 0 0 0 2px #ffe59c, 4px 4px 0 #11101d; }
.rules-button { white-space: nowrap; }

.game-board {
  flex: 1; min-height: 650px; position: relative; overflow: hidden; isolation: isolate;
  background-color: #183f43;
  background-image:
    radial-gradient(ellipse at 18% 78%, rgba(95,107,190,.3), transparent 35%),
    radial-gradient(ellipse at 78% 20%, rgba(78,168,179,.22), transparent 32%),
    radial-gradient(ellipse at 58% 72%, rgba(150,88,166,.16), transparent 38%),
    linear-gradient(145deg, rgba(14,56,54,.3), rgba(31,61,72,.1) 52%, rgba(28,38,68,.28)),
    linear-gradient(90deg, rgba(255,255,255,.018) 50%, transparent 50%),
    linear-gradient(rgba(255,255,255,.018) 50%, transparent 50%);
  background-size: auto, auto, auto, auto, 8px 8px, 8px 8px;
  border: 12px solid #152c2e;
  box-shadow: inset 0 0 0 4px #80602e, inset 0 0 0 8px #102928, inset 0 0 90px #081e29, inset 0 0 150px rgba(88,71,145,.18);
}

.game-board::before {
  content: ""; position: absolute; z-index: 1; inset: 30px; border: 2px dashed rgba(242,188,77,.22); pointer-events: none;
  box-shadow: inset 0 0 35px rgba(86,182,196,.07), 0 0 20px rgba(242,188,77,.04);
}
.game-board::after {
  content: ""; position: absolute; z-index: 0; inset: -18px; pointer-events: none; opacity: .38;
  background-image:
    radial-gradient(circle, rgba(255,242,190,.95) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(145,223,224,.8) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(215,183,255,.72) 0 1px, transparent 2px);
  background-position: 18px 12px, 47px 66px, 91px 31px;
  background-size: 137px 113px, 211px 167px, 293px 223px;
  animation: dream-motes-drift 20s steps(12) infinite alternate;
}
.felt-motif { position: absolute; z-index: 0; width: 180px; height: 180px; border: 3px solid rgba(190,206,255,.08); transform: rotate(45deg); box-shadow: 0 0 26px rgba(101,112,203,.08); animation: felt-motif-float 15s steps(8) infinite alternate; }
.motif-one { top: -70px; left: 20%; }
.motif-two { right: 9%; bottom: -75px; animation-delay: -7s; }
.felt-dreamscape { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.felt-dreamscape::before, .felt-dreamscape::after {
  content: ""; position: absolute; width: 70%; height: 26%; opacity: .18;
  background: linear-gradient(90deg, transparent, rgba(151,135,210,.42), rgba(102,190,191,.25), transparent);
  clip-path: polygon(0 38%,12% 38%,12% 25%,28% 25%,28% 46%,48% 46%,48% 18%,68% 18%,68% 35%,84% 35%,84% 23%,100% 23%,100% 68%,82% 68%,82% 79%,61% 79%,61% 64%,38% 64%,38% 83%,18% 83%,18% 69%,0 69%);
  animation: dream-haze-float 24s steps(10) infinite alternate;
}
.felt-dreamscape::before { left: -12%; bottom: 5%; }
.felt-dreamscape::after { right: -15%; top: 7%; transform: scaleX(-1); animation-delay: -12s; }
.felt-moon-mark {
  position: absolute; top: 12%; right: 7%; width: 116px; height: 116px; opacity: .12;
  background: #d8eaff; box-shadow: 0 0 0 7px rgba(170,192,255,.25), 0 0 45px rgba(169,158,235,.65);
  clip-path: polygon(24% 0,76% 0,76% 6%,88% 6%,88% 18%,94% 18%,94% 30%,100% 30%,100% 70%,94% 70%,94% 82%,88% 82%,88% 94%,76% 94%,76% 100%,24% 100%,24% 94%,12% 94%,12% 82%,6% 82%,6% 70%,0 70%,0 30%,6% 30%,6% 18%,12% 18%,12% 6%,24% 6%);
  animation: felt-moon-dream 12s steps(6) infinite alternate;
}
.felt-moon-mark i { position: absolute; width: 12px; height: 12px; left: 28px; top: 28px; background: #7890b2; box-shadow: 43px 18px 0 #7890b2, 14px 48px 0 #7890b2; }
.felt-cloud {
  position: absolute; left: -260px; width: 190px; height: 46px; opacity: .1; background: #d7e7ff;
  filter: drop-shadow(0 7px 0 rgba(117,105,178,.3));
  clip-path: polygon(0 58%,8% 58%,8% 42%,18% 42%,18% 25%,31% 25%,31% 9%,48% 9%,48% 20%,65% 20%,65% 34%,82% 34%,82% 48%,94% 48%,94% 60%,100% 60%,100% 100%,0 100%);
  animation: felt-cloud-drift 38s linear infinite;
}
.felt-cloud-one { top: 27%; animation-delay: -9s; }
.felt-cloud-two { top: 57%; width: 245px; height: 59px; opacity: .075; animation-duration: 51s; animation-delay: -37s; }
.felt-cloud-three { top: 76%; width: 150px; height: 37px; opacity: .12; animation-duration: 33s; animation-delay: -21s; }
.felt-spark { position: absolute; color: #f8e9bd; opacity: .22; text-shadow: 0 0 10px rgba(235,217,255,.8); animation: felt-spark-twinkle 4s steps(3) infinite; }
.felt-spark-one { left: 28%; top: 25%; font-size: 20px; }
.felt-spark-two { right: 26%; top: 62%; color: #bdebf0; font-size: 14px; animation-delay: -1.7s; }
.felt-spark-three { left: 14%; bottom: 18%; color: #cfbdf4; font-size: 10px; animation-delay: -3s; }
.dream-phase-card {
  position: absolute; z-index: 8; left: 50%; top: 48%; width: min(330px, calc(100% - 40px)); padding: 18px 22px;
  color: var(--cream); text-align: center; opacity: 0; pointer-events: none;
  background: rgba(22,20,48,.94); border: 3px solid #8c83b7; outline: 4px solid rgba(12,10,28,.8);
  box-shadow: 8px 8px 0 rgba(7,7,20,.65), inset 0 0 0 2px #403b65, 0 0 35px rgba(132,112,207,.28);
  transform: translate(-50%, -50%) scale(.86);
}
.dream-phase-card span, .dream-phase-card strong, .dream-phase-card small { display: block; }
.dream-phase-card span { color: #a8a0c7; font-size: 8px; letter-spacing: 3px; }
.dream-phase-card strong { margin: 7px 0 5px; color: var(--gold); font-size: 28px; letter-spacing: 5px; text-shadow: 3px 3px 0 #5c4160; }
.dream-phase-card small { color: #c3bdd7; font-size: 8px; letter-spacing: 1px; }
.dream-phase-card.show { animation: dream-phase-reveal 1.65s steps(8); }
.game-board.dream-phase-dream .felt-cloud { opacity: .15; }
.game-board.dream-phase-dream .felt-moon-mark { opacity: .16; }
.game-board.dream-phase-dream::before { box-shadow: inset 0 0 90px rgba(128,94,190,.16), 0 0 20px rgba(242,188,77,.04); }
.game-board.dream-phase-reality .felt-cloud { opacity: .045; }
.game-board.dream-phase-reality .felt-moon-mark { opacity: .07; }
.game-board.dream-phase-reality .felt-dreamscape::before, .game-board.dream-phase-reality .felt-dreamscape::after { opacity: .08; }
.game-board.dream-phase-awakening::before, .game-board.dream-phase-awake::before { box-shadow: inset 0 0 120px rgba(242,188,77,.15), 0 0 24px rgba(255,231,168,.1); }
.game-board.dream-phase-awakening .dream-phase-card, .game-board.dream-phase-awake .dream-phase-card { border-color: #f2bc4d; box-shadow: 8px 8px 0 rgba(7,7,20,.65), inset 0 0 0 2px #6e593d, 0 0 42px rgba(242,188,77,.3); }
.game-board.dream-phase-nightmare::before { box-shadow: inset 0 0 145px rgba(111,32,71,.28), 0 0 24px rgba(194,77,122,.08); }
.game-board.dream-phase-nightmare .felt-cloud { background: #ceb1df; opacity: .13; filter: drop-shadow(0 7px 0 rgba(89,38,93,.35)); }
.game-board.dream-phase-nightmare .dream-phase-card { border-color: #b86183; box-shadow: 8px 8px 0 rgba(7,7,20,.65), inset 0 0 0 2px #66344f, 0 0 42px rgba(181,70,119,.3); }
.game-board.dream-phase-nightmare .dream-phase-card strong { color: #ff92ad; text-shadow: 3px 3px 0 #57273d; }

.contract-panel {
  position: absolute; top: 30px; left: 28px; width: 152px; min-height: 250px; padding: 14px;
  background: linear-gradient(155deg, rgba(28,67,68,.96), rgba(28,45,65,.97)); border: 3px solid #0d2727;
  box-shadow: 5px 5px 0 rgba(8,22,22,.65), inset 0 0 0 2px #4e6a79, 0 0 24px rgba(91,127,194,.14);
  text-align: center; z-index: 2;
}
.eyebrow { color: var(--gold); font-size: 9px; letter-spacing: 2px; }
.contract-empty { padding: 48px 0 42px; color: #72948b; line-height: 1.7; font-size: 11px; }
.contract-live { padding: 8px 0 9px; }
.contract-number { font-size: 44px; line-height: .95; color: white; text-shadow: 3px 3px 0 #0b2422; }
.contract-live > span { display: block; color: var(--gold); font-size: 9px; letter-spacing: 1px; }
.contract-live small { color: #c7dacb; font-size: 8px; }
.trump-chip { width: 40px; height: 40px; margin: 6px auto; display: grid; place-items: center; background: var(--paper); color: var(--ink); border: 2px solid #101a1d; font-size: 27px; }
.trump-chip.red { color: var(--red); }
.trump-chip.dream-trump { color: #fff4c4; background: #3f2139; border-color: #f2bc4d; box-shadow: 0 0 0 2px rgba(242,188,77,.13), 0 0 14px rgba(242,188,77,.24); }
.trump-chip.dream-trump.umbra { color: #d1c5ff; background: #21183d; border-color: #76d2d6; }
.trump-chip.dream-trump.ember { color: #ffd45e; background: #48172a; border-color: #ff986f; }
.trump-chip.dream-trump.prism { color: #c9f2f2; background: #142e48; border-color: #c4a8ff; }
.trump-chip.dream-trump.verdant { color: #d4efb8; background: #17372f; border-color: #f0c85c; }
.game-board[data-dream-law="descend"] .trick-area::before { border-color: rgba(118,210,214,.42); box-shadow: 0 0 30px rgba(118,210,214,.2), inset 0 0 20px rgba(209,197,255,.08); }
.stake-row { padding: 9px 2px; border-top: 2px dashed #41645e; display: flex; justify-content: space-between; font-size: 10px; color: #8aac9f; }
.stake-row strong { color: var(--cream); }
.token-row { display: grid; gap: 5px; margin-top: 8px; }
.team-token { padding: 5px; border: 1px solid currentColor; font-size: 8px; }
.sun-token { color: var(--gold); }.moon-token { color: var(--blue); }
.team-token.used { opacity: .25; text-decoration: line-through; }
.hidden { display: none !important; }

.seat { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; animation: table-player-idle 3.2s steps(4) infinite; }
.seat-top { top: 38px; left: 50%; transform: translateX(-50%); flex-direction: column; }
.seat-left { left: clamp(175px, 12vw, 230px); top: 52%; transform: translateY(-50%); flex-direction: column; animation-delay: -1.1s; }
.seat-right { right: clamp(175px, 12vw, 230px); top: 52%; transform: translateY(-50%); flex-direction: column; animation-delay: -2.2s; }
.avatar {
  --avatar-hair: #2c181b; position: relative; width: 43px; height: 43px; display: grid; place-items: center; color: white; border: 3px solid #10151d;
  box-shadow: 3px 3px 0 rgba(6,14,16,.6), 0 0 14px rgba(160,197,235,.17); font-size: 18px;
}
.avatar::before { content: ""; position: absolute; z-index: 2; left: 5px; right: 5px; top: -5px; height: 9px; background: var(--avatar-hair); box-shadow: -4px 4px 0 var(--avatar-hair), 4px 3px 0 var(--avatar-hair); clip-path: polygon(0 25%,18% 25%,18% 0,42% 0,42% 20%,66% 20%,66% 0,100% 0,100% 100%,0 100%); animation: avatar-hair-bounce 2.4s steps(3) infinite; }
.avatar[class*="portrait-"] { color: transparent; background-position: center 28%; background-size: cover; image-rendering: pixelated; }
.avatar[class*="portrait-"]::before { display: none; }
.avatar.portrait-0 { background-image: url("/assets/players/umbra-dreamer.png?v=1"); }
.avatar.portrait-1 { background-image: url("/assets/players/ember-dreamer.png?v=1"); }
.avatar.portrait-2 { background-image: url("/assets/players/prism-dreamer.png?v=1"); }
.avatar.portrait-3 { background-image: url("/assets/players/verdant-dreamer.png?v=1"); }
.seat-top .avatar { --avatar-hair: #6f3c26; }.seat-left .avatar { --avatar-hair: #17151d; }.seat-right .avatar { --avatar-hair: #965033; }.hero-avatar { --avatar-hair: #3d241c; }
.sun-avatar, .hero-avatar { background: var(--gold-dark); outline: 2px solid var(--gold); }
.moon-avatar { background: #357b8a; outline: 2px solid var(--blue); }
.nameplate { padding: 4px 8px; min-width: 78px; text-align: center; background: linear-gradient(135deg, #153936, #1b3447); border: 2px solid #426773; box-shadow: 0 0 12px rgba(103,142,202,.12); }
.nameplate span { display: block; font-size: 11px; }.nameplate small { color: #80a098; font-size: 7px; }
.mini-hand { order: 3; height: 50px; display: flex; justify-content: center; margin-top: -3px; }
.card-back {
  position: relative; width: 34px; height: 47px; margin: 0 -8px; background-color: var(--red-dark); border: 3px solid var(--cream);
  box-shadow: 2px 2px 0 #102322; transform-origin: 50% 100%;
  background-image: linear-gradient(45deg, #d04d4e 25%, transparent 25%, transparent 75%, #d04d4e 75%), linear-gradient(45deg, #d04d4e 25%, transparent 25%, transparent 75%, #d04d4e 75%);
  background-position: 0 0, 4px 4px; background-size: 8px 8px;
}
.card-back:nth-child(1) { transform: rotate(-9deg); }.card-back:nth-child(3) { transform: rotate(9deg); }
html[data-card-style="dreamy"] .card-back {
  background-color: #130f28; border-color: #d8c6ff; box-shadow: 2px 2px 0 #080714, 0 0 14px rgba(179,151,255,.34), inset 0 0 0 2px #6b5195;
  background-image: radial-gradient(circle at 50% 50%, transparent 0 13%, #17102e 14% 23%, transparent 24%), repeating-conic-gradient(from 18deg at 50% 50%, #20143f 0 8deg, #674180 9deg 17deg, #21143d 18deg 27deg), radial-gradient(circle at 18% 20%, #fff2ae 0 1px, transparent 2px);
  background-size: auto, auto, 17px 21px;
}
html[data-card-style="dreamy"] .card-back::before { content: "DREAMBOUND"; position: absolute; z-index: 1; left: 2px; right: 2px; bottom: 3px; overflow: hidden; color: #b5a4e9; text-align: center; font-size: 3px; letter-spacing: .2px; }
html[data-card-style="dreamy"] .card-back::after { content: "◉"; position: absolute; inset: 48% auto auto 50%; translate: -50% -50%; display: grid; place-items: center; width: 20px; height: 24px; color: #ffe79d; background: #18122f; border: 1px solid #b39be1; box-shadow: 0 0 9px rgba(225,195,255,.7); text-shadow: 0 0 7px #fff0b0; font: 12px Georgia,serif; }
.bid-bubble { position: absolute; z-index: 4; left: 50%; top: 0; transform: translate(-50%, calc(-100% - 5px)); margin: 0; padding: 8px 9px; white-space: nowrap; background: var(--cream); color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 #0c2725; font-size: 10px; }

.table-center { position: absolute; z-index: 2; inset: 155px 210px 155px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.turn-banner { min-height: 26px; padding: 6px 12px; color: var(--gold); background: linear-gradient(90deg, rgba(23,58,55,.94), rgba(36,47,73,.94)); border: 2px solid #55747e; box-shadow: 0 0 17px rgba(103,148,211,.12); font-size: 10px; letter-spacing: 1px; z-index: 2; }
.trick-area { position: relative; width: 390px; height: 290px; }
.trick-area::before { content: ""; position: absolute; inset: 55px 90px; border: 2px solid rgba(223,195,255,.2); box-shadow: 0 0 24px rgba(108,132,218,.12), inset 0 0 20px rgba(242,188,77,.05); transform: rotate(45deg); animation: dream-diamond-breathe 5s steps(5) infinite; }
.center-emblem { position: absolute; inset: 50% auto auto 50%; width: 95px; height: 34px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: space-around; color: var(--gold); opacity: .25; }
.center-emblem b { color: var(--cream); font-size: 10px; }.center-emblem span:last-child { color: var(--blue); }
.play-slot { position: absolute; width: 73px; height: 101px; border: 2px dashed rgba(245,233,201,.1); }
.slot-top { top: 3px; left: 50%; transform: translateX(-50%); }.slot-bottom { bottom: 3px; left: 50%; transform: translateX(-50%); }
.slot-left { left: 52px; top: 50%; transform: translateY(-50%) rotate(-3deg); }.slot-right { right: 52px; top: 50%; transform: translateY(-50%) rotate(3deg); }
.play-slot .playing-card { position: absolute; inset: -1px; animation: card-in .18s steps(4); }
.trick-score { display: flex; align-items: center; gap: 18px; padding: 7px 14px; color: #b4c9c2; border-top: 2px solid #41645e; border-bottom: 2px solid #41645e; font-size: 9px; letter-spacing: 1px; }
.trick-score b { color: white; font-size: 15px; }.trick-score > span:nth-child(2) { color: #77968d; }
.sun-dot, .moon-dot { display: inline-block; width: 7px; height: 7px; background: var(--gold); }.moon-dot { background: var(--blue); }

.player-zone {
  position: absolute; z-index: 5; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: min(760px, calc(100% - 410px)); min-width: 500px; display: grid; grid-template-columns: 95px 1fr 190px; align-items: end; gap: 14px;
}
.player-id { display: flex; align-items: center; gap: 8px; padding-bottom: 16px; }
.player-id strong, .player-id small { display: block; }.player-id strong { color: var(--gold); font-size: 13px; }.player-id small { font-size: 8px; color: #8baa9f; }
.player-hand { height: 156px; display: flex; justify-content: center; align-items: end; gap: 0; padding-left: 50px; }
.mobile-hand-hint { display: none; }
.player-hand .playing-card + .playing-card { margin-left: -58px; }
.player-hand .playing-card { z-index: 1; }
.player-hand .playing-card:hover:not(:disabled), .player-hand .playing-card.legal:focus { z-index: 15; }
.playing-card {
  position: relative; width: 94px; height: 132px; flex: 0 0 auto; padding: 7px; color: var(--ink); background: var(--paper);
  border: 3px solid #1a1820; box-shadow: inset 0 0 0 2px #d6c9a9, 5px 5px 0 rgba(7,24,23,.75), 0 0 15px rgba(151,178,236,.13);
  transition: transform .12s steps(3), filter .12s;
}
button.playing-card { font-family: Georgia, serif; cursor: pointer; }
button.playing-card:hover:not(:disabled) { transform: translateY(-13px); filter: brightness(1.08); }
button.playing-card:disabled { cursor: not-allowed; filter: saturate(.6) brightness(.72); }
.playing-card.legal { outline: 3px solid var(--gold); outline-offset: 2px; animation: legal-pulse 1.2s steps(2) infinite; }
.playing-card.red { color: var(--red); }
.card-corner { position: absolute; top: 6px; left: 6px; min-width: 27px; padding: 4px 3px 3px; color: #121018; background: rgba(255,248,218,.96); border: 1px solid currentColor; box-shadow: 1px 1px 0 rgba(0,0,0,.18); line-height: .9; text-align: center; white-space: nowrap; font-size: 17px; font-weight: 900; letter-spacing: 0; }
.playing-card.red .card-corner { color: #d54545; }
.card-corner.bottom { top: auto; left: auto; right: 8px; bottom: 7px; transform: rotate(180deg); }
.card-corner small { display: block; margin-top: 3px; font-size: 13px; letter-spacing: 0; }
.card-suit { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); font-size: 47px; text-shadow: 2px 2px 0 rgba(0,0,0,.08); }
.dream-sigil, .dream-card-content { display: none; }
html[data-card-style="dreamy"] .playing-card[data-house="umbra"] { --deck-deep: #17102f; --deck-mid: #6345a3; --deck-light: #ddd3ff; --deck-accent: #69e3f0; --deck-paper: #dcd6f1; --portrait-art: url("/assets/players/umbra-dreamer.png?v=1"); }
html[data-card-style="dreamy"] .playing-card[data-house="ember"] { --deck-deep: #38101e; --deck-mid: #a92c43; --deck-light: #ffd7a0; --deck-accent: #ffcf45; --deck-paper: #f2d4c8; --portrait-art: url("/assets/players/ember-dreamer.png?v=1"); }
html[data-card-style="dreamy"] .playing-card[data-house="prism"] { --deck-deep: #0b2940; --deck-mid: #247e9e; --deck-light: #dcffff; --deck-accent: #d7a9ff; --deck-paper: #d5e8ec; --portrait-art: url("/assets/players/prism-dreamer.png?v=1"); }
html[data-card-style="dreamy"] .playing-card[data-house="verdant"] { --deck-deep: #102e25; --deck-mid: #2e7955; --deck-light: #e1f6b9; --deck-accent: #f2c746; --deck-paper: #dbe5c9; --portrait-art: url("/assets/players/verdant-dreamer.png?v=1"); }
html[data-card-style="dreamy"] .playing-card {
  color: #24170f; border-color: #0b0912; overflow: hidden; font-family: inherit;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.11) 0 1px, transparent 1px 5px), linear-gradient(145deg, var(--deck-deep), var(--deck-mid) 24%, var(--deck-accent) 47%, var(--deck-deep) 52%, var(--deck-mid) 78%, var(--deck-light));
  background-size: 11px 11px, auto; box-shadow: inset 0 0 0 2px var(--deck-light), inset 0 0 0 4px var(--deck-deep), 5px 5px 0 rgba(5,10,24,.88), 0 0 20px color-mix(in srgb, var(--deck-accent) 40%, transparent);
}
html[data-card-style="dreamy"] button.playing-card { font-family: inherit; }
@media (hover: hover) and (pointer: fine) {
  html[data-card-style="dreamy"] .player-hand button.playing-card:hover:not(:disabled), html[data-card-style="dreamy"] .player-hand button.playing-card:focus-visible { z-index: 30; transform: translateY(-20px) scale(1.28); filter: brightness(1.08) saturate(1.08); }
}
html[data-card-style="dreamy"] .playing-card::before { content: ""; position: absolute; z-index: 1; inset: 4px; pointer-events: none; border: 1px solid var(--deck-accent); box-shadow: inset 0 0 0 2px rgba(5,7,17,.58), inset 0 0 12px rgba(0,0,0,.5); }
html[data-card-style="dreamy"] .playing-card[data-rank="A"] { box-shadow: inset 0 0 0 2px #fff8c9, inset 0 0 0 4px var(--deck-deep), 5px 5px 0 rgba(5,10,24,.88), 0 0 25px var(--deck-accent); }
html[data-card-style="dreamy"] .playing-card .card-suit, html[data-card-style="dreamy"] .playing-card .classic-suit { display: none; }
html[data-card-style="dreamy"] .playing-card .card-corner { z-index: 7; top: 5px; left: 5px; min-width: 27px; padding: 4px 2px 3px; color: #fff9dc; background: linear-gradient(145deg, var(--deck-deep), var(--deck-mid)); border: 1px solid var(--deck-accent); box-shadow: 1px 1px 0 #080711, inset 0 0 4px rgba(255,255,255,.22); font-size: 13px; line-height: 1; text-shadow: 1px 1px 0 #000; letter-spacing: 0; }
html[data-card-style="dreamy"] .playing-card .card-corner.bottom { display: none; }
html[data-card-style="dreamy"] .playing-card .card-corner .dream-sigil { display: none; }
html[data-card-style="dreamy"] .dream-card-content { position: absolute; z-index: 2; inset: 0; display: block; pointer-events: none; }
.dream-card-name { position: absolute; z-index: 5; top: 5px; left: 36px; right: 21px; height: 15px; padding: 4px 2px 2px; overflow: hidden; color: #fffbe5; background: linear-gradient(90deg, var(--deck-deep), color-mix(in srgb, var(--deck-mid) 78%, #111)); border: 1px solid var(--deck-accent); box-shadow: inset 0 0 4px rgba(255,255,255,.13); white-space: nowrap; text-align: left; text-overflow: clip; text-shadow: 1px 1px 0 #000; font-size: 5px; line-height: 1; letter-spacing: .2px; }
.dream-card-attribute { position: absolute; z-index: 6; right: 6px; top: 5px; width: 15px; height: 15px; display: grid; place-items: center; color: var(--deck-light); background: radial-gradient(circle, var(--deck-mid), var(--deck-deep)); border: 1px solid var(--deck-accent); border-radius: 50%; box-shadow: 1px 1px 0 #080711, 0 0 6px var(--deck-accent); font: 9px Georgia,serif; font-style: normal; }
.dream-card-level { position: absolute; z-index: 5; right: 8px; top: 22px; max-width: 70px; height: 8px; overflow: hidden; color: #ffe467; text-align: right; text-shadow: 1px 1px 0 #6c2d13, 0 0 3px #fff; white-space: nowrap; font: 6px Georgia,serif; letter-spacing: -1px; }
.dream-card-art { position: absolute; left: 8px; right: 8px; top: 30px; bottom: 37px; overflow: hidden; background-color: var(--deck-deep); background-image: var(--portrait-art); background-position: center 28%; background-size: cover; border: 2px solid var(--deck-light); outline: 1px solid #080711; box-shadow: inset 0 0 12px rgba(0,0,0,.42), 2px 2px 0 rgba(0,0,0,.62), 0 0 7px color-mix(in srgb, var(--deck-accent) 38%, transparent); image-rendering: pixelated; }
.dream-card-art::before { content: ""; position: absolute; z-index: 2; inset: 0; opacity: .55; background: linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.5) 45%, rgba(121,255,243,.28) 49%, transparent 57%); translate: -130% 0; animation: tcg-foil-sweep 5s steps(12) infinite; }
.dream-card-art::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(3,4,11,.62)), radial-gradient(circle at 50% 45%, transparent 48%, rgba(0,0,0,.24)); pointer-events: none; }
.dream-card-foil { position: absolute; z-index: 3; inset: 2px; border: 1px solid rgba(255,255,255,.28); box-shadow: inset 0 0 0 1px rgba(0,0,0,.32); }
.portrait-warning { display: none; position: absolute; z-index: 5; left: 3px; right: 3px; bottom: 3px; padding: 3px 1px; color: #fff7d6; background: #9f1f36; border: 1px solid #ffd45e; box-shadow: 1px 1px 0 #080711; text-align: center; text-shadow: 1px 1px 0 #38040d; font-size: 5px; letter-spacing: .5px; }
.game-board[data-local-seat="0"] .playing-card[data-portrait-owner="0"] .portrait-warning,
.game-board[data-local-seat="1"] .playing-card[data-portrait-owner="1"] .portrait-warning,
.game-board[data-local-seat="2"] .playing-card[data-portrait-owner="2"] .portrait-warning,
.game-board[data-local-seat="3"] .playing-card[data-portrait-owner="3"] .portrait-warning { display: block; }
.game-board[data-local-seat="0"] .playing-card[data-portrait-owner="0"],
.game-board[data-local-seat="1"] .playing-card[data-portrait-owner="1"],
.game-board[data-local-seat="2"] .playing-card[data-portrait-owner="2"],
.game-board[data-local-seat="3"] .playing-card[data-portrait-owner="3"] { --deck-accent: #ff5268; }
html:not([data-card-style="dreamy"]) .game-board[data-local-seat="0"] .playing-card[data-portrait-owner="0"]::after,
html:not([data-card-style="dreamy"]) .game-board[data-local-seat="1"] .playing-card[data-portrait-owner="1"]::after,
html:not([data-card-style="dreamy"]) .game-board[data-local-seat="2"] .playing-card[data-portrait-owner="2"]::after,
html:not([data-card-style="dreamy"]) .game-board[data-local-seat="3"] .playing-card[data-portrait-owner="3"]::after { content: "YOUR FACE"; position: absolute; left: 7px; right: 7px; bottom: 8px; padding: 4px 1px; color: #fff7d6; background: #9f1f36; border: 1px solid #ffd45e; text-align: center; font-family: inherit; font-size: 6px; line-height: 1; letter-spacing: .4px; }
.game-board.portrait-clean { box-shadow: inset 0 0 44px rgba(112,255,211,.32); }
.game-board.portrait-trapped { box-shadow: inset 0 0 54px rgba(255,68,91,.42); }
.dream-creature { position: absolute; z-index: 2; left: 50%; top: 52%; translate: -50% -50%; width: 31px; height: 31px; background: var(--deck-light); clip-path: polygon(20% 20%,38% 20%,50% 0,62% 20%,82% 20%,72% 42%,88% 68%,64% 66%,52% 100%,40% 68%,13% 73%,28% 43%); filter: drop-shadow(3px 3px 0 var(--deck-deep)) drop-shadow(0 0 5px var(--deck-accent)); }
.dream-creature::before { content: ""; position: absolute; left: 7px; top: 7px; width: 17px; height: 15px; background: var(--deck-mid); clip-path: polygon(0 50%,50% 0,100% 50%,50% 100%); }
.dream-creature::after { content: ""; position: absolute; left: 13px; top: 12px; width: 5px; height: 5px; background: var(--deck-accent); box-shadow: 0 0 5px var(--deck-accent); }
.playing-card[data-rank="2"] .dream-creature { width: 20px; height: 20px; border-radius: 50%; clip-path: none; }.playing-card[data-rank="3"] .dream-creature { clip-path: polygon(0 25%,25% 25%,35% 0,50% 22%,65% 0,75% 25%,100% 25%,82% 100%,18% 100%); }.playing-card[data-rank="4"] .dream-creature { width: 28px; height: 28px; rotate: 45deg; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }.playing-card[data-rank="5"] .dream-creature { clip-path: polygon(0 38%,18% 15%,38% 28%,67% 18%,100% 0,82% 45%,100% 72%,62% 65%,45% 100%,30% 65%,0 75%); }.playing-card[data-rank="6"] .dream-creature { clip-path: polygon(4% 28%,23% 28%,30% 0,47% 25%,66% 5%,75% 31%,100% 40%,76% 60%,88% 100%,50% 75%,15% 100%,24% 60%,0 50%); }.playing-card[data-rank="7"] .dream-creature { width: 38px; clip-path: polygon(0 40%,20% 12%,38% 30%,58% 18%,100% 0,80% 42%,100% 63%,65% 62%,50% 100%,35% 65%,0 80%); }.playing-card[data-rank="8"] .dream-creature { height: 37px; clip-path: polygon(15% 0,36% 20%,50% 0,64% 20%,88% 0,73% 35%,95% 57%,67% 60%,57% 100%,42% 100%,32% 60%,5% 57%,27% 35%); }.playing-card[data-rank="9"] .dream-creature { width: 34px; height: 25px; background: transparent; border: 7px solid var(--deck-light); border-left-color: transparent; border-radius: 50%; clip-path: none; rotate: -15deg; }.playing-card[data-rank="10"] .dream-creature { width: 42px; height: 35px; clip-path: polygon(0 18%,34% 36%,43% 0,55% 34%,100% 12%,78% 55%,94% 90%,58% 72%,50% 100%,40% 70%,6% 94%,22% 54%); }.playing-card[data-rank="J"] .dream-creature { width: 25px; height: 35px; clip-path: polygon(25% 0,75% 0,100% 25%,78% 47%,88% 100%,12% 100%,22% 47%,0 25%); }.playing-card[data-rank="Q"] .dream-creature { width: 31px; height: 36px; clip-path: polygon(50% 0,72% 21%,100% 28%,79% 52%,84% 100%,50% 82%,16% 100%,21% 52%,0 28%,28% 21%); }.playing-card[data-rank="K"] .dream-creature { width: 34px; height: 36px; clip-path: polygon(0 0,28% 20%,50% 0,72% 20%,100% 0,85% 43%,92% 100%,8% 100%,15% 43%); }.playing-card[data-rank="A"] .dream-creature { width: 42px; height: 25px; background: var(--deck-light); border-radius: 50% 8%; rotate: 45deg; clip-path: none; }.playing-card[data-rank="A"] .dream-creature::before { left: 10px; top: 3px; width: 20px; height: 20px; border-radius: 50%; clip-path: none; }.playing-card[data-rank="A"] .dream-creature::after { left: 18px; top: 10px; }
html[data-card-style="dreamy"] .dream-creature { width: 39px; height: 38px; animation: card-monster-bob 2.1s steps(4) infinite; }
.monster-face { position: absolute; z-index: 5; left: 50%; top: 45%; translate: -50% -50%; width: 18px; height: 12px; }
.monster-face::before { content: ""; position: absolute; left: 1px; top: 1px; width: 5px; height: 5px; background: var(--deck-deep); border: 1px solid var(--deck-accent); box-shadow: 11px 0 0 -1px var(--deck-deep), 11px 0 0 0 var(--deck-accent), 0 0 5px var(--deck-accent); animation: card-monster-blink 4s steps(2) infinite; }
.monster-face::after { content: ""; position: absolute; left: 4px; top: 8px; width: 11px; height: 4px; background: var(--deck-deep); clip-path: polygon(0 0,18% 100%,36% 0,54% 100%,72% 0,90% 100%,100% 0); }
.monster-limbs { position: absolute; z-index: 4; left: 50%; bottom: 1px; translate: -50% 0; width: 25px; height: 10px; background: var(--deck-mid); clip-path: polygon(0 0,34% 0,38% 100%,50% 48%,62% 100%,68% 0,100% 0,78% 100%,22% 100%); font-style: normal; }
.monster-limbs::before { content: ""; position: absolute; left: -4px; top: 0; width: 7px; height: 7px; background: var(--deck-accent); box-shadow: 26px 0 var(--deck-accent); }
html[data-card-style="dreamy"] .playing-card[data-rank="2"] .dream-creature { width: 28px; height: 25px; border-radius: 45% 45% 38% 38%; }.playing-card[data-rank="2"] .monster-face::before { left: 7px; width: 7px; height: 7px; box-shadow: 0 0 6px var(--deck-accent); }.playing-card[data-rank="2"] .monster-face::after { top: 10px; left: 6px; width: 9px; }
html[data-card-style="dreamy"] .playing-card[data-rank="3"] .dream-creature { width: 37px; height: 37px; }.playing-card[data-rank="3"] .monster-face { top: 48%; }
html[data-card-style="dreamy"] .playing-card[data-rank="4"] .dream-creature { width: 34px; height: 34px; }.playing-card[data-rank="4"] .monster-face { rotate: -45deg; }.playing-card[data-rank="4"] .monster-limbs { rotate: -45deg; }
html[data-card-style="dreamy"] .playing-card[data-rank="5"] .dream-creature, html[data-card-style="dreamy"] .playing-card[data-rank="6"] .dream-creature { width: 42px; height: 38px; }.playing-card[data-rank="5"] .monster-face, .playing-card[data-rank="6"] .monster-face { left: 44%; top: 47%; }
html[data-card-style="dreamy"] .playing-card[data-rank="7"] .dream-creature { width: 47px; height: 39px; }.playing-card[data-rank="7"] .monster-face { left: 42%; }
html[data-card-style="dreamy"] .playing-card[data-rank="8"] .dream-creature { width: 41px; height: 45px; }.playing-card[data-rank="8"] .monster-face { top: 50%; }
html[data-card-style="dreamy"] .playing-card[data-rank="9"] .dream-creature { width: 45px; height: 31px; }.playing-card[data-rank="9"] .monster-face { left: 77%; top: 25%; rotate: 15deg; }.playing-card[data-rank="9"] .monster-limbs { display: none; }
html[data-card-style="dreamy"] .playing-card[data-rank="10"] .dream-creature { width: 51px; height: 42px; }.playing-card[data-rank="10"] .monster-face { top: 48%; }.playing-card[data-rank="10"] .monster-limbs { width: 34px; }
html[data-card-style="dreamy"] .playing-card[data-rank="J"] .dream-creature { width: 33px; height: 43px; }.playing-card[data-rank="J"] .monster-face { top: 40%; }
html[data-card-style="dreamy"] .playing-card[data-rank="Q"] .dream-creature { width: 39px; height: 44px; }.playing-card[data-rank="Q"] .monster-face { top: 45%; }
html[data-card-style="dreamy"] .playing-card[data-rank="K"] .dream-creature { width: 42px; height: 44px; }.playing-card[data-rank="K"] .monster-face { top: 48%; }
html[data-card-style="dreamy"] .playing-card[data-rank="A"] .dream-creature { width: 49px; height: 31px; }.playing-card[data-rank="A"] .monster-face, .playing-card[data-rank="A"] .monster-limbs { display: none; }
.dream-card-info { position: absolute; left: 7px; right: 7px; bottom: 5px; height: 30px; padding: 3px 4px; color: #17131a; background: linear-gradient(145deg, #fffbe9, var(--deck-paper)); border: 1px solid var(--deck-accent); box-shadow: inset 0 0 4px rgba(27,20,42,.24), 1px 1px 0 #080711; }
.dream-card-type { display: block; overflow: hidden; padding-bottom: 2px; white-space: nowrap; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--deck-mid) 55%, transparent); font-size: 3.5px; font-weight: 900; letter-spacing: .1px; }
.dream-card-lore { display: block; height: 8px; margin-top: 2px; overflow: hidden; font-family: Georgia,serif; font-size: 3.5px; font-style: italic; line-height: 1.05; }
.dream-card-stats { position: absolute; left: 4px; right: 4px; bottom: 2px; display: flex; justify-content: flex-end; gap: 5px; padding-top: 2px; border-top: 1px solid rgba(23,19,26,.42); font-size: 3.5px; letter-spacing: 0; }
.dream-card-stats b { font-weight: 900; }
html[data-card-style="dreamy"] .cutscene-card { color: #fff0bd; background: linear-gradient(145deg, #21183d, #624a91); border-color: #d0b9ff; box-shadow: 4px 4px 0 #090817, 0 0 19px rgba(192,159,255,.42); }
.action-dock { min-height: 145px; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 10px; background: linear-gradient(145deg, rgba(14,49,47,.92), rgba(29,39,62,.94)); border: 2px solid #55717c; box-shadow: 4px 4px 0 #0c2927, 0 0 22px rgba(103,124,195,.13); }
.action-title { text-align: center; font-size: 10px; color: var(--gold); letter-spacing: 1px; }
.action-help { text-align: center; margin: 0; color: #96b2aa; font-size: 8px; line-height: 1.4; }
.turn-clock { margin: 2px 0 0; padding-top: 6px; color: #9ae6df; border-top: 1px dashed rgba(154,230,223,.28); text-align: center; font-size: 7px; letter-spacing: .5px; }
.turn-clock.urgent { color: #ff9b91; animation: timer-blink 1s steps(2) infinite; }
.button-row { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }
.bid-button { min-width: 42px; padding-inline: 9px; }
.bid-button.high { color: var(--gold); }
.suit-button { width: 39px; padding: 4px; font-family: Georgia, serif; font-size: 22px; }
.suit-button.red { color: #ff7b6f; }

.footer-note { height: 38px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; color: #77728d; background: #11101d; border-top: 3px solid #08070e; font-size: 8px; letter-spacing: 1px; }
.footer-note button { color: var(--gold); background: transparent; border: 0; cursor: pointer; font-size: 9px; }

.pixel-dialog {
  width: min(720px, calc(100% - 30px)); color: var(--cream); background: var(--navy); border: 4px solid var(--cream);
  padding: 30px; box-shadow: 10px 10px 0 #090812, inset 0 0 0 3px #4d4867;
}
.pixel-dialog::backdrop { background: rgba(8, 7, 16, .82); backdrop-filter: blur(2px); }
.pixel-dialog h1 { color: var(--gold); font-size: 25px; letter-spacing: 2px; margin: 8px 0; }
.pixel-dialog .lede { color: #aaa4c0; font-size: 11px; margin: 0 0 22px; }
.dialog-close { position: absolute; right: 14px; top: 12px; color: var(--cream); background: transparent; border: 0; font-size: 26px; cursor: pointer; }
.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rules-grid article { min-height: 110px; padding: 13px 12px 10px 49px; position: relative; background: #1a1830; border: 2px solid #55506e; }
.rules-grid article > b { position: absolute; top: 12px; left: 10px; color: var(--gold); font-size: 20px; }
.rules-grid h2 { margin: 0 0 6px; font-size: 12px; letter-spacing: 1px; }.rules-grid p { margin: 0; color: #aaa4c0; font-size: 10px; line-height: 1.55; }
.double-rule { display: flex; gap: 14px; align-items: center; margin: 12px 0 18px; padding: 12px; background: var(--red-dark); border: 2px solid #ec7a6c; }
.double-rule span { font-size: 28px; color: white; }.double-rule p { margin: 0; font-size: 10px; line-height: 1.5; }.wide { width: 100%; }
.result-dialog { max-width: 500px; text-align: center; }.result-icon { margin: 20px auto 0; font-size: 50px; color: var(--gold); }.result-dialog p { color: #aaa4c0; font-size: 11px; }.final-score { margin: 22px 0; display: flex; justify-content: center; gap: 18px; font-size: 16px; }.final-score b { color: var(--gold); font-size: 29px; }.final-score span:last-child b { color: var(--blue); }.final-score i { color: #6f6987; font-style: normal; }
.online-dialog { max-width: 590px; }
.online-dialog h1 { margin-bottom: 18px; }
.auth-form { display: grid; gap: 12px; }
.auth-field { display: grid; gap: 5px; text-align: left; }
.auth-field span { color: #aaa4c0; font-size: 8px; letter-spacing: 1px; }
.auth-field input, .room-link-row input {
  width: 100%; min-height: 43px; padding: 9px 11px; color: var(--cream); background: #131126;
  border: 2px solid #5b5574; outline: 0; font: inherit; font-size: 11px;
}
.auth-field input:focus, .room-link-row input:focus { border-color: var(--gold); }
.auth-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.online-error { min-height: 16px; margin: 2px 0 0; color: #ff8177; font-size: 9px; line-height: 1.5; }
.account-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 17px; padding: 9px 11px; background: #18162d; border: 2px solid #4d4866; font-size: 9px; }
.account-bar strong { color: var(--gold); }.account-actions { display: flex; gap: 8px; }.text-button { color: #aaa4c0; background: transparent; border: 0; cursor: pointer; font: inherit; font-size: 8px; }
.online-choice { display: grid; gap: 10px; }.online-choice .pixel-button { min-height: 48px; }
.server-note { margin: 14px 0 0; color: #77718e; font-size: 8px; line-height: 1.5; text-align: center; }
.room-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.room-heading strong { color: var(--gold); font-size: 12px; }.room-heading span { color: #837d9b; font-size: 8px; }
.room-heading b { color: #9aeadb; font-weight: 700; }.room-heading b.urgent { color: #ff8177; animation: timer-blink 1s steps(2) infinite; }
.room-link-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 14px; }
.room-link-row .pixel-button { min-width: 84px; }
.lobby-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0; }
.lobby-seat { min-height: 62px; padding: 10px; display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; background: #17152b; border: 2px solid #4d4866; }
.lobby-seat .seat-number { width: 27px; height: 27px; display: grid; place-items: center; color: #77718e; border: 2px solid #4d4866; font-size: 10px; }
.lobby-seat strong, .lobby-seat small { display: block; }.lobby-seat strong { color: var(--cream); font-size: 9px; }.lobby-seat small { color: #77718e; font-size: 7px; margin-top: 3px; }
.lobby-seat .ready-mark { color: var(--gold); font-size: 9px; }.lobby-seat.empty { opacity: .55; }
.online-status { margin: 8px 0; color: #aaa4c0; text-align: center; font-size: 8px; min-height: 14px; }
.expired-room-icon { margin: 8px auto; text-align: center; color: var(--gold); font-size: 42px; }.expired-room-title { margin: 0 0 10px; color: #ff8177; text-align: center; font-size: 15px; letter-spacing: 2px; }
.lobby-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.connection-pill { position: fixed; z-index: 35; top: 88px; right: 18px; padding: 7px 9px; color: var(--cream); background: #18162d; border: 2px solid #4d4866; font-size: 8px; }
.connection-pill.online { color: #9aeadb; border-color: #4d8a80; }.connection-pill.offline { color: #ff8177; border-color: #8d4148; }
.first-blood { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; overflow: hidden; color: #fff8dc; background: radial-gradient(circle at 50% 50%, rgba(123,15,28,.78), rgba(7,5,13,.96) 54%, #040309 76%); opacity: 0; pointer-events: none; isolation: isolate; }
.first-blood[hidden] { display: none; }
.first-blood.active { opacity: 1; animation: first-blood-curtain 1.95s steps(14) both; }
.first-blood.exit { animation: first-blood-exit .26s steps(4) forwards; }
.first-blood::before, .first-blood::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 78vmax; height: 78vmax; translate: -50% -50%; rotate: 45deg; border: 5px solid rgba(255,210,103,.55); box-shadow: 0 0 0 16px rgba(130,13,29,.25), 0 0 80px rgba(255,43,54,.42), inset 0 0 80px rgba(255,31,45,.24); animation: first-blood-diamond .75s steps(9) both; }
.first-blood::after { width: 46vmax; height: 46vmax; border-color: rgba(255,239,183,.22); animation-delay: .08s; }
.first-blood-flash { position: absolute; z-index: 20; inset: 0; background: #fff7cf; opacity: 0; pointer-events: none; animation: first-blood-flash 1.05s steps(9) .34s both; }
.first-blood-slashes { position: absolute; inset: 0; filter: drop-shadow(0 0 15px #ff2d35); }
.first-blood-slashes i { --slash-angle: -16deg; position: absolute; left: -15%; top: 50%; width: 130%; height: 9px; background: linear-gradient(90deg, transparent, #fff5bf 12%, #ff303d 18% 82%, #fff5bf 88%, transparent); transform: rotate(var(--slash-angle)) scaleX(0); transform-origin: left; animation: first-blood-slash .36s steps(7) .18s forwards; }
.first-blood-slashes i:nth-child(2) { --slash-angle: -9deg; top: 43%; height: 5px; animation-delay: .27s; }.first-blood-slashes i:nth-child(3) { --slash-angle: -22deg; top: 58%; height: 4px; animation-delay: .34s; }
.first-blood-shards { position: absolute; inset: 50%; }
.first-blood-shards i { position: absolute; width: 9px; height: 22px; background: #f7c85a; clip-path: polygon(50% 0,100% 35%,68% 100%,0 72%); box-shadow: 0 0 10px #ff333f; animation: first-blood-shard .9s steps(9) .25s both; }
.first-blood-shards i:nth-child(1) { --shard-x: -40vw; --shard-y: -32vh; rotate: 22deg; }.first-blood-shards i:nth-child(2) { --shard-x: -22vw; --shard-y: 38vh; rotate: -35deg; }.first-blood-shards i:nth-child(3) { --shard-x: 36vw; --shard-y: -25vh; rotate: 68deg; }.first-blood-shards i:nth-child(4) { --shard-x: 44vw; --shard-y: 30vh; rotate: -18deg; }.first-blood-shards i:nth-child(5) { --shard-x: -47vw; --shard-y: 10vh; rotate: 82deg; }.first-blood-shards i:nth-child(6) { --shard-x: 18vw; --shard-y: 43vh; rotate: 41deg; }.first-blood-shards i:nth-child(7) { --shard-x: 9vw; --shard-y: -45vh; rotate: -54deg; }.first-blood-shards i:nth-child(8) { --shard-x: -8vw; --shard-y: 47vh; rotate: 13deg; }
.first-blood-finisher { position: absolute; z-index: 6; inset: 0; pointer-events: none; }
.finisher-victim { position: absolute; left: 50%; top: 50%; width: clamp(68px, 9vw, 118px); height: clamp(125px, 18vw, 225px); translate: -50% -44%; filter: drop-shadow(8px 9px 0 #090309); }
.finisher-head { position: absolute; z-index: 2; left: 14%; top: 0; width: 72%; aspect-ratio: 1; display: block; background: #bf846d; border: clamp(4px, .45vw, 7px) solid #1a0811; box-shadow: inset 0 -10px 0 #8e4b4d, inset 9px 0 0 rgba(255,219,156,.22); animation: finisher-head-off 1.05s steps(13) .4s both; }
.finisher-head::before { content: ""; position: absolute; left: -5%; top: -18%; width: 110%; height: 42%; background: #251329; border: 4px solid #12070f; clip-path: polygon(0 22%,14% 0,28% 16%,42% 0,57% 17%,72% 0,87% 20%,100% 5%,95% 100%,5% 100%); }
.finisher-head::after { content: "··"; position: absolute; left: 13%; top: 29%; width: 74%; color: #160912; font: 900 clamp(20px, 3vw, 38px)/.5 monospace; letter-spacing: clamp(12px, 2.1vw, 29px); text-shadow: 0 17px 0 #5c2635; white-space: nowrap; }
.finisher-body { position: absolute; left: 0; top: 43%; width: 100%; height: 58%; display: block; background: linear-gradient(90deg, #260d1c 0 18%, #6f1830 18% 82%, #260d1c 82%); border: clamp(4px, .45vw, 7px) solid #140710; clip-path: polygon(17% 0,83% 0,100% 30%,84% 100%,16% 100%,0 30%); transform-origin: 50% 8%; animation: finisher-body-drop .72s steps(9) .53s both; }
.finisher-body::before { content: ""; position: absolute; left: 39%; top: -10%; width: 22%; height: 21%; background: #ff3346; box-shadow: 0 0 13px #ff223a; }
.finisher-fragments { position: absolute; z-index: 4; left: 50%; top: 45%; }
.finisher-fragments i { --fx: 20vw; --fy: -18vh; position: absolute; width: clamp(6px, .8vw, 11px); aspect-ratio: 1; background: #ff3044; border: 2px solid #5c0718; box-shadow: 0 0 9px #ff263d; animation: finisher-fragment .72s steps(9) .57s both; }
.finisher-fragments i:nth-child(2) { --fx: 29vw; --fy: -9vh; }.finisher-fragments i:nth-child(3) { --fx: 34vw; --fy: 4vh; }.finisher-fragments i:nth-child(4) { --fx: 18vw; --fy: 14vh; }.finisher-fragments i:nth-child(5) { --fx: 8vw; --fy: -24vh; }.finisher-fragments i:nth-child(6) { --fx: -12vw; --fy: -21vh; }.finisher-fragments i:nth-child(7) { --fx: -25vw; --fy: -11vh; }.finisher-fragments i:nth-child(8) { --fx: -31vw; --fy: 7vh; }.finisher-fragments i:nth-child(9) { --fx: -18vw; --fy: 18vh; }.finisher-fragments i:nth-child(10) { --fx: 12vw; --fy: 23vh; }.finisher-fragments i:nth-child(11) { --fx: 3vw; --fy: -30vh; }.finisher-fragments i:nth-child(12) { --fx: 39vw; --fy: -19vh; }
.first-blood-finisher > strong { position: absolute; z-index: 5; left: 50%; top: 17%; translate: -50% 0; color: #ff4050; font-size: clamp(10px, 1.5vw, 18px); letter-spacing: 8px; text-shadow: 3px 3px 0 #280711; opacity: 0; animation: finisher-warning .45s steps(6) .86s both; }
.first-blood-punch { position: absolute; z-index: 7; inset: 0; pointer-events: none; }
.pixel-gauntlet { position: absolute; left: 50%; top: 50%; width: clamp(105px, 15vw, 205px); height: clamp(82px, 12vw, 162px); translate: -50% -50%; color: #ffcf55; background: linear-gradient(135deg, #ffec91 0 12%, #d84b31 13% 42%, #7a1425 43% 73%, #2a0814 74%); clip-path: polygon(3% 27%,13% 17%,28% 17%,32% 7%,48% 7%,52% 0,68% 2%,71% 10%,86% 13%,96% 28%,100% 61%,88% 72%,82% 96%,54% 100%,41% 88%,18% 85%,9% 69%,0 56%); border: 0; filter: drop-shadow(7px 8px 0 #16030a) drop-shadow(0 0 12px #ff273d); animation: first-blood-punch .76s steps(11) .05s both; }
.pixel-gauntlet::before { content: ""; position: absolute; inset: 8% 7%; border: 5px solid #ffcd55; clip-path: polygon(3% 27%,13% 17%,28% 17%,32% 7%,48% 7%,52% 0,68% 2%,71% 10%,86% 13%,96% 28%,100% 61%,88% 72%,82% 96%,54% 100%,41% 88%,18% 85%,9% 69%,0 56%); opacity: .72; }
.pixel-gauntlet i { position: absolute; top: 14%; width: 18%; height: 31%; background: linear-gradient(#ffe882, #b72b32); border: 4px solid #3b0813; box-shadow: inset 3px 3px 0 rgba(255,255,255,.38); }
.pixel-gauntlet i:nth-child(1) { left: 8%; }.pixel-gauntlet i:nth-child(2) { left: 29%; top: 7%; }.pixel-gauntlet i:nth-child(3) { left: 50%; top: 5%; }.pixel-gauntlet i:nth-child(4) { left: 71%; top: 14%; }
.pixel-gauntlet b { position: absolute; left: 25%; right: 14%; bottom: 8%; height: 38%; background: #6d1020; border: 5px solid #2a0711; transform: skewX(-13deg); }
.punch-ring { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; translate: -50% -50%; border: 8px solid #fff1a3; border-radius: 50%; box-shadow: 0 0 0 13px #ff3446, 0 0 50px 28px rgba(255,41,55,.68); animation: first-blood-punch-ring .68s steps(9) .36s both; }
.first-blood-content { position: relative; width: min(780px, 92vw); padding: 42px 18px; text-align: center; text-transform: uppercase; filter: drop-shadow(6px 7px 0 #08040a); animation: first-blood-content .7s steps(10) .32s both; }
.first-blood-kicker { display: block; margin-bottom: 10px; color: #ffd666; font-size: clamp(8px, 1vw, 13px); letter-spacing: 6px; }
.first-blood-sigil { position: absolute; z-index: -1; left: 50%; top: 48%; translate: -50% -50%; color: rgba(255,58,66,.18); font: clamp(170px, 33vw, 430px)/1 Georgia,serif; animation: first-blood-sigil 1.4s steps(12) both; }
.first-blood[data-house="umbra"] .first-blood-sigil { color: rgba(115,107,255,.24); }.first-blood[data-house="prism"] .first-blood-sigil { color: rgba(91,229,241,.22); }.first-blood[data-house="verdant"] .first-blood-sigil { color: rgba(113,213,107,.2); }
.first-blood h2 { margin: 0; color: #fff7da; font-size: clamp(42px, 10vw, 132px); line-height: .82; letter-spacing: clamp(2px, 1vw, 13px); text-shadow: 5px 5px 0 #440b18, -3px -3px 0 #ffce5b, 0 0 28px rgba(255,42,52,.75); transform: skewX(-7deg); }
.first-blood h2 em { color: #ff3443; font-style: normal; }
.first-blood-content > strong { display: block; width: fit-content; max-width: 90%; margin: 22px auto 8px; padding: 9px 22px; overflow: hidden; color: #13060b; background: #f5c85c; border: 4px solid #fff0b0; box-shadow: 6px 6px 0 #5a0b1c; white-space: nowrap; text-overflow: ellipsis; font-size: clamp(13px, 2vw, 24px); letter-spacing: 3px; }
.first-blood-content > small { display: block; color: #d9c7c6; font-size: clamp(7px, .8vw, 11px); letter-spacing: 3px; }
body.first-blood-active .game-board { animation: first-blood-screen-shake .5s steps(9) .28s both; }
.self-capture { --self-art: url("/assets/players/umbra-dreamer.png?v=1"); position: fixed; z-index: 122; inset: 0; display: grid; place-items: center; overflow: hidden; color: #fff6d6; background: radial-gradient(circle at 50% 42%, rgba(159,10,35,.58), transparent 28%), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 10px), #060208; opacity: 0; pointer-events: none; isolation: isolate; }
.self-capture[hidden] { display: none; }.self-capture.active { opacity: 1; animation: self-capture-curtain 1.9s steps(15) both; }.self-capture.exit { animation: self-capture-exit .26s steps(4) forwards; }
.self-capture[data-seat="1"] { --self-art: url("/assets/players/ember-dreamer.png?v=1"); }.self-capture[data-seat="2"] { --self-art: url("/assets/players/prism-dreamer.png?v=1"); }.self-capture[data-seat="3"] { --self-art: url("/assets/players/verdant-dreamer.png?v=1"); }
.self-capture::before { content: ""; position: absolute; z-index: -1; inset: -35%; background: conic-gradient(from 12deg, transparent 0 9%, rgba(255,24,53,.42) 10% 11%, transparent 12% 24%, rgba(255,228,151,.16) 25% 26%, transparent 27% 41%, rgba(255,24,53,.35) 42% 43%, transparent 44% 59%, rgba(255,228,151,.13) 60% 61%, transparent 62%); animation: self-capture-rays 1.9s steps(16) both; }
.self-capture::after { content: ""; position: absolute; z-index: 8; inset: 0; background: linear-gradient(180deg, transparent 0 62%, rgba(107,0,18,.15) 68%, rgba(107,0,18,.88) 100%); transform-origin: bottom; animation: blood-flood 1.5s steps(10) .3s both; }
.self-capture-flash { position: absolute; z-index: 20; inset: 0; background: #ffedf0; opacity: 0; animation: self-capture-flash .7s steps(8) .48s both; }
.blood-mirror { position: absolute; z-index: 3; left: 50%; top: 42%; width: clamp(160px, 22vw, 290px); aspect-ratio: .74; translate: -50% -50%; padding: clamp(8px, 1vw, 14px); background: linear-gradient(135deg, #fff0a0, #8e162a 30%, #2d0611 65%, #eabd57); border: clamp(7px, .8vw, 12px) solid #17040a; outline: 3px solid #ffd974; box-shadow: 12px 14px 0 #050106, 0 0 55px rgba(255,28,55,.72), inset 0 0 0 4px #ffca58; transform: rotate(-5deg); animation: blood-mirror-enter .82s steps(11) .1s both, blood-mirror-break .75s steps(10) .84s forwards; }
.self-portrait { width: 100%; height: 100%; background: #180711 var(--self-art) center 26%/cover no-repeat; border: 5px solid #20040c; box-shadow: inset 0 0 38px #4a0011, inset 0 -45px 45px rgba(113,0,18,.75); filter: contrast(1.18) saturate(.75); image-rendering: pixelated; }
.self-portrait::after { content: ""; position: absolute; inset: 16% 15%; background: linear-gradient(105deg, transparent 0 44%, rgba(255,255,255,.55) 46%, transparent 50%); opacity: .5; }
.mirror-cracks { position: absolute; z-index: 5; inset: 50%; }
.mirror-cracks i { --crack-angle: 0deg; position: absolute; left: -3px; top: -2px; width: clamp(90px, 16vw, 220px); height: 4px; background: linear-gradient(90deg, #fff8db, #ff304b 35%, transparent); box-shadow: 0 0 8px #ff1e3e; transform: rotate(var(--crack-angle)) scaleX(0); transform-origin: left; animation: mirror-crack .42s steps(7) .75s forwards; }
.mirror-cracks i:nth-child(2) { --crack-angle: 57deg; animation-delay: .8s; }.mirror-cracks i:nth-child(3) { --crack-angle: 121deg; animation-delay: .84s; }.mirror-cracks i:nth-child(4) { --crack-angle: 178deg; animation-delay: .88s; }.mirror-cracks i:nth-child(5) { --crack-angle: 236deg; animation-delay: .92s; }.mirror-cracks i:nth-child(6) { --crack-angle: 301deg; animation-delay: .96s; }
.mirror-eye { position: absolute; z-index: 6; left: 50%; top: 45%; translate: -50% -50%; color: #ffdf76; text-shadow: 4px 4px 0 #6d0016, 0 0 18px #ff183b; font-size: clamp(45px, 8vw, 105px); opacity: 0; animation: mirror-eye .58s steps(7) .88s both; }
.blood-rain { position: absolute; z-index: 7; inset: -25% 0 0; overflow: hidden; }
.blood-rain i { --blood-x: 5%; --blood-delay: 0s; position: absolute; left: var(--blood-x); top: -15%; width: clamp(7px, .8vw, 13px); height: clamp(45px, 8vh, 90px); background: linear-gradient(#ff4357, #720016); box-shadow: 0 0 11px #ff1738; clip-path: polygon(50% 0,100% 30%,78% 100%,20% 100%,0 30%); animation: blood-drop 1s steps(9) var(--blood-delay) both; }
.blood-rain i:nth-child(2) { --blood-x: 14%; --blood-delay: .14s; }.blood-rain i:nth-child(3) { --blood-x: 23%; --blood-delay: .04s; }.blood-rain i:nth-child(4) { --blood-x: 31%; --blood-delay: .27s; }.blood-rain i:nth-child(5) { --blood-x: 39%; --blood-delay: .11s; }.blood-rain i:nth-child(6) { --blood-x: 47%; --blood-delay: .34s; }.blood-rain i:nth-child(7) { --blood-x: 56%; --blood-delay: .19s; }.blood-rain i:nth-child(8) { --blood-x: 65%; --blood-delay: .02s; }.blood-rain i:nth-child(9) { --blood-x: 73%; --blood-delay: .3s; }.blood-rain i:nth-child(10) { --blood-x: 81%; --blood-delay: .09s; }.blood-rain i:nth-child(11) { --blood-x: 89%; --blood-delay: .24s; }.blood-rain i:nth-child(12) { --blood-x: 96%; --blood-delay: .16s; }
.self-capture-copy { position: absolute; z-index: 10; left: 50%; bottom: 5%; width: min(980px, 95vw); translate: -50% 0; text-align: center; text-transform: uppercase; filter: drop-shadow(7px 8px 0 #090106); animation: self-capture-copy .58s steps(9) 1.02s both; }
.self-capture-copy > span { display: block; color: #ffca5d; font-size: clamp(7px, 1vw, 12px); letter-spacing: clamp(3px, .7vw, 8px); }.self-capture-copy h2 { margin: 8px 0; color: #fff4d2; font-size: clamp(31px, 6.8vw, 94px); line-height: .78; letter-spacing: 3px; text-shadow: 6px 6px 0 #5f0016, -3px -3px 0 #ffcc5a, 0 0 25px #ff183c; transform: skewX(-7deg); }.self-capture-copy h2 em { color: #ff314b; font-style: normal; }
.self-capture-copy > strong { display: inline-block; max-width: 72vw; margin: 5px 8px; padding: 7px 16px; overflow: hidden; color: #16030a; background: #ffcf5f; border: 4px solid #fff0ac; box-shadow: 5px 5px 0 #650016; white-space: nowrap; text-overflow: ellipsis; font-size: clamp(10px, 1.6vw, 19px); letter-spacing: 3px; }.self-capture-copy > b { display: inline-block; padding: 7px 14px; color: #fff5d5; background: #a60025; border: 4px solid #ff6a72; box-shadow: 5px 5px 0 #3c000d; font-size: clamp(12px, 2vw, 24px); letter-spacing: 3px; }.self-capture-copy > small { display: block; margin-top: 9px; color: #cbb4b8; font-size: clamp(6px, .8vw, 10px); letter-spacing: 2px; }
body.self-capture-active .game-board { animation: self-capture-shake .7s steps(12) .45s both; }
.toast { position: fixed; left: 50%; top: 92px; z-index: 30; transform: translate(-50%, -20px); padding: 10px 17px; color: var(--ink); background: var(--gold); border: 3px solid var(--ink); box-shadow: 4px 4px 0 #0a0911; opacity: 0; pointer-events: none; font-size: 10px; transition: .18s steps(3); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes card-in { from { transform: scale(.6) translateY(-15px); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes legal-pulse { 50% { outline-color: #fff1b6; } }
@keyframes tcg-foil-sweep { 0%, 62% { translate: -130% 0; } 82%, 100% { translate: 130% 0; } }
@keyframes first-blood-curtain { 0% { opacity: 0; } 7%, 89% { opacity: 1; } 100% { opacity: .96; } }
@keyframes first-blood-exit { 0% { opacity: 1; filter: brightness(1); } 55% { opacity: 1; filter: brightness(2.8); } 100% { opacity: 0; filter: brightness(3); } }
@keyframes first-blood-flash { 0% { opacity: 1; } 35% { opacity: .08; } 52% { opacity: .6; } 100% { opacity: 0; } }
@keyframes first-blood-diamond { 0% { scale: .04; opacity: 0; } 44% { opacity: 1; } 100% { scale: 1; opacity: .55; } }
@keyframes first-blood-slash { 0% { transform: rotate(var(--slash-angle)) scaleX(0); opacity: 1; } 72% { transform: rotate(var(--slash-angle)) scaleX(1); opacity: 1; } 100% { transform: rotate(var(--slash-angle)) scaleX(1); opacity: 0; } }
@keyframes first-blood-shard { 0% { translate: 0 0; scale: 0; opacity: 0; } 20% { opacity: 1; scale: 1; } 100% { translate: var(--shard-x) var(--shard-y); scale: .5; opacity: 0; } }
@keyframes first-blood-content { 0% { scale: 2.7 .15; opacity: 0; filter: blur(8px); } 45% { opacity: 1; } 74% { scale: .94 1.07; filter: blur(0); } 100% { scale: 1; opacity: 1; } }
@keyframes first-blood-sigil { 0% { scale: .2; rotate: -25deg; opacity: 0; } 40% { opacity: 1; } 100% { scale: 1.15; rotate: 7deg; opacity: .75; } }
@keyframes first-blood-screen-shake { 0%, 100% { translate: 0 0; } 20% { translate: -5px 3px; } 42% { translate: 4px -3px; } 66% { translate: -3px 1px; } }
@keyframes first-blood-punch { 0% { translate: 70vw 35vh; scale: .35; rotate: -28deg; opacity: 0; } 20% { opacity: 1; } 56% { translate: -50% -50%; scale: 1.05; rotate: -8deg; opacity: 1; } 72% { translate: -50% -50%; scale: 3.2; rotate: 4deg; opacity: 1; filter: drop-shadow(2px 2px 0 #16030a) brightness(2.2); } 100% { translate: -50% -50%; scale: 5.4; rotate: 8deg; opacity: 0; filter: brightness(3); } }
@keyframes first-blood-punch-ring { 0% { scale: 0; opacity: 0; } 18% { opacity: 1; } 100% { scale: 24; opacity: 0; } }
@keyframes finisher-head-off { 0%, 35% { translate: 0 0; rotate: 0; scale: 1; opacity: 1; } 43% { translate: 12px -8px; rotate: 28deg; scale: 1.05; filter: brightness(2.7); } 66% { translate: 17vw -17vh; rotate: 250deg; scale: .82; opacity: 1; } 100% { translate: 43vw -38vh; rotate: 690deg; scale: .25; opacity: 0; filter: brightness(.45); } }
@keyframes finisher-body-drop { 0%, 24% { transform: rotate(0) scaleY(1); opacity: 1; } 39% { transform: rotate(-8deg) scaleY(.92); } 100% { transform: translateY(32vh) rotate(-24deg) scale(.7); opacity: 0; } }
@keyframes finisher-fragment { 0% { translate: 0 0; scale: 0; opacity: 0; } 18% { scale: 1.4; opacity: 1; } 100% { translate: var(--fx) var(--fy); scale: .3; rotate: 280deg; opacity: 0; } }
@keyframes finisher-warning { 0% { scale: 4 .2; opacity: 0; } 60% { scale: .9 1.2; opacity: 1; } 100% { scale: 1; opacity: 1; } }
@keyframes self-capture-curtain { 0% { opacity: 0; } 5%, 92% { opacity: 1; } 100% { opacity: .98; } }
@keyframes self-capture-exit { 0% { opacity: 1; filter: contrast(1); } 55% { opacity: 1; filter: contrast(2.8) brightness(2.2); } 100% { opacity: 0; filter: contrast(4) brightness(3); } }
@keyframes self-capture-rays { 0% { rotate: -35deg; scale: .1; opacity: 0; } 36% { opacity: 1; } 100% { rotate: 18deg; scale: 1; opacity: .75; } }
@keyframes self-capture-flash { 0%, 38% { opacity: 0; } 44% { opacity: 1; } 51% { opacity: .05; } 62% { opacity: .72; } 100% { opacity: 0; } }
@keyframes blood-mirror-enter { 0% { translate: -50% -170vh; rotate: -25deg; scale: .35; opacity: 0; } 68% { translate: -50% -43%; rotate: 8deg; scale: 1.1; opacity: 1; } 100% { translate: -50% -50%; rotate: -5deg; scale: 1; opacity: 1; } }
@keyframes blood-mirror-break { 0%, 22% { filter: brightness(1); } 34% { transform: rotate(-9deg) skewX(5deg); filter: brightness(3); } 47% { transform: rotate(5deg) skewX(-7deg); } 100% { transform: rotate(-3deg) scale(1.08); filter: brightness(.55) saturate(1.5); } }
@keyframes mirror-crack { 0% { transform: rotate(var(--crack-angle)) scaleX(0); opacity: 0; } 22% { opacity: 1; } 100% { transform: rotate(var(--crack-angle)) scaleX(1); opacity: 1; } }
@keyframes mirror-eye { 0% { scale: 7 .2; opacity: 0; } 48% { scale: .75 1.25; opacity: 1; } 100% { scale: 1; opacity: 1; } }
@keyframes blood-drop { 0% { translate: 0 -20vh; opacity: 0; } 14% { opacity: 1; } 100% { translate: 0 145vh; opacity: .85; } }
@keyframes blood-flood { 0%, 30% { scale: 1 0; opacity: 0; } 100% { scale: 1 1; opacity: 1; } }
@keyframes self-capture-copy { 0% { translate: -50% 70px; scale: 2.4 .18; opacity: 0; filter: blur(8px); } 58% { opacity: 1; } 78% { scale: .92 1.12; filter: blur(0); } 100% { translate: -50% 0; scale: 1; opacity: 1; } }
@keyframes self-capture-shake { 0%, 100% { translate: 0 0; } 10% { translate: -13px 7px; } 23% { translate: 11px -9px; } 39% { translate: -8px -5px; } 54% { translate: 9px 6px; } 70% { translate: -5px 3px; } 85% { translate: 3px -2px; } }
@keyframes cloud-drift {
  0% { left: -280px; margin-top: 0; }
  25% { margin-top: 7px; }
  50% { margin-top: -4px; }
  75% { margin-top: 5px; }
  100% { left: calc(100vw + 280px); margin-top: 0; }
}
@keyframes moon-float {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-12px, 7px); }
  50% { transform: translate(-22px, -3px); }
  75% { transform: translate(-8px, -12px); }
}
@keyframes dream-eye-float {
  0% { translate: 0 2px; }
  100% { translate: 0 -5px; }
}
@keyframes dream-eye-blink {
  0%, 86%, 100% { transform: scaleY(1); }
  90%, 95% { transform: scaleY(.08); }
}
@keyframes dream-z-rise {
  0% { translate: -3px 7px; opacity: 0; }
  35%, 65% { opacity: .8; }
  100% { translate: 5px -11px; opacity: 0; }
}
@keyframes dream-gate-pulse {
  0% { scale: .97; opacity: .27; }
  100% { scale: 1.03; opacity: .52; }
}
@keyframes dream-shooting-star {
  0%, 3% { translate: 0 0; opacity: 0; }
  5% { opacity: .8; }
  19% { translate: calc(100vw + 240px) -80px; opacity: .8; }
  21%, 100% { translate: calc(100vw + 240px) -80px; opacity: 0; }
}
@keyframes dream-motes-drift {
  0% { transform: translate(0, 0); opacity: .25; }
  50% { opacity: .46; }
  100% { transform: translate(16px, -10px); opacity: .32; }
}
@keyframes felt-motif-float {
  0% { transform: rotate(45deg) translate(0, 0); }
  100% { transform: rotate(45deg) translate(9px, -7px); }
}
@keyframes dream-diamond-breathe {
  0%, 100% { transform: rotate(45deg) scale(.98); opacity: .7; }
  50% { transform: rotate(45deg) scale(1.04); border-color: rgba(242,214,255,.32); box-shadow: 0 0 34px rgba(108,132,218,.2), inset 0 0 28px rgba(242,188,77,.08); opacity: 1; }
}
@keyframes dream-haze-float {
  0% { translate: -12px 7px; opacity: .12; }
  100% { translate: 28px -9px; opacity: .24; }
}
@keyframes felt-moon-dream {
  0% { translate: 0 0; opacity: .08; }
  100% { translate: -8px 6px; opacity: .15; }
}
@keyframes felt-cloud-drift {
  0% { left: -260px; translate: 0 0; }
  35% { translate: 0 7px; }
  70% { translate: 0 -5px; }
  100% { left: calc(100% + 260px); translate: 0 0; }
}
@keyframes felt-spark-twinkle {
  0%, 100% { opacity: .1; scale: .8; }
  50% { opacity: .38; scale: 1.12; }
}
@keyframes dream-phase-reveal {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  14%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes star-blink { 50% { opacity: .42; } }
@keyframes dream-exit { to { opacity: 0; transform: scale(1.08); visibility: hidden; } }
@keyframes timer-blink { 50% { opacity: .45; } }
@keyframes cutscene-horizon-breathe { from { opacity: .55; filter: hue-rotate(-8deg); } to { opacity: 1; filter: hue-rotate(10deg); } }
@keyframes cutscene-aurora { from { rotate: -3deg; scale: .96; opacity: .24; } to { rotate: 4deg; scale: 1.07; opacity: .52; } }
@keyframes cutscene-cloud-cross {
  0% { left: -330px; margin-top: 0; }
  30% { margin-top: 12px; }
  65% { margin-top: -8px; }
  100% { left: calc(100% + 330px); margin-top: 3px; }
}
@keyframes cutscene-gate-turn { to { rotate: 360deg; } }
@keyframes cutscene-particle-rise {
  0% { translate: 0 20px; opacity: 0; scale: .7; }
  16% { opacity: .8; }
  55% { translate: 13px -42vh; opacity: .7; }
  100% { translate: -9px -78vh; opacity: 0; scale: 1.5; }
}
@keyframes cutscene-heart-pulse { 0%, 100% { scale: .85; opacity: .65; } 50% { scale: 1.18; opacity: 1; } }
@keyframes cutscene-dreamer-idle { 0%, 100% { translate: 0 0; rotate: 0deg; } 25% { translate: 0 -2px; rotate: -2deg; } 75% { translate: 0 -1px; rotate: 2deg; } }
@keyframes cutscene-dreamer-arms { from { translate: 0 0; } to { translate: 0 -3px; } }
@keyframes cutscene-dreamer-look { 0%, 65%, 100% { translate: 0 0; } 72%, 88% { translate: 2px 0; } }
@keyframes cutscene-face-blink { 0%, 90%, 100% { scale: 1 1; } 93%, 97% { scale: 1 .12; } }
@keyframes cutscene-dreamer-startle { 0%, 100% { translate: 0 0; rotate: 0; } 28% { translate: 0 -12px; rotate: -5deg; } 55% { translate: 0 -4px; rotate: 4deg; } }
@keyframes cutscene-dreamer-float { 0%, 100% { translate: 0 1px; rotate: -2deg; } 50% { translate: 0 -7px; rotate: 2deg; } }
@keyframes cutscene-hint-blink { 50% { color: var(--gold); border-color: rgba(242,188,77,.7); } }
@keyframes cutscene-caption-in { from { translate: 0 15px; opacity: 0; filter: blur(3px); } to { translate: 0 0; opacity: 1; filter: none; } }
@keyframes cutscene-progress { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes cutscene-pixel-wipe {
  0% { transform: translateX(-110%); opacity: 0; }
  18%, 55% { opacity: .82; }
  100% { transform: translateX(110%); opacity: 0; }
}
@keyframes cutscene-burst {
  0% { scale: .15; opacity: 1; filter: brightness(2); }
  68% { scale: 2.6; opacity: .88; }
  100% { scale: 4.2; opacity: 0; filter: brightness(1); }
}
@keyframes cutscene-enter-dream {
  0% { filter: brightness(1) saturate(1); scale: 1; }
  55% { filter: brightness(1.25) saturate(1.15); scale: 1.025; }
  100% { filter: brightness(1.7) saturate(.75); scale: 1.06; opacity: 0; }
}
@keyframes table-player-idle { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes avatar-hair-bounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@keyframes dream-card-stars { 0%, 100% { opacity: .35; } 50% { opacity: .9; filter: brightness(1.4); } }
@keyframes card-monster-bob { 0%, 100% { margin-top: 2px; } 50% { margin-top: -3px; } }
@keyframes card-monster-blink { 0%, 89%, 100% { scale: 1 1; } 92%, 96% { scale: 1 .12; } }

@media (max-width: 1000px) {
  .brand { min-width: auto; }.brand small { display: none; }.rules-button { font-size: 0; width: 39px; }.rules-button::after { content: "?"; font-size: 14px; }
  .table-center { inset-inline: 150px; }.contract-panel { width: 130px; left: 18px; }.seat-left { left: 154px; }.seat-right { right: 154px; }
  .player-zone { width: calc(100% - 250px); min-width: 530px; }
}

@media (max-width: 760px) {
  .dream-panel { padding: 22px 18px 19px; }.dream-eye { scale: .86; margin-block: 7px -2px; }.dream-panel h1 { font-size: 31px; letter-spacing: 4px; }.dream-cycle { margin-bottom: 13px; padding-inline: 4px; }.dream-footer { left: 12px; right: 12px; }.dream-footer span:last-child { display: none; }.pixel-moon { width: 58px; height: 58px; right: 8%; }.cloud { width: 170px; height: 43px; }
  .story-cutscene { grid-template-rows: minmax(300px, 1fr) auto; }.cutscene-skip { top: 9px; right: 9px; padding: 6px 7px; font-size: 6px; }
  .cutscene-moon { top: 8%; width: 68px; height: 68px; }.cutscene-moon i { left: 17px; top: 19px; width: 8px; height: 8px; box-shadow: 27px 11px 0 #e8bd7d, 8px 26px 0 #e8bd7d; }
  .cutscene-gate { width: 280px; height: 280px; }.cutscene-table { width: 145px; height: 47px; font-size: 19px; }.cutscene-dreamers { width: 260px; height: 75px; }
  .cutscene-caption { min-height: 273px; padding: 21px 18px 17px; }.cutscene-caption h1 { margin: 7px 0; font-size: 20px; letter-spacing: 2px; }.cutscene-caption p { min-height: 50px; margin-bottom: 10px; font-size: 9px; }.cutscene-progress { margin-bottom: 11px; }.cutscene-progress i { width: 30px; }.cutscene-caption .pixel-button { min-width: 165px; }.cutscene-interaction { right: 7px; bottom: 7px; font-size: 5px; }
  .story-cutscene[data-scene="1"] .cutscene-card-one { translate: -112px -88px; }.story-cutscene[data-scene="1"] .cutscene-card-two { translate: 62px -115px; }.story-cutscene[data-scene="1"] .cutscene-card-three { translate: -51px -162px; }.story-cutscene[data-scene="1"] .cutscene-card-four { translate: 7px -55px; }
  .story-cutscene[data-scene="2"] .cutscene-card-one { translate: -155px -95px; }.story-cutscene[data-scene="2"] .cutscene-card-two { translate: 108px -112px; }.story-cutscene[data-scene="2"] .cutscene-card-three { translate: -105px -175px; }.story-cutscene[data-scene="2"] .cutscene-card-four { translate: 57px -182px; }
  .topbar { height: 112px; padding: 8px 10px; flex-wrap: wrap; gap: 8px; }.brand { width: calc(100% - 205px); }.brand strong { font-size: 20px; }.brand-mark { width: 40px; height: 40px; font-size: 24px; }
  .match-strip { order: 3; width: 100%; flex-basis: 100%; height: 46px; grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); }
  .team-score { min-width: 0; padding: 3px 6px; gap: 4px; font-size: 7px; line-height: 1.25; }
  .team-score span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .team-score strong { flex: 0 0 auto; white-space: nowrap; font-size: 15px; }
  .team-glyph { display: none; }.round-counter strong { font-size: 13px; }

  .game-board { height: calc(100dvh - 112px); min-height: 620px; border-width: 5px; }
  .game-board::before { inset: 9px; }
  .contract-panel { top: 8px; left: 7px; width: 84px; min-height: 0; padding: 6px; border-width: 2px; box-shadow: 3px 3px 0 rgba(8,22,22,.65), inset 0 0 0 1px #3a675e; }
  .contract-panel .eyebrow { font-size: 6px; letter-spacing: 1px; }
  .contract-empty { padding: 18px 0 16px; font-size: 7px; }
  .contract-live { padding: 3px 0; }.contract-number { font-size: 25px; }.contract-live > span { font-size: 6px; }.contract-live small { display: none; }
  .trump-chip { width: 24px; height: 24px; margin: 4px auto; border-width: 1px; font-size: 16px; }
  .stake-row { padding: 5px 1px; font-size: 7px; }.token-row { display: none; }

  .seat { gap: 3px; }.seat-top { top: 28px; }.seat-left { left: 7px; top: 38%; }.seat-right { right: 7px; top: 38%; }
  .avatar { width: 30px; height: 30px; border-width: 2px; font-size: 11px; }
  .nameplate { min-width: 58px; max-width: 82px; padding: 3px; }.nameplate span { overflow: hidden; text-overflow: ellipsis; font-size: 8px; }.nameplate small { font-size: 5px; }
  .seat-top .mini-hand { height: 33px; transform: scale(.72); }
  .seat-top .card-back { width: 29px; height: 40px; margin-inline: -7px; border-width: 2px; }
  .seat-left .mini-hand, .seat-right .mini-hand { width: 29px; height: 96px; margin-top: 2px; display: flex; flex-direction: column; transform: none; }
  .seat-left .card-back, .seat-right .card-back { width: 29px; height: 40px; flex: 0 0 40px; margin: -35px 0 0; border-width: 2px; transform: none; }
  .seat-left .card-back:first-child, .seat-right .card-back:first-child { margin-top: 0; }
  .bid-bubble { padding: 5px 6px; border-width: 2px; box-shadow: 2px 2px 0 #0c2725; font-size: 7px; }
  .bid-bubble { transform: translate(-50%, calc(-100% - 3px)); margin: 0; }

  .table-center { inset: 74px 58px 270px; }
  .turn-banner { min-height: 21px; padding: 4px 7px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 7px; }
  .trick-area { width: 236px; height: 210px; transform: none; }
  .trick-area::before { inset: 50px 70px; }.play-slot { width: 60px; height: 84px; }
  .slot-top { top: 0; }.slot-bottom { bottom: 0; }.slot-left { left: 12px; }.slot-right { right: 12px; }
  .play-slot .playing-card { width: 60px; height: 84px; padding: 4px; }
  .play-slot .card-corner { top: 4px; left: 4px; min-width: 22px; padding: 3px 2px; font-size: 13px; }.play-slot .card-corner.bottom { inset: auto 4px 4px auto; }.play-slot .card-corner small { margin-top: 2px; font-size: 9px; }.play-slot .card-suit { font-size: 31px; }
  .trick-score { gap: 8px; padding: 5px 8px; white-space: nowrap; font-size: 6px; }.trick-score b { font-size: 11px; }

  .player-zone { width: calc(100% - 12px); min-width: 0; bottom: calc(4px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .player-id { display: none; }
  .player-hand {
    order: 3; width: 100%; height: 145px; padding: 7px 12px 10px; justify-content: flex-start; align-items: center; gap: 11px;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: 12px;
    scrollbar-width: thin; scrollbar-color: var(--gold) rgba(10,31,31,.68); overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch; touch-action: pan-x pinch-zoom;
    background: linear-gradient(90deg, rgba(11,34,34,.9), rgba(27,39,61,.82), rgba(11,34,34,.9));
    border: 2px solid rgba(103,144,145,.52); box-shadow: inset 0 0 18px rgba(4,15,17,.75);
  }
  .player-hand::-webkit-scrollbar { height: 5px; }
  .player-hand::-webkit-scrollbar-track { background: rgba(10,31,31,.68); }
  .player-hand::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 0; }
  .player-hand .playing-card { width: 92px; height: 130px; padding: 6px; scroll-snap-align: start; }
  .player-hand .playing-card + .playing-card { margin-left: 0; }
  .player-hand .card-corner { top: 5px; left: 5px; min-width: 26px; padding: 4px 2px 3px; font-size: 16px; }.player-hand .card-corner.bottom { inset: auto 6px 6px auto; }.player-hand .card-corner small { margin-top: 2px; font-size: 12px; }.player-hand .card-suit { font-size: 44px; }
  .mobile-hand-hint { order: 2; display: block; margin: 0; padding: 5px 8px 4px; color: #ffe39a; background: rgba(13,37,38,.94); border-inline: 2px solid rgba(103,144,145,.52); text-align: center; font-size: 7px; letter-spacing: 1px; }
  html[data-card-style="dreamy"] .playing-card .card-corner { top: 4px; left: 4px; min-width: 23px; padding: 3px 1px 2px; font-size: 11px; }
  html[data-card-style="dreamy"] .player-hand .playing-card .card-corner { top: 5px; left: 5px; min-width: 27px; padding: 4px 2px 3px; font-size: 13px; }
  html[data-card-style="dreamy"] .dream-card-name { left: 31px; right: 18px; height: 13px; padding-top: 3px; font-size: 4px; }
  html[data-card-style="dreamy"] .dream-card-attribute { right: 5px; width: 13px; height: 13px; font-size: 7px; }
  html[data-card-style="dreamy"] .dream-card-level { top: 19px; right: 6px; font-size: 5px; }
  html[data-card-style="dreamy"] .dream-card-art { left: 6px; right: 6px; top: 26px; bottom: 31px; border-width: 2px; }
  html[data-card-style="dreamy"] .dream-creature { scale: .78; }
  html[data-card-style="dreamy"] .dream-card-info { left: 5px; right: 5px; bottom: 4px; height: 25px; padding: 2px 3px; }
  html[data-card-style="dreamy"] .dream-card-type { font-size: 3px; }.dream-card-lore { display: none; }.dream-card-stats { font-size: 3px; }
  html[data-card-style="dreamy"] .player-hand .dream-card-name { left: 35px; right: 21px; height: 15px; padding-top: 4px; font-size: 5px; }
  html[data-card-style="dreamy"] .player-hand .dream-card-attribute { right: 6px; width: 15px; height: 15px; font-size: 9px; }
  html[data-card-style="dreamy"] .player-hand .dream-card-level { top: 22px; right: 8px; font-size: 6px; }
  html[data-card-style="dreamy"] .player-hand .dream-card-art { left: 8px; right: 8px; top: 30px; bottom: 37px; }
  html[data-card-style="dreamy"] .player-hand .dream-creature { scale: .96; }
  html[data-card-style="dreamy"] .player-hand .dream-card-info { left: 7px; right: 7px; bottom: 5px; height: 30px; padding: 3px 4px; }
  html[data-card-style="dreamy"] .player-hand .dream-card-type, html[data-card-style="dreamy"] .player-hand .dream-card-stats { font-size: 3.5px; }
  .action-dock { order: 1; width: 100%; min-height: 52px; max-height: 103px; overflow-y: auto; gap: 4px; padding: 6px; box-shadow: 2px 2px 0 #0c2927; }
  .action-dock .pixel-button { min-height: 29px; padding: 5px 7px; font-size: 8px; }.action-dock .bid-button { min-width: 30px; }.action-dock .button-row { gap: 4px; }
  .action-title { font-size: 8px; }.action-help { display: none; }
  .turn-clock { padding-top: 3px; font-size: 6px; }
  .footer-note { display: none; }
  .pixel-dialog { padding: 23px 18px; }.rules-grid { grid-template-columns: 1fr; max-height: 340px; overflow-y: auto; }.rules-grid article { min-height: 85px; }.pixel-dialog h1 { font-size: 20px; }
  .auth-buttons, .lobby-actions { grid-template-columns: 1fr; }.lobby-seats { grid-template-columns: 1fr; }.room-link-row { grid-template-columns: 1fr; }
  .connection-pill { top: 117px; right: 7px; padding: 6px 8px; border-width: 2px; font-size: 8px; }

  /* Mobile readability pass: keep cards as-is and enlarge the surrounding game UI. */
  .dream-kicker { font-size: 10px; letter-spacing: 2px; }
  .dream-game-name { font-size: 14px; letter-spacing: 6px; }
  .dream-tagline { color: #d0cae2; font-size: 11px; }
  .dream-cycle > span { font-size: 9px; }.dream-cycle b { font-size: 9px; }.dream-cycle small { color: #aaa4c0; font-size: 7px; }
  .dream-footer { font-size: 9px; }

  .cutscene-skip { min-height: 36px; padding: 8px 10px; font-size: 9px; }
  .cutscene-caption > span { font-size: 10px; letter-spacing: 2px; }
  .cutscene-caption h1 { font-size: 23px; }
  .cutscene-caption p { color: #d0cae2; font-size: 12px; line-height: 1.55; }
  .cutscene-caption .pixel-button { min-height: 44px; font-size: 11px; }
  .cutscene-interaction { padding: 7px 8px; font-size: 8px; }

  .topbar .icon-button, .topbar .rules-button { width: 42px; height: 42px; flex: 0 0 42px; }
  .rules-button::after { font-size: 18px; }
  .team-score { padding: 5px 7px; font-size: 9px; line-height: 1.25; }
  .team-score strong { font-size: 18px; }
  .round-counter span { color: #c3bdd7; font-size: 9px; }
  .round-counter strong { font-size: 15px; }

  .dream-phase-card { padding: 20px 18px; }
  .dream-phase-card span, .dream-phase-card small { font-size: 10px; }
  .dream-phase-card strong { font-size: 31px; }

  .contract-panel { width: 100px; padding: 8px; background: linear-gradient(155deg, rgba(23,66,67,.99), rgba(25,42,63,.99)); }
  .contract-panel .eyebrow { font-size: 8px; }
  .contract-empty { color: #b6ccc4; font-size: 9px; line-height: 1.5; }
  .contract-number { font-size: 30px; }
  .contract-live > span { font-size: 8px; line-height: 1.25; }
  .stake-row { display: grid; gap: 3px; color: #b6ccc4; font-size: 8px; line-height: 1.25; }
  .stake-row strong { font-size: 11px; }

  .seat { gap: 4px; }
  .avatar { width: 36px; height: 36px; font-size: 14px; }
  .nameplate { min-width: 70px; max-width: 88px; padding: 5px 4px; background: linear-gradient(135deg, rgba(18,58,55,.98), rgba(24,47,67,.98)); }
  .nameplate span { font-size: 10px; }
  .nameplate small { color: #b6ccc4; font-size: 7px; line-height: 1.3; }
  .bid-bubble { padding: 6px 8px; font-size: 9px; }

  .turn-banner { min-height: 28px; max-width: 240px; padding: 6px 9px; color: #ffdb7e; background: linear-gradient(90deg, rgba(15,51,49,.98), rgba(31,41,66,.98)); font-size: 9px; }
  .trick-score { gap: 8px; padding: 6px 8px; color: #d0ddd9; font-size: 8px; }
  .trick-score b { font-size: 14px; }
  .trick-score > span:nth-child(2) { color: #a6bcb5; }

  .mobile-hand-hint { padding-block: 6px 5px; font-size: 8px; }
  .action-dock { min-height: 62px; max-height: 116px; gap: 6px; padding: 8px; background: linear-gradient(145deg, rgba(10,51,48,.98), rgba(26,37,61,.98)); }
  .action-dock .pixel-button { min-height: 36px; padding: 7px 9px; font-size: 10px; }
  .action-dock .bid-button { min-width: 36px; }
  .action-dock .button-row { gap: 7px; }
  .action-title { font-size: 10px; }
  .turn-clock { color: #b7fff7; font-size: 8px; }

  .pixel-dialog { padding: 25px 20px; }
  .pixel-dialog h1 { font-size: 22px; line-height: 1.25; }
  .pixel-dialog .lede { color: #d0cae2; font-size: 12px; line-height: 1.5; }
  .pixel-dialog .pixel-button { min-height: 44px; font-size: 11px; }
  .rules-grid h2 { font-size: 13px; }.rules-grid p { color: #d0cae2; font-size: 11px; }
  .double-rule p { font-size: 11px; }
  .auth-field { gap: 7px; }.auth-field span { color: #d0cae2; font-size: 10px; }
  .auth-field input, .room-link-row input { min-height: 48px; padding: 10px 12px; font-size: 16px; }
  .online-error { font-size: 10px; }
  .account-bar { font-size: 11px; }.text-button { color: #d0cae2; font-size: 10px; }
  .server-note { color: #aaa4c0; font-size: 10px; }
  .room-heading strong { font-size: 14px; }.room-heading span { color: #aaa4c0; font-size: 10px; }
  .lobby-seat { min-height: 70px; }.lobby-seat strong { font-size: 11px; }.lobby-seat small { color: #aaa4c0; font-size: 9px; }.lobby-seat .ready-mark { font-size: 11px; }
  .online-status { color: #d0cae2; font-size: 10px; }
}

@media (max-width: 360px) {
  .brand { width: calc(100% - 170px); gap: 6px; }.brand strong { font-size: 17px; letter-spacing: 1px; }.brand-mark { width: 38px; height: 38px; }
  .topbar .icon-button, .topbar .rules-button { width: 40px; height: 40px; flex-basis: 40px; }
  .team-score { padding-inline: 5px; font-size: 8px; }.team-score strong { font-size: 16px; }
  .contract-panel { width: 94px; }
  .nameplate { max-width: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .cloud, .dream-stars, .pixel-moon { animation: none !important; }
  .dream-menu::after { animation: none !important; }
  .dream-stars::before, .dream-stars::after { animation: none !important; opacity: 0; }
  .cloud-a { left: 5%; }.cloud-b { left: 66%; }.cloud-c { left: 38%; }.cloud-d { left: 4%; }.cloud-e { left: 70%; }
  .felt-dreamscape::before, .felt-dreamscape::after, .felt-moon-mark, .felt-cloud, .felt-spark { animation: none !important; }
  .felt-cloud-one { left: 18%; }.felt-cloud-two { left: 62%; }.felt-cloud-three { left: 42%; }
  .cutscene-interaction, .cutscene-particles { display: none; }
  .cutscene-cloud-one { left: 8%; }.cutscene-cloud-two { left: 68%; }
  body.first-blood-active .game-board { animation: none !important; }
  .first-blood.active { opacity: 1; animation: none !important; }
  .first-blood-flash, .first-blood-slashes, .first-blood-shards, .first-blood-punch, .first-blood-finisher { display: none; }
  .first-blood::before, .first-blood::after, .first-blood-content, .first-blood-sigil { animation: none !important; }
  body.self-capture-active .game-board { animation: none !important; }
  .self-capture.active { opacity: 1; animation: none !important; }
  .self-capture::before, .self-capture::after, .self-capture-flash, .blood-rain, .mirror-cracks, .mirror-eye { display: none; }
  .blood-mirror, .self-capture-copy { animation: none !important; opacity: 1; }
}

@media (max-height: 760px) and (min-width: 761px) {
  .game-board { min-height: 565px; }.table-center { inset-block: 120px 135px; }.trick-area { transform: scale(.82); height: 245px; }.player-zone { bottom: 10px; }.player-hand { height: 135px; }.playing-card { width: 83px; height: 116px; }.contract-panel { top: 18px; min-height: 220px; }.seat-top { top: 38px; }
}