/* Next Gen presentation. Retro retains its original stylesheet and geometry. */
html[data-graphics=next]{--gold:#ffe084;--ink:#050d19;--edge:#9ebfdf35;--ice:#b8d9f3}
html[data-graphics=next] body{background:radial-gradient(ellipse at 12% 0,#123554 0,transparent 48%),radial-gradient(ellipse at 100% 85%,#292612 0,transparent 48%),#030812}
html[data-graphics=next] .arcade{max-width:790px}
html[data-graphics=next] .brand{letter-spacing:2px;color:#c4d6e9}
html[data-graphics=next] .badge{background:linear-gradient(135deg,#fff3b2,#edbf3b);border:1px solid #fff1ba;border-bottom:3px solid #927027;border-radius:7px;box-shadow:0 4px 16px #e6bb3220}
html[data-graphics=next] .player-button{border:1px solid var(--edge);background:linear-gradient(145deg,#20374b,#0b192a);padding:10px 14px;min-height:44px;border-radius:9px;color:#e2ecf7;font-size:13px}
html[data-graphics=next] .game-shell{border:1px solid #88a9c347;border-radius:18px;box-shadow:0 28px 80px #0009,inset 0 1px #fff2}
html[data-graphics=next] .topline{background:linear-gradient(100deg,#172b40,#0b1726);border-bottom:1px solid var(--edge);color:#aabfd4;font-size:12px;letter-spacing:1px}
html[data-graphics=next] #run-mode{color:var(--gold);font-weight:800}
html[data-graphics=next] #overlay{background:radial-gradient(ellipse at 50% 37%,#0b20342b,transparent 42%),linear-gradient(180deg,#040b18eb,#06132368 35%,#040c19ed 75%)}
html[data-graphics=next] .start-card{max-width:470px;padding:18px 28px;gap:0;overflow-y:auto;justify-content:safe center;touch-action:pan-y;scrollbar-width:thin}
html[data-graphics=next] .start-card>*{flex-shrink:0}
html[data-graphics=next] .eyebrow{color:var(--gold);font-size:12px;letter-spacing:3px}
html[data-graphics=next] .start-card h1{font-size:clamp(32px,5.8vh,48px);line-height:.98;letter-spacing:-.5px;margin:10px 0 0;text-shadow:0 3px 0 #071223,0 8px 24px #0008}
html[data-graphics=next] h1 em{background:linear-gradient(180deg,#fff6bd,#ffe05b 60%,#dba629);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none}
html[data-graphics=next] .start-card .portrait{width:172px;height:204px;flex:0 0 204px;margin:0 auto;filter:drop-shadow(0 9px 14px #0008)}
html[data-graphics=next] .portrait-hint{font-size:12px;letter-spacing:.7px;color:#a7c1d9;margin:0 0 6px}
html[data-graphics=next] .play-hint{font-size:14px;color:#d5e2ef;margin:4px 0 14px}
html[data-graphics=next] .primary{background:linear-gradient(115deg,#fff0a2,#ffdb4a 60%,#eebe30);border:1px solid #fff1b3;border-bottom:3px solid #aa7b17;border-radius:10px;color:#081429;box-shadow:inset 0 1px #fff9,0 6px 20px #0004;font-weight:900;text-shadow:0 1px #fff3;transition:transform .16s,box-shadow .16s,filter .16s}
html[data-graphics=next] .primary:hover{filter:brightness(1.08);box-shadow:inset 0 1px #fff9,0 8px 25px #f4cc3030}
html[data-graphics=next] .primary:active{transform:translateY(2px) scale(.99);box-shadow:inset 0 2px 5px #5d450733}
html[data-graphics=next] .secondary,html[data-graphics=next] .icon-button,html[data-graphics=next] .leader-link{border:1px solid #8caec047;background:linear-gradient(135deg,#1c3449,#0b1b2c);border-radius:9px;color:#e6f1fb;box-shadow:inset 0 1px #cce6ff0c;transition:border-color .16s,background .16s,transform .16s}
html[data-graphics=next] .secondary:hover,html[data-graphics=next] .icon-button:hover,html[data-graphics=next] .leader-link:hover{border-color:#e9d37b9c;background:#243c51}
html[data-graphics=next] .start-card #start{justify-content:space-between;padding:13px 20px;font-size:24px}
html[data-graphics=next] .start-card #start-daily{position:relative;align-items:flex-start;text-align:left;padding:11px 20px 11px 23px;border-color:#6b94b255;background:linear-gradient(105deg,#203d56,#0d1f32);font-size:22px;overflow:hidden}
html[data-graphics=next] #start-daily::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:3px;background:var(--gold);box-shadow:0 0 12px #ffd55b60}
html[data-graphics=next] .start-card #start-daily small{font-size:12px;line-height:1.4;color:#c0d4e5}
html[data-graphics=next] .daily-note{font-size:12px;line-height:1.4;color:#a9c1d8;margin:7px 0}
html[data-graphics=next] .menu-nav{border:0;gap:8px;padding:0;margin-top:6px}
html[data-graphics=next] .menu-nav a,html[data-graphics=next] .menu-nav button{border:1px solid #9cbad42c;border-radius:9px;background:linear-gradient(145deg,#182b3e,#0a1728);min-height:51px;font-size:12px;letter-spacing:.5px;color:#c9dbea;box-shadow:inset 0 1px #ffffff0b}
html[data-graphics=next] .menu-nav a:hover,html[data-graphics=next] .menu-nav button:hover{border-color:#ffe08480;color:#ffe084}
html[data-graphics=next] .keyhint{font-size:12px;color:#a2b6cc}
html[data-graphics=next] .hud{top:16px;left:18px;right:auto;text-shadow:0 2px 6px #000;filter:none}
html[data-graphics=next] .hud>div{border-left:2px solid var(--gold);padding-left:10px}
html[data-graphics=next] .hud span{font-size:12px;color:#d7e8f8;letter-spacing:2px}
html[data-graphics=next] .hud strong{font-size:58px;line-height:1;letter-spacing:-1px;font-variant-numeric:tabular-nums;color:#fff7d8}
html[data-graphics=next] .hud.score-pop strong{animation:scorePulse .22s ease-out}
@keyframes scorePulse{50%{transform:scale(1.12);color:#ffe084}}
html[data-graphics=next] .rival-panel{background:linear-gradient(100deg,#091626db,#0b1c2bd0);box-shadow:0 3px 12px #0003;border:1px solid #b4cede26;border-top:2px solid #e9cb73;border-radius:6px;padding:8px 10px;width:168px}
html[data-graphics=next] .rival-heading{font-size:11px;letter-spacing:1px;color:#d9c68c}
html[data-graphics=next] .rival-panel td{font-size:13px}
html[data-graphics=next] .power-hud{top:105px;left:18px;width:138px}
html[data-graphics=next] .power-meter{background:linear-gradient(100deg,#0b1d2ddd,#0a1526a8);border:1px solid #91c5e144;border-left:2px solid #a4e4ff;border-radius:6px;padding:8px 9px}
html[data-graphics=next] .power-meter progress{height:5px;background:#344655}
html[data-graphics=next] .power-meter progress::-webkit-progress-value{background:linear-gradient(90deg,#4dadd1,#c1efff)}
html[data-graphics=next] .power-meter progress::-moz-progress-bar{background:#a4e4ff}
html[data-graphics=next] .super-meter{border-color:#e7cd6850;border-left-color:var(--gold)}
html[data-graphics=next] .super-meter progress::-webkit-progress-value{background:linear-gradient(90deg,#cb922d,#fff1ac)}
html[data-graphics=next] .super-meter progress::-moz-progress-bar{background:#ffe084}
html[data-graphics=next] .power-meter b{color:#eaf6ff}
html[data-graphics=next] .pause{border:1px solid #a6c4d865;border-radius:12px;background:linear-gradient(145deg,#213c50e8,#091426e8);box-shadow:0 4px 12px #0004}
html[data-graphics=next] .paused{background:radial-gradient(ellipse at center,#081727a6,#020815f2);backdrop-filter:blur(4px)}
html[data-graphics=next] .paused b{letter-spacing:6px;font-size:64px;color:#fff2c6;text-shadow:0 6px 22px #0008}
html[data-graphics=next] .countdown{background:radial-gradient(circle,#08172830,#020a1866);color:#fff0ac}
html[data-graphics=next] .countdown b{font-size:130px;text-shadow:0 0 45px #fbd45b50;line-height:1.2}
html[data-graphics=next] .countdown span{font-size:14px;letter-spacing:5px}
html[data-graphics=next] #end{background:linear-gradient(180deg,#04102060,#030912d9)}
html[data-graphics=next] .end-card{background:linear-gradient(150deg,#1a3047f5,#071424fc 55%,#101c28fc);border:1px solid #b7cddd55;border-top:3px solid var(--gold);border-radius:15px;box-shadow:0 20px 65px #000a,inset 0 1px #fff2;padding:23px;animation:panelEnter .28s ease-out}
html[data-graphics=next] .end-card h2{font-size:37px;letter-spacing:1px;color:#eff7ff}
html[data-graphics=next] .end-card .result{padding:10px 0 14px;border-bottom:1px solid #ffe08435;background:radial-gradient(ellipse,#efc95013,transparent 65%)}
html[data-graphics=next] .end-card .result strong{font-size:86px;line-height:1;color:#fff0b3;text-shadow:0 0 25px #ffdf3620;font-variant-numeric:tabular-nums}
html[data-graphics=next] .end-card .result span{font-size:12px;color:#adc4db;letter-spacing:3px}
html[data-graphics=next] .end-card p{font-size:14px;line-height:1.5}
html[data-graphics=next] .end-summary{background:#07142470;border:1px solid #b7cddd25;border-radius:9px;padding:10px}
html[data-graphics=next] #run-stats{font-size:13px;color:#d2e2ed}
html[data-graphics=next] #share-challenge{border-color:#dcca7e70;color:#fff0b1;background:linear-gradient(100deg,#363423,#1e2c37);min-height:48px;font-size:14px}
html[data-graphics=next] .player-dialog{background:linear-gradient(145deg,#193047,#091525 60%);border:1px solid #96b6d15c;border-top:3px solid var(--gold);border-radius:17px;box-shadow:0 25px 90px #000a;padding:28px;scrollbar-width:thin;scrollbar-color:#6f8598 #0a1727;overscroll-behavior:contain}
html[data-graphics=next] .player-dialog[open]{animation:panelEnter .2s ease-out}
@keyframes panelEnter{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
html[data-graphics=next] .player-dialog h2{font-size:40px;letter-spacing:.6px;margin-bottom:20px;padding-right:24px}
html[data-graphics=next] .dialog-close{border:1px solid #aac2db26;border-radius:9px;background:#07162880;line-height:1}
html[data-graphics=next] .player-dialog::backdrop{background:#010711bf;backdrop-filter:blur(7px)}
html[data-graphics=next] .settings-dialog section{background:#08172770;border:1px solid #96b6d126;border-radius:11px;padding:13px 15px;margin:12px 0}
html[data-graphics=next] .settings-dialog h3{color:#fff1c2;font-size:16px;margin:0 0 9px}
html[data-graphics=next] .settings-dialog p{color:#abc3d9;font-size:14px}
html[data-graphics=next] .graphics-control{padding:4px;background:#040e1d;border:1px solid #8ba7be30;border-radius:10px;gap:4px}
html[data-graphics=next] .graphics-control button{flex:1;border:0;background:transparent;border-radius:7px;color:#b4cce0}
html[data-graphics=next] .graphics-control button[aria-pressed=true]{background:linear-gradient(130deg,#fff0aa,#ecc64b);box-shadow:0 2px 7px #0005;color:#0c1a2b}
html[data-graphics=next] .player-dialog input:not([type=checkbox]),html[data-graphics=next] select,html[data-graphics=next] .board-modes input{border:1px solid #8daec451;border-radius:9px;background:#050f1f;color:#edf5fe;padding:12px;min-height:44px;font:inherit;max-width:100%}
html[data-graphics=next] input:focus-visible,html[data-graphics=next] select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
html[data-graphics=next] #journey-ghost{appearance:none;flex:0 0 38px;width:38px;height:22px;min-height:22px;padding:0;border:1px solid #698298;border-radius:20px;background:#273d50;position:relative;vertical-align:middle;margin:0 8px 0 0;cursor:pointer}
html[data-graphics=next] #journey-ghost::after{content:'';display:block;width:14px;height:14px;border-radius:50%;background:#e4edf5;position:absolute;top:3px;left:3px;transition:transform .16s}
html[data-graphics=next] #journey-ghost:checked{background:#caa443;border-color:#ffe084}
html[data-graphics=next] #journey-ghost:checked::after{transform:translateX(16px);background:#fff9e6}
html[data-graphics=next] #journey-tasks p{border-left:2px solid #d9bd69;background:#b9d7eb08;border-radius:0 6px 6px 0;padding:10px;margin:7px 0}
html[data-graphics=next] .costume-card{background:radial-gradient(ellipse at 50% 28%,#345b784d,transparent 66%),linear-gradient(145deg,#1b3248,#081626);border:1px solid #90acc237;border-radius:13px;padding:15px;position:relative;overflow:hidden}
html[data-graphics=next] .costume-card.selected{border-color:#ffdf3680;box-shadow:inset 0 0 25px #ffe0840c}
html[data-graphics=next] .costume-card canvas{height:156px;width:124px;margin:auto;filter:drop-shadow(0 7px 9px #0008)}
html[data-graphics=next] .costume-card.locked canvas{filter:grayscale(.8);opacity:.5}
html[data-graphics=next] .costume-card h3{font:800 24px 'Barlow Condensed',sans-serif;color:#fff0c0}
html[data-graphics=next] .costume-card p{font-size:14px;color:#b5cbe0;line-height:1.4}
html[data-graphics=next] .costume-card.selected button{background:#dcc26818;color:#ffe084;border-color:#dcc26850;opacity:1}
html[data-graphics=next] .board{margin:30px auto}
html[data-graphics=next] .board-title{padding:25px;border:1px solid #91adc42c;border-radius:15px;background:linear-gradient(100deg,#071526f2,#0b2034b5),url('next-stadium.png') center 45%/cover}
html[data-graphics=next] .board-title h1{font-size:clamp(42px,7vw,70px);line-height:1}
html[data-graphics=next] .board-title p{font-size:14px}
html[data-graphics=next] .board-panel{border-color:#9abbd342;background:linear-gradient(130deg,#11243a,#071626);box-shadow:0 20px 50px #0004}
html[data-graphics=next] .board-tools{background:#91bfe108;border-color:#9abbd32b}
html[data-graphics=next] .board-table td{border-color:#a9c7df16}
html[data-graphics=next] .board-table tbody tr:nth-child(-n+3){background:#ffdc6910}
html[data-graphics=next] .board-table tbody tr.mine{background:#8acef020;box-shadow:inset 3px 0 #9ad9f8}
html[data-graphics=next] .board-table td:nth-child(3){color:#ffe9a3}
html[data-graphics=next] .my-rank{background:linear-gradient(100deg,#33433760,#13263b);border-color:#dcca7e66}
html[data-graphics=next] .intro-top button{background:#13293ed9;border:1px solid #b6cce048;border-radius:9px;min-height:44px}
html[data-graphics=next] .intro-titles h2{text-shadow:0 5px 20px #000;letter-spacing:1px}
html[data-graphics=next] .compact-footer{color:#97adc3;font-size:11px}
@media(max-width:600px){html[data-graphics=next] .arcade{padding:8px}html[data-graphics=next] .start-card{padding:14px 18px}html[data-graphics=next] .topline{font-size:10px}html[data-graphics=next] .hud{left:12px}html[data-graphics=next] .power-hud{left:12px}html[data-graphics=next] .player-dialog{padding:23px 18px}html[data-graphics=next] .board-title{padding:18px}html[data-graphics=next] .costume-list{gap:8px}html[data-graphics=next] .costume-card{padding:10px}html[data-graphics=next] .costume-card canvas{height:136px;width:109px}}
@media(max-height:800px){html[data-graphics=next] .start-card .portrait{width:128px;height:148px;flex-basis:148px}html[data-graphics=next] .start-card h1{font-size:34px}html[data-graphics=next] .start-card .keyhint{display:none}html[data-graphics=next] .menu-nav a,html[data-graphics=next] .menu-nav button{min-height:44px}html[data-graphics=next] .start-card #start{min-height:46px;padding:9px 17px}html[data-graphics=next] .start-card #start-daily{padding:8px 17px}}
@media(max-height:650px){html[data-graphics=next] .start-card{justify-content:flex-start}html[data-graphics=next] .start-card .portrait{height:110px;flex-basis:110px;width:98px}html[data-graphics=next] .end-card{padding:15px}html[data-graphics=next] .end-card .result strong{font-size:64px}}
@media(prefers-reduced-motion:reduce){html[data-graphics=next] *,html[data-graphics=next] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}