:root {
  --bg: #040a13;
  --bg2: #071525;
  --panel: rgba(8, 20, 36, .92);
  --panel-2: rgba(12, 29, 49, .96);
  --gold: #f4bd59;
  --gold-soft: #9b6b25;
  --blue: #218cff;
  --blue-bright: #62c5ff;
  --red: #e8443f;
  --red-bright: #ff7b6f;
  --green: #85e758;
  --text: #f7fbff;
  --muted: #a7b5c8;
  --field-w: 9.2%;
  --field-h: 4.9%;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #000; color: var(--text); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height: 100dvh; overflow: hidden; overscroll-behavior: none; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

#app {
  width: 100%;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 92, 148, .18), transparent 38%),
    linear-gradient(180deg, #03070c, #07111f 55%, #02060b);
}

.screen { min-height: 100dvh; }
.hidden { display: none !important; }

.start-screen {
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: max(9px, env(safe-area-inset-top)) 14px max(8px, env(safe-area-inset-bottom));
  overflow-y: auto;
}

.glass-card {
  width: min(100%, 440px);
  margin-top: auto;
  padding: 17px 19px 16px;
  border: 1px solid rgba(247, 197, 99, .42);
  border-radius: 24px;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(19, 38, 61, .94), rgba(4, 13, 24, .97));
  box-shadow:
    0 24px 80px rgba(0, 0, 0, .55),
    inset 0 0 34px rgba(64, 124, 179, .08),
    0 0 32px rgba(236, 180, 76, .08);
}

.game-logo {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: 0 0 30px rgba(244, 189, 89, .18);
}

.eyebrow { margin: 9px 0 3px; color: var(--gold); letter-spacing: .16em; font-size: .7rem; font-weight: 900; }
h1 { margin: 0; font-size: clamp(2.15rem, 10vw, 3.35rem); line-height: .96; letter-spacing: .04em; text-shadow: 0 0 24px rgba(94, 190, 255, .22); }
.subtitle { margin: 6px 0 14px; color: var(--muted); font-size: .9rem; }

