/* DUNEWAKE in play: the TV stage + HUD, the PC layout, the phone controls, the bag sheet. Tokens from style.css. */
html[data-game="dw"] .dw-stage { position: relative; width: 100%; height: 100%; overflow: hidden; background: #1a140f; }
.dw-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dw-title.tv .dw-title-art { width: min(70vw, 1200px); }
.dw-final { color: var(--dw-paper); }
.dw-tally { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; font-family: var(--dw-cond); font-size: 22px; color: var(--dw-sand); }
.dw-tally b { font-family: var(--dw-display); font-size: 44px; color: var(--dw-paper); margin-right: 6px; }
.dw-finalbtns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.dw-btn.ghost { background: transparent; border-color: var(--dw-brass); color: var(--dw-sand); box-shadow: none; }
.dw-keep, .dw-wait { font-family: var(--dw-body); color: var(--dw-sand); }

/* TV HUD: the same brass console as the phones (rendered parts in /dw/ui), big enough to read from the couch */
.dw-hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--dw-cond); color: var(--dw-paper); }
.dw-hudtop { position: absolute; top: 2.2vh; left: 1.6vw; display: flex; align-items: center; gap: 1.2vw; padding: .8vh 1.4vw; border-radius: 1.2vh;
  background: linear-gradient(rgba(70,52,26,.92), rgba(30,21,10,.92)); box-shadow: inset 0 1px 0 rgba(255,232,170,.3), 0 0 0 2px #6b4c1f, 0 1vh 2vh rgba(0,0,0,.5); }
.dw-hulltag, .dw-wind, .dw-hold { font: 800 2vh var(--dw-cond); letter-spacing: .14em; color: #e7c48a; text-shadow: 0 2px 0 #000; }
.dw-hold b { font: 900 2.6vh var(--dw-display); color: #f6dc98; letter-spacing: .04em; }
.dw-hullbar { position: relative; width: 24vw; aspect-ratio: 900 / 183; }
.dw-hullbar img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; filter: drop-shadow(0 .3vh .3vh rgba(0,0,0,.6)); }
.dw-hullbar .glass { position: absolute; left: 12%; right: 12%; top: 27%; bottom: 41%; border-radius: 99px; overflow: hidden; background: rgba(10,6,3,.6); z-index: 3; box-shadow: inset 0 2px 4px rgba(0,0,0,.6); }
.dw-hullbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ffe7a8, #d9a046 60%, #8a5a18); box-shadow: 0 0 12px rgba(255,180,70,.6); transition: width .3s; }
.dw-hullbar.low i { background: linear-gradient(#ff9a7a, #e0361e 60%, #7a1008); animation: dwh-throb .8s ease-in-out infinite; }
.dw-hullbar.hit { animation: dwh-hit .35s ease-out; }
.dw-wind { display: flex; align-items: center; gap: .6vw; }
.dw-wind .rose { position: relative; width: 4.2vh; height: 4.2vh; border-radius: 50%; background: radial-gradient(#f3e6cb 55%, #c9a25a 57%, #6b4c1f 70%, #2a1c0e 72%); box-shadow: 0 .4vh .8vh rgba(0,0,0,.6); }
.dw-wind .rose i { position: absolute; left: 50%; top: 50%; width: .7vh; height: 3.2vh; margin: -1.6vh 0 0 -.35vh; background: linear-gradient(#2a6a9a 50%, #2a1c0e 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transition: transform 1s; }
.dw-minimap { position: absolute; top: 2.2vh; right: 1.6vw; width: 22vh; height: 22vh; padding: .9vh; box-sizing: content-box; border-radius: .8vh;
  background: linear-gradient(135deg, #f6dc98, #8a6320 30%, #e7c48a 50%, #6b4c1f 75%, #c9a25a); box-shadow: 0 1vh 2vh rgba(0,0,0,.55); }
.dw-crew { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 1.2vw; padding: 1.4vh 2vw 2.2vh; background: linear-gradient(transparent, rgba(20,14,9,.7)); }
.dw-crewcard { position: relative; min-width: 15vw; display: grid; grid-template-columns: 6vh 1fr; gap: .2vh 1vw; align-items: center; padding: .9vh 1.2vw .9vh .8vw; border-radius: 1.2vh;
  background: linear-gradient(rgba(42,28,18,.95), rgba(22,14,8,.96)); box-shadow: 0 0 0 .3vh #7a5a28, inset 0 1px 0 rgba(255,232,170,.18), 0 .8vh 1.6vh rgba(0,0,0,.55); transition: transform .2s; }
.dw-crewcard .art { grid-row: 1 / span 3; width: 6vh; height: 6vh; display: grid; place-items: center; }
.dw-crewcard .art img { max-width: 6vh; max-height: 6vh; filter: drop-shadow(0 .4vh .4vh rgba(0,0,0,.6)); }
.dw-crewcard.down { box-shadow: 0 0 0 .3vh #e0361e, 0 0 2vh rgba(224,54,30,.6); animation: dwh-throb .7s ease-in-out infinite; }
.dw-crewcard.away { filter: grayscale(.7) brightness(.7); }
.dw-crewname { font: 900 2.8vh var(--dw-display); letter-spacing: .03em; color: #f6dc98; text-shadow: 0 .25vh 0 #000; white-space: nowrap; }
.dw-crewst { font: 800 1.8vh var(--dw-cond); color: #d7bd8c; text-transform: uppercase; letter-spacing: .12em; }
.dw-crewlv { position: absolute; top: -1.2vh; right: -.8vw; min-width: 3.4vh; height: 3.4vh; border-radius: 50%; display: grid; place-items: center; font: 900 1.7vh var(--dw-display); color: #2b1a0b;
  background: radial-gradient(#ffe7a8, #c9a25a 60%, #6b4c1f); box-shadow: 0 .3vh .6vh rgba(0,0,0,.6); }
.dw-crewhp { height: .9vh; background: rgba(0,0,0,.6); border-radius: 1vh; overflow: hidden; box-shadow: inset 0 1px 2px #000; } .dw-crewhp i { display: block; height: 100%; background: linear-gradient(#c8f0a8, #5fb45a); transition: width .25s; }
.dw-banner { position: absolute; left: 50%; top: 16vh; transform: translate(-50%, -2vh) scale(.9); opacity: 0; transition: opacity .25s, transform .35s cubic-bezier(.2,1.6,.4,1); font: 900 5.2vh var(--dw-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  padding: 1.2vh 3vw; color: #2b1a0b; text-shadow: 0 1px 0 rgba(255,243,205,.7); background: linear-gradient(#f6dc98, #c9a25a 55%, #8a6320); border-radius: 1.2vh; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 .35vh #4a3212, 0 1.4vh 3vh rgba(0,0,0,.6); }
.dw-banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.dw-banner.alarm { color: #fff0e8; text-shadow: 0 .3vh 0 rgba(60,10,4,.8); background: linear-gradient(#ff8a6a, #c0281a 60%, #6a0c04); animation: dwh-throb .6s ease-in-out 3; }
.dw-banner.gold { background: linear-gradient(#fff1b8, #ffd060 55%, #c08a20); box-shadow: 0 0 3vh rgba(255,200,80,.7), 0 0 0 .35vh #6a4a10, 0 1.4vh 3vh rgba(0,0,0,.6); }
@keyframes dwh-throb { 50% { filter: brightness(1.3); } }
@keyframes dwh-hit { 25% { transform: translateX(-.6vw) scale(1.05); } 60% { transform: translateX(.4vw); } }
@media (prefers-reduced-motion: reduce) { .dw-hud * { animation: none !important; transition: none !important; } }

/* PC crewmate: the world view + the controls */
.dw-pc { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 420px; }
.dw-pcworld { position: relative; overflow: hidden; }
.dw-pcside { position: relative; overflow: hidden; border-left: 2px solid #3a2d20; }

/* the phone */
.dw-phone { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; background: radial-gradient(120% 80% at 50% 0%, #2c231b, #17110c); color: var(--dw-paper); font-family: var(--dw-body); overflow: hidden; }
.dw-pbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #120d09; border-bottom: 2px solid #3a2d20; font-family: var(--dw-cond); font-weight: 700; }
.dw-pst { font-family: var(--dw-display); font-weight: 800; font-size: 22px; letter-spacing: .04em; color: var(--dw-brass); }
.dw-phull { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dw-sand); letter-spacing: .1em; }
.dw-phull i { flex: 1; height: 8px; background: #000; border-radius: 6px; overflow: hidden; } .dw-phull b { display: block; height: 100%; background: linear-gradient(#e7c48a, #b88a48); }
.dw-pgold { color: #ffd27a; font-size: 18px; }
.dw-pbag { font-family: var(--dw-display); font-weight: 800; font-size: 16px; letter-spacing: .06em; color: #fff7ea; background: #3a2d20; border: 2px solid var(--dw-brass); border-radius: 8px; padding: 6px 12px; position: relative; }
.dw-pbag.dot::after { content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--dw-rust); }
.dw-pbody { position: relative; display: grid; align-content: start; gap: 12px; padding: 12px max(12px, env(safe-area-inset-left, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)); overflow: auto; }
.dw-ptitle { font-family: var(--dw-display); font-weight: 800; font-size: 28px; text-transform: uppercase; letter-spacing: .03em; }
.dw-hint { color: var(--dw-sand); font-size: 14px; margin: 0; }
.dw-center { display: grid; place-items: center; min-height: 50vh; }
.dw-row { display: flex; gap: 8px; } .dw-row > * { flex: 1; }
.dw-strow { display: flex; justify-content: flex-end; }
.dw-ghost { font: 600 13px var(--dw-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--dw-sand); background: transparent; border: 1px solid #4a3a2a; border-radius: 8px; padding: 6px 10px; }
.dw-stations { display: grid; gap: 10px; }
.dw-station { text-align: left; display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--dw-brass); background: linear-gradient(#3a2d20, #2a2018); color: var(--dw-paper); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 #120d09; }
.dw-station b { font-family: var(--dw-display); font-size: 24px; letter-spacing: .04em; text-transform: uppercase; }
.dw-station span { color: var(--dw-sand); font-size: 14px; } .dw-station.taken { opacity: .45; }
.dw-tog { font-family: var(--dw-display); font-weight: 800; font-size: 18px; letter-spacing: .05em; text-transform: uppercase; color: var(--dw-paper); background: linear-gradient(#4a3a2a, #2e241a); border: 2px solid #6d5434; border-radius: 10px; padding: 12px 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 3px 0 #0f0b08; touch-action: manipulation; }
.dw-tog.on { background: linear-gradient(#c9a25a, #8a6320); color: #1d1712; border-color: #f0d08a; }
.dw-tog:disabled, .dw-big:disabled { opacity: .45; }
.dw-tog.wide { flex: 1 1 100%; }
.dw-big { font-family: var(--dw-display); font-weight: 900; font-size: 30px; letter-spacing: .06em; text-transform: uppercase; color: #fff7ea; background: linear-gradient(#d4672a, #a8451a); border: 3px solid #5a2a10; border-radius: 14px; padding: 16px 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 5px 0 #3a1806; touch-action: manipulation; }
.dw-big:active, .dw-tog:active { transform: translateY(2px); }
/* helm */
.dw-helm { display: grid; grid-template-columns: 1fr 64px; gap: 12px; align-items: center; }
.dw-wheelwrap { position: relative; aspect-ratio: 1; max-height: 46vh; justify-self: center; width: 100%; max-width: 46vh; }
.dw-wheel { position: absolute; inset: 0; touch-action: none; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.dw-wheel img { width: 100%; height: 100%; pointer-events: none; user-select: none; }
.dw-wparrow { position: absolute; left: 50%; top: 50%; width: 0; height: 0; font-size: 26px; color: #ffd27a; transform-origin: 0 0; pointer-events: none; text-shadow: 0 2px 4px #000; }
.dw-lever { height: 40vh; border-radius: 32px; background: #0f0b08; border: 3px solid #6d5434; display: flex; align-items: flex-end; overflow: hidden; touch-action: none; }
.dw-lever i { display: block; width: 100%; background: linear-gradient(#e7c48a, #a8451a); border-radius: 24px; }
/* gun */
.dw-arc { width: 100%; height: auto; touch-action: none; background: radial-gradient(80% 100% at 50% 100%, #2a2018, #120d09); border-radius: 12px; border: 2px solid #3a2d20; }
.dw-reload { position: relative; height: 22px; background: #0f0b08; border: 2px solid #6d5434; border-radius: 12px; overflow: hidden; }
.dw-reload .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #8a6320, #e7c48a); }
.dw-reload .sweet { position: absolute; top: 0; bottom: 0; background: rgba(255,210,122,.35); border-left: 2px solid #ffd27a; border-right: 2px solid #ffd27a; z-index: 1; }
.dw-reload.ready .fill { background: linear-gradient(90deg, #5f8a5b, #8fc48a); } .dw-reload.bonus { box-shadow: 0 0 12px #ffd27a; }
/* nav */
.dw-navmap { width: 100%; height: auto; border-radius: 12px; border: 2px solid var(--dw-brass); touch-action: manipulation; }
/* engineer */
.dw-pipgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dw-pipcol { display: grid; gap: 6px; justify-items: stretch; }
.dw-pips { display: flex; flex-direction: column-reverse; gap: 5px; padding: 8px; background: #0f0b08; border-radius: 10px; border: 2px solid #6d5434; }
.dw-pips i { height: 26px; border-radius: 6px; background: #2a2018; } .dw-pips i.on { background: linear-gradient(#ffd27a, #c9a25a); box-shadow: 0 0 8px rgba(255,210,122,.5); }
.dw-piplabel { text-align: center; font-family: var(--dw-display); font-weight: 800; letter-spacing: .06em; color: var(--dw-sand); }
.dw-heatrow { display: flex; align-items: center; gap: 10px; font-family: var(--dw-cond); font-weight: 700; color: var(--dw-sand); }
.dw-heat { flex: 1; height: 16px; background: #0f0b08; border: 2px solid #6d5434; border-radius: 10px; overflow: hidden; } .dw-heat i { display: block; height: 100%; background: linear-gradient(90deg, #c9a25a, #e0742f); } .dw-heat.hot i { background: #e0361e; }
.dw-alert { font-family: var(--dw-display); font-weight: 800; font-size: 20px; color: #ffb39a; text-align: center; padding: 8px; border: 2px solid #e0361e; border-radius: 10px; animation: dwpulse 1s infinite; }
@keyframes dwpulse { 50% { background: rgba(224,54,30,.18); } }
@media (prefers-reduced-motion: reduce) { .dw-alert { animation: none; } }
/* on foot */
.dw-footbar { display: grid; gap: 6px; }
.dw-fhp { height: 14px; background: #0f0b08; border: 2px solid #6d5434; border-radius: 10px; overflow: hidden; } .dw-fhp i { display: block; height: 100%; background: linear-gradient(#a6d79e, #5f8a5b); } .dw-fhp.down i { background: #e0361e; }
.dw-fhint { min-height: 20px; font-family: var(--dw-cond); font-weight: 600; font-size: 17px; color: #ffd27a; text-align: center; }
.dw-sticks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dw-stick { position: relative; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(#2a2018, #120d09); border: 3px solid #6d5434; touch-action: none; display: grid; place-items: center; }
.dw-stick i { width: 42%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(#c9a25a, #7d5e26); box-shadow: 0 4px 8px rgba(0,0,0,.5); pointer-events: none; }
.dw-stick.aim i { background: linear-gradient(#e0742f, #a8451a); }
.dw-tog.use { background: linear-gradient(#5f8a5b, #35552f); border-color: #8fc48a; }
.dw-big.cast { font-size: 22px; padding: 12px; background: linear-gradient(#3f7fb0, #24506f); border-color: #16344a; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 0 #0c1e2b; }
/* create */
.dw-crrow { display: grid; gap: 6px; } .dw-crrow > span { font-family: var(--dw-cond); font-weight: 700; color: var(--dw-sand); text-transform: uppercase; letter-spacing: .08em; }
.dw-crsw { display: flex; gap: 8px; flex-wrap: wrap; }
.dw-sw { width: 48px; height: 48px; border-radius: 10px; border: 2px solid #4a3a2a; background: #2a2018; color: var(--dw-paper); font: 800 18px var(--dw-display); } .dw-sw.on { border-color: #ffd27a; box-shadow: 0 0 0 3px rgba(255,210,122,.35); }
/* toasts */
.dw-toasts { position: absolute; left: 12px; right: 12px; top: 58px; display: grid; gap: 6px; pointer-events: none; z-index: 5; }
.dw-toast { justify-self: center; background: rgba(18,13,9,.94); border: 2px solid var(--dw-brass); border-radius: 10px; padding: 8px 14px; font-family: var(--dw-cond); font-weight: 700; font-size: 17px; transition: opacity .4s, transform .4s; }
.dw-toast.gold { border-color: #ffd27a; color: #ffd27a; } .dw-toast.alarm { border-color: #e0361e; color: #ffb39a; } .dw-toast.out { opacity: 0; transform: translateY(-8px); }
/* the bag sheet */
.dw-sheet { position: absolute; inset: 0; z-index: 8; background: #17110c; transform: translateY(102%); transition: transform .25s; display: grid; grid-template-rows: auto 1fr; }
.dw-sheet.open { transform: none; }
@media (prefers-reduced-motion: reduce) { .dw-sheet { transition: none; } }
.dw-sheethead { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 2px solid #3a2d20; }
.dw-tabs { flex: 1; display: flex; gap: 6px; }
.dw-tab { flex: 1; font: 800 16px var(--dw-display); letter-spacing: .06em; color: var(--dw-sand); background: #2a2018; border: 2px solid #4a3a2a; border-radius: 8px; padding: 8px 4px; } .dw-tab.on { color: #1d1712; background: var(--dw-brass); border-color: #f0d08a; }
.dw-x { width: 40px; height: 40px; border-radius: 8px; border: 2px solid #4a3a2a; background: #2a2018; color: var(--dw-paper); font-size: 18px; }
.dw-pane { overflow: auto; padding: 12px; display: grid; align-content: start; gap: 8px; }
.dw-item, .dw-slot { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; background: #221a13; border: 1px solid #3a2d20; border-left: 4px solid var(--r, #5f8a5b); border-radius: 8px; }
.dw-slot.empty { border-left-color: #3a2d20; opacity: .7; }
.dw-icon { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; background: #120d09; } .dw-icon.blank { border: 1px dashed #4a3a2a; }
.dw-iname { min-width: 0; display: grid; } .dw-iname b { font-family: var(--dw-cond); font-size: 17px; } .dw-iname span { font-size: 12.5px; color: var(--dw-sand); overflow-wrap: anywhere; }
.dw-iact { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.dw-mini { font: 700 13px var(--dw-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--dw-paper); background: #3a2d20; border: 1px solid #6d5434; border-radius: 6px; padding: 6px 8px; }
.dw-mini.gold { background: #8a6320; border-color: #f0d08a; color: #fff7ea; } .dw-mini.ghost { background: transparent; color: var(--dw-sand); }
.dw-level { display: flex; gap: 10px; align-items: baseline; font-family: var(--dw-cond); } .dw-level b { font-family: var(--dw-display); font-size: 24px; } .dw-pts { color: #ffd27a; font-weight: 700; }
.dw-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dw-stat { display: grid; grid-template-columns: auto auto 1fr auto; gap: 6px; align-items: center; background: #221a13; border-radius: 8px; padding: 6px 8px; }
.dw-stat b { font-family: var(--dw-display); font-size: 17px; } .dw-stat .num { font: 800 20px var(--dw-display); color: #ffd27a; } .dw-stat .d { font-size: 11px; color: var(--dw-sand); }
.dw-slots { display: grid; gap: 6px; }
.dw-weight { display: grid; gap: 4px; font-family: var(--dw-cond); color: var(--dw-sand); } .dw-weight i { height: 8px; background: #000; border-radius: 6px; overflow: hidden; } .dw-weight b { display: block; height: 100%; background: #c9a25a; } .dw-weight.over b { background: #e0361e; }
.dw-holdgrid { position: relative; width: 100%; background-image: linear-gradient(rgba(201,162,90,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(201,162,90,.18) 1px, transparent 1px); background-size: 12.5% 20%; background-color: #120d09; border: 2px solid #6d5434; border-radius: 8px; }
.dw-holdit { position: absolute; padding: 2px; } .dw-holdit .dw-icon { width: 100%; height: 100%; border: 2px solid var(--r); }
.dw-repair, .dw-shop { display: grid; gap: 6px; padding: 8px; background: #1f1812; border-radius: 10px; border: 1px solid #3a2d20; }
.dw-repair { grid-template-columns: auto 1fr auto; align-items: center; } .dw-shopname { font: 800 20px var(--dw-display); color: var(--dw-brass); text-transform: uppercase; }
.dw-phone.pc .dw-sticks { display: none; }
/* TV: raiders off the screen */
.dw-offs { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.dw-off { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; }
.dw-off i { width: 6vh; height: 6vh; background: radial-gradient(circle at 35% 50%, #ff8a6a, #c0281a 60%, #6a0c04); clip-path: polygon(100% 50%, 15% 0, 32% 50%, 15% 100%); filter: drop-shadow(0 .4vh .6vh rgba(0,0,0,.7)); }
.dw-off b { position: absolute; top: 6.4vh; font: 900 1.9vh var(--dw-display); color: #ffd0c0; text-shadow: 0 .2vh 0 #000, 0 0 .8vh #000; white-space: nowrap; }
.dw-off.aiming i { animation: dwh-throb .25s ease-in-out infinite; transform-origin: center; }