.name-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
.name-field { display: flex; flex-direction: column; gap: 6px; padding: 9px; border-radius: 14px; text-align: left; background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.12); }
.name-field span { font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.name-field input { width: 100%; min-width: 0; padding: 9px 8px; color: #fff; background: rgba(1, 7, 14, .7); border: 1px solid rgba(255,255,255,.17); border-radius: 10px; outline: 0; text-align: center; font-weight: 800; }
.name-field input:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.blue-field { box-shadow: inset 0 0 0 1px rgba(33, 140, 255, .18); }
.blue-field span { color: var(--blue-bright); }
.red-field { box-shadow: inset 0 0 0 1px rgba(232, 68, 63, .18); }
.red-field span { color: var(--red-bright); }

.primary-button, .secondary-button, .roll-button {
  border: 0;
  border-radius: 14px;
  font-weight: 950;
  letter-spacing: .06em;
  cursor: pointer;
  touch-action: manipulation;
}
.primary-button { width: 100%; min-height: 48px; color: #06101b; background: linear-gradient(180deg, #b5f56f, #65c63a); box-shadow: 0 10px 26px rgba(96, 205, 53, .26), inset 0 1px 0 rgba(255,255,255,.65); }
.primary-button:active { transform: translateY(1px); }
.secondary-button { width: 100%; min-height: 40px; margin-top: 8px; color: #dbe8f5; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }

.global-stats {
  width: min(100%, 440px);
  margin-bottom: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  text-align: center;
}
.global-stats div { padding: 5px 3px; }
.global-stats strong { display: block; color: #fff; font-size: 1rem; }
.global-stats span { display: block; margin-top: 1px; color: #72849b; font-size: .58rem; font-weight: 900; letter-spacing: .06em; }

.game-screen { height: 100dvh; min-height: 0; overflow: hidden; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.game-layout { height: 100%; max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; background: #040a13; }

.board {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 28%, rgba(36, 92, 60, .18), transparent 17%),
    radial-gradient(circle at 84% 42%, rgba(98, 67, 30, .17), transparent 18%),
    radial-gradient(circle at 16% 80%, rgba(31, 100, 69, .16), transparent 18%),
    linear-gradient(180deg, #06101c, #091829 52%, #050d17);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.board::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:20; box-shadow: inset 0 0 90px rgba(0,0,0,.72); }
.track-svg, .connector-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.track-svg { z-index: 1; filter: drop-shadow(0 8px 8px rgba(0,0,0,.55)); }
.connector-svg { z-index: 3; }
.spaces-layer { position:absolute; inset:0; z-index:4; }
.pieces-layer { position:absolute; inset:0; z-index:9; pointer-events:none; }

.board-topbar {
  position:absolute;
  top:1.5%;
  left:2.5%;
  width:29.5%;
  z-index:15;
}
.turn-badge { display:flex; width:100%; min-height:28px; align-items:center; justify-content:center; padding:5px 6px; border-radius:9px; font-size:clamp(.52rem,2.15vw,.72rem); font-weight:950; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fullscreen-button { position:absolute; z-index:16; top:1.5%; left:33.5%; width:8.5%; min-height:28px; padding:2px; border:1px solid rgba(116,199,255,.66); border-radius:8px; color:#e4f5ff; background:linear-gradient(180deg,rgba(24,91,139,.92),rgba(8,43,73,.96)); box-shadow:0 0 11px rgba(33,140,255,.16), inset 0 1px 0 rgba(255,255,255,.12); font-size:clamp(.88rem,3.4vw,1.15rem); font-weight:950; line-height:1; cursor:pointer; touch-action:manipulation; }
.fullscreen-button:active { transform:translateY(1px); }
.board-menu-button { position:absolute; z-index:16; top:1.5%; left:43.5%; width:26%; min-height:28px; padding:3px 4px; border:1px solid rgba(244,189,89,.62); border-radius:9px; color:#ffe9bd; background:linear-gradient(180deg,rgba(91,63,25,.9),rgba(35,22,9,.94)); box-shadow:0 0 12px rgba(244,189,89,.12), inset 0 1px 0 rgba(255,255,255,.1); font-size:clamp(.47rem,1.78vw,.63rem); font-weight:950; line-height:1.06; letter-spacing:.02em; text-align:center; cursor:pointer; touch-action:manipulation; }
.board-menu-button:active { transform:translateY(1px); }
.board-menu-button:disabled { opacity:.4; cursor:default; box-shadow:none; }
.blue-turn { color: #d9efff; background: rgba(21, 110, 205, .33); border: 1px solid rgba(92, 192, 255, .65); box-shadow: 0 0 16px rgba(33,140,255,.18); }
.red-turn { color: #ffe1de; background: rgba(181, 44, 42, .31); border: 1px solid rgba(255, 115, 104, .62); box-shadow: 0 0 16px rgba(232,68,63,.18); }
.status-message { grid-column:1 / -1; min-height:26px; display:flex; align-items:center; justify-content:center; padding:4px 10px 3px; color:#eef6ff; font-size:clamp(.72rem,2.9vw,.94rem); font-weight:900; line-height:1.12; text-align:center; text-shadow:0 2px 6px #000; animation:instructionBlink 1.08s ease-in-out infinite; }
@keyframes instructionBlink { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); } 50% { opacity: .35; filter: drop-shadow(0 0 8px rgba(255,255,255,.18)); } }

.elevator {
  position: absolute;
  z-index: 8;
  top: 1.8%;
  right: 2.6%;
  width: 25%;
  height: 15%;
  filter: drop-shadow(0 9px 12px rgba(0,0,0,.62));
}
.elevator-display { width: 66%; margin: 0 auto 2px; padding: 3px 2px; border: 2px solid #80643b; border-radius: 5px; background: #070b0f; color: #82ef62; text-align:center; font-weight:950; font-size: clamp(.55rem, 2.2vw, .78rem); box-shadow: inset 0 0 8px #000, 0 0 8px rgba(129,239,97,.1); }
.elevator-frame { position:relative; height: calc(100% - 22px); border: 3.5px solid #d4a64b; border-top-width: 4.5px; border-radius: 5px 5px 2px 2px; overflow:hidden; background: linear-gradient(180deg,#f1c96a,#7f5a1d 24%,#d19a34 62%,#6f4a12 100%); box-shadow: inset 0 0 16px rgba(0,0,0,.72), 0 0 10px rgba(244,189,89,.18); }
.elevator-door { position:absolute; top:0; bottom:0; width:50%; z-index:3; background: linear-gradient(90deg,#5f430f,#d8b15b 48%,#5f430f); transition: transform .45s ease; }
.left-door { left:0; border-right:1px solid #171411; }
.right-door { right:0; border-left:1px solid #171411; }
.elevator-cabin { position:absolute; inset:0; display:grid; place-items:center; font-size: clamp(1rem, 5vw, 2rem); background: radial-gradient(circle, #8b6330, #25170b); }
.elevator.open .left-door { transform: translateX(-90%); }
.elevator.open .right-door { transform: translateX(90%); }
.elevator.arrival { animation: elevatorPulse .7s ease; }
@keyframes elevatorPulse { 50% { filter: drop-shadow(0 0 22px rgba(244,189,89,.9)); } }

.start-marker { position:absolute; z-index:7; left:7%; bottom:1.1%; color:#9ef25e; font-weight:950; font-size:clamp(.65rem,3vw,.95rem); letter-spacing:.08em; text-shadow:0 0 12px rgba(132,232,84,.6); }

.space {
  position:absolute;
  width:var(--field-w);
  height:var(--field-h);
  transform:translate(-50%,-50%);
  border:1.4px solid #d6a14f;
  border-radius:18%;
  background: linear-gradient(145deg,#26384d,#111e2e);
  box-shadow: inset 0 0 8px rgba(255,255,255,.045), 0 0 6px rgba(244,189,89,.14);
  display:grid;
  place-items:center;
  color:white;
  font-size:clamp(.58rem,2.7vw,.95rem);
}
.space::before { content:""; position:absolute; inset:2px; border-radius:15%; border:1px solid rgba(255,255,255,.035); }
.space.special-stairs { border-color:#8de662; background:linear-gradient(145deg,#326b37,#17351f); box-shadow:0 0 11px rgba(133,231,88,.38), inset 0 0 8px rgba(185,255,149,.18); }
.space.special-slide { border-color:#ff7a62; background:linear-gradient(145deg,#71372f,#3a1716); box-shadow:0 0 11px rgba(232,68,63,.34), inset 0 0 8px rgba(255,157,143,.16); }
.space.special-bench { border-color:#5eb9ff; background:linear-gradient(145deg,#205b83,#102f48); box-shadow:0 0 11px rgba(33,140,255,.32), inset 0 0 8px rgba(130,205,255,.13); }
.space.last-space { box-shadow:0 0 15px rgba(244,189,89,.42), inset 0 0 10px rgba(244,189,89,.12); }
.space-icon { position:relative; z-index:1; line-height:1; filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)); }

.connector { fill:none; stroke-linecap:round; }
.connector-glow { opacity:0; transition:opacity .2s ease; }
.connector-active .connector-glow { opacity:1; animation:connectorBlink .6s ease-in-out infinite alternate; }
@keyframes connectorBlink { to { opacity:.35; } }

.piece {
  width: clamp(25px, 7vw, 38px);
  aspect-ratio: .72;
  border:0;
  padding:0;
  background:none;
  position:relative;
  cursor:pointer;
  pointer-events:auto;
  filter:drop-shadow(0 5px 4px rgba(0,0,0,.62));
  touch-action:manipulation;
}
.piece::before { content:""; position:absolute; left:22%; right:22%; top:2%; aspect-ratio:1; border-radius:50%; box-shadow:inset 2px 2px 3px rgba(255,255,255,.42), inset -3px -4px 5px rgba(0,0,0,.34); }
.piece::after { content:""; position:absolute; left:10%; right:10%; bottom:2%; height:66%; clip-path:polygon(34% 0,66% 0,74% 32%,100% 78%,92% 100%,8% 100%,0 78%,26% 32%); border-radius:40% 40% 20% 20%; box-shadow:inset 3px 2px 4px rgba(255,255,255,.25), inset -4px -5px 7px rgba(0,0,0,.38); }
.piece.blue::before, .piece.blue::after { background:linear-gradient(135deg,#59bfff,#0058c7 52%,#002d75); }
.piece.red::before, .piece.red::after { background:linear-gradient(135deg,#ff806f,#bd1f22 52%,#650b10); }
.piece.board-piece { position:absolute; z-index:10; transform:translate(-50%,-58%); transition:left .16s linear, top .16s linear, transform .2s ease, opacity .2s ease; }
.piece.valid { animation:piecePulse .78s ease-in-out infinite alternate; }
.piece.valid::before, .piece.valid::after { filter:brightness(1.28); }
@keyframes piecePulse { from { transform:translate(-50%,-58%) scale(1); filter:drop-shadow(0 4px 3px rgba(0,0,0,.55)); } to { transform:translate(-50%,-58%) scale(1.13); filter:drop-shadow(0 0 10px rgba(255,255,255,.78)); } }
.base-row .piece.valid { animation:basePulse .78s ease-in-out infinite alternate; }
@keyframes basePulse { to { transform:scale(1.13); filter:drop-shadow(0 0 10px rgba(255,255,255,.75)); } }
.piece.blocked { opacity:.48; filter:grayscale(.35) drop-shadow(0 3px 3px #000); }
.piece.blocked::after { outline:2px solid rgba(87,184,255,.4); }
.piece.entering { animation:pieceEnter .35s ease; }
@keyframes pieceEnter { from { opacity:0; transform:translate(-50%,-58%) scale(.3); } }
.piece.elevator-move { transition:left .55s ease, top .55s ease, transform .55s ease; transform:translate(-50%,-58%) scale(.7); }

.scene { position:absolute; z-index:0; opacity:.48; filter:saturate(.72); pointer-events:none; }
.scene span { display:block; font-size:.45em; font-weight:900; }
.scene-cafe { left:1%; top:35%; font-size:clamp(1.1rem,5vw,2rem); }
.scene-park { left:0.6%; top:69%; font-size:clamp(1.4rem,6vw,2.4rem); }
.scene-fountain { right:1%; top:28%; font-size:clamp(1.2rem,5vw,2rem); }
.scene-library { right:1%; top:66%; font-size:clamp(1.2rem,5vw,2rem); }

.control-panel {
  flex: 0 0 auto;
  min-height: 171px;
  display:grid;
  grid-template-columns:1fr minmax(106px,.9fr) 1fr;
  grid-template-rows:auto 1fr;
  gap:7px;
  padding:4px 8px max(8px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#06101c,#02070d);
  box-shadow:0 -12px 24px rgba(0,0,0,.45);
  z-index:30;
}
.player-panel { min-width:0; border-radius:17px; padding:8px 5px 7px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg,rgba(22,37,57,.96),rgba(5,13,23,.98)); transition:.2s ease; }
.player-blue.active { border-color:rgba(82,186,255,.95); box-shadow:0 0 16px rgba(33,140,255,.36), inset 0 0 18px rgba(33,140,255,.08); }
.player-red.active { border-color:rgba(255,105,92,.95); box-shadow:0 0 16px rgba(232,68,63,.34), inset 0 0 18px rgba(232,68,63,.08); }
.player-heading { display:flex; justify-content:space-between; align-items:center; gap:4px; margin:0 3px 5px; font-size:clamp(.58rem,2.2vw,.75rem); font-weight:950; }
.player-heading span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-heading b { color:var(--gold); }
.player-blue .player-heading span { color:var(--blue-bright); }
.player-red .player-heading span { color:var(--red-bright); }
.base-row { min-height:69px; display:flex; justify-content:center; align-items:flex-end; gap:1px; padding:4px 2px; border-radius:12px; background:rgba(0,0,0,.25); box-shadow:inset 0 0 12px rgba(0,0,0,.45); }
.base-placeholder { width:clamp(24px,6.8vw,36px); aspect-ratio:.72; border-radius:50%; opacity:.18; border:1px dashed currentColor; }
.player-blue .base-placeholder { color:var(--blue); }
.player-red .base-placeholder { color:var(--red); }

.dice-panel { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; padding:8px 8px 9px; border:1px solid rgba(255,255,255,.22); border-radius:17px; background:linear-gradient(180deg,rgba(18,37,59,.97),rgba(5,13,23,.99)); box-shadow:0 0 14px rgba(0,0,0,.28), inset 0 0 14px rgba(255,255,255,.035); transition:border-color .28s ease, box-shadow .28s ease, background .28s ease; }
.dice-panel.blue-active { border-color:rgba(82,186,255,.95); background:linear-gradient(180deg,rgba(16,51,82,.98),rgba(5,17,31,.99)); box-shadow:0 0 19px rgba(33,140,255,.38), inset 0 0 22px rgba(33,140,255,.16); }
.dice-panel.red-active { border-color:rgba(255,105,92,.95); background:linear-gradient(180deg,rgba(76,30,34,.98),rgba(27,9,14,.99)); box-shadow:0 0 19px rgba(232,68,63,.38), inset 0 0 22px rgba(232,68,63,.16); }
.dice { width:68px; aspect-ratio:1; display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); padding:11px; border-radius:18px; background:linear-gradient(145deg,#fff,#b8bec5); box-shadow:inset 4px 4px 8px #fff,inset -6px -7px 9px #737980,0 8px 14px rgba(0,0,0,.5); cursor:pointer; transition: transform .14s ease, box-shadow .28s ease, opacity .14s ease; }
.dice-panel.blue-active .dice { box-shadow:inset 4px 4px 8px #fff,inset -6px -7px 9px #737980,0 8px 14px rgba(0,0,0,.5),0 0 16px rgba(45,160,255,.45); }
.dice-panel.red-active .dice { box-shadow:inset 4px 4px 8px #fff,inset -6px -7px 9px #737980,0 8px 14px rgba(0,0,0,.5),0 0 16px rgba(255,91,78,.45); }
.dice-panel.blue-active .roll-button { color:#dff4ff; background:linear-gradient(180deg,#0e66ad,#073d71); border-color:#48b7ff; box-shadow:0 0 13px rgba(33,140,255,.27); }
.dice-panel.red-active .roll-button { color:#fff0ee; background:linear-gradient(180deg,#b83d3d,#702029); border-color:#ff766b; box-shadow:0 0 13px rgba(232,68,63,.3); }
.dice:hover { transform: translateY(-1px); }
.dice:active { transform: scale(.97); }
.dice.locked { opacity: .52; cursor: default; box-shadow: inset 4px 4px 8px #fff,inset -6px -7px 9px #737980,0 5px 10px rgba(0,0,0,.35); }
.dice.rolling { animation:diceRoll .62s ease; }
@keyframes diceRoll { 0%{transform:rotate(0) scale(1)} 30%{transform:rotate(-18deg) scale(.9)} 65%{transform:rotate(20deg) scale(1.08)} 100%{transform:rotate(0) scale(1)} }
.dot { width:9px; height:9px; border-radius:50%; background:#171a1d; align-self:center; justify-self:center; opacity:0; box-shadow:inset 1px 1px 1px rgba(255,255,255,.25); }
.roll-button { width:100%; min-height:42px; padding:5px 7px; color:#eef5fb; background:linear-gradient(180deg,#33465a,#1a2735); border:1px solid rgba(255,255,255,.3); box-shadow:none; font-size:clamp(.65rem,2.5vw,.8rem); transition:color .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease; }
.roll-button:disabled { opacity:.46; cursor:default; box-shadow:none; }

.modal { width:min(calc(100% - 30px),460px); max-height:calc(100dvh - 34px); padding:0; border:1px solid rgba(244,189,89,.4); border-radius:24px; color:#fff; background:linear-gradient(160deg,#10243b,#040b13); box-shadow:0 26px 80px rgba(0,0,0,.78); }
.modal::backdrop { background:rgba(0,0,0,.76); backdrop-filter:blur(5px); }
.modal-inner { position:relative; padding:26px 24px; }
.modal-inner h2 { margin:0 0 15px; text-align:center; }
.modal-inner p, .modal-inner li { color:#c7d4e2; line-height:1.48; }
.modal-inner ul { padding-left:20px; }
.modal-close { position:absolute; top:9px; right:10px; width:36px; height:36px; border:0; border-radius:50%; color:white; background:rgba(255,255,255,.08); font-size:1.5rem; cursor:pointer; }
.confirm-inner { text-align:center; }
.confirm-inner p { margin:4px 0 20px; color:#eef4fb; font-weight:750; }
.confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.confirm-actions .secondary-button { margin-top:0; }
.danger-button { min-height:48px; border:1px solid rgba(255,109,96,.72); border-radius:14px; color:#fff; background:linear-gradient(180deg,#c63a35,#7b1c1b); box-shadow:0 8px 20px rgba(198,58,53,.2); font-weight:950; letter-spacing:.035em; cursor:pointer; }
.danger-button:active { transform:translateY(1px); }
.win-inner { text-align:center; }
.winner-icon { width:80px; height:80px; margin:0 auto 8px; position:relative; }
.winner-icon .piece { width:58px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.win-inner h2 { font-size:clamp(1.6rem,8vw,2.4rem); }
.win-inner > p:not(.eyebrow) { color:#fff; font-weight:800; }


@media (max-height: 700px) {
  .start-screen { gap:6px; padding-top:max(6px,env(safe-area-inset-top)); padding-bottom:max(5px,env(safe-area-inset-bottom)); }
  .glass-card { padding:12px 16px 12px; border-radius:21px; }
  .game-logo { width:78px; height:78px; border-radius:18px; }
  .eyebrow { margin-top:6px; font-size:.64rem; }
  h1 { font-size:clamp(1.95rem,9vw,2.8rem); }
  .subtitle { margin:4px 0 10px; font-size:.82rem; }
  .name-fields { margin-bottom:9px; }
  .name-field { padding:7px; }
  .name-field input { padding:7px 6px; }
  .primary-button { min-height:43px; }
  .secondary-button { min-height:36px; margin-top:6px; }
  .global-stats div { padding:3px; }
}

@media (max-width: 360px) {
  .control-panel { min-height:160px; grid-template-columns:1fr 98px 1fr; }
  .dice { width:60px; padding:9px; border-radius:15px; }
  .dot { width:8px; height:8px; }
  .base-row { min-height:62px; }
}

@media (min-width: 700px) {
  .game-layout { border-left:1px solid rgba(255,255,255,.08); border-right:1px solid rgba(255,255,255,.08); box-shadow:0 0 60px rgba(0,0,0,.8); }
}

@media (orientation: landscape) and (max-height: 600px) {
  body { overflow:auto; }
  .game-screen { min-height:650px; height:auto; }
  .game-layout { min-height:650px; }
}