/* ===================================================================
   PONG 2099 — design system "Néon rétro-futuriste"
   Colours come from the selected court theme through --app-* (set in app.js);
   everything below is themed from those variables.
   ========================================================================== */

:root{
 --app-accent-end:#1f3bff;
 --app-on-accent:#ffffff;--app-logo:#10122a;--app-accent2-ink:#c73a26;
 --app-deco:radial-gradient(70vmax 46vmax at 88% -12%,color-mix(in srgb,var(--app-accent2) 30%,transparent),transparent 70%),radial-gradient(56vmax 44vmax at -12% 108%,color-mix(in srgb,var(--app-accent) 18%,transparent),transparent 70%);
 --font-display:'Helvetica Neue',Helvetica,Arial,'Nimbus Sans','Liberation Sans',sans-serif;
 --font-ui:'Helvetica Neue',Helvetica,Arial,'Nimbus Sans','Liberation Sans',sans-serif;
 --font-mono:'Helvetica Neue',Helvetica,Arial,'Nimbus Sans','Liberation Sans',sans-serif;
 --app-page:#ffffff;--app-surface:#f4f6ffee;--app-panel:#fffffff2;--app-text:#10122a;--app-muted:#555b7e;--app-border:#d5dbf5;--app-accent:#1f3bff;--app-accent2:#f5503a;
 --r-sm:8px;--r-md:14px;--r-lg:20px;
 --ease:cubic-bezier(.2,.8,.2,1);
 --header-h:72px;
 --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
 --accent-a:color-mix(in srgb,var(--app-accent) 16%,transparent);
 --accent-b:color-mix(in srgb,var(--app-accent) 38%,transparent);
 --line:color-mix(in srgb,var(--app-border) 70%,transparent);
 --glass:color-mix(in srgb,var(--app-panel) 88%,transparent);
 --scrim:#04050d66;--backdrop:#02030acc;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{color-scheme:light;background:var(--app-page);font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;color:var(--app-text);font-family:var(--font-ui);font-weight:500;line-height:1.4;background:var(--app-page);overflow-x:hidden;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
h1,h2,h3,p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--app-accent);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 5px var(--accent-a)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:8px;z-index:100;background:var(--app-accent);color:var(--app-on-accent);padding:10px 14px;border-radius:8px;font-weight:700}
.skip-link:focus{left:8px}

/* --- Stage: aurora glow + perspective grid floor + faint scanlines --- */
body::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;background:var(--app-deco),var(--app-page)}
body::after{content:"";position:fixed;left:-30%;right:-30%;bottom:-14vh;height:52vh;z-index:-2;pointer-events:none;opacity:.38;
 background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--app-accent) 55%,transparent) 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,color-mix(in srgb,var(--app-accent) 55%,transparent) 0 1px,transparent 1px 48px);
 transform:perspective(420px) rotateX(64deg);transform-origin:50% 0;
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 55%);mask-image:linear-gradient(to bottom,transparent,#000 55%)}
html::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.028;background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 4px)}
.playing::after{display:none}
/* An engine without <dialog> shows every dialog unless the closed ones are hidden here. */
dialog:not([open]){display:none}
@supports not (color:color-mix(in srgb,#fff,#000)){body::before{background:radial-gradient(70vmax 46vmax at 88% -12%,#a06bff4d,transparent 70%),radial-gradient(56vmax 44vmax at -12% 108%,#c8ff3a2e,transparent 70%),var(--app-page)}.primary-button,.menu-tile.primary,.nav-item.active,.segmented button.selected,.workshop-tabs button.selected{background:linear-gradient(135deg,var(--app-accent),var(--app-accent))}.menu-tile,.mode-card,.skin-button,.theme-card,.preset-card,.settings-card,.online-card,.ach-card,.tutorial-step,.small-button,.icon-button,.back-button,select,input[type=text]{background:var(--app-surface)}.dialog,.hero-card{background:var(--app-panel)}:root{--accent-a:transparent;--accent-b:var(--app-accent);--line:var(--app-border);--glass:var(--app-panel)}}

/* --- Typography --- */
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:.03em;line-height:1.1}
h2{font-size:1.5rem;text-transform:uppercase;letter-spacing:.08em}
h3{font-size:.95rem;text-transform:uppercase;letter-spacing:.12em}
.eyebrow,.section-caption{display:flex;align-items:center;gap:8px;font:600 .7rem/1 var(--font-ui);letter-spacing:.26em;text-transform:uppercase;color:var(--app-muted)}
.tiny-square{width:7px;height:7px;background:var(--app-accent);box-shadow:0 0 10px var(--app-accent);border-radius:1px}
.muted{color:var(--app-muted)}
.micro-badge{padding:4px 9px;border:1px solid var(--accent-b);border-radius:999px;color:var(--app-accent-ink);font:700 .62rem/1 var(--font-ui);letter-spacing:.2em}
kbd{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border:1px solid var(--app-border);border-bottom-width:2px;border-radius:7px;background:var(--app-surface);font:700 .75rem var(--font-mono)}

/* --- Buttons --- */
.primary-button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:54px;padding:0 22px;border-radius:var(--r-md);font:800 .95rem var(--font-display);letter-spacing:.14em;text-transform:uppercase;text-align:left;color:var(--app-on-accent);background:linear-gradient(135deg,var(--app-accent),var(--app-accent-end));box-shadow:0 0 0 1px color-mix(in srgb,var(--app-accent) 70%,#fff 25%),0 10px 34px color-mix(in srgb,var(--app-accent) 30%,transparent);transition:transform .16s var(--ease),filter .2s,box-shadow .2s}
.primary-button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.primary-button:active{transform:scale(.96);filter:brightness(1.18)}
.primary-button:disabled{opacity:.45;filter:grayscale(.6);box-shadow:none;cursor:not-allowed}
.small-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--app-border);border-radius:12px;background:color-mix(in srgb,var(--app-surface) 92%,transparent);font:600 .82rem var(--font-ui);letter-spacing:.06em;text-transform:uppercase;transition:border-color .2s,box-shadow .2s,transform .15s var(--ease)}
.small-button:hover{border-color:var(--app-accent);box-shadow:0 0 18px var(--accent-a)}
.small-button:active{transform:scale(.94);border-color:var(--app-accent);box-shadow:0 0 22px var(--accent-a)}
.small-button:disabled{opacity:.4;cursor:not-allowed}
.text-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 10px;color:var(--app-muted);font:600 .8rem var(--font-ui);letter-spacing:.06em;transition:color .2s}
.text-button:hover{color:var(--app-text)}
.icon-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--app-border);border-radius:12px;background:color-mix(in srgb,var(--app-surface) 92%,transparent);transition:border-color .2s,box-shadow .2s}
.icon-button:hover{border-color:var(--app-accent);box-shadow:0 0 18px var(--accent-a)}
.icon-button svg{width:22px;height:22px}
.back-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border:1px solid var(--app-border);border-radius:12px;background:color-mix(in srgb,var(--app-surface) 92%,transparent);font:700 .8rem var(--font-display);letter-spacing:.14em;text-transform:uppercase;transition:border-color .2s}
.back-button:hover{border-color:var(--app-accent)}
.back-button span{font-size:1.3rem;line-height:1;color:var(--app-accent-ink)}

/* --- Form controls --- */
select,input[type=text],input:not([type]){appearance:none;-webkit-appearance:none;min-height:44px;padding:0 14px;border:1px solid var(--app-border);border-radius:12px;background:color-mix(in srgb,var(--app-surface) 92%,transparent);font:600 .9rem var(--font-ui);transition:border-color .2s,box-shadow .2s}
select{padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a9b4e0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:11px}
select:hover,input[type=text]:hover{border-color:color-mix(in srgb,var(--app-accent) 55%,var(--app-border))}
select:focus,input[type=text]:focus{outline:0;border-color:var(--app-accent);box-shadow:0 0 0 3px var(--accent-a)}
option{background:#0f1530;color:#eef2ff}
input::placeholder{color:color-mix(in srgb,var(--app-muted) 70%,transparent)}
input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--app-accent),color-mix(in srgb,var(--app-accent) 40%,var(--app-accent)));box-shadow:0 0 12px var(--accent-a)}
input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--app-accent),color-mix(in srgb,var(--app-accent) 40%,var(--app-accent)))}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:#fff;border:2px solid var(--app-accent);box-shadow:0 0 14px var(--accent-b)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--app-accent)}
input[type=checkbox][role=switch]{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:50px;height:28px;border-radius:99px;border:1px solid var(--app-border);background:color-mix(in srgb,var(--app-surface) 92%,transparent);cursor:pointer;transition:background .2s,border-color .2s}
input[type=checkbox][role=switch]::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--app-muted);transition:transform .2s var(--ease),background .2s,box-shadow .2s}
input[type=checkbox][role=switch]:checked{border-color:var(--app-accent);background:var(--accent-a)}
input[type=checkbox][role=switch]:checked::after{transform:translateX(22px);background:var(--app-accent);box-shadow:0 0 12px var(--app-accent)}
input[type=color]{width:44px;height:44px;padding:3px;border:1px solid var(--app-border);border-radius:12px;background:transparent;cursor:pointer}
output{font:700 .78rem var(--font-mono);color:var(--app-accent-ink);min-width:3.4em;text-align:right}

/* ===================================================================
   Shell: header, screen bar, footer
   ========================================================================== */
.app-shell{position:relative;max-width:1440px;margin:0 auto;padding:0 clamp(16px,3.5vw,48px)}
.header{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;font:900 1.15rem var(--font-display);letter-spacing:.1em}
.brand-icon{display:grid;place-items:center;min-width:44px;height:36px;padding:0 8px;border:1px solid var(--accent-b);border-radius:10px;background:var(--accent-a);color:var(--app-accent-ink);font:800 .9rem var(--font-display);text-shadow:0 0 12px var(--app-accent)}
.brand-year{color:var(--app-accent-ink);text-shadow:0 0 14px var(--accent-b)}
.header nav{display:flex;gap:6px;padding:5px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--app-surface) 80%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nav-item{min-height:44px;padding:0 18px;border-radius:10px;color:var(--app-muted);font:700 .78rem var(--font-display);letter-spacing:.14em;text-transform:uppercase;transition:color .2s,background .2s}
.nav-item:hover{color:var(--app-text)}
.nav-item.active{color:var(--app-on-accent);background:linear-gradient(135deg,var(--app-accent),var(--app-accent-end));box-shadow:0 0 22px var(--accent-b)}
.header-actions{display:flex;gap:8px}
.screen-bar{position:relative;z-index:3;display:flex;align-items:center;gap:16px;margin:4px 0 18px}
.screen-bar h2{font-size:1.35rem;text-shadow:0 0 22px var(--accent-a)}
.footer{position:relative;z-index:3;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding:22px 0 28px;border-top:1px solid var(--line);color:var(--app-muted);font:500 .7rem var(--font-ui);letter-spacing:.16em;text-transform:uppercase}
.footer-slash{color:var(--app-accent-ink)}
.arena-watermark{display:none}

/* ===================================================================
   Home — the main menu
   ========================================================================== */
.home{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);grid-template-rows:auto 1fr;align-items:center;column-gap:clamp(28px,6vw,96px);row-gap:18px;min-height:calc(100vh - var(--header-h) - 60px);min-height:calc(100dvh - var(--header-h) - 60px);padding:10px 0 32px}
.home-status{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;min-height:42px}
.home-hero{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.logo{display:flex;flex-direction:column;font-weight:900;line-height:.84;text-transform:uppercase}
.logo-pong{font-size:clamp(4.4rem,13vw,10rem);letter-spacing:-.01em;color:var(--app-logo);text-shadow:0 0 16px color-mix(in srgb,var(--app-accent) 65%,transparent),0 0 64px color-mix(in srgb,var(--app-accent) 38%,transparent)}
.logo-year{margin-top:.08em;font-size:clamp(2.6rem,8.4vw,6.6rem);letter-spacing:.14em;color:transparent;-webkit-text-stroke:2px var(--app-accent2-ink);filter:drop-shadow(0 0 18px color-mix(in srgb,var(--app-accent2) 60%,transparent))}
.tagline{color:var(--app-muted);font-size:clamp(1rem,1.6vw,1.2rem);font-weight:500}
.player-chip{padding:8px 14px;border:1px solid var(--accent-b);border-radius:999px;background:var(--accent-a);color:var(--app-accent-ink);font:700 .72rem var(--font-display);letter-spacing:.16em}
.home-records{display:grid;grid-template-columns:repeat(3,auto);gap:8px;margin-top:4px}
.home-records span{display:grid;min-width:88px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--app-panel) 74%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.home-records strong{font:800 1.15rem var(--font-display);color:var(--app-text)}
.home-records small{margin-top:2px;color:var(--app-muted);font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.home-menu{display:grid;gap:14px;align-content:center}
.menu-tile{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;width:100%;padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-lg);text-align:left;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--app-panel) 92%,transparent),color-mix(in srgb,var(--app-surface) 70%,transparent));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .18s var(--ease),border-color .2s,box-shadow .25s}
.menu-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--app-accent) 12%,transparent) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s var(--ease)}
.menu-tile:hover{transform:translateX(4px);border-color:var(--app-accent);box-shadow:0 0 0 1px var(--accent-b),0 12px 40px var(--accent-a)}
.menu-tile:hover::before{transform:translateX(120%)}
.menu-tile:active{transform:scale(.97);box-shadow:0 0 0 1px var(--accent-b),0 16px 46px var(--accent-a)}
.tile-icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--accent-b);border-radius:14px;background:var(--accent-a);color:var(--app-accent-ink)}
.tile-icon svg{width:22px;height:22px;fill:currentColor;stroke:currentColor;stroke-width:0}
.tile-icon svg[fill=none],.tile-icon svg path[fill=none]{fill:none;stroke-width:2}
.tile-text strong{display:block;font:800 1.02rem var(--font-display);letter-spacing:.16em;text-transform:uppercase}
.tile-text small{display:block;margin-top:3px;color:var(--app-muted);font-size:.84rem;font-weight:500}
.tile-chevron{font:400 1.8rem/1 var(--font-display);color:var(--app-accent-ink);transition:transform .2s var(--ease)}
.menu-tile:hover .tile-chevron{transform:translateX(4px)}
.menu-tile.primary{padding:20px 22px;border-color:transparent;background:linear-gradient(135deg,var(--app-accent),var(--app-accent-end));color:var(--app-on-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--app-accent) 70%,#fff 25%),0 16px 50px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.menu-tile.primary .tile-icon{border-color:color-mix(in srgb,var(--app-on-accent) 33%,transparent);background:#05100a22;color:var(--app-on-accent)}
.menu-tile.primary .tile-text small{color:var(--app-on-accent)}
.menu-tile.primary .tile-chevron{color:var(--app-on-accent)}
.menu-tile.primary::before{background:linear-gradient(105deg,transparent 30%,#fff5 50%,transparent 70%)}
.play-tile{min-height:178px;grid-template-columns:96px 1fr auto;border-radius:28px!important;isolation:isolate}
.play-tile .play-orbit{display:grid;place-items:center;width:88px;height:88px;border:1px solid #05100a44;border-radius:50%;background:radial-gradient(circle,#fff8 0 2px,transparent 3px),conic-gradient(from 20deg,#05100a22,transparent 35%,#05100a33 60%,transparent);box-shadow:inset 0 0 0 9px #fff2}
.play-tile .tile-icon{width:58px;height:58px;border-radius:50%}
.play-tile .tile-icon svg{width:28px;height:28px;margin-left:4px}
.play-tile .tile-text small{margin:0 0 4px;font:800 .66rem var(--font-display);letter-spacing:.22em;text-transform:uppercase}
.play-tile .tile-text strong{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:.1em}
.play-tile .tile-text em{display:block;margin-top:6px;color:var(--app-on-accent);font-size:.78rem;font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.home-quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.quick-tile{grid-template-columns:1fr;justify-items:center;gap:9px;min-height:126px;padding:16px 10px;text-align:center;border-radius:18px}
.quick-tile:hover{transform:translateY(-3px)}
.quick-tile .tile-icon{width:46px;height:46px;border-radius:15px}
.quick-tile .tile-text strong{font-size:.77rem;letter-spacing:.1em}
.quick-tile .tile-text small{font-size:.7rem}
.home-hint{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--app-muted);font-size:.72rem;font-weight:600;letter-spacing:.05em}
.home-hint span{width:7px;height:7px;border-radius:50%;background:var(--app-accent);box-shadow:0 0 12px var(--app-accent);animation:led 1.6s ease-in-out infinite}
.home-version{color:var(--app-muted);font:600 .68rem var(--font-mono);letter-spacing:.14em}

/* The live demo keeps playing behind the main menu. */
body[data-view=home] .arena-section{position:fixed;inset:0;z-index:0;margin:0;pointer-events:none;opacity:.55}
body[data-view=home] .arena-section>:not(.canvas-wrap){display:none}
body[data-view=home] .canvas-wrap{position:absolute;left:50%;top:50%;width:max(100vw,calc(100vh * 1.667));max-width:2000px;aspect-ratio:1000/600;transform:translate(-50%,-50%);border:0;border-radius:0;box-shadow:none;background:transparent}
body[data-view=home] .canvas-wrap>:not(canvas){display:none}
body[data-view=home] .play-layout{display:block;position:static;z-index:0;flex:0 0 0!important;height:0;min-height:0;margin:0;padding:0}
body[data-view=home] .setup-panel,body[data-view=home] .theme-section,body[data-view=home] .download-section,body[data-view=home] .footer{display:none}
body[data-view=home]::before{background:radial-gradient(70vmax 46vmax at 88% -12%,color-mix(in srgb,var(--app-accent2) 30%,transparent),transparent 70%),radial-gradient(56vmax 44vmax at -12% 108%,color-mix(in srgb,var(--app-accent) 18%,transparent),transparent 70%),linear-gradient(180deg,#0000 0,color-mix(in srgb,var(--app-page) 55%,transparent)),var(--app-page)}

/* ===================================================================
   Play / workshop layout and panels
   ========================================================================== */
.play-layout{position:relative;z-index:2;display:grid;grid-template-columns:minmax(320px,380px) minmax(0,1fr);gap:24px;align-items:start}
.setup-panel{position:relative;display:flex;flex-direction:column;gap:16px;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 60px #0006}
.setup-panel::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--app-accent),var(--app-accent),transparent)}
.setup-panel>.section-caption{justify-content:space-between}
.setup-panel>h2{font-size:1.25rem}
.select-label{display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--app-muted);font:600 .8rem var(--font-ui);letter-spacing:.1em;text-transform:uppercase}
.select-label select{min-width:0;flex:0 1 210px;color:var(--app-text)}
.row-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode-card{position:relative;display:grid;gap:4px;padding:16px 16px 14px;border:1px solid var(--line);border-radius:var(--r-md);text-align:left;background:color-mix(in srgb,var(--app-surface) 85%,transparent);transition:border-color .2s,box-shadow .25s,transform .15s var(--ease)}
.mode-card:hover{border-color:color-mix(in srgb,var(--app-accent) 60%,var(--app-border))}
.mode-card:active{transform:scale(.965);border-color:var(--app-accent);box-shadow:0 0 20px var(--accent-a)}
.mode-symbol{display:flex;align-items:center;gap:7px;height:30px;color:var(--app-accent-ink);font:800 1.15rem var(--font-display)}
.mode-symbol b{font-size:.6rem;color:var(--app-text);opacity:.85}
.mode-card strong{font:800 .95rem var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.mode-card small{color:var(--app-muted);font-size:.8rem}
.mode-card.selected,.mode-card[aria-pressed=true]{border-color:var(--app-accent);background:linear-gradient(135deg,var(--accent-a),color-mix(in srgb,var(--app-accent) 12%,transparent));box-shadow:0 0 0 1px var(--accent-b),0 10px 34px var(--accent-a)}
.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--app-surface) 88%,transparent)}
.segmented button,.mode-buttons button{min-height:44px;padding:0 10px;border-radius:10px;color:var(--app-muted);font:700 .78rem var(--font-ui);letter-spacing:.08em;text-transform:uppercase;transition:color .2s,background .2s}
.segmented button:hover{color:var(--app-text)}
.segmented button.selected,.segmented button[aria-pressed=true]{color:var(--app-on-accent);background:linear-gradient(135deg,var(--app-accent),var(--app-accent-end));box-shadow:0 0 18px var(--accent-b)}
.ruleset-section{display:grid;gap:10px}
.mode-description{color:var(--app-muted);font-size:.86rem}
.roster-summary{display:grid;gap:8px}
.roster-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--app-surface) 70%,transparent);font-size:.86rem}
.roster-row small{margin-left:auto;color:var(--app-muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em}
.team-marker{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border-radius:9px;font:800 .72rem var(--font-display)}
.team-marker.a{color:var(--app-accent-ink);border:1px solid var(--accent-b);background:var(--accent-a)}
.team-marker.b{color:var(--app-accent2-ink);border:1px solid color-mix(in srgb,var(--app-accent2) 45%,transparent);background:color-mix(in srgb,var(--app-accent2) 16%,transparent)}
.game-mode-section{display:grid;gap:10px}
.mode-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:6px}
.mode-buttons button{border:1px solid var(--line);background:color-mix(in srgb,var(--app-surface) 80%,transparent)}
.mode-buttons button.selected{border-color:var(--app-accent);color:var(--app-text);background:var(--accent-a);box-shadow:0 0 16px var(--accent-a)}
.start-note{color:var(--app-muted);font:600 .74rem var(--font-ui);letter-spacing:.14em;text-align:center;text-transform:uppercase}
.online-shortcut{align-self:center}

/* --- Workshop --- */
.workshop-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--app-surface) 88%,transparent)}
.workshop-tabs button{min-height:44px;border-radius:10px;color:var(--app-muted);font:700 .78rem var(--font-display);letter-spacing:.12em;text-transform:uppercase;transition:color .2s,background .2s}
.workshop-tabs button.selected{color:var(--app-on-accent);background:linear-gradient(135deg,var(--app-accent),var(--app-accent-end))}
.workshop-pane{display:grid;gap:16px}
.skin-section{display:grid;gap:12px}
.skin-section h3{display:flex;align-items:center;gap:10px}
.camp-tabs{display:none}
.skin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.skin-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:74px;padding:10px 4px 8px;border:1px solid var(--line);border-radius:var(--r-md);color:var(--app-muted);font:700 .68rem var(--font-ui);letter-spacing:.1em;text-transform:uppercase;background:color-mix(in srgb,var(--app-surface) 82%,transparent);transition:border-color .2s,box-shadow .2s,color .2s}
.skin-button:hover{border-color:color-mix(in srgb,var(--skin-color,var(--app-accent)) 60%,var(--app-border))}
.skin-button.selected{border-color:var(--skin-color,var(--app-accent));color:var(--app-text);box-shadow:0 0 0 1px color-mix(in srgb,var(--skin-color,var(--app-accent)) 45%,transparent),0 0 22px color-mix(in srgb,var(--skin-color,var(--app-accent)) 25%,transparent)}
.skin-button.locked,.theme-card.locked{opacity:.5;filter:grayscale(.7);cursor:help}
.color-picker{display:grid;gap:10px}
.color-heading{display:flex;align-items:center;justify-content:space-between;color:var(--app-muted);font:600 .74rem var(--font-ui);letter-spacing:.14em;text-transform:uppercase}
.color-palette{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.color-swatch{width:100%;aspect-ratio:1;border-radius:50%;background:var(--swatch);border:2px solid transparent;box-shadow:0 0 0 1px #ffffff24;transition:transform .15s var(--ease),box-shadow .2s}
.color-swatch:hover{transform:scale(1.08)}
.color-swatch[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px var(--swatch),0 0 16px var(--swatch)}
.atelier-field{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:46px;color:var(--app-muted);font:600 .8rem var(--font-ui);letter-spacing:.1em;text-transform:uppercase}
.atelier-field select{flex:0 1 190px;color:var(--app-text)}
.atelier-field .range-wrap{display:flex;align-items:center;gap:10px;flex:0 1 210px}

/* --- Theme gallery & saved presets --- */
.theme-section{position:relative;z-index:2;margin-top:36px}
.theme-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.theme-heading h2{margin-top:8px}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.theme-card{position:relative;display:grid;gap:2px;padding:0 0 12px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;text-align:left;background:color-mix(in srgb,var(--app-surface) 88%,transparent);transition:transform .18s var(--ease),border-color .2s,box-shadow .25s}
.theme-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--app-accent) 60%,var(--app-border))}
.theme-card strong{padding:10px 12px 0;font:800 .78rem var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.theme-card small{padding:0 12px;color:var(--app-muted);font-size:.78rem}
.theme-card.selected{border-color:var(--app-accent);box-shadow:0 0 0 1px var(--accent-b),0 12px 34px var(--accent-a)}
.theme-swatch{position:relative;height:70px;overflow:hidden;background:var(--bg);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:20px 20px}
.theme-swatch::before,.theme-swatch::after{content:"";position:absolute;top:20px;width:4px;height:30px;border-radius:2px;background:var(--left);left:16%;box-shadow:0 0 12px var(--left)}
.theme-swatch::after{left:auto;right:16%;background:var(--right);box-shadow:0 0 12px var(--right)}
.swatch-ball{position:absolute;top:34px;left:54%;width:6px;height:6px;border-radius:50%;background:var(--ball);box-shadow:0 0 10px var(--ball)}
.check{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--app-accent);color:var(--app-on-accent);font-size:12px;font-weight:800}
.preset-delete{width:40px;color:var(--app-muted);font-size:1.3rem}
.preset-delete:hover{color:#ff6b7a}

/* ===================================================================
   Settings
   ========================================================================== */
.settings-view{position:relative;z-index:2;display:grid;gap:22px}
.settings-title{display:none}
.settings-tabs{display:none}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;align-items:start}
.settings-card{padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.settings-card h2{margin-bottom:8px;font-size:1.05rem}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:8px 0;border-bottom:1px solid var(--line)}
.setting-row:last-of-type{border-bottom:0}
.setting-row>span:first-child{display:grid;gap:2px;font-weight:600}
.setting-row small{color:var(--app-muted);font-size:.78rem;font-weight:500}
.setting-row select{flex:0 1 170px}
.setting-row .range-wrap{display:flex;align-items:center;gap:10px;flex:0 1 210px}
.setting-footnote{margin-top:12px;color:var(--app-muted);font-size:.8rem}
.settings-card>.small-button{margin-top:14px}
.settings-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.settings-bottom .primary-button{width:auto;min-width:220px}
.player-stats{display:grid;gap:4px}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);color:var(--app-muted)}
.stat-row strong{color:var(--app-accent-ink);font:800 1rem var(--font-display);text-shadow:0 0 14px var(--accent-a)}
.download-section{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:28px;padding:24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass)}
.download-section h2{margin:8px 0}
.download-actions{display:flex;gap:10px;flex-wrap:wrap}
body:not([data-view=settings]) .download-section{display:none}

/* ===================================================================
   Arena (live preview and match)
   ========================================================================== */
.arena-section{min-width:0}
.arena-topbar{display:flex;align-items:center;gap:12px;min-height:44px;margin-bottom:10px}
.arena-name{display:flex;align-items:center;gap:10px;margin-right:auto;font:700 .8rem var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.status-led{width:8px;height:8px;border-radius:50%;background:var(--app-accent);box-shadow:0 0 12px var(--app-accent);animation:led 2s ease-in-out infinite}
@keyframes led{50%{opacity:.4}}
.arena-tag{padding:4px 9px;border:1px solid var(--line);border-radius:999px;color:var(--app-muted);font:600 .62rem var(--font-ui);letter-spacing:.2em}
.scoreboard{display:flex;justify-content:center;align-items:center;gap:clamp(20px,5vw,56px);height:92px;border:1px solid var(--line);border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.score-team{display:flex;align-items:center;gap:14px}
.score-team>span:not(.team-line){color:var(--app-muted);font:700 .68rem var(--font-ui);letter-spacing:.24em}
.score-team strong{min-width:1.6em;font:900 clamp(2.2rem,4.4vw,3.2rem)/1 var(--font-display);text-align:center;color:var(--app-text);text-shadow:0 0 22px var(--accent-b)}
.score-team.right strong{text-shadow:0 0 22px color-mix(in srgb,var(--app-accent2) 45%,transparent)}
.team-line{display:block;width:4px;height:32px;border-radius:2px}
.team-line.a{background:var(--app-accent);box-shadow:0 0 14px var(--app-accent)}
.team-line.b{background:var(--app-accent2);box-shadow:0 0 14px var(--app-accent2)}
.score-center{display:grid;justify-items:center;gap:4px;color:var(--app-muted);font:600 .64rem var(--font-ui);letter-spacing:.2em;text-transform:uppercase}
.score-divider{display:none}
.canvas-wrap{position:relative;overflow:hidden;aspect-ratio:1000/600;border:1px solid var(--line);border-top:0;background:#02030a;box-shadow:0 30px 80px #0007,0 0 0 1px color-mix(in srgb,var(--app-accent) 10%,transparent)}
.canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none}
.arena-bottom{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border:1px solid var(--line);border-top:0;background:var(--glass);color:var(--app-muted);font:600 .66rem var(--font-ui);letter-spacing:.18em;text-transform:uppercase}
.small-cross{color:var(--app-accent-ink)}
.under-arena{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;color:var(--app-muted);font-size:.82rem}
.under-arena>div{display:flex;align-items:center;gap:8px}
.mini-symbol{color:var(--app-accent-ink)}
.serve-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;color:#fff;background:radial-gradient(closest-side,#04050d55,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.serve-overlay span{padding:8px 16px;border:1px solid var(--accent-b);border-radius:999px;background:#04050dcc;color:var(--app-accent);font:700 .72rem var(--font-display);letter-spacing:.3em}
.serve-overlay strong{margin-top:10px;font:900 clamp(4rem,10vw,6.5rem)/1 var(--font-display);text-shadow:0 0 30px var(--app-accent),0 4px 22px #000}
.vs-overlay{position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none;opacity:1;transition:opacity .4s ease}
.vs-overlay.leaving{opacity:0}
.vs-crack{position:absolute;inset:0}
.vs-half{position:absolute;inset:0}
.vs-half-a{background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 42%,#04050d),#04050d 80%);clip-path:polygon(0 0,50% 0,42% 12.5%,58% 25%,38% 37.5%,60% 50%,40% 62.5%,58% 75%,45% 87.5%,52% 100%,0 100%);animation:vs-half-in-a .5s cubic-bezier(.2,.8,.2,1) both}
.vs-half-b{background:linear-gradient(315deg,color-mix(in srgb,var(--app-accent) 42%,#04050d),#04050d 80%);clip-path:polygon(100% 0,50% 0,42% 12.5%,58% 25%,38% 37.5%,60% 50%,40% 62.5%,58% 75%,45% 87.5%,52% 100%,100% 100%);animation:vs-half-in-b .5s cubic-bezier(.2,.8,.2,1) both}
.vs-bolt-icon{position:absolute;top:50%;left:50%;width:clamp(56px,16vw,130px);height:auto;transform:translate(-50%,-50%);color:#fff9e0;filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 28px var(--app-accent)) drop-shadow(0 0 44px var(--app-accent2));animation:vs-bolt-flash .6s .05s cubic-bezier(.2,.9,.3,1.3) both}
.vs-bolt-icon path{fill:currentColor}
.vs-content{position:relative;z-index:1;height:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(10px,4vw,48px);padding:0 clamp(16px,5vw,32px);box-sizing:border-box}
.vs-player{flex:1 1 0;min-width:0;max-width:40%;display:flex;align-items:center;justify-content:center;text-align:center}
.vs-player strong{display:block;min-width:0;max-width:100%;font:900 clamp(.8rem,5vmin,2.2rem)/1.15 var(--font-display);text-transform:uppercase;letter-spacing:.03em;overflow-wrap:break-word;color:#fff}
.vs-player-a{animation:vs-slide-in-a .5s .1s cubic-bezier(.2,.8,.2,1) both}
.vs-player-a strong{text-shadow:0 0 20px var(--app-accent),0 4px 18px #000}
.vs-player-b{animation:vs-slide-in-b .5s .1s cubic-bezier(.2,.8,.2,1) both}
.vs-player-b strong{text-shadow:0 0 20px var(--app-accent2),0 4px 18px #000}
.vs-tag{padding:8px 18px;border:1px solid #ffffff66;border-radius:999px;background:#04050dcc;font:900 clamp(.9rem,2.6vw,1.3rem)/1 var(--font-display);color:#fff;letter-spacing:.3em;white-space:nowrap;animation:vs-pop .5s .2s cubic-bezier(.2,.8,.2,1) both}
@keyframes vs-half-in-a{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes vs-half-in-b{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes vs-bolt-flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes vs-slide-in-a{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes vs-slide-in-b{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes vs-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@media (orientation:portrait){
 .vs-content{flex-direction:column}
 .vs-player{max-width:82%}
 .vs-half-a{clip-path:polygon(0 0,0 50%,12.5% 42%,25% 58%,37.5% 38%,50% 60%,62.5% 40%,75% 58%,87.5% 45%,100% 52%,100% 0);animation-name:vs-half-in-top}
 .vs-half-b{clip-path:polygon(0 100%,0 50%,12.5% 42%,25% 58%,37.5% 38%,50% 60%,62.5% 40%,75% 58%,87.5% 45%,100% 52%,100% 100%);animation-name:vs-half-in-bottom}
 .vs-player-a{animation-name:vs-slide-in-top}
 .vs-player-b{animation-name:vs-slide-in-bottom}
}
@keyframes vs-half-in-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes vs-half-in-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes vs-slide-in-top{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}
@keyframes vs-slide-in-bottom{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.live-label{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#04050dcc;color:#eef2ff;font:700 .64rem var(--font-display);letter-spacing:.2em}
.powerup-status{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:3;padding:9px 16px;border:1px solid var(--app-accent);border-radius:999px;background:#04050ddd;color:var(--app-accent);font:800 .72rem var(--font-display);letter-spacing:.2em;box-shadow:0 0 30px var(--accent-a)}
.replay-overlay{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:12px;padding:6px 8px 6px 14px;border:1px solid var(--accent-b);border-radius:999px;background:#04050ddd;color:#eef2ff;font:700 .7rem var(--font-display);letter-spacing:.12em;white-space:nowrap}
.replay-tag{color:#ff5a6e}.replay-tag::before{content:"● "}
.replay-overlay .small-button{min-height:32px;padding:0 12px;font-size:.68rem}
.rotate-hint{display:none}

/* During a match on desktop */
.playing .setup-panel,.playing .theme-section,.playing .footer,.playing .home,.playing .screen-bar,.playing .download-section{display:none!important}
.playing .play-layout{grid-template-columns:1fr;max-width:1040px;margin:14px auto}
.playing .header nav{visibility:hidden}
.playing .brand{pointer-events:none}
.playing #help-button{display:none}
.playing .canvas-wrap{max-height:calc(100vh - 292px);max-height:calc(100dvh - 292px);min-height:250px;width:100%}
.playing:fullscreen{background:var(--app-page)}
.fullscreen-arena{overflow:hidden}
.fullscreen-arena.playing .app-shell{max-width:none;width:100%;height:100vh;height:100dvh;padding:0 16px}
.fullscreen-arena.playing .header,.fullscreen-arena.playing .setup-panel,.fullscreen-arena.playing .theme-section,.fullscreen-arena.playing .download-section,.fullscreen-arena.playing .footer{display:none!important}
.fullscreen-arena.playing main,.fullscreen-arena.playing #play-layout,.fullscreen-arena.playing .arena-section{width:100%;height:100%;min-height:0}
.fullscreen-arena.playing #play-layout{display:block;margin:0;max-width:none}
.fullscreen-arena.playing .arena-section{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;padding:8px 0}
.fullscreen-arena.playing .arena-topbar{margin:0 0 6px}
.fullscreen-arena.playing .scoreboard{height:72px}
.fullscreen-arena.playing .canvas-wrap{width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto}
.fullscreen-arena.playing .arena-bottom{padding:6px 12px}
.fullscreen-arena #fullscreen-start{display:inline-flex}
.fullscreen-arena.playing #fullscreen-start{display:none}
.standalone .header{padding-top:var(--sat)}

/* ===================================================================
   Dialogs
   ========================================================================== */
.dialog{width:min(560px,calc(100vw - 28px));max-height:90vh;max-height:90dvh;padding:28px;overflow:auto;color:var(--app-text);border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(180deg,color-mix(in srgb,var(--app-panel) 96%,transparent),color-mix(in srgb,var(--app-page) 92%,transparent));--scroll-shadow-up:0 0 0 transparent;--scroll-shadow-down:0 0 0 transparent;box-shadow:0 30px 120px #000a,0 0 0 1px color-mix(in srgb,var(--app-accent) 8%,transparent),var(--scroll-shadow-up),var(--scroll-shadow-down)}
.dialog::backdrop{background:var(--backdrop);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* A dialog taller than the viewport scrolls silently (no native scrollbar on touch); this inset shadow is the
   only cue that a primary action (e.g. "Rejoindre") might be sitting just past the fold. Toggled by app.js. */
.dialog.can-scroll-up{--scroll-shadow-up:inset 0 28px 18px -20px #00000075}
.dialog.can-scroll-down{--scroll-shadow-down:inset 0 -28px 18px -20px #00000075}
.dialog[open]{animation:pop .28s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}}
.dialog-heading{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-bottom:16px}
.dialog-heading h2{margin-top:8px}
.dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.dialog-actions .primary-button{width:auto}
.participant{display:grid;grid-template-columns:36px 1fr minmax(120px,170px);gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.participant label{display:grid;gap:2px;font-weight:600}
.participant small{color:var(--app-muted);font-size:.74rem;font-weight:500}
.setting-footnote a{color:var(--app-accent-ink)}
.help-controls{display:grid;margin:8px 0 14px}
.help-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.key-button{min-width:46px;height:40px;padding:0 8px;border:1px solid var(--app-border);border-bottom-width:2px;border-radius:9px;background:var(--app-surface);font:700 .8rem var(--font-mono)}
.key-button.listening{border-color:var(--app-accent);background:var(--accent-a);box-shadow:0 0 16px var(--accent-a)}
.help-info{display:grid;gap:10px;color:var(--app-muted);font-size:.86rem}
.help-info strong{color:var(--app-text)}
.install-platforms{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.install-platforms span{padding:5px 11px;border:1px solid var(--line);border-radius:999px;color:var(--app-muted);font:600 .68rem var(--font-ui);letter-spacing:.14em;text-transform:uppercase}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--sab));transform:translateX(-50%);z-index:300;max-width:min(560px,calc(100vw - 28px));padding:12px 18px;border:1px solid var(--accent-b);border-radius:14px;background:#04050df0;color:var(--app-text);font-weight:600;box-shadow:0 14px 50px #000a,0 0 30px var(--accent-a);animation:pop .25s var(--ease)}

/* --- Pause: translucent overlay over the match. Only four buttons, one column on every screen (phones copy the computer). --- */
dialog.pause-dialog[open]{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border:0;border-radius:0;box-shadow:none;overflow:hidden;text-align:center}
dialog.pause-dialog::backdrop{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.pause-dialog .pause-main,.pause-dialog .pause-settings{width:min(380px,100%);display:flex;flex-direction:column;align-items:stretch;gap:10px}
.pause-dialog h2{margin:2px 0 0;font-size:1.7rem}
.pause-dialog .primary-button{margin:8px 0 0;min-height:56px}
.pause-dialog .small-button{width:100%}
.pause-dialog .pause-main{width:min(440px,100%);gap:14px}
.pause-dialog .pause-main .primary-button{margin:0;min-height:64px;padding:0 26px;font-size:1.08rem}
.pause-dialog .pause-main .primary-button>span:first-child small{display:block;font-size:.64rem}
.pause-dialog .pause-main .small-button{min-height:54px;border-radius:14px;font-size:.95rem}
/* Narrow phones: the same buttons, the resume label shrinks just enough to stay on one line. */
@media (max-width:440px){.pause-dialog .pause-main .primary-button{padding:0 18px;gap:10px;font-size:min(1.08rem,4.1vw)}}
@media (max-width:350px){.pause-dialog .pause-main .primary-button{padding:0 14px;letter-spacing:.08em}}
.pause-dialog .pause-settings{text-align:left;gap:4px}
.pause-dialog .pause-settings h2{text-align:center;margin-bottom:6px}
.pause-dialog .pause-settings .primary-button{margin-top:10px}
.pause-dialog .phone-only{display:none}
body.mobile .pause-dialog .phone-only{display:flex}
@media (max-height:520px){
 dialog.pause-dialog[open]{padding:10px 24px}
 .pause-dialog .pause-settings{width:min(620px,100%);display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
 .pause-dialog .pause-settings h2,.pause-dialog .pause-settings .primary-button{grid-column:1/-1}
 .pause-dialog .pause-settings .setting-row{min-height:40px;padding:2px}
 .pause-dialog .pause-settings h2{font-size:1.15rem;margin:0 0 4px}
}
/* Very short screens (small phone held sideways with the browser bars): the same column, a little tighter. */
@media (max-height:340px){
 .pause-dialog .pause-main{gap:8px}
 .pause-dialog .pause-main .primary-button{min-height:50px}
 .pause-dialog .pause-main .small-button{min-height:44px}
}

/* --- Victory --- */
.victory-dialog{text-align:center;max-width:520px;padding:22px}
.victory-result{position:relative;overflow:hidden;padding:20px 18px 16px;border:1px solid color-mix(in srgb,var(--winner,var(--app-accent)) 46%,var(--line));border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--winner,var(--app-accent)) 16%,var(--app-surface)),var(--app-surface))}
.victory-result::before{content:"";position:absolute;inset:-80% 20% auto;height:150%;background:radial-gradient(circle,var(--accent-b),transparent 68%);opacity:.65;pointer-events:none}
.victory-kicker{position:relative;display:inline-flex;padding:5px 10px;border:1px solid var(--line);border-radius:999px;color:var(--app-muted);font:800 .61rem var(--font-display);letter-spacing:.18em}
.winner-symbol{position:relative;margin:9px 0 0;font:900 3rem/1 var(--font-display);color:var(--app-accent-ink);text-shadow:0 0 34px var(--app-accent)}
.victory-dialog h2{position:relative;margin:7px 0 4px;font-size:1.45rem}
.final-score{position:relative;font:900 3.7rem/1 var(--font-display);letter-spacing:.06em;text-shadow:0 0 30px var(--accent-b)}
.match-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;padding:11px 0;border-block:1px solid var(--line)}
.match-stats strong{display:block;font:800 1.3rem var(--font-display)}
.match-stats small{display:block;margin-top:5px;color:var(--app-muted);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.victory-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.victory-actions .primary-button{grid-column:1/-1;display:flex;justify-content:space-between;min-height:64px;margin:0;padding-inline:20px;text-align:left}
.victory-actions .primary-button small{display:block;margin-bottom:2px;color:inherit;font:800 .58rem var(--font-display);letter-spacing:.18em;opacity:.92}
.victory-actions .small-button{width:100%;margin:0}
.victory-actions .text-button{grid-column:1/-1;min-height:36px}
.victory-unlocks{display:grid;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.victory-unlocks li{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--accent-b);border-radius:14px;background:var(--accent-a);text-align:left;font-weight:700;font-size:.88rem}
.victory-unlocks li>span{font-size:1.4rem}
.victory-unlocks li small{display:block;margin-top:2px;color:var(--app-muted);font-size:.72rem;font-weight:500}
@media (prefers-reduced-motion:no-preference){.victory-unlocks li{animation:pop .45s var(--ease) both}}
#replay-button{width:100%}
@media (prefers-reduced-motion:no-preference){.victory-dialog[open] .winner-symbol{animation:victory-pulse 1.5s ease-in-out infinite alternate}.victory-dialog[open] .victory-result::before{animation:victory-glow 2.2s ease-in-out infinite alternate}}
@keyframes victory-pulse{to{transform:scale(1.08) rotate(8deg);filter:brightness(1.25)}}@keyframes victory-glow{to{opacity:1;transform:translateY(8%)}}

/* --- Online --- */
.nickname-label{display:grid;gap:8px;margin-bottom:12px;color:var(--app-muted);font:600 .74rem var(--font-ui);letter-spacing:.16em;text-transform:uppercase}
.online-divider{display:flex;align-items:center;gap:14px;margin:20px 0 14px;color:var(--app-muted);font:600 .66rem var(--font-ui);letter-spacing:.24em}
.online-divider::before,.online-divider::after{content:"";flex:1;height:1px;background:var(--line)}
#join-form{display:grid;gap:8px}
#join-form label{color:var(--app-muted);font:600 .74rem var(--font-ui);letter-spacing:.16em;text-transform:uppercase}
.join-row{display:flex;gap:8px}
.join-row input{flex:1;min-width:0;width:0;font-family:var(--font-mono);letter-spacing:.1em}
.room-banner{display:grid;justify-items:center;gap:10px;padding:20px;border:1px solid var(--accent-b);border-radius:var(--r-md);background:var(--accent-a)}
.room-banner strong{font:900 clamp(1.4rem,5vw,2rem) var(--font-display);letter-spacing:.14em;color:var(--app-accent-ink);text-shadow:0 0 20px var(--accent-b)}
.invite-fallback{width:100%}
.room-players{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.room-slot{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);text-align:left;background:color-mix(in srgb,var(--app-surface) 88%,transparent);transition:border-color .2s,box-shadow .2s}
.room-slot span:last-child{display:grid;gap:2px;font-weight:700}
.room-slot small{color:var(--app-muted);font-weight:500}
.room-slot.selected{border-color:var(--app-accent);box-shadow:0 0 0 1px var(--accent-b),0 0 24px var(--accent-a)}
.online-status{margin-top:14px;color:var(--app-accent-ink);font-weight:600;font-size:.88rem;min-height:1.2em}
#online-room .primary-button{margin-top:6px}

/* ===================================================================
   Tablet and small desktop windows
   ========================================================================== */
@media (max-width:1000px){
 .play-layout{grid-template-columns:1fr}
 .home{grid-template-columns:1fr;align-content:center;gap:28px}
 .header nav{gap:2px}.nav-item{padding:0 12px}
 .settings-grid{grid-template-columns:1fr}
}
/* « Personnalisation » is the longest tab: tighter tabs keep the header inside narrow windows. */
@media (max-width:900px){.nav-item{padding:0 8px;letter-spacing:.06em;font-size:.72rem}}
@media (max-width:780px){.brand-year{display:none}}
@media (max-width:700px){
 .brand-year{display:none}
 .header nav{display:none}
}

/* ===================================================================
   Phones (body.mobile): a native-app feel, every screen fits without scrolling
   ========================================================================== */
body.mobile{-webkit-tap-highlight-color:transparent}
body.mobile:not(.playing){position:fixed;inset:0;width:100%;height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none}
body.mobile:not(.playing) .app-shell{height:100vh;height:100dvh;display:flex;flex-direction:column;max-width:none;padding:var(--sat) calc(14px + var(--sar)) calc(12px + var(--sab)) calc(14px + var(--sal))}
body.mobile:not(.playing) .header{height:52px;flex:0 0 52px}
body.mobile:not(.playing) .brand{font-size:1rem}
body.mobile:not(.playing) .header nav,body.mobile:not(.playing) .footer,body.mobile:not(.playing) .theme-section,body.mobile:not(.playing) .download-section{display:none!important}
body.mobile #help-button{display:none!important}
body.mobile:not(.playing) main{flex:1;min-height:0;position:relative;z-index:2;display:flex;flex-direction:column}
body.mobile:not(.playing) .screen-bar{flex:0 0 auto;margin:0 0 10px}
body.mobile:not(.playing) .screen-bar h2{font-size:1.1rem}
body.mobile:not(.playing) .play-layout{display:block;flex:1;min-height:0;margin:0;max-width:none}
/* The demo match is the backdrop of every menu. */
body.mobile:not(.playing) .arena-section{position:fixed;inset:0;z-index:0;margin:0;padding:0;border:0;background:none;opacity:.2;pointer-events:none}
body.mobile[data-view=home]:not(.playing) .arena-section{opacity:.42}
body.mobile:not(.playing) .arena-section>:not(.canvas-wrap){display:none}
body.mobile:not(.playing) .canvas-wrap{position:absolute;left:50%;top:50%;width:max(100vw,calc(100vh * 1.667));width:max(100vw,calc(100dvh * 1.667));max-width:2000px;height:auto;max-height:none;min-height:0;aspect-ratio:1000/600;transform:translate(-50%,-50%);border:0;box-shadow:none;background:transparent}
body.mobile:not(.playing) .canvas-wrap>:not(canvas){display:none}

/* --- Home on phones --- */
body.mobile:not(.playing) .home{flex:1;min-height:0;grid-template-columns:1fr;grid-template-rows:auto auto 1fr;align-content:stretch;gap:8px;padding:2px 0 4px}
body.mobile .home-status{min-height:34px}
body.mobile .player-chip{padding:6px 10px;font-size:.58rem}
body.mobile .home-version{font-size:.58rem;text-align:right}
body.mobile .home-hero{align-items:center;gap:6px;padding:0}
body.mobile .home-hero .eyebrow,body.mobile .tagline{display:none}
body.mobile .logo{align-items:center}
body.mobile .logo-pong{font-size:clamp(3.3rem,min(21vw,11vh),5.2rem);font-size:clamp(3.3rem,min(21vw,11dvh),5.2rem)}
body.mobile .logo-year{font-size:clamp(1.8rem,min(12vw,6.4vh),3rem);font-size:clamp(1.8rem,min(12vw,6.4dvh),3rem)}
body.mobile .home-records{gap:5px;margin-top:1px}
body.mobile .home-records span{min-width:72px;padding:6px 10px;border-radius:11px;text-align:center}
body.mobile .home-records strong{font-size:.9rem}
body.mobile .home-records small{font-size:.52rem}
body.mobile .home-menu{align-self:end;gap:7px}
body.mobile .menu-tile{padding:10px 12px;gap:10px;border-radius:16px}
body.mobile .play-tile{min-height:clamp(86px,13vh,112px);min-height:clamp(86px,13dvh,112px);grid-template-columns:64px 1fr auto;padding:10px 16px;border-radius:22px!important}
body.mobile .play-tile .play-orbit{width:62px;height:62px;box-shadow:inset 0 0 0 6px #fff2}
body.mobile .play-tile .tile-icon{width:44px;height:44px}
body.mobile .play-tile .tile-text strong{font-size:1.45rem}
body.mobile .play-tile .tile-text em{margin-top:2px;font-size:.6rem}
body.mobile .home-quick-grid{gap:6px}
body.mobile .quick-tile{min-height:clamp(72px,11vh,94px);min-height:clamp(72px,11dvh,94px);padding:8px 4px;gap:5px}
body.mobile .quick-tile .tile-icon{width:36px;height:36px;border-radius:11px}
body.mobile .quick-tile .tile-icon svg{width:18px;height:18px}
body.mobile .quick-tile .tile-text strong{font-size:.62rem}
body.mobile .quick-tile .tile-text small{display:none}
body.mobile .home-hint{display:none}

/* --- Play screen --- */
body.mobile:not(.playing) .setup-panel{height:100%;width:100%;display:flex;flex-direction:column;gap:clamp(8px,1.5vh,14px);gap:clamp(8px,1.5dvh,14px);padding:clamp(10px,1.6vh,16px);padding:clamp(10px,1.6dvh,16px);overflow:hidden;background:var(--glass)}
body.mobile:not(.playing) .setup-panel::before{left:16px;right:16px}
body.mobile:not(.playing) #match-panel>.section-caption,body.mobile:not(.playing) #match-panel>h2,body.mobile:not(.playing) #ruleset-description,body.mobile:not(.playing) #start-note,body.mobile:not(.playing) #online-shortcut{display:none!important}
body.mobile:not(.playing) .mode-card{min-height:clamp(58px,9vh,82px);min-height:clamp(58px,9dvh,82px);padding:10px 14px}
body.mobile:not(.playing) .segmented button{min-height:44px}
body.mobile:not(.playing) .ruleset-section .section-caption,body.mobile:not(.playing) .game-mode-section .section-caption{display:none}
body.mobile:not(.playing) .mode-buttons{grid-template-columns:repeat(3,1fr)}
body.mobile:not(.playing) .mode-buttons button{min-height:44px}
body.mobile:not(.playing) #start-button{margin-top:auto;min-height:clamp(56px,8.5vh,70px);min-height:clamp(56px,8.5dvh,70px);font-size:1.05rem}
body.mobile:not(.playing) #match-panel{display:grid;grid-template-columns:1.45fr .8fr;grid-auto-rows:min-content;grid-auto-flow:row dense;column-gap:10px;position:relative;padding-bottom:calc(clamp(56px,8.5vh,70px) + 24px);padding-bottom:calc(clamp(56px,8.5dvh,70px) + 24px)}
body.mobile:not(.playing) #match-panel>*{grid-column:1/-1}
body.mobile:not(.playing) #match-panel>.layout-select{display:flex!important;grid-column:1}
body.mobile:not(.playing) #match-panel>label[for=quick-difficulty]{grid-column:2}
body.mobile:not(.playing) #match-panel>.layout-select,body.mobile:not(.playing) #match-panel>label[for=quick-difficulty]{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;font-size:.68rem}
body.mobile:not(.playing) #match-panel select{width:100%;max-width:none;min-width:0;flex:none;padding-inline:12px;font-size:.85rem}
body.mobile:not(.playing) #match-panel>#start-button{position:absolute;left:clamp(10px,1.6vh,16px);left:clamp(10px,1.6dvh,16px);right:clamp(10px,1.6vh,16px);right:clamp(10px,1.6dvh,16px);bottom:clamp(10px,1.6vh,16px);bottom:clamp(10px,1.6dvh,16px);width:auto;margin:0}

/* --- Workshop on phones --- */
body.mobile:not(.playing) #workshop-panel>.section-caption,body.mobile:not(.playing) #workshop-panel>h2{display:none}
body.mobile:not(.playing) .workshop-pane{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mobile:not(.playing) .workshop-pane[hidden]{display:none}
body.mobile .camp-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px}
body.mobile .camp-tabs button{min-height:44px;border:1px solid var(--line);border-radius:12px;color:var(--app-muted);font:700 .78rem var(--font-display);letter-spacing:.1em;text-transform:uppercase}
body.mobile .camp-tabs button.selected{border-color:var(--app-accent);color:var(--app-text);background:var(--accent-a)}
body.mobile:not(.playing) .skin-section:not(.active){display:none}
body.mobile:not(.playing) .skin-section h3{display:none}
body.mobile:not(.playing) .skin-button{min-height:clamp(54px,8vh,72px);min-height:clamp(54px,8dvh,72px)}
body.mobile:not(.playing) .color-swatch{min-height:32px}
body.mobile:not(.playing) #workshop-panel>.primary-button{margin-top:auto;min-height:56px}

/* --- Settings on phones: one card at a time --- */
body.mobile:not(.playing) .settings-view{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;overflow:hidden}
body.mobile .settings-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:4px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--app-surface) 90%,transparent)}
body.mobile .settings-tabs button{min-height:44px;border-radius:10px;color:var(--app-muted);font:700 .62rem var(--font-display);letter-spacing:.06em;text-transform:uppercase}
body.mobile .settings-tabs button.selected{color:var(--app-on-accent);background:linear-gradient(135deg,var(--app-accent),var(--app-accent-end))}
body.mobile:not(.playing) .settings-grid{display:block;flex:1;min-height:0}
body.mobile:not(.playing) .settings-card{padding:14px}
body.mobile:not(.playing) .settings-card:not(.active){display:none}
body.mobile:not(.playing) .settings-card .muted,body.mobile:not(.playing) .settings-card .setting-footnote:not(#app-version){display:none}
body.mobile:not(.playing) #app-version{margin:10px 0 0;text-align:center;opacity:.75}
body.mobile:not(.playing) .setting-row{min-height:48px;padding:6px 0}
body.mobile:not(.playing) .settings-bottom .primary-button{min-height:48px;width:100%}
body.mobile:not(.playing) .settings-bottom{gap:6px}
@media (max-height:720px) and (orientation:portrait){body.mobile:not(.playing) .setting-row small{display:none}}
html.standalone #install-app-settings{display:none}
#install-app-settings{margin-top:14px}

/* --- Online lobby always fills the screen, on phones and on desktop alike --- */
.online-dialog{position:fixed;inset:0;width:auto;height:auto;max-width:none;max-height:none;margin:0;border-radius:0;padding:calc(var(--sat) + 14px) 18px calc(var(--sab) + 14px);overflow:auto;z-index:15}
body:not(.mobile) .online-dialog{padding:28px clamp(18px,6vw,64px)}
body:not(.mobile) .online-dialog>*{max-width:960px;margin-inline:auto}

/* --- Phone landscape: two columns, no side rail --- */
@media (orientation:landscape){
 body.mobile:not(.playing) .app-shell{padding:var(--sat) calc(14px + var(--sar)) calc(8px + var(--sab)) calc(14px + var(--sal))}
 body.mobile:not(.playing) .header{height:40px;flex-basis:40px}
 body.mobile:not(.playing) .screen-bar{margin-bottom:6px}
 body.mobile:not(.playing) .home{grid-template-columns:1fr 1.15fr;grid-template-rows:1fr;align-items:center;gap:14px 28px}
 body.mobile .home-status{display:none}
 body.mobile .home-hero{gap:6px;padding:0}
 body.mobile .logo-pong{font-size:clamp(3rem,20vh,5.6rem);font-size:clamp(3rem,20dvh,5.6rem)}
 body.mobile .logo-year{font-size:clamp(1.8rem,12vh,3.4rem);font-size:clamp(1.8rem,12dvh,3.4rem)}
 body.mobile .tagline,body.mobile .home-hero .eyebrow{display:none}
 body.mobile .home-records span{min-width:58px;padding:5px 7px}
 body.mobile .home-menu{align-self:center;gap:6px}
 body.mobile .play-tile{min-height:72px;grid-template-columns:46px 1fr auto;padding:7px 12px!important}
 body.mobile .play-tile .play-orbit{width:44px;height:44px;box-shadow:inset 0 0 0 4px #fff2}
 body.mobile .play-tile .tile-icon{width:32px;height:32px}
 body.mobile .play-tile .tile-text small,body.mobile .play-tile .tile-text em{display:none}
 body.mobile .quick-tile{min-height:62px;padding:5px 3px}
 body.mobile .quick-tile .tile-icon{width:30px;height:30px}
 body.mobile:not(.playing) #match-panel{grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto) 1fr;row-gap:4px;column-gap:14px;padding-bottom:clamp(10px,1.6vh,16px);padding-bottom:clamp(10px,1.6dvh,16px);align-content:start}
 body.mobile:not(.playing) #match-panel>*{grid-column:1}
 body.mobile:not(.playing) #match-panel>.mode-options{grid-row:1/3}
 body.mobile:not(.playing) #match-panel>.segmented{grid-row:3}
 body.mobile:not(.playing) #match-panel>.ruleset-section{grid-row:4}
 body.mobile:not(.playing) #match-panel>.layout-select{grid-column:1;grid-row:5;flex-direction:row;align-items:center;justify-content:space-between;font-size:.8rem}
 body.mobile:not(.playing) #match-panel>.row-heading{grid-column:2;grid-row:1;min-height:30px}
 body.mobile:not(.playing) #match-panel>#team-formation-row{grid-column:2;grid-row:2}
 body.mobile:not(.playing) #match-panel>label[for=quick-difficulty]{grid-column:2;grid-row:3;flex-direction:row;align-items:center;justify-content:space-between;font-size:.8rem}
 body.mobile:not(.playing) #match-panel>.game-mode-section{grid-column:2;grid-row:4/6}
 body.mobile:not(.playing) #match-panel select{width:auto}
 body.mobile:not(.playing) #match-panel>#start-button{position:static;grid-column:1/3;grid-row:6;align-self:end;min-height:48px;margin:0}
 body.mobile:not(.playing) .mode-card{min-height:42px;display:grid;grid-template-columns:1fr auto;align-items:center;padding:6px 12px}
 body.mobile:not(.playing) .mode-card .mode-symbol{grid-column:2;grid-row:1/3;margin:0;height:auto;font-size:1rem}
 body.mobile:not(.playing) .segmented button,body.mobile:not(.playing) .select-label,body.mobile:not(.playing) .select-label select{min-height:40px}
 body.mobile:not(.playing) .mode-buttons{gap:5px}
 body.mobile:not(.playing) .mode-buttons button{min-height:36px}
 body.mobile:not(.playing) .skin-grid{grid-template-columns:repeat(6,1fr)}
 body.mobile:not(.playing) .skin-button{min-height:44px;padding:6px 2px 4px;gap:4px}
 body.mobile:not(.playing) .color-palette{grid-template-columns:repeat(12,1fr)}
 body.mobile:not(.playing) .color-swatch{min-height:24px}
 body.mobile:not(.playing) .camp-tabs button{min-height:32px}
 body.mobile:not(.playing) .workshop-tabs button{min-height:34px}
 body.mobile:not(.playing) #workshop-panel>.primary-button{min-height:42px}
 body.mobile:not(.playing) .settings-card{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;align-content:start;padding:10px 14px}
 body.mobile:not(.playing) .settings-card>h2,body.mobile:not(.playing) .settings-card>p,body.mobile:not(.playing) .settings-card>.small-button,body.mobile:not(.playing) .settings-card>#player-stats{grid-column:1/-1}
 body.mobile:not(.playing) .settings-card>h2{font-size:.95rem;margin:0 0 2px}
 body.mobile:not(.playing) .setting-row{min-height:40px;padding:4px 0}
 body.mobile:not(.playing) .setting-row small{display:none}
 body.mobile .online-dialog{padding:calc(var(--sat) + 8px) calc(var(--sar) + 18px) 8px calc(var(--sal) + 18px)}
 body.mobile .online-dialog .dialog-heading{margin:0 0 6px}
 body.mobile .online-dialog .dialog-heading .section-caption{display:none}
 body.mobile .online-dialog .dialog-heading h2{font-size:1.05rem;margin:0}
 body.mobile #online-entry .nickname-label input,body.mobile #online-entry select,body.mobile #join-form input,body.mobile #join-form button{min-height:40px}
 body.mobile #online-entry #create-room{min-height:44px;margin-top:6px}
}

/* --- Phone match: immersive full screen, same court shape as desktop --- */
body.mobile.playing{overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.mobile.playing .header,body.mobile.playing .arena-bottom,body.mobile.playing .under-arena,body.mobile.playing .arena-name,body.mobile.playing #fullscreen-start{display:none!important}
body.mobile.playing .app-shell{padding:0;max-width:none}
body.mobile.playing .arena-section{position:fixed;inset:0;z-index:5;margin:0;padding:0;border:0;border-radius:0;background:var(--app-page)}
body.mobile.playing .canvas-wrap{position:absolute;inset:0;width:100%;height:100%;max-height:none;min-height:0;aspect-ratio:auto;border:0;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--sar) 0 var(--sal);touch-action:none;background:transparent;box-shadow:none}
body.mobile.playing .canvas-wrap canvas{width:100%;height:100%;flex:1 1 auto;aspect-ratio:auto;touch-action:none}
body.mobile.playing .scoreboard{position:absolute;z-index:3;top:calc(var(--sat) + 8px);left:50%;transform:translateX(-50%);height:42px;gap:16px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:#04050dcc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;white-space:nowrap}
body.mobile.playing .score-team strong{font-size:1.4rem;min-width:0;color:#fff}
body.mobile.playing .score-team>span:not(.team-line){display:none}
body.mobile.playing .score-center{gap:0}
body.mobile.playing .score-center>span:first-child,body.mobile.playing .score-center small{font-size:.5rem}
body.mobile.playing .arena-topbar{position:absolute;z-index:4;top:calc(var(--sat) + 6px);right:calc(var(--sar) + 8px);margin:0;min-height:0;padding:0}
body.mobile.playing #pause-button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;background:#04050dcc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.mobile.playing #pause-button span{display:none}
body.mobile.playing .live-label{bottom:calc(var(--sab) + 8px)}
body.mobile.playing .powerup-status,body.mobile.playing .replay-overlay{top:calc(var(--sat) + 58px)}
body.mobile.playing .serve-overlay strong{font-size:5.2rem}
body.mobile.playing .rotate-hint{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 44px);margin:0;color:var(--app-muted);font:600 .7rem var(--font-ui);letter-spacing:.1em;text-align:center;pointer-events:none}
@media (orientation:landscape){
 body.mobile.playing .canvas-wrap{padding:0 var(--sar) 0 var(--sal)}
 body.mobile.playing .scoreboard{top:50%;left:calc(var(--sal) + 8px);transform:translateY(-50%);flex-direction:column;height:auto;width:auto;gap:8px;padding:10px;border-radius:16px}
 body.mobile.playing .score-team{flex-direction:column;gap:4px}
 body.mobile.playing .score-center{display:none}
 body.mobile.playing .team-line{width:24px;height:3px}
 body.mobile.playing .live-label{left:auto;right:calc(var(--sar) + 8px);bottom:calc(var(--sab) + 10px);transform:none}
 body.mobile.playing .arena-topbar{top:calc(var(--sat) + 8px)}
 body.mobile.playing .powerup-status{left:auto;right:calc(var(--sar) + 8px);top:calc(var(--sat) + 62px);transform:none;max-width:38vw;white-space:normal;text-align:right;padding:6px 10px;font-size:.62rem}
 body.mobile.playing .replay-overlay{top:calc(var(--sat) + 8px)}
 body.mobile.playing .serve-overlay strong{font-size:4.4rem}
}
@media (max-height:500px){.dialog{max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px);padding:14px 18px}.victory-result{padding:8px 14px}.victory-dialog .winner-symbol,.victory-kicker{display:none}.victory-dialog h2{font-size:1.15rem;margin:0 0 2px}.final-score{font-size:2.2rem}.match-stats{margin:6px 0;padding:5px 0}.match-stats strong{font-size:1rem}.victory-actions .primary-button{min-height:46px}.victory-actions .small-button{min-height:38px}.victory-unlocks{margin-bottom:6px}.victory-unlocks li{padding:5px 10px}}

/* ===================================================================
   Accessibility, light themes
   ========================================================================== */
.high-contrast{--app-border:var(--app-text);--line:color-mix(in srgb,var(--app-text) 55%,transparent)}
.high-contrast .small-button,.high-contrast select,.high-contrast .menu-tile{border-color:var(--app-text)}
.reduced-motion *,.reduced-motion *::before,.reduced-motion *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body[data-scheme=light]{--scrim:color-mix(in srgb,var(--app-page) 74%,transparent);--backdrop:color-mix(in srgb,var(--app-page) 82%,transparent)}
body[data-theme=aero]::before{background:radial-gradient(30vmax 14vmax at 18% 16%,#ffffffb8,transparent 72%),radial-gradient(22vmax 12vmax at 76% 24%,#ffffff8a,transparent 72%),linear-gradient(180deg,#67caf4 0 52%,#9bec72 73%,#34a957 100%)}
body[data-theme=aero]::after{opacity:.28;background:repeating-radial-gradient(ellipse at 50% 115%,#ffffff80 0 1px,transparent 2px 38px);transform:none;-webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent)}
body[data-scheme=light]::after{opacity:.16}
body[data-theme=aero] .hero-card,body[data-theme=aero] .setup-panel,body[data-theme=aero] .settings-card{box-shadow:inset 0 1px #fff,0 18px 50px #187c6824;background:linear-gradient(145deg,#ffffffed,#e8fff0dc)}
html:has(body[data-scheme=light])::after{opacity:0}
body.mobile .workshop-tabs button{font-size:.7rem;letter-spacing:.08em}
@media (max-height:720px){body.mobile:not(.playing) .stat-row{padding:6px 0}body.mobile:not(.playing) #install-app-settings{margin-top:8px;min-height:38px}}
/* Phone landscape (340 px tall): the back bar replaces the header on sub-screens. */
@media (orientation:landscape) and (max-height:520px){
 body.mobile:not(.playing)[data-view=match] .header,body.mobile:not(.playing)[data-view=workshop] .header,body.mobile:not(.playing)[data-view=settings] .header,body.mobile:not(.playing)[data-view=achievements] .header{display:none}
 body.mobile:not(.playing) .back-button{min-height:38px;padding:0 12px 0 10px}
 body.mobile:not(.playing) .screen-bar{margin:4px 0 6px}
 body.mobile:not(.playing) .setup-panel{padding:8px 12px}
 body.mobile:not(.playing) .settings-grid{overflow-y:auto;scrollbar-width:none}
 body.mobile:not(.playing) .settings-grid::-webkit-scrollbar{display:none}
 body.mobile:not(.playing) .settings-tabs button{min-height:32px}
}
@media (orientation:landscape) and (max-height:520px){
 body.mobile:not(.playing) #workshop-panel>.primary-button,body.mobile:not(.playing) .settings-bottom .primary-button{display:none}
 body.mobile:not(.playing) .settings-bottom{justify-content:center}
 body.mobile:not(.playing) .settings-bottom .text-button{min-height:30px}
 body.mobile:not(.playing) #match-panel{row-gap:2px}
 body.mobile:not(.playing) #match-panel .select-label,body.mobile:not(.playing) #match-panel .select-label select{min-height:36px}
}
@media (orientation:landscape) and (max-height:520px){
 body.mobile:not(.playing) .workshop-pane{gap:6px}
 body.mobile:not(.playing) .skin-section{gap:6px}
 body.mobile:not(.playing) .skin-button{min-height:34px;padding:3px 2px 2px;gap:2px;font-size:.56rem}
 body.mobile:not(.playing) .color-picker{gap:5px}
 body.mobile:not(.playing) .color-swatch{aspect-ratio:auto;height:22px;min-height:0}
}
/* Screen transitions */
@keyframes screen-in{from{opacity:0;transform:translateY(14px)}}
@keyframes tile-in{from{opacity:0;transform:translateX(-22px)}}
@keyframes logo-in{from{opacity:0;transform:scale(.94)}}
@media (prefers-reduced-motion:no-preference){
 .setup-panel:not([hidden]),.settings-view:not([hidden]),.screen-bar:not([hidden]),.theme-section:not([hidden]){animation:screen-in .38s var(--ease) both}
 .home:not([hidden]) .home-menu .menu-tile{animation:tile-in .5s var(--ease) both}
 .home:not([hidden]) .home-menu .menu-tile:nth-child(2){animation-delay:.06s}
 .home:not([hidden]) .home-menu .menu-tile:nth-child(3){animation-delay:.12s}
 .home:not([hidden]) .home-menu .menu-tile:nth-child(4){animation-delay:.18s}
 .home:not([hidden]) .home-menu .menu-tile:nth-child(5){animation-delay:.24s}
 .home:not([hidden]) .home-brand,.home:not([hidden])>div:first-child{animation:logo-in .6s var(--ease) both}
 .dialog[open]{animation:pop .3s var(--ease) both}
}

/* ===================================================================
   Desktop shell — the app fills the window, no page ever scrolls
   ========================================================================== */
.download-section{display:none!important}
body:not(.mobile){height:100vh;height:100dvh;overflow:hidden}
body:not(.mobile) .app-shell{height:100vh;height:100dvh;display:flex;flex-direction:column;max-width:1680px;padding:0 clamp(16px,2.6vw,44px) clamp(12px,2.2vh,24px)}
body:not(.mobile) .header{flex:0 0 var(--header-h)}
body:not(.mobile) main{flex:1;min-height:0;position:relative;z-index:2;display:flex;flex-direction:column}
body:not(.mobile) .footer{display:none}
body:not(.mobile) .screen-bar{flex:0 0 auto;margin:0 0 clamp(8px,1.6vh,16px)}
body:not(.mobile) .play-layout{flex:1;min-height:0;grid-template-columns:clamp(360px,31vw,470px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:stretch;gap:clamp(14px,2vw,28px)}
body:not(.mobile) .setup-panel{min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent;gap:clamp(8px,1.5vh,16px);padding:clamp(14px,2.4vh,22px)}
body:not(.mobile) .setup-panel>.primary-button{flex:0 0 auto;margin-top:auto}
body:not(.mobile) .setup-panel>h2{font-size:clamp(1.05rem,2.4vh,1.35rem)}
body:not(.mobile) .arena-section{display:flex;flex-direction:column;min-height:0;min-width:0}
body:not(.mobile) .arena-topbar{flex:0 0 auto;min-height:34px;margin-bottom:8px}
body:not(.mobile) .scoreboard{flex:0 0 auto;height:clamp(56px,9vh,84px)}
body:not(.mobile) .canvas-wrap{flex:1 1 0;min-height:0;aspect-ratio:auto}
body:not(.mobile) .arena-bottom{flex:0 0 auto;padding:7px 14px;border-radius:0 0 var(--r-lg) var(--r-lg)}
body:not(.mobile) .under-arena{flex:0 0 auto;margin-top:8px}
/* Compact vertical rhythm on short windows */
@media (max-height:820px){
 body:not(.mobile) .mode-card{padding:10px 14px 9px}
 body:not(.mobile) .mode-symbol{height:22px;font-size:1rem}
 body:not(.mobile) .segmented button,body:not(.mobile) .mode-buttons button{min-height:34px}
 body:not(.mobile) .select-label select,body:not(.mobile) select{min-height:38px}
 body:not(.mobile) .section-caption{font-size:.62rem}
 body:not(.mobile) .ruleset-section{gap:6px}
 body:not(.mobile) .mode-description{display:none}
 body:not(.mobile) .roster-row{padding:5px 9px}
 body:not(.mobile) #match-panel>.primary-button{min-height:48px}
}
@media (max-height:700px){
 body:not(.mobile) #match-panel>.section-caption,body:not(.mobile) #match-panel>h2{display:none}
 body:not(.mobile) .arena-bottom,body:not(.mobile) .under-arena{display:none}
}
/* Settings: one card at a time, chosen from tabs, centred */
body:not(.mobile) .settings-view{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2vh,20px);width:100%;max-width:820px;margin:0 auto}
body:not(.mobile) .settings-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;width:100%;padding:4px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--app-surface) 88%,transparent)}
body:not(.mobile) .settings-tabs button{min-height:44px;border-radius:10px;color:var(--app-muted);font:700 .74rem var(--font-display);letter-spacing:.12em;text-transform:uppercase;transition:color .2s,background .2s}
body:not(.mobile) .settings-tabs button:hover{color:var(--app-text)}
body:not(.mobile) .settings-tabs button.selected{color:var(--app-on-accent);background:linear-gradient(135deg,var(--app-accent),var(--app-accent-end))}
body:not(.mobile) .settings-grid{display:block;flex:1;min-height:0;width:100%}
body:not(.mobile) .settings-card{display:none;height:auto;max-height:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:clamp(14px,2.6vh,26px) clamp(16px,2.4vw,30px)}
body:not(.mobile) .settings-card.active{display:block}
body:not(.mobile) .settings-card h2{font-size:clamp(1rem,2.4vh,1.25rem);margin-bottom:clamp(4px,1vh,10px)}
body:not(.mobile) .settings-bottom{flex:0 0 auto;width:100%}
body:not(.mobile) .settings-bottom .primary-button{min-height:48px}
/* Workshop: 4 tabs, theme gallery lives here */
body:not(.mobile) .workshop-tabs{grid-template-columns:repeat(3,1fr)}
body:not(.mobile) .workshop-tabs button{font-size:.66rem;letter-spacing:.06em;padding:0 4px}
body:not(.mobile) .workshop-pane{display:flex;flex-direction:column;flex:0 0 auto;gap:clamp(8px,1.6vh,16px)}
body:not(.mobile) .workshop-pane[hidden]{display:none}
body:not(.mobile) .camp-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px}
body:not(.mobile) .camp-tabs button{min-height:44px;border:1px solid var(--line);border-radius:12px;color:var(--app-muted);font:700 .74rem var(--font-display);letter-spacing:.1em;text-transform:uppercase}
body:not(.mobile) .camp-tabs button.selected{border-color:var(--app-accent);color:var(--app-text);background:var(--accent-a)}
body:not(.mobile) .skin-section:not(.active){display:none}
body:not(.mobile) .skin-section h3{display:none}
.theme-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.theme-swatch{height:44px}
.theme-swatch::before,.theme-swatch::after{top:9px;height:26px}
.swatch-ball{top:20px}
.theme-card{padding-bottom:8px}
.theme-card strong{padding:8px 10px 0;font-size:.66rem}
.theme-card small{display:none}
/* Playing on desktop: the arena takes the whole window, HUD floats on top */
body:not(.mobile).playing .header,body:not(.mobile).playing .arena-bottom,body:not(.mobile).playing .under-arena,body:not(.mobile).playing .arena-name,body:not(.mobile).playing #fullscreen-start{display:none!important}
body:not(.mobile).playing .app-shell{padding:0;max-width:none}
body:not(.mobile).playing .play-layout{display:block;max-width:none;margin:0}
body:not(.mobile).playing .arena-section{position:fixed;inset:0;z-index:5;display:block;margin:0;padding:0;border:0;border-radius:0;background:var(--app-page)}
body:not(.mobile).playing .canvas-wrap{position:absolute;inset:0;width:100%;height:100%;max-height:none;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none}
body:not(.mobile).playing .scoreboard{position:absolute;z-index:3;top:14px;left:50%;transform:translateX(-50%);height:52px;gap:22px;padding:0 26px;border:1px solid var(--line);border-radius:999px;background:#04050dcc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;white-space:nowrap}
body:not(.mobile).playing .score-team strong{font-size:1.9rem;min-width:0;color:#fff}
body:not(.mobile).playing .score-team>span:not(.team-line){display:none}
body:not(.mobile).playing .score-center{gap:0}
body:not(.mobile).playing .score-center>span:first-child,body:not(.mobile).playing .score-center small{font-size:.56rem}
body:not(.mobile).playing .arena-topbar{position:absolute;z-index:4;top:14px;right:16px;margin:0;min-height:0}
body:not(.mobile).playing #pause-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:#04050dcc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body:not(.mobile).playing .live-label{bottom:16px}
body:not(.mobile).playing .powerup-status,body:not(.mobile).playing .replay-overlay{top:78px}
.workshop-tabs{grid-template-columns:repeat(3,1fr)}
.workshop-pane[data-workshop-pane=themes]{overflow-y:auto;scrollbar-width:none}
.workshop-pane[data-workshop-pane=themes]::-webkit-scrollbar{display:none}
body.mobile .workshop-tabs button{font-size:.62rem;letter-spacing:.04em;padding:0 2px}
body.mobile:not(.playing) .theme-grid{grid-template-columns:repeat(3,1fr);gap:8px}
/* Desktop Jouer panel: paired controls so the whole setup fits without scrolling */
body:not(.mobile) #match-panel{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;row-gap:clamp(7px,1.3vh,14px);align-content:start}
body:not(.mobile) #match-panel>*{grid-column:1/-1}
body:not(.mobile) #match-panel>.layout-select{grid-column:1}
body:not(.mobile) #match-panel>label[for=quick-difficulty]{grid-column:2}
body:not(.mobile) #match-panel>.layout-select,body:not(.mobile) #match-panel>label[for=quick-difficulty]{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;font-size:.66rem}
body:not(.mobile) #match-panel select{width:100%;max-width:none;flex:none}
body:not(.mobile) #match-panel>#start-button{align-self:end;margin-top:0}
body:not(.mobile) #match-panel>#start-note,body:not(.mobile) #match-panel>#online-shortcut{display:none}
body:not(.mobile) #roster-summary{grid-template-columns:1fr 1fr}
body:not(.mobile) #match-panel .mode-card{grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;column-gap:12px;row-gap:0;padding:10px 14px}
body:not(.mobile) #match-panel .mode-card .mode-symbol{grid-row:1/3;height:auto}
body:not(.mobile) #match-panel .mode-buttons{grid-template-columns:repeat(3,1fr)}
@media (max-height:900px){body:not(.mobile) #match-panel>.section-caption,body:not(.mobile) #match-panel>h2{display:none}}
body:not(.mobile) #match-panel>.mode-options{order:1}
body:not(.mobile) #match-panel>.segmented{order:2}
body:not(.mobile) #match-panel>.ruleset-section{order:3}
body:not(.mobile) #match-panel>.layout-select{order:4}
body:not(.mobile) #match-panel>label[for=quick-difficulty]{order:5}
body:not(.mobile) #match-panel>#team-formation-row{order:6}
body:not(.mobile) #match-panel>.row-heading{order:7}
body:not(.mobile) #match-panel>#roster-summary{order:8}
body:not(.mobile) #match-panel>.game-mode-section{order:9}
body:not(.mobile) #match-panel>#start-button{order:10}
@media (max-height:700px){
 body:not(.mobile) .setup-panel{padding:12px 14px;gap:7px}
 body:not(.mobile) #match-panel{row-gap:6px}
 body:not(.mobile) #match-panel .mode-card{padding:6px 12px}
 body:not(.mobile) #match-panel .mode-card small{display:none}
 body:not(.mobile) .segmented button,body:not(.mobile) .mode-buttons button{min-height:30px}
 body:not(.mobile) .select-label select,body:not(.mobile) select{min-height:34px}
 body:not(.mobile) .roster-row{padding:3px 8px;font-size:.8rem}
 body:not(.mobile) .team-marker{height:24px;min-width:26px}
 body:not(.mobile) .row-heading h3{font-size:.85rem}
 body:not(.mobile) .primary-button{min-height:44px}
 body:not(.mobile) .skin-button{min-height:52px;padding:6px 4px 5px;gap:5px}
 body:not(.mobile) .color-swatch{width:26px;height:26px;aspect-ratio:auto;justify-self:center}
 body:not(.mobile) .workshop-tabs button,body:not(.mobile) .camp-tabs button{min-height:32px}
 body:not(.mobile) .stat-row{padding:5px 0}
 body:not(.mobile) .settings-card .setting-footnote:not(#app-version){display:none}
 body:not(.mobile) .setting-row{min-height:44px}
 body:not(.mobile) .scoreboard{height:52px}
}
@media (max-height:820px){
 body:not(.mobile) #workshop-panel>.section-caption,body:not(.mobile) #workshop-panel>h2{display:none}
}
@media (max-height:700px){
 body:not(.mobile) .skin-button{min-height:46px;padding:4px 4px 3px;gap:3px}
 body:not(.mobile) .color-swatch{width:22px;height:22px}
 body:not(.mobile) .color-picker{gap:6px}
 body:not(.mobile) .color-palette{gap:6px}
 body:not(.mobile) .theme-swatch{height:36px}
 body:not(.mobile) .theme-swatch::before,body:not(.mobile) .theme-swatch::after{top:6px;height:22px}
 body:not(.mobile) .swatch-ball{top:15px}
}
body:not(.mobile).playing .under-arena{display:flex!important;position:absolute;z-index:4;left:18px;right:18px;bottom:12px;margin:0;pointer-events:none;opacity:.72;font-size:.74rem}
body:not(.mobile).playing .under-arena button{pointer-events:auto}
.theme-card strong{overflow-wrap:anywhere;letter-spacing:.06em}
body.mobile .theme-card strong{font-size:.58rem;padding:8px 8px 0}
@media (orientation:landscape) and (max-height:520px){
 body.mobile:not(.playing) .theme-grid{grid-template-columns:repeat(4,1fr);gap:6px}
 body.mobile:not(.playing) .theme-swatch{height:30px}
 body.mobile:not(.playing) .theme-swatch::before,body.mobile:not(.playing) .theme-swatch::after{top:5px;height:20px}
 body.mobile:not(.playing) .swatch-ball{top:12px}
}
@media (orientation:landscape) and (max-height:520px){body.mobile:not(.playing) .color-swatch{width:22px;justify-self:center}}

/* ===================================================================
   Online lobby, victory screen, first-run tutorial
   ========================================================================== */
.online-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.online-card{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:color-mix(in srgb,var(--app-surface) 82%,transparent)}
.online-card:first-child{border-color:var(--accent-b);background:linear-gradient(160deg,var(--accent-a),transparent 70%)}
.online-card h3{font:800 1.05rem var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.online-card .muted{font-size:.84rem}
.online-card .setting-row{border:0;padding:0;min-height:0}
.online-card .primary-button{margin-top:auto}
.online-card #join-form{margin-top:auto}
#online-entry>.setting-footnote{margin-top:14px}
.room-banner{position:relative;overflow:hidden}
.room-banner::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22px,color-mix(in srgb,var(--app-accent) 7%,transparent) 22px 23px);pointer-events:none}
.room-banner>*{position:relative}
.room-banner strong{font-size:clamp(1.6rem,5vw,2.4rem);letter-spacing:.2em}
.room-slot.taken{border-color:color-mix(in srgb,var(--app-accent) 40%,var(--line));background:linear-gradient(135deg,var(--accent-a),transparent 80%)}
.room-slot.free{border-style:dashed}
.room-slot.free:not(:disabled):hover{border-color:var(--app-accent);border-style:solid;transform:translateY(-1px)}
.room-slot.free span:last-child{color:var(--app-muted)}
.room-slot.selected{border-style:solid}
@media (max-width:560px){.online-choices{grid-template-columns:1fr}}
@media (max-height:520px) and (orientation:landscape){body.mobile .online-choices{grid-template-columns:1fr 1fr;gap:10px}body.mobile .online-card{padding:10px 12px;gap:6px}body.mobile .online-card .muted{display:none}body.mobile .online-card h3{font-size:.9rem}body.mobile #online-entry>.setting-footnote{display:none}body.mobile #online-entry .nickname-label{margin-bottom:6px;gap:4px}body.mobile #online-entry .nickname-label input,body.mobile #online-entry select,body.mobile #join-form input,body.mobile #join-form button{min-height:38px}}
/* Victory */
.victory-dialog{max-width:520px;overflow:hidden;--winner:var(--app-accent)}
.victory-dialog[data-winner=b]{--winner:var(--app-accent2)}
.victory-dialog::before{content:"";position:absolute;inset:0 0 auto;height:180px;background:radial-gradient(60% 100% at 50% 0,color-mix(in srgb,var(--winner) 34%,transparent),transparent 75%);pointer-events:none}
.victory-dialog>*{position:relative}
.victory-dialog .section-caption{color:var(--winner)}
.winner-symbol{color:var(--winner);text-shadow:0 0 34px var(--winner)}
.victory-dialog h2{font-size:clamp(1.2rem,4.6vw,1.6rem)}
.final-score{margin:6px 0 2px;font-size:clamp(2.6rem,10vw,3.8rem);text-shadow:0 0 34px color-mix(in srgb,var(--winner) 70%,transparent)}
.match-stats{grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0;padding:0;border:0}
.match-stats>div{padding:10px 4px;border:1px solid var(--line);border-radius:var(--r-md);background:color-mix(in srgb,var(--app-surface) 80%,transparent)}
.match-stats strong{font-size:1.15rem}
.match-stats small{margin-top:4px;font-size:.54rem;letter-spacing:.1em}
.victory-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.victory-actions .small-button{width:auto;margin-top:0}
.victory-dialog #rematch-button{margin-top:4px}
@media (prefers-reduced-motion:no-preference){.winner-symbol{animation:winpulse 2.4s ease-in-out infinite}.final-score{animation:pop .6s var(--ease) both}}
@keyframes winpulse{50%{transform:scale(1.08);text-shadow:0 0 52px var(--winner)}}
@media (max-height:500px){.victory-dialog::before{display:none}.match-stats{margin:6px 0}.match-stats>div{padding:4px 2px}.victory-actions{margin-top:4px}}
/* Tutorial */
.tutorial-dialog{max-width:520px}
.tutorial-dialog h2{margin:6px 0 16px;font-size:1.5rem}
.tutorial-steps{display:grid;gap:10px;margin-bottom:18px}
.tutorial-step{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:color-mix(in srgb,var(--app-surface) 82%,transparent)}
.step-icon{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--accent-b);border-radius:14px;background:var(--accent-a);color:var(--app-accent-ink);font:800 1.5rem var(--font-display);text-shadow:0 0 16px var(--app-accent)}
.tutorial-step strong{display:block;font:800 .82rem var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.tutorial-step p{margin-top:3px;color:var(--app-muted);font-size:.86rem}
@media (max-height:560px){.tutorial-dialog{padding:14px 18px}.tutorial-dialog h2{margin:2px 0 8px;font-size:1.1rem}.tutorial-dialog .section-caption{display:none}.tutorial-steps{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}.tutorial-step{grid-template-columns:1fr;padding:8px;gap:6px;text-align:center}.step-icon{width:34px;height:34px;margin:auto;font-size:1rem}.tutorial-step p{font-size:.68rem}.tutorial-dialog .primary-button{min-height:42px}}
.tutorial-dialog .text-button{display:block;margin:8px auto 0}
@media (max-height:720px) and (orientation:portrait){
 .tutorial-dialog{padding:16px 18px}
 .tutorial-dialog .section-caption{display:none}
 .tutorial-dialog h2{margin:0 0 10px;font-size:1.3rem}
 .tutorial-steps{gap:8px;margin-bottom:12px}
 .tutorial-step{grid-template-columns:40px 1fr;padding:8px 12px;gap:12px}
 .step-icon{width:40px;height:40px;font-size:1.2rem}
 .tutorial-step p{font-size:.78rem;line-height:1.3}
 body.mobile .online-card .muted,body.mobile #online-entry>.setting-footnote{display:none}
 body.mobile .online-card{padding:14px;gap:8px}
}

/* ===================================================================
   Achievements screen
   ========================================================================== */
.record-link{display:grid;min-width:88px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--app-panel) 74%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:left;color:inherit;transition:border-color .2s,transform .15s var(--ease),box-shadow .2s}
.record-link:hover{border-color:var(--app-accent);transform:translateY(-2px);box-shadow:0 8px 24px var(--accent-a)}
.record-link strong{font:800 1.15rem var(--font-display);color:var(--app-text)}
.record-link small{margin-top:2px;color:var(--app-accent-ink);font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
body.mobile .record-link{min-width:72px;padding:6px 10px;border-radius:11px;text-align:center}
body.mobile .record-link strong{font-size:.9rem}
body.mobile .record-link small{font-size:.52rem}
.ach-summary{display:flex;align-items:center;gap:20px;width:100%;padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ach-summary h2{margin:2px 0;font-size:1.5rem}
.ach-summary .muted{font-size:.84rem}
.ach-ring{--p:0;flex:0 0 auto;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:radial-gradient(closest-side,var(--app-panel) 78%,transparent 80%),conic-gradient(var(--app-accent) calc(var(--p)*1%),color-mix(in srgb,var(--app-muted) 22%,transparent) 0);box-shadow:0 0 30px var(--accent-a)}
.ach-ring strong{font:800 1.1rem var(--font-display)}
.ach-tabs .selected::after{color:inherit}
.ach-tabs button::after{content:" " attr(data-count);opacity:.6;font-weight:500}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:10px;width:100%;align-content:start}
.ach-card{position:relative;display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:color-mix(in srgb,var(--app-surface) 84%,transparent)}
.ach-icon{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--app-surface) 70%,transparent);font-size:1.6rem}
.ach-text{display:grid;gap:2px;min-width:0}
.ach-text strong{font:800 .8rem var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.ach-text small{color:var(--app-muted);font-size:.8rem;line-height:1.3}
.ach-reward{color:var(--app-accent-ink);font-size:.7rem;font-style:normal;font-weight:700;letter-spacing:.06em}
.ach-rarity{align-self:start;padding:3px 8px;border:1px solid var(--line);border-radius:999px;color:var(--app-muted);font:700 .55rem var(--font-ui);letter-spacing:.14em;text-transform:uppercase}
.ach-card.unlocked{border-color:var(--accent-b);background:linear-gradient(135deg,var(--accent-a),transparent 75%)}
.ach-card.unlocked .ach-icon{border-color:var(--accent-b);background:var(--accent-a);box-shadow:0 0 18px var(--accent-a)}
.ach-card.unlocked.rare .ach-rarity{color:var(--app-accent2);border-color:color-mix(in srgb,var(--app-accent2) 50%,transparent)}
.ach-card.unlocked.legendary{border-color:#ffc857;background:linear-gradient(135deg,#ffc85726,transparent 75%)}
.ach-card.unlocked.legendary .ach-rarity{color:#ffc857;border-color:#ffc85780}
.ach-card.locked{opacity:.62}
.ach-card.locked .ach-icon{filter:grayscale(1)}
body:not(.mobile) .achievements-view{max-width:920px}
body:not(.mobile) .ach-tabs{grid-template-columns:repeat(3,1fr)}
body:not(.mobile) .ach-grid{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
body.mobile .ach-tabs{grid-template-columns:repeat(3,1fr)}
body.mobile .ach-tabs button{font-size:.62rem}
body.mobile:not(.playing) .ach-grid{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;grid-template-columns:1fr}
body.mobile:not(.playing) .ach-summary{padding:10px 14px;gap:14px}
body.mobile:not(.playing) .ach-ring{width:56px;height:56px}
body.mobile:not(.playing) .ach-ring strong{font-size:.8rem}
body.mobile:not(.playing) .ach-summary h2{font-size:1.15rem}
body.mobile:not(.playing) .ach-summary .muted,body.mobile:not(.playing) .ach-summary .section-caption{display:none}
body.mobile:not(.playing) .ach-card{grid-template-columns:44px 1fr;padding:8px 10px;gap:10px}
body.mobile:not(.playing) .ach-icon{width:44px;height:44px;font-size:1.3rem}
body.mobile:not(.playing) .ach-rarity{display:none}
body.mobile:not(.playing) .ach-text small{font-size:.74rem}
@media (max-height:720px){body:not(.mobile) .ach-summary{padding:10px 16px}body:not(.mobile) .ach-ring{width:60px;height:60px}body:not(.mobile) .ach-summary .muted{display:none}body:not(.mobile) .ach-card{padding:8px 12px}body:not(.mobile) .ach-icon{width:42px;height:42px;font-size:1.3rem}}
@media (orientation:landscape) and (max-height:520px){body.mobile:not(.playing) .ach-summary{display:none}body.mobile:not(.playing) .ach-grid{grid-template-columns:1fr 1fr}}
@media (orientation:landscape) and (max-height:520px){
 body.mobile:not(.playing) .ach-grid{gap:6px}
 body.mobile:not(.playing) .ach-card{grid-template-columns:32px 1fr;padding:5px 8px;gap:8px}
 body.mobile:not(.playing) .ach-icon{width:32px;height:32px;font-size:1rem;border-radius:9px}
 body.mobile:not(.playing) .ach-text strong{font-size:.66rem}
 body.mobile:not(.playing) .ach-text small{font-size:.64rem;line-height:1.2}
 body.mobile:not(.playing) .ach-reward{font-size:.6rem}
 body.mobile:not(.playing) .ach-tabs button{min-height:30px}
}
/* Help and participants dialogs: wider, card-based, no long text wall */
#help-dialog{width:min(900px,calc(100vw - 28px))}
#help-dialog .help-controls{grid-template-columns:1fr 1fr;column-gap:22px;margin:4px 0 8px}
#help-dialog .help-row{padding:8px 0}
#help-dialog #remap-status{margin-bottom:10px;font-size:.8rem}
#help-dialog .help-info{grid-template-columns:repeat(3,1fr);gap:5px 8px;font-size:.76rem}
#help-dialog .help-info p{margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--app-surface) 78%,transparent);line-height:1.35}
#help-dialog .help-info p:last-child{grid-column:1/-1}
#help-dialog .help-info p:first-child{grid-column:1/-1;display:flex;align-items:center;gap:8px;color:var(--app-text)}
#help-dialog .help-info strong{display:block;margin-bottom:3px;color:var(--app-accent-ink);font:800 .66rem var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.dialog-actions{justify-content:space-between;align-items:center}
.dialog-actions .primary-button{min-width:min(320px,100%)}
@media (max-width:820px){#help-dialog .help-info{grid-template-columns:1fr 1fr}#help-dialog .help-controls{grid-template-columns:1fr}}
@media (max-width:520px){#help-dialog .help-info{grid-template-columns:1fr}}
/* Participants dialog on phones: label over select, main action first */
body.mobile #participants-dialog{padding:16px 18px}
body.mobile #participants-dialog .section-caption{display:none}
body.mobile #participants-dialog h2{font-size:1.25rem;margin:0}
body.mobile #participants-dialog #team-explanation{font-size:.8rem;margin:6px 0 4px}
body.mobile .participant{grid-template-columns:32px 1fr;grid-template-rows:auto auto;gap:6px 10px;padding:10px 0}
body.mobile .participant select{grid-column:1/-1;width:100%;max-width:none}
body.mobile .participant label{font-size:.9rem}
body.mobile #participants-dialog #gamepad-status{display:none}
body.mobile #participants-dialog .dialog-actions{flex-direction:column-reverse;align-items:stretch;gap:6px;margin-top:10px}
body.mobile #participants-dialog .dialog-actions .primary-button{width:100%;min-width:0}
body.mobile #participants-dialog .dialog-actions .small-button{width:100%;min-height:38px;border:0;background:none;color:var(--app-muted)}
body.mobile #participants-list{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
body.mobile #participants-list.many{grid-auto-flow:column;grid-template-rows:repeat(2,auto)}
body.mobile .participant{border-bottom:0;border-top:1px solid var(--line)}
body.mobile .participant label{font-size:.78rem}
body.mobile .participant select{font-size:.8rem;padding-inline:10px}
body.mobile #participants-dialog .primary-button{font-size:.85rem;letter-spacing:.06em}
@media (orientation:landscape) and (max-height:520px){
 body.mobile #participants-dialog{padding:10px 16px}
 body.mobile #participants-dialog h2{font-size:1rem}
 body.mobile #participants-dialog #team-explanation{display:none}
 body.mobile .participant{grid-template-columns:30px 1fr minmax(100px,130px);grid-template-rows:auto;padding:6px 0}
 body.mobile .participant select{grid-column:auto;min-height:36px}
 body.mobile .participant small{display:none}
 body.mobile #participants-dialog .dialog-actions{flex-direction:row-reverse;justify-content:space-between;margin-top:6px}
 body.mobile #participants-dialog .dialog-actions .primary-button{width:auto;min-width:0;flex:1;min-height:40px}
 body.mobile #participants-dialog .dialog-actions .small-button{width:auto;flex:0 0 auto}
}

/* Achievement unlock banner and bonus notice */
.ach-banner{position:fixed;left:50%;bottom:calc(64px + var(--sab));transform:translateX(-50%);z-index:310;display:flex;align-items:center;gap:14px;min-width:min(320px,calc(100vw - 28px));max-width:min(460px,calc(100vw - 28px));padding:12px 20px 12px 14px;border:1px solid #ffc857;border-radius:18px;background:linear-gradient(135deg,#2a2107f2,#04050df2 70%);color:var(--app-text);box-shadow:0 14px 50px #000a,0 0 40px #ffc85740;pointer-events:none}
.ach-banner[hidden]{display:none}
.ach-banner-icon{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;border:1px solid #ffc85799;border-radius:14px;background:#ffc8571f;font-size:1.6rem}
.ach-banner small{display:block;color:#ffc857;font:700 .58rem var(--font-ui);letter-spacing:.24em}
.ach-banner strong{display:block;margin-top:2px;font:800 .95rem var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.ach-banner em{display:block;margin-top:2px;color:var(--app-muted);font-size:.76rem;font-style:normal}
@media (prefers-reduced-motion:no-preference){
 .ach-banner.show{animation:banner-in .5s var(--ease) both,banner-glow 1.6s ease-in-out .5s 2}
 .powerup-status:not([hidden]){animation:bonus-in .35s var(--ease) both}
}
@keyframes banner-in{from{opacity:0;transform:translate(-50%,24px) scale(.94)}}
@keyframes banner-glow{50%{box-shadow:0 14px 50px #000a,0 0 60px #ffc85780}}
@keyframes bonus-in{from{opacity:0;translate:0 -10px;scale:.9}}
body.mobile.playing .ach-banner{bottom:calc(56px + var(--sab))}
body:not(.mobile).playing .ach-banner{bottom:56px}

/* ===================================================================
   Codex look, applied everywhere: tinted hero cards, kicker pills, and
   dominant actions with a small kicker above their label
   ========================================================================== */
.hero-card{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--winner,var(--app-accent)) 46%,var(--line));border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--winner,var(--app-accent)) 16%,var(--app-surface)),var(--app-surface))}
.hero-card::before{content:"";position:absolute;inset:-80% 20% auto;height:150%;background:radial-gradient(circle,var(--accent-b),transparent 68%);opacity:.6;pointer-events:none}
.hero-card>*{position:relative}
.kicker{display:inline-flex;align-self:center;padding:5px 10px;border:1px solid var(--line);border-radius:999px;color:var(--app-muted);font:800 .61rem var(--font-display);letter-spacing:.18em;text-transform:uppercase}
.primary-button>span:first-child small{display:block;margin-bottom:2px;color:inherit;font:800 .58rem var(--font-display);letter-spacing:.18em;opacity:.92}
.primary-button:has(small){min-height:60px;text-align:left}
.tutorial-hero{display:grid;justify-items:center;gap:8px;margin-bottom:12px;padding:16px 18px 14px;text-align:center}
.tutorial-hero h2{margin:0}
.ach-summary.hero-card{background:linear-gradient(145deg,color-mix(in srgb,var(--app-accent) 14%,var(--app-surface)),var(--app-surface));-webkit-backdrop-filter:none;backdrop-filter:none}
.room-banner.hero-card{border-radius:20px}
.room-banner.hero-card::before{background:radial-gradient(circle,var(--accent-b),transparent 68%);inset:-80% 20% auto}
@media (max-height:520px){
 .primary-button:has(small){min-height:44px}
 .primary-button>span:first-child small{display:none}
 .tutorial-hero{padding:6px 12px;margin-bottom:6px}
 .tutorial-hero .kicker{display:none}
}
@media (max-height:720px) and (orientation:portrait){.tutorial-hero .kicker{display:none}.tutorial-hero{padding:10px 14px}}
@media (max-height:820px){body:not(.mobile) .primary-button:has(small){min-height:52px}}
@media (max-height:700px){body:not(.mobile) .primary-button:has(small){min-height:44px}body:not(.mobile) .setup-panel .primary-button>span:first-child small{display:none}}
@media (max-height:820px){body:not(.mobile) .skin-button{min-height:62px;padding-block:8px 6px}}
body.mobile:not(.playing) .settings-bottom .primary-button:has(small){min-height:48px}
@media (max-height:700px){body.mobile:not(.playing) .settings-bottom .primary-button:has(small){min-height:44px}body.mobile:not(.playing) .settings-bottom .primary-button small{display:none}}

/* Square and circle arenas: lives are drawn on the court, so the two-team scoreboard is reduced to the format label */
body[data-arena-kind=square].playing .scoreboard .score-team,body[data-arena-kind=circle].playing .scoreboard .score-team{display:none}
.victory-dialog[data-winner=c]{--winner:#ffcf55}
.victory-dialog[data-winner=d]{--winner:#67d9ff}

/* Hidden setup controls must stay hidden even where phone layout forces display */
body.mobile:not(.playing) #match-panel>[hidden]{display:none!important}
.arena-options button{font-size:.72rem;letter-spacing:.04em;padding:0 4px}
body[data-arena-kind=square] .rotate-hint,body[data-arena-kind=circle] .rotate-hint{display:none!important}
@media (orientation:landscape) and (max-height:520px){
 body.mobile:not(.playing) #match-panel{row-gap:0;padding-block:6px}
 body.mobile:not(.playing) #match-panel .mode-card{min-height:36px;padding-block:3px}
 body.mobile:not(.playing) #match-panel .segmented button{min-height:31px}
 body.mobile:not(.playing) #match-panel .segmented{padding:3px}
 body.mobile:not(.playing) #match-panel .select-label,body.mobile:not(.playing) #match-panel .select-label select{min-height:32px}
 body.mobile:not(.playing) #match-panel>.game-mode-section{align-self:start}
 body.mobile:not(.playing) #match-panel .mode-buttons button{min-height:34px}
}
@media (max-height:700px){body:not(.mobile) #match-panel .ruleset-section .section-caption,body:not(.mobile) #match-panel>.game-mode-section .section-caption{display:none}}
/* Radial arenas: the local paddle sits at the bottom centre, so the rally counter moves to the corner */
body[data-arena-kind=square].playing .live-label,body[data-arena-kind=circle].playing .live-label{left:auto;right:16px;bottom:16px;transform:none}
body.mobile[data-arena-kind=square].playing .live-label,body.mobile[data-arena-kind=circle].playing .live-label{right:calc(var(--sar) + 10px);bottom:calc(var(--sab) + 10px)}

/* Achievements: four categories */
body:not(.mobile) .ach-tabs{grid-template-columns:repeat(4,1fr)}
body.mobile .ach-tabs{grid-template-columns:repeat(4,1fr)}
body.mobile .ach-tabs button{font-size:.56rem;letter-spacing:.02em;padding:0 2px}
body.mobile .ach-tabs button::after{display:block;margin-top:1px}
@media (max-height:700px) and (orientation:portrait){body.mobile:not(.playing) .ach-card{padding:5px 9px}body.mobile:not(.playing) .ach-text small{font-size:.68rem;line-height:1.15}body.mobile:not(.playing) .ach-grid{gap:6px}body.mobile:not(.playing) .ach-summary{padding:6px 12px}body.mobile:not(.playing) .ach-ring{width:44px;height:44px}}
/* The in-match HUD pills are dark glass in every theme, so light themes must not paint dark text on them. */
body.playing .scoreboard,body.playing .live-label{color:#eef2ff}
body.playing .scoreboard .score-team>span:not(.team-line),body.playing .scoreboard #match-format,body.playing .scoreboard small,body.playing .scoreboard .score-divider{color:#aab8dd}
body.playing #pause-button{color:#eef2ff}

/* --- Rules: quick buttons, picker and custom editor --- */
.ruleset-options{grid-auto-flow:row;grid-template-columns:repeat(3,1fr)}
.ruleset-options button{font-size:.68rem;letter-spacing:.02em;line-height:1.15;padding:4px;white-space:normal;text-align:center}
.rules-dialog{width:min(660px,calc(100vw - 28px - var(--sal) - var(--sar)))}
.rules-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.rule-card{--rc:var(--app-accent);position:relative;display:grid;grid-template-columns:auto 1fr;align-items:start;gap:4px 12px;padding:14px 34px 13px 14px;border:1px solid var(--line);border-radius:var(--r-md);text-align:left;background:color-mix(in srgb,var(--app-surface) 85%,transparent);transition:border-color .2s,box-shadow .25s,transform .15s var(--ease)}
.rule-card:hover{border-color:color-mix(in srgb,var(--rc) 60%,var(--app-border))}
.rule-card:active{transform:scale(.985)}
.rule-card[data-rule-choice=remix]{--rc:#ffbd63}
.rule-card[data-rule-choice=triple]{--rc:#3fb8f0}
.rule-card[data-rule-choice=remixplus]{--rc:#c66cf5}
.rule-card[data-rule-choice=chaos]{--rc:#ff4d6a}
.rule-card[data-rule-choice=custom]{--rc:#3fc873}
.rule-card.selected{border-color:var(--rc);background:linear-gradient(135deg,color-mix(in srgb,var(--rc) 16%,transparent),color-mix(in srgb,var(--app-surface) 85%,transparent));box-shadow:0 0 0 1px color-mix(in srgb,var(--rc) 40%,transparent),0 10px 30px color-mix(in srgb,var(--rc) 16%,transparent)}
.rule-card .check{background:var(--rc)}
.rule-glyph{width:46px;padding-top:1px;text-align:center;font:800 1rem/1.25 var(--font-display);white-space:nowrap;color:color-mix(in srgb,var(--rc) 68%,var(--app-text))}
.rule-text{display:grid;gap:3px}
.rule-text strong{font:800 .86rem var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.rule-text small{color:var(--app-muted);font-size:.78rem;line-height:1.35;font-weight:500}
.custom-dialog{width:min(760px,calc(100vw - 28px - var(--sal) - var(--sar)))}
.rules-dialog[open],.custom-dialog[open]{display:flex;flex-direction:column;overflow:hidden}
.rules-dialog .dialog-heading,.custom-dialog .dialog-heading,.custom-dialog .dialog-actions{flex:none}
.rules-grid,.custom-body{min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin-right:-12px;padding-right:12px}
.custom-body{display:grid;gap:14px}
.custom-label{display:block;margin-bottom:8px;color:var(--app-muted);font:600 .72rem var(--font-ui);letter-spacing:.22em;text-transform:uppercase}
.item-toggles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.item-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 8px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--app-surface) 88%,transparent);color:var(--app-muted);font:700 .78rem var(--font-ui);letter-spacing:.06em;text-transform:uppercase;transition:border-color .2s,background .2s,color .2s,box-shadow .2s}
.item-toggle span{font-size:1rem;line-height:1}
.item-toggle:hover{color:var(--app-text)}
.item-toggle[aria-pressed=true]{color:var(--app-text);border-color:var(--app-accent);background:linear-gradient(135deg,var(--accent-a),color-mix(in srgb,var(--app-accent) 12%,transparent));box-shadow:0 0 0 1px var(--accent-b)}
.custom-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px}
.custom-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t o" "s s";align-items:center;gap:0 12px;padding:8px 0 4px}
.custom-row>span:first-child{grid-area:t}
.custom-row .range-wrap{display:contents}
.custom-row input[type=range]{grid-area:s;width:100%;margin:0}
.custom-row output{grid-area:o}
.custom-row input:disabled{opacity:.35;cursor:not-allowed}
body .custom-dialog .custom-row.setting-row{min-height:0}
@media (pointer:coarse){.custom-row input[type=range]{height:36px}}
.rule-glyph,.rule-text strong{font-family:var(--font-display)}
#rules-more,.item-toggle,#setting-ruleset{font-family:var(--font-ui)}
@media (max-width:560px){
 .rules-grid{grid-template-columns:minmax(0,1fr);gap:8px}.custom-grid{grid-template-columns:minmax(0,1fr)}.item-toggles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .rules-dialog,.custom-dialog{padding:18px 16px}
 .rules-dialog .dialog-heading,.custom-dialog .dialog-heading{margin-bottom:10px}
 .rules-dialog .section-caption,.custom-dialog .section-caption{display:none}
 .rules-dialog .dialog-heading h2,.custom-dialog .dialog-heading h2{margin-top:0;font-size:1.2rem}
 .rule-card{padding:10px 30px 10px 10px;gap:2px 8px}
 .rule-glyph{width:38px;font-size:.9rem}
 .rule-text small{font-size:.72rem;line-height:1.28}
 .custom-row small{display:none}body .custom-dialog .custom-row.setting-row{padding:3px 0 0}
 .item-toggle{min-height:40px}
 .custom-dialog .dialog-actions{flex-direction:column-reverse;align-items:stretch;gap:4px;margin-top:8px}
 .custom-dialog .dialog-actions .primary-button{width:100%;min-width:0;min-height:50px}
 .custom-dialog .dialog-actions .small-button{min-height:36px;border:0;background:none;color:var(--app-muted)}
}
@media (max-width:340px){.ruleset-options{grid-template-columns:repeat(2,1fr)}.ruleset-options button{font-size:.64rem;letter-spacing:.02em}}
@media (max-width:560px) and (max-height:720px){.rule-text small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
@media (max-height:520px){
 .rules-dialog .dialog-heading,.custom-dialog .dialog-heading{margin-bottom:8px}
 .rules-dialog .dialog-heading h2,.custom-dialog .dialog-heading h2{margin-top:2px;font-size:1.05rem}
 .rules-dialog .section-caption,.custom-dialog .section-caption{display:none}
 .rules-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .rule-card{grid-template-columns:1fr;gap:2px;padding:8px 26px 8px 10px}
 .rule-glyph{text-align:left;font-size:.95rem}
 .rule-text small{font-size:.68rem;line-height:1.25}
 .custom-body{gap:8px}
 .custom-label{margin-bottom:4px}
 .item-toggle{min-height:36px}
 .custom-row small{display:none}
 body .custom-dialog .custom-row.setting-row{padding:1px 0}
 .custom-dialog .dialog-actions{margin-top:8px}
}
/* Experience bar under the level on the home screen. */
.xp-bar{display:block;height:4px;margin-top:7px;border-radius:99px;background:color-mix(in srgb,var(--app-muted) 28%,transparent);overflow:hidden}
.xp-bar b{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--app-accent),var(--app-accent));transition:width .6s var(--ease)}
body.mobile .xp-bar{height:3px;margin-top:4px}
/* The unlock banner is dark glass in every theme, so its text is fixed light too. */
.ach-banner{color:#eef2ff}
.ach-banner em{color:#b9c4e4}
/* Desktop home: the generic desktop canvas rule flattened the demo backdrop into a 2px line across the logo.
   The themed page decoration (--app-deco) is the backdrop there; phones keep the live demo. */
body[data-view=home]:not(.mobile) .arena-section{display:none}
.unlock-hint{margin:0;color:var(--app-muted);font-size:.74rem;line-height:1.35}
/* Compact desktop cards hide their caption, but a locked card must still say what unlocks it. */
body:not(.mobile) .theme-card.locked small{display:block;padding:0 10px;font-size:.6rem;line-height:1.25}
/* On phones the live demo shows behind the home menu; a dark court over a pale page turns muddy, so light themes get a fainter one. */
body.mobile[data-scheme=light][data-view=home]:not(.playing) .arena-section{opacity:.22}
/* Style pickers: canvas previews drawn by the game's own drawing code. */
.skin-grid{grid-template-columns:repeat(4,1fr)}
.skin-canvas{display:block;width:40px;height:60px;pointer-events:none}
.skin-button{min-height:96px;padding:6px 2px 6px}
.skin-button>span{font-size:.6rem;letter-spacing:.06em;text-align:center;line-height:1.15}
.ball-section h3{margin:0 0 8px;font:700 .78rem var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--app-muted)}
.ball-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ball-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 2px;border:1px solid var(--line);border-radius:var(--r-md);color:var(--app-muted);font:700 .6rem var(--font-ui);letter-spacing:.06em;text-transform:uppercase;background:color-mix(in srgb,var(--app-surface) 82%,transparent);transition:border-color .2s,box-shadow .2s,color .2s}
.ball-button canvas{display:block;width:44px;height:44px;pointer-events:none}
.ball-button:hover{border-color:color-mix(in srgb,var(--app-accent) 60%,var(--app-border))}
.ball-button.selected{border-color:var(--app-accent);color:var(--app-text);box-shadow:0 0 0 1px var(--accent-b),0 0 22px var(--accent-a)}
.ball-button.locked{opacity:.5;filter:grayscale(.7);cursor:help}
/* Longer style galleries: every workshop pane scrolls inside itself instead of running under the action button. */
.workshop-pane{overflow-y:auto;scrollbar-width:none}
.workshop-pane::-webkit-scrollbar{display:none}
/* Court palettes: three independent colour rows (court, lines, background). */
/* The profile card gained two buttons: tighter rows keep it inside the desktop window without an inner scrollbar. */
body:not(.mobile) .settings-card .stat-row{padding:3px 0}

/* Play screen: whatever the height of the panel (short laptops, phones held sideways) the Start button stays on screen and the panel scrolls under it. */
body:not(.mobile) #match-panel>#start-button{position:sticky;bottom:8px;z-index:3}
@media (orientation:landscape) and (max-height:520px){
body.mobile:not(.playing) .setup-panel{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
body.mobile:not(.playing) #match-panel>#start-button{position:sticky;bottom:6px;z-index:3}
}
/* Online room: the join field must not set the width of its card (it made the window wider than a 390 px phone). */
.online-card,#join-form>*{min-width:0}
/* An engine without <dialog> modals (Safari before 15.4, Chrome before 105) neither centres nor dims an opened dialog, and shows it as a plain inline box: do it here. */
@supports not selector(:modal){
dialog[open]{display:block;position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;height:fit-content;max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);overflow:auto;z-index:1000;box-shadow:0 0 0 100vmax rgba(2,3,10,.74)}
dialog.pause-dialog[open]{box-shadow:none}
}
/* Victory: on a short screen (phone held sideways, with a level-up and an unlock) the window is taller than the screen; hidden overflow cut the buttons off with no way to reach them. */
.victory-dialog{overflow-x:hidden;overflow-y:auto}


/* ===================================================================
   Phones and tablets (v2.30): no logo, no AI match behind the menus, every
   screen scrolls instead of clipping, bigger choices and sliders
   ========================================================================== */
/* Touch screens (body.touch: phones and every tablet) keep only the plain theme backdrop. */
body.touch .brand{display:none}
body:not(.touch) .touch-only,body.touch .kb-only{display:none!important}
#help-dialog .help-info>p.touch-only{grid-column:1/-1}
body.mobile:not(.playing) .arena-section{display:none}
/* Phones: the header only holds the sound button; it floats beside the first row instead of taking a row of its own. */
body.mobile:not(.playing) .app-shell{padding-top:calc(var(--sat) + 6px);padding-bottom:4px}
body.mobile:not(.playing) .header{position:absolute;z-index:6;top:calc(var(--sat) + 6px);right:calc(14px + var(--sar));height:44px;flex:none;padding:0}
html.standalone body.mobile .header{padding-top:0}
body.mobile:not(.playing) .screen-bar,body.mobile:not(.playing) .home-status{min-height:44px;padding-right:56px}
body.mobile:not(.playing) .screen-bar{margin-bottom:8px}
@media (orientation:portrait){
 body.mobile:not(.playing) .home{grid-template-rows:auto 1fr auto}
 body.mobile:not(.playing) .home-hero{align-self:center;gap:10px}
 body.mobile .logo-pong{font-size:clamp(3.3rem,min(24vw,12.5vh),6.2rem);font-size:clamp(3.3rem,min(24vw,12.5dvh),6.2rem)}
 body.mobile .logo-year{font-size:clamp(1.8rem,min(13.5vw,7vh),3.6rem);font-size:clamp(1.8rem,min(13.5vw,7dvh),3.6rem)}
 body.mobile .home-records{gap:8px;margin-top:6px}
 body.mobile .home-records span,body.mobile .record-link{min-width:84px;padding:8px 12px}
 body.mobile .home-records strong,body.mobile .record-link strong{font-size:1.05rem}
}
@media (orientation:portrait) and (min-height:700px){
 body.mobile .home-hero .eyebrow{display:flex}
 body.mobile .tagline{display:block;text-align:center;font-size:.95rem}
}
/* Installed phone app / browser toolbar: the OS leaves a band under the page that cannot be painted, so the backdrop fades to the plain page colour at the bottom edge and the band blends in. */
body.touch::before{-webkit-mask-image:linear-gradient(#000 calc(100% - 96px),transparent);mask-image:linear-gradient(#000 calc(100% - 96px),transparent)}
body.touch::after{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%,transparent 92%);mask-image:linear-gradient(to bottom,transparent,#000 40%,transparent 92%)}

/* --- Jouer: the whole setup scrolls, the Start button stays pinned at the bottom --- */
body.mobile:not(.playing) .setup-panel{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
body.mobile:not(.playing) .setup-panel::-webkit-scrollbar{display:none}
@media (orientation:portrait){
 body.mobile:not(.playing) #match-panel{padding-bottom:10px}
 body.mobile:not(.playing) #match-panel>#roster-summary:not([hidden]){display:grid!important}
 body.mobile:not(.playing) #ruleset-description:not([hidden]),body.mobile:not(.playing) #match-panel>#start-note:not([hidden]){display:block!important}
 body.mobile:not(.playing) #match-panel>#online-shortcut:not([hidden]){display:inline-flex!important;justify-self:center}
 body.mobile:not(.playing) #match-panel>.mode-options{order:1}
 body.mobile:not(.playing) #match-panel>.segmented{order:2}
 body.mobile:not(.playing) #match-panel>.ruleset-section{order:3}
 body.mobile:not(.playing) #match-panel>.layout-select{order:4}
 body.mobile:not(.playing) #match-panel>label[for=quick-difficulty]{order:5}
 body.mobile:not(.playing) #match-panel>#team-formation-row{order:6}
 body.mobile:not(.playing) #match-panel>.row-heading{order:7}
 body.mobile:not(.playing) #match-panel>#roster-summary{order:8}
 body.mobile:not(.playing) #match-panel>.game-mode-section{order:9}
 body.mobile:not(.playing) #match-panel>#online-shortcut{order:10}
 body.mobile:not(.playing) #match-panel>#start-note{order:11}
 body.mobile:not(.playing) #match-panel>#start-button{order:12;position:sticky;left:auto;right:auto;bottom:0;z-index:3;width:100%;margin:2px 0 0;box-shadow:0 0 0 1px color-mix(in srgb,var(--app-accent) 70%,#fff 25%),0 -10px 24px 4px color-mix(in srgb,var(--app-page) 70%,transparent)}
 body.mobile:not(.playing) #match-panel>.row-heading{min-height:44px}
 body.mobile:not(.playing) .mode-description{font-size:.8rem;line-height:1.35}
}

/* Phones held sideways: the two setup columns share the width instead of growing past the screen (team mode). */
@media (orientation:landscape){
 body.mobile:not(.playing) #match-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 body.mobile:not(.playing) #match-panel>.select-label{min-width:0;gap:8px}
 body.mobile:not(.playing) #match-panel>.select-label select{flex:1 1 auto;min-width:0;max-width:60%}
 body.mobile:not(.playing) #match-panel>.row-heading{min-width:0}
}
/* A toast never blocks the button under it. */
.toast{pointer-events:none}

/* --- Réglages: the whole screen scrolls under its tabs, every option and button stays reachable --- */
body.mobile:not(.playing) .settings-view{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
body.mobile:not(.playing) .settings-view::-webkit-scrollbar{display:none}
body.mobile:not(.playing) .settings-view>.settings-tabs{position:sticky;top:0;z-index:4;flex:none;background:color-mix(in srgb,var(--app-page) 82%,var(--app-surface));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.mobile:not(.playing) .settings-grid{flex:none;min-height:auto;overflow:visible}
body.mobile:not(.playing) .settings-bottom{flex:none;padding-bottom:2px}
body.mobile:not(.playing) .settings-card .setting-footnote:not(#app-version),body.mobile:not(.playing) .settings-card>.muted{display:block}
body.mobile:not(.playing) .settings-card>.small-button{width:100%;margin-top:8px}
@media (orientation:portrait){body.mobile:not(.playing) .setting-row small{display:block}}
/* Short lists become big buttons and sliders stack under their label, full width (touch screens only). */
.choice-chips{display:none}
body.touch .has-choices>select{display:none}
body.touch .choice-chips{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--app-surface) 88%,transparent)}
body.touch .choice-chips button{min-height:44px;padding:4px 6px;border-radius:10px;color:var(--app-muted);font:700 .74rem/1.15 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;font-family:var(--font-ui);transition:color .2s,background .2s}
body.touch .choice-chips button.selected{color:var(--app-on-accent);background:linear-gradient(135deg,var(--app-accent),var(--app-accent-end));box-shadow:0 0 16px var(--accent-b)}
body.touch .setting-row.has-choices,body.touch .setting-row.has-range{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px;padding:12px 0}
body.touch .setting-row.has-range .range-wrap{flex:none;width:100%;gap:14px}
body.touch .pause-dialog .setting-row.has-choices,body.touch .pause-dialog .setting-row.has-range{gap:6px;padding:6px 0}
body.touch input[type=range]{height:40px}
body.touch input[type=range]::-webkit-slider-runnable-track{height:10px}
body.touch input[type=range]::-webkit-slider-thumb{width:30px;height:30px;margin-top:-10px}
body.touch input[type=range]::-moz-range-track{height:10px}
body.touch input[type=range]::-moz-range-progress{height:10px}
body.touch input[type=range]::-moz-range-thumb{width:26px;height:26px}
body.touch .range-wrap output{flex:none;min-width:4.6em;padding:7px 10px;border:1px solid var(--accent-b);border-radius:999px;background:var(--accent-a);font-size:.92rem;text-align:center}
body.touch input[type=checkbox][role=switch]{width:58px;height:32px}
body.touch input[type=checkbox][role=switch]::after{width:24px;height:24px}
body.touch input[type=checkbox][role=switch]:checked::after{transform:translateX(26px)}
/* Every slider shows how full it is (the value used to be readable from the thumb alone). */
input[type=range]{--fill:50%}
input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--app-accent) 0,color-mix(in srgb,var(--app-accent) 60%,var(--app-accent)) var(--fill),color-mix(in srgb,var(--app-muted) 30%,transparent) var(--fill))}
input[type=range]::-moz-range-track{background:color-mix(in srgb,var(--app-muted) 30%,transparent)}
input[type=range]::-moz-range-progress{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--app-accent),color-mix(in srgb,var(--app-accent) 60%,var(--app-accent)))}

/* --- En ligne: ranked duel with its rank panel, unranked quick match, then invite / join --- */
.matchmaking-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px;margin:4px 0 2px}
.mm-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:color-mix(in srgb,var(--app-surface) 82%,transparent)}
.mm-card h3{font:800 1rem var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.mm-card .muted{font-size:.84rem;line-height:1.35}
.mm-card .setting-footnote{margin-top:auto;font-size:.72rem}
.ranked-card{border-color:var(--accent-b);background:linear-gradient(160deg,var(--accent-a),transparent 75%),color-mix(in srgb,var(--app-surface) 82%,transparent)}
.quick-card{grid-column:1/-1}
.quick-card .primary-button{margin-top:2px}
.rank-ladder{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;gap:3px;margin:4px 0 0;padding:0;list-style:none}
.rank-ladder li{height:8px;border:1px solid color-mix(in srgb,var(--tier) 45%,transparent);border-radius:2px;background:color-mix(in srgb,var(--tier) 16%,transparent)}
.rank-ladder li.reached{background:var(--tier)}
.rank-ladder li.current{height:14px;box-shadow:0 0 10px var(--tier)}
.rank-ends{display:flex;justify-content:space-between;color:var(--app-muted);font:700 .58rem var(--font-ui);letter-spacing:.14em;text-transform:uppercase}
.rank-panel{--tier:#d08a4e;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:14px 12px 12px;border:1px solid color-mix(in srgb,var(--tier) 55%,var(--line));border-radius:var(--r-lg);text-align:center;background:radial-gradient(120% 70% at 50% 0,color-mix(in srgb,var(--tier) 22%,transparent),transparent 70%),color-mix(in srgb,var(--app-surface) 90%,transparent)}
.rank-emblem{position:relative;display:grid;place-items:center;flex:none;width:56px;height:62px;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--tier) 70%,transparent))}
.rank-emblem::before,.rank-emblem::after{content:"";position:absolute;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.rank-emblem::before{inset:0;background:linear-gradient(160deg,#fff 0,var(--tier) 42%,color-mix(in srgb,var(--tier) 45%,#000))}
.rank-emblem::after{inset:6px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--tier) 45%,#05060f),#05060f)}
.rank-emblem b{position:relative;z-index:1;font:900 1.15rem/1 var(--font-display);color:#fff;text-shadow:0 0 10px var(--tier)}
.rank-panel[data-tier=legend] .rank-emblem::before{background:conic-gradient(from 30deg,#fff07a,#ff6ad5,#6fe3d2,#b276ff,#fff07a)}
.rank-name{font:800 1rem var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.rank-points{color:var(--app-muted);font:700 .8rem var(--font-mono)}
.rank-progress{display:block;width:100%;height:6px;overflow:hidden;border-radius:99px;background:color-mix(in srgb,var(--app-muted) 25%,transparent)}
.rank-progress i{display:block;width:0;height:100%;border-radius:inherit;background:var(--tier);box-shadow:0 0 10px var(--tier);transition:width .5s var(--ease)}
.rank-next{color:var(--app-muted);font-size:.7rem;line-height:1.25}
.rank-panel .primary-button{margin-top:auto;min-height:54px;padding:0 14px}
.rank-ladder li.previewed{outline:2px solid color-mix(in srgb,var(--tier) 80%,#fff);outline-offset:2px}
/* Rank reward: a live picture of the league theme of one rank, what it needs and whether it is won. */
.rank-reward{--tier:#c9d3e0;display:grid;gap:6px;margin-top:4px;padding:10px;border:1px solid color-mix(in srgb,var(--tier) 45%,var(--line));border-radius:var(--r-md);background:linear-gradient(150deg,color-mix(in srgb,var(--tier) 14%,transparent),transparent 70%)}
.rank-reward-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:10px}
.rank-reward canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;border:1px solid color-mix(in srgb,var(--tier) 60%,transparent);border-radius:8px;box-shadow:0 0 16px color-mix(in srgb,var(--tier) 30%,transparent)}
.rank-reward.locked canvas{filter:saturate(.45) brightness(.8)}
.rank-reward-text{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.rank-reward-text strong{font:800 .86rem var(--font-display);letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere}
.rank-reward-text small{display:inline-flex;align-items:center;gap:6px;color:var(--app-text);font:700 .72rem var(--font-ui);letter-spacing:.08em;text-transform:uppercase}
.rank-reward-text small::before{content:"";width:9px;height:9px;flex:none;border-radius:2px;background:var(--tier);box-shadow:0 0 6px var(--tier)}
.rank-reward-state{color:var(--app-muted);font-size:.76rem;font-weight:600}
.rank-reward-text .small-button{margin-top:4px;min-height:36px;padding:0 12px;font-size:.72rem}
.rank-reward-nav{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--app-muted);font:700 .72rem var(--font-mono)}
.rank-reward-nav .icon-button{width:36px;height:36px;font-size:1.2rem}
.rank-reward-nav span{white-space:nowrap}
.rank-reward-nav .icon-button:disabled{opacity:.35;cursor:default}
body.touch .rank-reward-nav .icon-button,body.touch .rank-reward-text .small-button{min-width:44px;min-height:44px}
body.mobile .rank-reward{padding:8px}
body.mobile .rank-reward-body{grid-template-columns:minmax(0,1fr);gap:6px}
body.mobile .rank-reward-text strong{font-size:.76rem}
#online-entry .matchmaking-status{margin:8px 0 0;color:var(--app-accent-ink);font-weight:600}
body.mobile #online-entry>.setting-footnote.matchmaking-status{display:block}
#online-entry .matchmaking-status:empty{display:none!important}
@media (max-width:350px){.matchmaking-grid{grid-template-columns:minmax(0,1fr)}}
/* Online sheet on phones: opaque, headings and texts sized for a narrow screen. */
body.mobile .online-dialog{background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 9%,var(--app-page)),var(--app-page) 45%)}
body.mobile .online-dialog .dialog-heading{align-items:center;margin-bottom:12px}
body.mobile .online-dialog .dialog-heading .section-caption{font-size:.56rem;letter-spacing:.16em;line-height:1.3}
body.mobile .online-dialog .dialog-heading h2{margin-top:4px;font-size:1.15rem;letter-spacing:.06em}
body.mobile .matchmaking-grid{gap:8px}
body.mobile .mm-card{gap:6px;padding:12px}
body.mobile .mm-card h3{font-size:.86rem;letter-spacing:.06em}
body.mobile .mm-card .muted{font-size:.76rem}
body.mobile .mm-card .section-caption{font-size:.58rem;letter-spacing:.18em}
body.mobile .rank-panel{gap:5px;padding:10px 8px}
body.mobile .rank-panel .primary-button{justify-content:center;min-height:52px;padding:0 8px;font-size:.7rem;letter-spacing:.03em;text-align:center}
body.mobile .rank-panel .primary-button small{letter-spacing:.1em}
body.mobile .rank-panel .primary-button>span[aria-hidden]{display:none}
body.mobile .quick-card .primary-button,body.mobile #online-entry .online-card .primary-button{min-height:52px;font-size:.84rem;letter-spacing:.1em}
@media (orientation:landscape) and (max-height:520px){
 body.mobile .matchmaking-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}
 body.mobile .quick-card{grid-column:auto}
 body.mobile .mm-card .setting-footnote{display:none}
}

/* --- Jouer on a phone held sideways: every option scrolls in one column on the left, the live AI preview sits on the right (as on desktop) --- */
@media (orientation:landscape){
 html body.mobile:is([data-view=match],[data-view=workshop][data-ws-tab=themes]):not(.playing) .play-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:12px;align-items:stretch;flex:1;min-height:0}
 html body.mobile[data-view=match]:not(.playing) #match-panel{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;padding:10px 12px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
 html body.mobile[data-view=match]:not(.playing) #match-panel::-webkit-scrollbar{display:block;width:5px}
 html body.mobile[data-view=match]:not(.playing) #match-panel::-webkit-scrollbar-thumb{border-radius:9px;background:var(--line)}
 html body.mobile[data-view=match]:not(.playing) #match-panel>*{grid-column:auto;grid-row:auto;flex:none;order:0}
 html body.mobile[data-view=match]:not(.playing) #match-panel>.mode-options{order:1}
 html body.mobile[data-view=match]:not(.playing) #match-panel>.segmented{order:2}
 html body.mobile[data-view=match]:not(.playing) #match-panel>.ruleset-section{order:3}
 html body.mobile[data-view=match]:not(.playing) #match-panel>.layout-select{order:4}
 html body.mobile[data-view=match]:not(.playing) #match-panel>label[for=quick-difficulty]{order:5}
 html body.mobile[data-view=match]:not(.playing) #match-panel>#team-formation-row{order:6}
 html body.mobile[data-view=match]:not(.playing) #match-panel>.row-heading{order:7;min-height:36px}
 html body.mobile[data-view=match]:not(.playing) #match-panel>#roster-summary{order:8}
 html body.mobile[data-view=match]:not(.playing) #match-panel>.game-mode-section{order:9}
 html body.mobile[data-view=match]:not(.playing) #match-panel>#roster-summary:not([hidden]){display:grid!important;gap:5px}
 html body.mobile[data-view=match]:not(.playing) #ruleset-description:not([hidden]),html body.mobile[data-view=match]:not(.playing) #match-panel>#start-note:not([hidden]){display:block!important}
 html body.mobile[data-view=match]:not(.playing) #match-panel>#online-shortcut:not([hidden]){display:inline-flex!important;align-self:center;order:10}
 html body.mobile[data-view=match]:not(.playing) #match-panel>#start-note{order:11;text-align:center}
 html body.mobile[data-view=match]:not(.playing) #match-panel>#start-button{order:12;position:sticky;left:auto;right:auto;bottom:0;z-index:3;align-self:stretch;min-height:52px;margin:2px 0 0;box-shadow:0 0 0 1px color-mix(in srgb,var(--app-accent) 70%,#fff 25%),0 -10px 24px 4px color-mix(in srgb,var(--app-page) 70%,transparent)}
 html body.mobile[data-view=match]:not(.playing) #match-panel>.layout-select,html body.mobile[data-view=match]:not(.playing) #match-panel>label[for=quick-difficulty]{flex-direction:row;align-items:center;justify-content:space-between;font-size:.8rem}
 html body.mobile[data-view=match]:not(.playing) #match-panel .segmented button,html body.mobile[data-view=match]:not(.playing) #match-panel .select-label,html body.mobile[data-view=match]:not(.playing) #match-panel .select-label select{min-height:42px}
 html body.mobile[data-view=match]:not(.playing) #match-panel .mode-buttons button{min-height:40px}
 html body.mobile:is([data-view=match],[data-view=workshop][data-ws-tab=themes]):not(.playing) .arena-section{position:relative;inset:auto;z-index:1;display:flex;flex-direction:column;opacity:1;height:100%;min-height:0;min-width:0;pointer-events:none}
 html body.mobile[data-view=workshop][data-ws-tab=themes]:not(.playing) #workshop-panel{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden}
 html body.mobile[data-view=workshop][data-ws-tab=themes]:not(.playing) [data-workshop-pane=themes]:not([hidden]){display:flex;flex-direction:column;gap:8px}
 html body.mobile:is([data-view=match],[data-view=workshop][data-ws-tab=themes]):not(.playing) .canvas-wrap{position:relative;left:auto;top:auto;transform:none;width:100%;max-width:none;flex:1 1 0;min-height:0;max-height:none;aspect-ratio:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#02030a;box-shadow:0 12px 40px #0006}
}

/* --- Phone 2D match: the score and the pause button are drawn inside the court, so nothing floats over the play --- */
body.mobile.phone-hud.playing .scoreboard,body.mobile.phone-hud.playing .arena-topbar,body.mobile.phone-hud.playing .live-label{display:none!important}
body.mobile.phone-hud.playing .serve-overlay{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body.mobile.phone-hud.playing .serve-overlay span{border:0;background:none;color:#fff;text-shadow:0 2px 10px #000,0 0 3px #000}
body.mobile.phone-hud.playing .serve-overlay strong{opacity:1;color:#fff;padding:.08em .4em;border-radius:.3em;background:#04050dd9;-webkit-text-stroke:2px #04050d;paint-order:stroke fill;text-shadow:0 0 22px #000}
body.mobile.phone-hud.playing .powerup-status{top:calc(var(--sat) + 8px);padding:0;border:0;background:none;box-shadow:none;font-size:.6rem;opacity:.75}

/* Atelier > Thèmes on a phone held upright: a live court preview above the theme list. */
@media (orientation:portrait){
 html body.mobile[data-view=workshop][data-ws-tab=themes]:not(.playing) .play-layout{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
 html body.mobile[data-view=workshop][data-ws-tab=themes]:not(.playing) .arena-section{position:relative;inset:auto;z-index:1;display:flex;flex-direction:column;order:-1;flex:0 0 auto;height:min(30vh,230px);height:min(30dvh,230px);opacity:1;pointer-events:none;min-height:0}
 html body.mobile[data-view=workshop][data-ws-tab=themes]:not(.playing) .canvas-wrap{position:relative;left:auto;top:auto;transform:none;width:100%;max-width:none;flex:1 1 0;min-height:0;max-height:none;aspect-ratio:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#02030a;box-shadow:0 12px 40px #0006}
 html body.mobile[data-view=workshop][data-ws-tab=themes]:not(.playing) #workshop-panel{flex:1;height:auto;min-height:0}
}
html body.mobile[data-view=workshop][data-ws-tab=themes]:not(.playing) .workshop-pane{flex:none;min-height:auto}
html body.mobile[data-view=workshop][data-ws-tab=themes]:not(.playing) #workshop-panel>*{flex:none}
/* The progress numbers show placeholders until the saved profile is read: keep them hidden for that instant. */
body:not(.booted) .home-status,body:not(.booted) .home-records{visibility:hidden}
/* Launch: the app stays hidden until its first layout is settled, then fades in; the entrance animations are skipped so nothing visibly resizes or slides. */
body{transition:opacity .18s ease-out}
html.boot body{opacity:0}
html.calm .setup-panel:not([hidden]),html.calm .settings-view:not([hidden]),html.calm .screen-bar:not([hidden]),html.calm .theme-section:not([hidden]),html.calm .home:not([hidden]) .home-menu .menu-tile,html.calm .home:not([hidden]) .home-brand,html.calm .home:not([hidden])>div:first-child{animation-duration:0s!important;animation-delay:0s!important}

/* The page container takes programmatic focus (skip link, taps): never draw the themed focus ring around the whole screen. */
main:focus,main:focus-visible{outline:0!important;box-shadow:none!important}
.serve-overlay strong{color:#fff;-webkit-text-stroke:2px #04050d;paint-order:stroke fill}

/* Touch screens and the installed home-screen app: no focus ring anywhere (taps focus big containers and dialogs). Text fields keep their own border highlight. */
body.touch :is(:focus,:focus-visible):not(input,select,textarea){outline:0!important;box-shadow:none!important}
@media (display-mode:standalone),(display-mode:fullscreen){:is(:focus,:focus-visible):not(input,select,textarea){outline:0!important;box-shadow:none!important}}

/* Blockout — mode solo casse-briques (v2.35.0, carte v2.36.0). Carte façon Candy Crush : un monde de 20 niveaux par
   section, la route monte de niveau en niveau. Mise en forme fonctionnelle ; Codex peut en reprendre la finition. */
.menu-tile.primary.blockout-tile{background:linear-gradient(135deg,#ff7a45,#ffcd4d);color:#1d0f04;box-shadow:0 0 0 1px #ffb46a,0 16px 50px #ff7a4540}
.menu-tile.primary.blockout-tile .tile-icon{background:#1d0f0418;border-color:#1d0f0444;color:#1d0f04}
.menu-tile.primary.blockout-tile .tile-text small,.menu-tile.primary.blockout-tile .tile-text em,.menu-tile.primary.blockout-tile .tile-chevron{color:#1d0f04}
.blockout-tile .play-orbit{border-color:#1d0f0433}
.blockout-tile .tile-icon svg{margin-left:0}
.blockout-view{position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;width:100%;max-width:760px;margin:0 auto}
.blockout-view[hidden]{display:none}
.bo-bar{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bo-wallet{display:flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--app-surface)}
.bo-wallet strong{font:800 1.05rem var(--font-display)}
.bo-wallet small{color:var(--app-muted);font:700 .6rem var(--font-ui);letter-spacing:.16em}
.bo-bar-actions{display:flex;gap:8px;margin-left:auto}
.bo-coin{display:inline-block;width:1.05em;height:1.05em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c2,#ffc933 55%,#b97c00);box-shadow:inset 0 0 0 2px #e0a200;color:transparent;font-size:1rem;line-height:1;overflow:hidden;vertical-align:-.15em}
.bo-star{color:#ffd84d;font-size:1.1rem}
.bo-map{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-radius:26px;border:1px solid var(--line);scrollbar-width:thin}
.bo-world{position:relative;background:radial-gradient(circle at 18% 22%,#ffffff12 0 2px,transparent 3px) 0 0/46px 46px,radial-gradient(circle at 70% 60%,#ffffff0d 0 3px,transparent 4px) 0 0/71px 67px,linear-gradient(180deg,var(--sky),var(--ground))}
.bo-world::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background-repeat:repeat}
.bo-world[data-biome="0"]::before{background-image:linear-gradient(90deg,transparent 48%,var(--glow) 49% 50%,transparent 51%),linear-gradient(0deg,transparent 48%,var(--glow) 49% 50%,transparent 51%),linear-gradient(90deg,#080a2f 45%,transparent 45% 55%,#080a2f 55%);background-size:108px 108px,108px 108px,240px 350px;background-position:0 0,0 0,0 70px;opacity:.15}
.bo-world[data-biome="1"]::before{background-image:conic-gradient(from 25deg at 50% 18%,transparent 0 24%,var(--glow) 25% 26%,transparent 27% 75%,var(--road) 76% 77%,transparent 78%),linear-gradient(145deg,transparent 42%,var(--glow) 43% 44%,transparent 45%);background-size:210px 260px,170px 220px;background-position:20px 80px,0 0;opacity:.23}
.bo-world[data-biome="2"]::before{background-image:radial-gradient(ellipse at 50% 100%,#ffb44d77 0 18%,transparent 50%),linear-gradient(115deg,transparent 40%,#ff682b77 41% 44%,transparent 45%);background-size:190px 310px,250px 210px;opacity:.28}
.bo-world[data-biome="3"]::before{background-image:radial-gradient(circle at 50% 55%,transparent 0 18px,var(--glow) 19px 20px,transparent 21px),linear-gradient(28deg,transparent 47%,var(--road) 48% 49%,transparent 50%),linear-gradient(152deg,transparent 47%,var(--glow) 48% 49%,transparent 50%);background-size:180px 190px,230px 260px,230px 260px;opacity:.2}
.bo-world[data-biome="4"]::before{background-image:radial-gradient(ellipse at 35% 25%,var(--glow) 0 7px,transparent 9px),radial-gradient(ellipse at 70% 68%,var(--road) 0 12px,transparent 14px),linear-gradient(160deg,transparent 48%,var(--glow) 49% 50%,transparent 51%);background-size:120px 160px,170px 210px,250px 350px;opacity:.15}
.bo-world[data-biome="5"]::before{background-image:conic-gradient(from 45deg at 50% 50%,transparent 0 24%,var(--road) 25% 26%,transparent 27% 49%,var(--glow) 50% 51%,transparent 52% 74%,var(--road) 75% 76%,transparent 77%);background-size:210px 240px;opacity:.19}
.bo-world[data-biome="6"]::before{background-image:linear-gradient(60deg,transparent 46%,#ffffff88 47% 48%,transparent 49%),linear-gradient(120deg,transparent 46%,#ffffff88 47% 48%,transparent 49%),linear-gradient(0deg,transparent 48%,#ffffff88 49% 50%,transparent 51%);background-size:180px 180px;opacity:.17}
.bo-world[data-biome="7"]::before{background-image:linear-gradient(110deg,transparent 43%,#fff2a9 44% 45%,transparent 46% 60%,var(--glow) 61% 62%,transparent 63%),repeating-linear-gradient(100deg,transparent 0 20px,#b7baff44 21px 22px,transparent 23px 49px);background-size:280px 350px,100% 100%;opacity:.23}
.bo-world[data-biome="8"]::before{background-image:radial-gradient(circle at 50% 50%,var(--road) 0 4px,transparent 5px),repeating-linear-gradient(0deg,transparent 0 85px,#dc956544 86px 90px,transparent 91px 180px),repeating-linear-gradient(90deg,transparent 0 110px,#dc956544 111px 115px,transparent 116px 220px);background-size:110px 90px,100% 100%,100% 100%;opacity:.2}
.bo-world[data-biome="9"]::before{background-image:radial-gradient(circle at 34% 40%,#ffffff 0 2px,transparent 3px),radial-gradient(circle at 78% 70%,var(--glow) 0 3px,transparent 5px),radial-gradient(ellipse at 50% 50%,var(--road) 0,transparent 55%);background-size:120px 190px,210px 250px,580px 620px;opacity:.32}
.bo-world+.bo-world{border-top:2px dashed #ffffff33}
.bo-world.locked{filter:saturate(.35) brightness(.7)}
.bo-world-head{position:sticky;top:0;z-index:3;display:flex;align-items:baseline;gap:10px;padding:10px 16px;background:linear-gradient(180deg,#000000aa,#00000000);color:#fff}
.bo-world-head small{font:800 .64rem var(--font-display);letter-spacing:.22em;color:var(--road)}
.bo-world-head strong{font:800 1.05rem var(--font-display)}
.bo-world-head span{margin-left:auto;color:#ffd84d;font-weight:700}
.bo-track{position:relative}
.bo-road{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.bo-road path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.bo-road-base{stroke:#00000059;stroke-width:26}
.bo-road-done{stroke:var(--road);stroke-width:12;stroke-dasharray:1 16;filter:drop-shadow(0 0 6px var(--glow))}
.bo-node{position:absolute;z-index:2;display:grid;place-items:center;width:58px;height:58px;padding:0;transform:translate(-50%,-50%);border:3px solid #ffffff;border-radius:50%;background:radial-gradient(circle at 34% 28%,#ffffffcc 0 12%,transparent 42%),var(--road);color:#1a1033;font:900 1.1rem var(--font-display);box-shadow:0 6px 0 #00000066,0 0 18px var(--glow);cursor:pointer;transition:transform .15s var(--ease)}
.bo-node:hover,.bo-node:focus-visible{transform:translate(-50%,-50%) scale(1.08)}
.bo-node.hard{border-color:#ff5252;box-shadow:0 6px 0 #00000066,0 0 0 4px #ff525244,0 0 18px #ff5252}
.bo-node.hard::after{content:"!";position:absolute;top:-6px;left:-6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#ff5252;color:#fff;font:900 .8rem var(--font-display)}
.bo-node.boss{width:84px;height:84px;border-color:#ffd84d;background:radial-gradient(circle at 34% 28%,#ffffffaa 0 10%,transparent 40%),radial-gradient(circle,#ff5a5f,#8a0f25);color:#fff;font-size:2rem;box-shadow:0 7px 0 #00000080,0 0 0 5px #ffd84d44,0 0 28px #ff3547}
.bo-node.locked{background:#3a3f55;border-color:#7a809a;color:#b8bdd0;box-shadow:0 5px 0 #00000055;cursor:default}
.bo-node.boss.locked{background:#4a2f3f}
.bo-node.current{animation:bo-pulse 1.4s ease-in-out infinite}
@keyframes bo-pulse{0%,100%{box-shadow:0 6px 0 #00000066,0 0 0 0 var(--glow)}50%{box-shadow:0 6px 0 #00000066,0 0 0 12px transparent,0 0 26px var(--glow)}}
.bo-num{position:relative;z-index:1;line-height:1}
.bo-boss-mark{display:block;width:32px;height:24px;margin:auto;background:currentColor;clip-path:polygon(0 20%,23% 53%,29% 0,50% 42%,71% 0,77% 53%,100% 20%,91% 100%,9% 100%);filter:drop-shadow(0 2px 1px #0007)}
.bo-node-stars{position:absolute;top:100%;margin-top:6px;color:#ffd84d;font-size:.82rem;letter-spacing:1px;text-shadow:0 1px 0 #000,0 0 6px #000;white-space:nowrap}
.bo-boss-name{position:absolute;bottom:100%;margin-bottom:6px;padding:2px 8px;border-radius:999px;background:#000000aa;color:#fff;font:800 .62rem var(--font-display);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.bo-chest{position:absolute;top:-13px;right:-18px;width:22px;height:19px;border:2px solid #7d4414;border-radius:4px;background:linear-gradient(135deg,#fff0a3,#efad3c 65%,#bc7420);box-shadow:0 3px 4px #0008;transform:rotate(-9deg)}
.bo-chest::before{content:"";position:absolute;inset:-2px auto -2px 8px;width:4px;background:#ff6ac9;box-shadow:inset 1px 0 #fff8}
.bo-chest::after{content:"";position:absolute;top:6px;left:-2px;right:-2px;height:3px;background:#7d4414}
.bo-chest.open{opacity:.45}
.bo-you{position:absolute;bottom:100%;margin-bottom:10px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#cfd6ff);box-shadow:0 0 14px #fff;animation:bo-bounce .9s ease-in-out infinite alternate}
.bo-node.boss .bo-you{margin-bottom:34px}
@keyframes bo-bounce{to{transform:translateY(-10px)}}
.reduced-motion .bo-node.current,.reduced-motion .bo-you,html.calm .bo-you{animation:none}
.bo-more{display:block;margin:14px auto}
.blockout-dialog{width:min(940px,calc(100vw - 24px));max-width:940px;max-height:min(780px,calc(100vh - 24px));max-height:min(780px,calc(100dvh - 24px));padding:clamp(14px,2.4vw,26px);overflow:hidden}
.blockout-dialog[open]{display:flex;flex-direction:column;gap:10px}
.blockout-dialog>.dialog-heading,.blockout-dialog>.bo-level-summary,.blockout-dialog>.dialog-actions{flex:none}
.bo-level-summary{display:flex;align-items:center;flex-wrap:wrap;column-gap:18px;row-gap:2px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.bo-level-summary .bo-level-badges{margin:0}.bo-level-summary p{margin:0}.bo-level-summary .bo-level-info{font-size:.74rem}
.bo-loadout-content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}
.bo-loadout-tabs{display:none}
.bo-loadout-columns{display:grid;flex:1 1 auto;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,2vw,18px)}
.bo-loadout-panel{min-width:0;padding:14px;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--app-surface) 84%,transparent)}
.bo-loadout-heading{display:flex;align-items:end;justify-content:space-between;gap:8px;min-height:42px;margin-bottom:12px}
.bo-loadout-kicker{display:block;color:var(--app-muted);font:700 .56rem var(--font-ui);letter-spacing:.16em}
.bo-loadout-heading h3{margin:3px 0 0;font:800 clamp(.88rem,1.5vw,1.04rem) var(--font-display)}
.bo-loadout-hint{color:var(--app-muted);font:700 .68rem var(--font-ui);white-space:nowrap}
.bo-loadout-persist{margin:9px 0 0;color:var(--app-muted);font-size:.7rem}
.bo-loadout-content>.unlock-hint{flex:none;margin:10px 2px 0}
.blockout-dialog>.dialog-actions{margin:0;padding-top:12px;border-top:1px solid var(--line)}
.bo-level-badges{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:2px 0 8px}
.bo-kind{padding:4px 12px;border-radius:999px;background:var(--app-surface);border:1px solid var(--line);font:800 .7rem var(--font-display);letter-spacing:.16em;text-transform:uppercase}
.bo-kind[data-kind=hard]{background:#ff525226;border-color:#ff5252;color:#ff8a8a}
.bo-kind[data-kind=boss]{background:#ffd84d26;border-color:#ffd84d;color:#ffd84d}
.bo-level-best{color:#ffd84d;font-size:1.1rem;letter-spacing:2px}
.bo-level-info{margin:4px 0 10px;color:var(--app-muted);font-size:.85rem}
.bo-boosters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bo-booster{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) 18px;grid-template-rows:auto auto;align-items:center;column-gap:8px;min-height:62px;padding:8px;border:1px solid color-mix(in srgb,var(--bo-item-color,#f5f7ff) 24%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--bo-item-color,#f5f7ff) 6%,var(--app-surface));color:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.bo-booster strong{grid-column:2;align-self:end;font-size:.73rem;line-height:1.15;min-width:0}
.bo-booster small{grid-column:2;grid-row:2;align-self:start;color:var(--app-muted);font-size:.68rem}
.bo-booster .bo-booster-icon{grid-column:1;grid-row:1/3}
.bo-pick-mark{grid-column:3;grid-row:1/3;display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--line);border-radius:50%;color:transparent;font-size:.7rem}
.bo-booster.selected{border-color:var(--bo-item-color,#f5f7ff);background:color-mix(in srgb,var(--bo-item-color,#f5f7ff) 17%,var(--app-surface));box-shadow:inset 0 0 0 1px var(--bo-item-color,#f5f7ff)}
.bo-booster.selected .bo-pick-mark{border-color:var(--bo-item-color,#f5f7ff);background:var(--bo-item-color,#f5f7ff);color:#101220}
.bo-booster.empty{opacity:.65}.bo-booster:hover:not(.empty),.bo-booster:focus-visible{border-color:var(--bo-item-color,#f5f7ff)}
.bo-booster-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid color-mix(in srgb,var(--bo-item-color,#f5f7ff) 55%,transparent);border-radius:12px;background:color-mix(in srgb,var(--bo-item-color,#f5f7ff) 18%,#111326);color:var(--bo-item-color,#f5f7ff);font-size:1.2rem;font-weight:900;line-height:1}
.bo-bonus,.bo-shop-bonus{--bo-item-color:#f5f7ff}
.bo-capacity[data-bo-capacity=multi],.bo-shop-capacity[data-bo-capacity-item=multi],.bo-capacity-action[data-bo-use=multi]{--bo-item-color:#6acbff}
.bo-capacity[data-bo-capacity=wide],.bo-shop-capacity[data-bo-capacity-item=wide],.bo-capacity-action[data-bo-use=wide]{--bo-item-color:#74e3ae}
.bo-capacity[data-bo-capacity=fire],.bo-shop-capacity[data-bo-capacity-item=fire],.bo-capacity-action[data-bo-use=fire]{--bo-item-color:#ff9d59}
.bo-capacity[data-bo-capacity=slow],.bo-shop-capacity[data-bo-capacity-item=slow],.bo-capacity-action[data-bo-use=slow]{--bo-item-color:#ba9bff}
.bo-capacity[data-bo-capacity=life],.bo-shop-capacity[data-bo-capacity-item=life],.bo-capacity-action[data-bo-use=life]{--bo-item-color:#ff84b5}
@media(max-width:700px){.blockout-dialog{width:calc(100vw - 12px);max-width:none;max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px);padding:12px}.bo-loadout-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:none;margin-bottom:8px}.bo-loadout-tabs button{min-height:36px;padding:4px 8px;border:1px solid var(--line);border-radius:10px;background:var(--app-surface);color:var(--app-muted);font:800 .72rem var(--font-ui)}.bo-loadout-tabs button[aria-pressed=true]{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 18%,var(--app-surface));color:var(--app-text)}.bo-loadout-columns{display:block;min-height:0;overflow:hidden}.bo-loadout-columns[data-active=bonuses] .bo-capacity-panel,.bo-loadout-columns[data-active=capacities] .bo-bonus-panel{display:none}.bo-loadout-panel{height:100%;padding:10px;overflow:hidden}.bo-loadout-heading{min-height:0;margin-bottom:8px}.bo-level-summary{padding-bottom:7px}.blockout-dialog>.dialog-actions{padding-top:8px}}
@media(max-width:700px) and (min-height:520px){.bo-booster{min-height:64px}}
@media(max-height:500px){.blockout-dialog[open]{gap:5px}.bo-level-summary .bo-level-info{display:none}.bo-loadout-heading{margin-bottom:5px}.bo-loadout-panel{padding:8px}.bo-booster{min-height:46px;padding:5px}.blockout-dialog>.dialog-actions{padding-top:5px}.bo-loadout-content>.unlock-hint,.bo-loadout-persist{display:none}}
@media(min-width:600px) and (max-height:500px){.bo-loadout-panel .bo-boosters{grid-template-columns:repeat(3,minmax(0,1fr))}.bo-loadout-kicker{display:none}}
.bo-balance{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:1rem}
.bo-balance strong{font:800 1.4rem var(--font-display)}
.bo-shop-grid{display:grid;gap:8px}
.bo-shop-section{grid-column:1/-1;margin:10px 0 0;font:800 .84rem var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.bo-shop-intro{grid-column:1/-1;margin:0 0 4px;font-size:.8rem}
.bo-shop-item{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:18px;background:var(--app-surface)}
.bo-shop-capacity{border-color:color-mix(in srgb,var(--bo-item-color) 30%,var(--line));background:color-mix(in srgb,var(--bo-item-color) 5%,var(--app-surface))}
.bo-shop-item>.bo-booster-icon{width:40px;height:40px}
.bo-shop-item div{display:grid;gap:2px}
.bo-shop-item small{color:var(--app-muted);font-size:.78rem}
.bo-shop-item em{font-style:normal;font-size:.72rem;color:var(--app-accent-ink)}
.bo-rank-dialog{max-width:560px}
.bo-rank-me{display:grid;justify-items:center;gap:2px;margin-bottom:12px;padding:14px;border-radius:20px;background:linear-gradient(135deg,#ff7a4533,#ffcd4d22);border:1px solid #ffb46a66;text-align:center}
.bo-rank-me:empty{display:none}
.bo-rank-me strong{font:900 2.4rem var(--font-display);line-height:1}
.bo-rank-me sup{font-size:.45em}
.bo-rank-me small{color:var(--app-muted)}
.bo-rank-list{display:grid;gap:4px;max-height:38vh;margin:0 0 8px;padding:0;overflow-y:auto;list-style:none}
.bo-rank-list li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;background:var(--app-surface)}
.bo-rank-list li.me{background:color-mix(in srgb,var(--app-accent) 26%,var(--app-surface));box-shadow:0 0 0 1px var(--app-accent)}
.bo-rank-list li:nth-child(1) .bo-rank-pos{color:#ffd84d}.bo-rank-list li:nth-child(2) .bo-rank-pos{color:#d8e0ea}.bo-rank-list li:nth-child(3) .bo-rank-pos{color:#e0a060}
.bo-rank-pos{font:900 1.05rem var(--font-display)}
.bo-rank-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.bo-rank-score{color:var(--app-muted);font-size:.8rem;white-space:nowrap}
.bo-rank-list li.bo-rank-empty{display:block;text-align:center;color:var(--app-muted)}
.bo-continue{border-color:#ffc933!important}
body.mobile:not(.playing) .blockout-view{gap:8px}
body.mobile:not(.playing) .bo-map{border-radius:20px}
body.mobile .bo-wallet{padding:5px 10px}
body.mobile .bo-bar-actions .small-button{min-height:40px;padding:0 12px}

/* Blockout's bar (level, score, lives, bricks left, time) replaces the two-team scoreboard. Like the pause button it floats
   over the top of the canvas, so the renderer keeps a band free for it (Renderer.boBand) and fits the court below. */
.pause-dialog.settling{pointer-events:none}
.bo-hud{display:none}
.bo-capacity-actions{position:fixed;z-index:4;left:50%;bottom:68px;transform:translateX(-50%);display:flex;justify-content:center;gap:8px;max-width:calc(100% - 24px)}
.bo-capacity-actions[hidden]{display:none}
.bo-capacity-action{display:flex;align-items:center;gap:6px;min-width:102px;padding:6px 9px;border:1px solid color-mix(in srgb,var(--bo-item-color) 55%,transparent);border-radius:12px;background:#111326e8;color:#fff;cursor:pointer;box-shadow:0 4px 14px #0008}
.bo-capacity-action span{color:var(--bo-item-color);font-size:1.1rem}.bo-capacity-action strong{font:700 .7rem var(--font-ui)}.bo-capacity-action small{margin-left:auto;color:#c9cde1;font:.62rem var(--font-ui);white-space:nowrap}.bo-capacity-action kbd{opacity:.6;font:.65rem var(--font-ui)}
.bo-capacity-action:disabled{opacity:.62;cursor:default}.bo-capacity-action.ready{border-color:var(--bo-item-color);box-shadow:0 0 14px color-mix(in srgb,var(--bo-item-color) 55%,transparent)}
body.mobile .bo-capacity-actions{bottom:54px}.bo-capacity-action:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:520px){.bo-capacity-action{min-width:0;padding:6px;display:grid;justify-items:center;gap:1px}.bo-capacity-action strong{font-size:.62rem}.bo-capacity-action small{margin:0;font-size:.58rem}.bo-capacity-action kbd{display:none}}
body[data-arena-kind=blockout].playing .scoreboard{display:none}
body[data-arena-kind=blockout].playing .bo-hud:not([hidden]){position:absolute;z-index:3;top:14px;left:50%;transform:translateX(-50%);display:flex;justify-content:center;align-items:center;gap:clamp(18px,3vw,40px);width:max-content;max-width:calc(100vw - 280px);height:52px;padding:0 28px;border:1px solid var(--line);border-radius:999px;background:#04050dcc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#eef2ff;pointer-events:none;white-space:nowrap}
.bo-stat{display:grid;justify-items:center;gap:3px;min-width:0}
.bo-stat small{color:#aab8dd;font:700 .56rem var(--font-ui);letter-spacing:.2em}
.bo-stat strong{display:flex;align-items:baseline;gap:6px;color:#fff;font:900 1.25rem/1 var(--font-display);white-space:nowrap}
.bo-stat #bo-hud-lives{min-height:1em;color:#ff8fb9;letter-spacing:.06em}
.bo-stat em{color:var(--app-accent);font:800 .6em var(--font-display);font-style:normal}
.bo-notice{position:absolute;inset:0;display:grid;place-items:center;padding:0 14px;border-radius:inherit;background:#04050df2;color:var(--app-accent);font:800 .78rem var(--font-display);letter-spacing:.2em;text-align:center;text-transform:uppercase;animation:bonus-in .35s var(--ease) both}
.bo-notice[hidden]{display:none}
body.mobile[data-arena-kind=blockout].playing .bo-hud:not([hidden]){top:calc(var(--sat) + 6px);left:calc(var(--sal) + 8px);right:calc(var(--sar) + 60px);width:auto;max-width:none;height:44px;gap:0;justify-content:space-around;padding:0 6px;transform:none}
body.mobile[data-arena-kind=blockout].playing .bo-stat small{font-size:.44rem;letter-spacing:.14em}
body.mobile[data-arena-kind=blockout].playing .bo-stat strong{font-size:1.02rem}
body.mobile[data-arena-kind=blockout].playing .arena-topbar{top:calc(var(--sat) + 6px);right:calc(var(--sar) + 8px)}
.reduced-motion .bo-notice,html.calm .bo-notice{animation:none}

/* ---- Economy: wallet, shop, wheel, ad, daily challenge, supervised mode ---- */
.wallet{display:flex;gap:8px;align-items:center}
.wallet-chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--app-surface) 88%,transparent);font:800 .78rem var(--font-display);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.wallet-chip i{font-style:normal;font-size:.8em}
.wallet-chip.coins i{color:#ffcb3d}.wallet-chip.gems i{color:#55e0ff}
.wallet-chip small{color:var(--app-muted);font:600 .68rem var(--font-ui);letter-spacing:.08em}
.home-daily-grid{margin-top:2px}
.home-daily-grid .quick-tile.ready::after{content:"";position:absolute;top:10px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--app-accent);box-shadow:0 0 12px var(--app-accent)}
body.mobile .wallet-chip{min-height:28px;padding:0 9px;font-size:.66rem}

/* --- Boutique : page dédiée plein écran, sans défilement de page (seule la grille défile) --- */
.shop-view{position:fixed;inset:0;z-index:6;display:flex;flex-direction:column;gap:10px;padding:calc(var(--sat) + 16px) calc(var(--sar) + 20px) calc(var(--sab) + 16px) calc(var(--sal) + 20px);background:var(--app-page);overflow:hidden}
.shop-topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;flex:none}
.shop-nav{display:flex;gap:8px}
.shop-nav .small-button{min-height:44px}
.shop-title-badge{margin:0 0 0 auto;padding:10px 22px;border:1px solid var(--line);border-radius:14px;background:var(--app-surface);font:800 1rem var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--app-text)}
.wallet-bar{display:flex;gap:10px;flex-wrap:wrap}
.wallet-add{display:inline-grid;place-items:center;width:22px;height:22px;margin-left:2px;border-radius:50%;background:color-mix(in srgb,var(--app-accent) 25%,transparent);color:var(--app-text);font:800 .8rem/1 var(--font-ui)}
.shop-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(180px,220px) minmax(0,1fr);gap:16px}
.shop-sidebar{display:flex;flex-direction:column;gap:8px;min-height:0}
.shop-sidebar button[data-shop-tab]{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--app-surface) 85%,transparent);color:var(--app-text);font:700 .82rem var(--font-ui)}
.shop-sidebar button[data-shop-tab][aria-pressed=true]{color:var(--app-on-accent);border-color:transparent;background:linear-gradient(135deg,var(--app-accent),var(--app-accent-end));box-shadow:0 0 18px var(--accent-b)}
.shop-sidebar button[data-shop-tab].shop-tab-gems{background:linear-gradient(135deg,#f5d98c,#e8b84b);color:#3a2a05;border-color:transparent}
.shop-sidebar button[data-shop-tab].shop-tab-gems[aria-pressed=true]{background:linear-gradient(135deg,#f5d98c,#e8b84b);color:#3a2a05;box-shadow:0 0 18px #e8b84b99}
.shop-main{min-height:0;display:flex;flex-direction:column;gap:10px}
.shop-filters{display:flex;gap:6px;flex-wrap:wrap;flex:none}
.shop-filters button{min-height:34px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--app-surface) 85%,transparent);color:var(--app-muted);font:700 .68rem var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.shop-filters button[aria-pressed=true]{color:var(--app-on-accent);border-color:transparent;background:linear-gradient(135deg,var(--app-accent),var(--app-accent-end));box-shadow:0 0 18px var(--accent-b)}
.shop-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));grid-auto-rows:min-content;gap:10px;overflow-y:auto;padding:2px 2px 8px;-webkit-overflow-scrolling:touch}
@media (max-width:820px){
 .shop-view{padding:calc(var(--sat) + 10px) calc(var(--sar) + 12px) calc(var(--sab) + 10px) calc(var(--sal) + 12px);gap:8px}
 .shop-topbar{gap:8px}
 .shop-title-badge{padding:8px 14px;font-size:.82rem}
 .shop-body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
 .shop-sidebar{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding-bottom:2px;-webkit-overflow-scrolling:touch}
 .shop-sidebar button[data-shop-tab]{flex:none;min-height:38px;padding:0 12px;font-size:.7rem}
 .shop-sidebar button[data-shop-tab] span:last-child{margin-left:4px}
  .shop-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){.wallet-bar .wallet-chip small{display:none}}
.shop-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:color-mix(in srgb,var(--app-surface) 88%,transparent);text-align:center}
.shop-card strong{font:700 .8rem var(--font-ui);line-height:1.2}
.shop-card.owned{border-color:var(--accent-b)}
.shop-card.rare{box-shadow:inset 0 0 0 1px #55c8ff55}.shop-card.epic{box-shadow:inset 0 0 0 1px #c05aff77}
.shop-thumb{width:64px;height:64px}.shop-thumb.tall{width:48px;height:72px}.shop-thumb.wide{width:100%;max-width:150px;height:auto;aspect-ratio:240/88}
.shop-swatch{width:56px;height:56px;border-radius:50%;background:var(--swatch);border:2px solid #ffffff55;box-shadow:0 0 18px color-mix(in srgb,var(--swatch) 60%,transparent)}
.shop-theme{position:relative;display:block;width:100%;height:58px;border-radius:10px;border:1px solid var(--line);background:linear-gradient(90deg,var(--left) 0 6%,transparent 6% 94%,var(--right) 94%),linear-gradient(90deg,transparent calc(50% - 1px),var(--line) 0 calc(50% + 1px),transparent 0),var(--bg)}
.shop-theme .swatch-ball{position:absolute;left:calc(50% - 5px);top:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:var(--ball)}
.shop-fav{position:absolute;top:2px;right:2px;min-width:36px;min-height:36px;color:var(--app-muted);font-size:1.05rem}.shop-fav[aria-pressed=true]{color:#ffcb3d}
.shop-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;width:100%}
.shop-actions .small-button{min-height:38px;padding:0 10px;font-size:.72rem;flex:1 1 auto}
.shop-actions .buy{gap:5px}.shop-actions .buy.gem i{color:#55e0ff;font-style:normal}.shop-actions .buy:not(.gem) i{color:#ffcb3d;font-style:normal}
.shop-actions .buy.short{opacity:.5}
.shop-state{color:var(--app-accent-ink);font:700 .72rem var(--font-ui);letter-spacing:.1em}
.shop-lock,.shop-missing{color:var(--app-muted);font:600 .68rem/1.3 var(--font-ui);font-style:normal}
.shop-banner{margin:0 0 10px;padding:10px 12px;border:1px solid var(--accent-b);border-radius:var(--r-md);background:var(--accent-a);font:600 .78rem/1.4 var(--font-ui)}
.shop-note,.shop-empty{margin:10px 0 0;color:var(--app-muted);font:500 .76rem/1.5 var(--font-ui)}
.shop-note .text-button{min-height:32px;padding:0 4px;text-decoration:underline}
.shop-packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.pack-gems{font:800 1.5rem var(--font-display)}.pack-gems i{color:#55e0ff;font-style:normal}.pack-gems small{color:var(--app-accent-ink);font-size:.7em}

.trail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.trail-button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;min-height:0}
.trail-button canvas{width:100%;height:auto;aspect-ratio:240/88}
.trail-more{justify-content:center;color:var(--app-muted)}
.color-swatch.named{outline:1px solid #ffffff44}
.small{font-size:.76rem}

/* The wheel: a large glossy disc in a gold rim studded with bulbs, a jewel pointer that clicks on every peg, the odds in plain sight. */
.wheel-dialog{width:min(640px,calc(100vw - 16px));overflow-x:hidden;text-align:center}
.wheel-body{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:4px}
.wheel-side{width:100%;min-width:0}
.wheel-stage{--size:min(520px,calc(100vw - 72px),54vh);--size:min(520px,calc(100vw - 72px),54dvh);position:relative;width:var(--size);height:var(--size);margin:10px auto 14px}
.wheel-halo{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 34px 10px color-mix(in srgb,var(--app-accent) 42%,transparent);opacity:.55;transition:opacity .5s}
.wheel-stage.spinning .wheel-halo,.wheel-stage.landed .wheel-halo{opacity:.95}
.wheel-rim{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 10deg,#7a5a12,#ffe9a8,#b8862b,#fff3c4,#8f6a1a,#ffe08a,#a37a22,#fff0b8,#7a5a12);box-shadow:0 20px 50px #000b,0 0 0 2px #2a1d05,inset 0 0 0 2px #fff6d666,inset 0 0 22px #000a}
.wheel-bulbs{position:absolute;inset:0}
.wheel-bulbs i{position:absolute;left:50%;top:50%;width:3.1%;height:3.1%;margin:-1.55% 0 0 -1.55%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#fff0b0 38%,#ffb400 78%);box-shadow:0 0 7px 2px #ffd36a99;transform:rotate(calc(var(--k) * 15deg)) translateY(calc(var(--size) * -.474));animation:wheel-bulb 1.8s ease-in-out infinite;animation-delay:calc(var(--k) * -.15s)}
.wheel-stage.spinning .wheel-bulbs i{animation-duration:.48s;animation-delay:calc(var(--k) * -.04s)}
.wheel-stage.landed .wheel-bulbs i{animation:wheel-flash .3s steps(2,jump-none) 6}
@keyframes wheel-bulb{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes wheel-flash{0%{opacity:1}100%{opacity:.25}}
.wheel-disc{position:absolute;inset:5.4%;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px #2a1d05,0 0 0 5px #ffe08a66}
.wheel-disc canvas{display:block;width:100%;height:100%;will-change:transform}
.wheel-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 24%,#ffffff30,transparent 46%),radial-gradient(circle,transparent 62%,#0000004d);pointer-events:none}
.wheel-hub{position:absolute;z-index:3;left:50%;top:50%;width:21%;height:21%;transform:translate(-50%,-50%);display:grid;place-items:center;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff9e0,#ffd45a 30%,#c08a10 68%,#6b4a00);box-shadow:0 8px 20px #000b,inset 0 -5px 12px #0007,inset 0 3px 6px #fff9;color:#3a2600;font:900 clamp(.66rem,2.6vw,1.1rem) var(--font-display);letter-spacing:.08em;cursor:pointer;transition:transform .15s var(--ease,ease),filter .2s}
.wheel-hub span{padding:.25em .45em;border-radius:7px;background:#00000014;box-shadow:inset 0 1px 0 #fff6}
.wheel-hub:hover:not(:disabled){filter:brightness(1.08)}
.wheel-hub:active:not(:disabled){transform:translate(-50%,-50%) scale(.95)}
.wheel-hub:disabled{cursor:default}
.wheel-pointer{position:absolute;z-index:4;left:50%;top:-3.2%;width:8.6%;height:12%;transform:translateX(-50%);transform-origin:50% 20%;filter:drop-shadow(0 4px 5px #000c)}
.wheel-pointer::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fffbe8,#ffe08a 28%,#d99a00 70%,#7a4f00);clip-path:polygon(50% 100%,4% 32%,16% 8%,50% 0,84% 8%,96% 32%)}
.wheel-pointer::after{content:"";position:absolute;left:50%;top:22%;width:40%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ff6fb5 45%,#a3104f);box-shadow:0 0 8px #ff6fb5}
.wheel-pointer.tick{animation:wheel-tick .13s ease-out}
@keyframes wheel-tick{0%{transform:translateX(-50%) rotate(0)}35%{transform:translateX(-50%) rotate(-18deg)}100%{transform:translateX(-50%) rotate(0)}}
.wheel-confetti{position:absolute;z-index:5;inset:0;width:100%;height:100%;pointer-events:none}
.wheel-odds{display:grid;grid-template-columns:auto auto minmax(60px,1fr);align-items:center;gap:4px 12px;max-width:440px;margin:0 auto 10px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:color-mix(in srgb,var(--app-surface) 88%,transparent);text-align:left}
.wheel-odds-label{color:var(--app-muted);font:700 .68rem var(--font-ui);letter-spacing:.14em;text-transform:uppercase}
.wheel-odds strong{color:var(--app-accent-ink);font:900 1.2rem var(--font-display);font-variant-numeric:tabular-nums}
.wheel-meter{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.wheel-meter i{display:block;width:2%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--app-accent),#ffd86a);transition:width .7s var(--ease,ease)}
.wheel-odds small{grid-column:1/-1;color:var(--app-muted);font:500 .74rem/1.35 var(--font-ui)}
.wheel-result{display:flex;align-items:center;gap:14px;max-width:460px;margin:0 auto 10px;padding:10px 16px;border:1px solid var(--accent-b);border-radius:var(--r-md);background:var(--accent-a);text-align:left}
.wheel-result canvas{flex:none;width:64px;height:64px}
.wheel-result div{display:grid;gap:2px}
.wheel-result strong{font:800 1.3rem var(--font-display)}.wheel-result span{color:var(--app-muted);font:500 .8rem var(--font-ui)}
.wheel-result[data-kind=coins] strong{color:#ffcb3d}
.wheel-result.pop{animation:wheel-pop .5s var(--ease,ease) both}
@keyframes wheel-pop{0%{transform:scale(.8);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.wheel-actions{display:grid;gap:8px;max-width:460px;margin:0 auto}
.wheel-reroll{display:grid;gap:2px;justify-items:center;min-height:54px;padding:6px 12px}
.wheel-reroll small{color:var(--app-muted);font:600 .68rem var(--font-ui);letter-spacing:.03em}
.wheel-reroll.gem i{color:#55e0ff;font-style:normal}
@media (min-width:560px){.wheel-actions{grid-template-columns:1fr 1fr}.wheel-actions .primary-button{grid-column:1/-1}}
/* A computer, a tablet or a phone held sideways: the wheel on the left, as big as the window allows, the odds and the buttons beside it. */
@media (min-width:760px),(orientation:landscape) and (min-width:560px){
 .wheel-dialog{width:min(940px,calc(100vw - 32px))}
 .wheel-body{grid-template-columns:auto minmax(240px,330px);align-items:center;justify-content:center;column-gap:28px}
 html body .wheel-stage,html body.mobile .wheel-stage{--size:min(500px,66vh,calc(100vw - 440px));--size:min(500px,66dvh,calc(100vw - 440px));margin:12px 0}
 .wheel-side{display:grid;gap:10px}
 .wheel-side>*{margin:0!important}
 .wheel-side .wheel-actions{grid-template-columns:1fr}
}
body.mobile .wheel-stage{--size:min(520px,calc(100vw - 72px),50vh);--size:min(520px,calc(100vw - 72px),50dvh);margin:6px auto 10px}
@media (max-width:480px){.wheel-dialog{padding:18px 14px}}
@media (orientation:landscape) and (max-height:520px){html body .wheel-stage,html body.mobile .wheel-stage{--size:min(300px,58vh,calc(100vw - 420px));--size:min(300px,58dvh,calc(100vw - 420px))}}
.reduced-motion .wheel-result.pop,.reduced-motion .wheel-pointer.tick{animation:none}
.reduced-motion .wheel-bulbs i{animation:none;opacity:.85}
/* Animated and textured colours: their swatch is a small canvas the shop and the Atelier keep moving. */
.color-swatch.fx{position:relative;overflow:hidden;padding:0}
.color-swatch.fx canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
.shop-swatch.fx{position:relative;overflow:hidden;background:none;border-color:#ffffff88}
.shop-swatch.fx canvas{display:block;width:100%;height:100%}
.shop-rarity{color:#8fd8ff;font:700 .6rem var(--font-ui);font-style:normal;letter-spacing:.12em;text-transform:uppercase}
.shop-card.epic .shop-rarity{color:#dcb0ff}.shop-card.legendary .shop-rarity{color:#ffd86a}
.shop-card.legendary{box-shadow:inset 0 0 0 1px #ffd86a99,0 0 24px #ffb3002b}
.color-empty{grid-column:1/-1;line-height:1.4}

.ad-dialog{width:min(420px,calc(100vw - 20px))}
.ad-card{display:grid;gap:8px;place-items:center;min-height:140px;padding:22px;border:1px dashed var(--accent-b);border-radius:var(--r-md);background:var(--accent-a);text-align:center}
.ad-card strong{font:800 1.4rem var(--font-display);letter-spacing:.2em}
.ad-progress{height:6px;margin:12px 0;border-radius:99px;background:var(--line);overflow:hidden}.ad-progress i{display:block;height:100%;width:0;background:var(--app-accent)}

.challenge-rewards{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 14px;padding:0;list-style:none;color:var(--app-muted);font:600 .82rem var(--font-ui)}
.challenge-rewards b{color:var(--app-text)}
.pin-dialog{width:min(400px,calc(100vw - 20px))}
.pin-message{margin:8px 0;color:#ff7a7a;font:600 .8rem var(--font-ui)}.pin-message[data-kind=info]{color:var(--app-accent-ink)}
.pin-actions{display:grid;gap:8px;margin-top:12px}
.victory-coins{margin:6px 0 0;color:#ffcb3d;font:800 .92rem var(--font-display);letter-spacing:.06em;text-align:center}
#parental-card .small-button{margin-top:10px;width:100%}

/* The home screen never scrolls on a computer: with the second row of tiles (challenge, wheel, shop) the tiles shrink on short windows. */
@media (min-width:821px) and (max-height:900px){
 body:not(.mobile) .home-menu{gap:10px}
 body:not(.mobile) .play-tile{min-height:116px}
 body:not(.mobile) .play-tile .play-orbit{width:70px;height:70px}
 body:not(.mobile) .quick-tile{min-height:92px;padding:10px 8px;gap:6px}
 body:not(.mobile) .quick-tile .tile-icon{width:36px;height:36px;border-radius:12px}
 body:not(.mobile) .home-daily-grid+.home-hint{display:none}
}
@media (min-width:821px) and (max-height:700px){
 body:not(.mobile) .play-tile{min-height:88px}
 body:not(.mobile) .play-tile .play-orbit{display:none}
 body:not(.mobile) .play-tile{grid-template-columns:1fr auto}
 body:not(.mobile) .quick-tile{min-height:72px}
 body:not(.mobile) .quick-tile .tile-text small{display:none}
}
@media (max-height:620px){
 body.mobile:not(.playing) .home-quick-grid .quick-tile{min-height:56px;padding:5px 3px}
 body.mobile:not(.playing) .play-tile{min-height:72px}
 body.mobile:not(.playing) .home-quick-grid .quick-tile{gap:2px}
 body.mobile:not(.playing) .home-quick-grid .quick-tile .tile-icon{width:26px;height:26px;border-radius:9px}
 body.mobile:not(.playing) .home-quick-grid .quick-tile .tile-icon svg{width:15px;height:15px}
}
@media (max-width:520px){.shop-card{padding:10px 6px}}

/* Match composer: the court and the controls share the same themed stage. */
body[data-view=match]:not(.playing) #match-panel{font-family:var(--font-ui);border-color:color-mix(in srgb,var(--app-accent) 35%,var(--app-border));background:linear-gradient(155deg,color-mix(in srgb,var(--app-accent) 7%,var(--app-panel)),var(--app-panel) 54%,color-mix(in srgb,var(--app-accent) 8%,var(--app-panel)));box-shadow:0 24px 70px #0006,0 0 35px color-mix(in srgb,var(--app-accent) 7%,transparent)}
body[data-view=match]:not(.playing) #match-panel::before{left:0;right:0;height:3px;background:linear-gradient(90deg,var(--app-accent),var(--app-accent))}
body[data-view=match]:not(.playing) #match-panel h2,body[data-view=match]:not(.playing) #match-panel h3,body[data-view=match]:not(.playing) #match-panel strong{font-family:var(--font-display)}
body[data-view=match]:not(.playing) #match-panel select,body[data-view=match]:not(.playing) #match-panel button{font-family:var(--font-ui)}
body[data-view=match]:not(.playing) #match-panel .section-caption{color:var(--app-accent-ink);font-weight:700;letter-spacing:.17em}
.setup-heading{display:grid;gap:3px}
.setup-heading .section-caption{display:flex;align-items:center;justify-content:space-between}
.setup-heading h2{font:800 clamp(1rem,1.5vw,1.3rem)/1.13 var(--font-display);letter-spacing:.035em;text-transform:uppercase}
.setup-heading h2 span{color:var(--app-accent-ink)}
.setup-tabs{display:none}
.setup-format{display:grid;grid-template-columns:1.15fr .85fr;gap:9px;align-items:stretch}
.setup-format .mode-options{gap:7px}
body[data-view=match]:not(.playing) .setup-format .mode-card{min-height:72px;padding:9px 11px;border-color:var(--line);background:color-mix(in srgb,var(--app-surface) 80%,transparent)}
body[data-view=match]:not(.playing) .setup-format .mode-card.selected{border-color:var(--app-accent);background:linear-gradient(130deg,color-mix(in srgb,var(--app-accent) 18%,var(--app-surface)),color-mix(in srgb,var(--app-accent) 8%,var(--app-surface)));box-shadow:inset 0 0 0 1px var(--accent-b),0 0 20px var(--accent-a)}
.setup-format .mode-card strong{font-size:.82rem;letter-spacing:.09em}
.setup-format .mode-card small{font-size:.68rem}
.setup-format .mode-symbol{color:var(--app-accent-ink)}
.setup-opponent{grid-auto-flow:row;grid-auto-rows:1fr}
body[data-view=match]:not(.playing) .setup-opponent button{min-height:0;font:700 .75rem var(--font-ui);letter-spacing:.065em}
.setup-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px 10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:linear-gradient(120deg,color-mix(in srgb,var(--app-accent) 6%,var(--app-surface)),var(--app-surface));min-width:0}
.setup-choice{display:grid;gap:5px;min-width:0}
.setup-choice:first-child,.setup-choice#setup-rules,.setup-options>.mode-description{grid-column:1/-1}
.setup-choice#setup-geometry{display:flex;gap:8px;min-width:0}
.setup-choice#setup-geometry .select-label{flex:1 1 0;min-width:0;flex-direction:column;align-items:stretch;gap:3px;font-size:.6rem}
.setup-choice#setup-geometry select{width:100%;min-height:31px;padding:3px 22px 3px 7px;font-size:.72rem}
body[data-view=match]:not(.playing) .arena-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:0;border:0;background:transparent}
body[data-view=match]:not(.playing) .arena-options button{display:grid;justify-items:center;align-content:center;gap:3px;min-height:55px;padding:4px 2px;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--app-page) 40%,var(--app-surface));color:var(--app-text);font:700 .66rem var(--font-ui);letter-spacing:.07em;box-shadow:none}
body[data-view=match]:not(.playing) .arena-options button[aria-pressed=true]{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 15%,var(--app-surface));box-shadow:inset 0 0 0 1px var(--accent-b),0 0 13px var(--accent-a)}
.arena-options button::before{content:"";display:block;width:38px;height:21px;border:1.5px solid var(--app-accent-ink);border-radius:2px;background:radial-gradient(circle at 50% 50%,var(--app-accent2) 0 2px,transparent 3px),linear-gradient(90deg,transparent 47%,var(--app-border) 48% 52%,transparent 53%);box-shadow:inset 3px 0 0 var(--app-accent-ink),inset -3px 0 0 var(--app-accent2)}
.arena-options button[data-arena=breakout]::before{background:radial-gradient(circle at 50% 62%,var(--app-accent2) 0 2px,transparent 3px),repeating-linear-gradient(90deg,var(--app-accent) 0 5px,transparent 5px 7px) top/100% 5px no-repeat;box-shadow:inset 3px 0 0 var(--app-accent-ink),inset -3px 0 0 var(--app-accent2)}
.arena-options button[data-arena=square]::before{width:23px;height:23px;background:radial-gradient(circle at 50% 50%,var(--app-accent2) 0 2px,transparent 3px);box-shadow:inset 3px 0 0 var(--app-accent-ink),inset -3px 0 0 var(--app-accent2),inset 0 3px 0 var(--app-accent-ink),inset 0 -3px 0 var(--app-accent2)}
.arena-options button[data-arena=circle]::before{width:23px;height:23px;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--app-accent2) 0 2px,transparent 3px);box-shadow:inset 3px 0 0 var(--app-accent-ink),inset -3px 0 0 var(--app-accent2)}
body[data-view=match]:not(.playing) .ruleset-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;gap:4px;padding:0;border:0;background:transparent}
body[data-view=match]:not(.playing) .ruleset-options button{min-height:29px;padding:2px 5px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--app-page) 35%,var(--app-surface));color:var(--app-text);font:700 .64rem var(--font-ui);letter-spacing:.04em;box-shadow:none}
body[data-view=match]:not(.playing) .ruleset-options button[aria-pressed=true]{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 19%,var(--app-surface));box-shadow:inset 0 0 0 1px var(--accent-b)}
.setup-options .game-mode-section{min-width:0;gap:5px}
.setup-options .mode-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.setup-options #game-mode-section{grid-column:1/-1}
.setup-options #game-mode-section .mode-buttons{grid-template-columns:repeat(5,minmax(0,1fr))}
.setup-options .mode-buttons button{min-height:31px;padding:2px 4px;font-size:.62rem;letter-spacing:.02em}
.setup-options .mode-description{margin:0;color:var(--app-muted);font:500 .7rem/1.15 var(--font-ui)}
.setup-roster-heading{display:flex;align-items:end;justify-content:space-between;gap:8px}
.setup-roster-heading>div{display:grid;gap:1px}
.setup-roster-heading h3{font:800 .88rem/1.15 var(--font-display);letter-spacing:.04em;text-transform:uppercase}
#quick-difficulty-row{display:flex;align-items:center;gap:8px;font-size:.62rem;white-space:nowrap}
#quick-difficulty-row select{width:96px!important;min-height:31px;padding:4px 20px 4px 6px;font-size:.7rem}
body[data-view=match]:not(.playing) #roster-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.setup-player-card{min-width:0;display:grid;gap:6px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--player-color) 52%,var(--app-border));border-radius:13px;background:linear-gradient(130deg,color-mix(in srgb,var(--player-color) 11%,var(--app-surface)),var(--app-surface) 72%);box-shadow:inset 3px 0 0 var(--player-color),0 6px 17px #0002}
.setup-player-id{display:flex;align-items:center;gap:7px;min-width:0}
.setup-player-id .team-marker{flex:none;border-color:var(--player-color);background:color-mix(in srgb,var(--player-color) 20%,transparent);color:var(--app-text);font:800 .62rem var(--font-display)}
.setup-player-id>div{display:grid;min-width:0}
.setup-player-id strong{font:800 .69rem/1.1 var(--font-display);text-transform:uppercase;letter-spacing:.06em}
.setup-player-id small{font:500 .63rem var(--font-ui);color:var(--app-muted)}
.setup-player-config{display:grid;grid-template-columns:34px minmax(0,1fr) 40px;gap:6px;align-items:center;min-width:0}
.setup-player-config canvas{display:block;width:33px;height:49px;filter:drop-shadow(0 0 9px var(--player-color))}
.setup-player-fields{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5px;min-width:0}
.setup-player-fields label{display:grid;gap:2px;min-width:0;color:var(--app-muted);font:700 .58rem var(--font-ui);text-transform:uppercase;letter-spacing:.04em}
.setup-player-fields select{min-width:0;width:100%;height:30px;min-height:30px!important;padding:2px 16px 2px 5px;border-radius:7px;font:600 .66rem var(--font-ui)}
.setup-player-palette{display:grid;justify-items:center;gap:2px}
.setup-player-palette label{display:grid;gap:3px;min-width:92px;color:var(--app-muted);font:700 .55rem var(--font-ui);text-transform:uppercase}.setup-player-palette select{max-width:110px;border:1px solid var(--player-color);border-radius:8px;background:var(--app-surface);color:var(--app-text);font:700 .65rem var(--font-ui);padding:5px}
.setup-player-palette button{color:var(--app-muted);font:700 .55rem var(--font-ui);text-transform:uppercase}
.setup-player-palette button:not(:disabled){color:var(--app-accent-ink);text-decoration:underline}
.setup-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;align-items:end;margin-top:auto;padding-top:7px;border-top:1px solid var(--line)}
.setup-theme{display:grid;gap:3px;justify-content:stretch;align-items:stretch;font-size:.65rem}
.setup-theme select{width:100%;min-height:35px;padding:4px 25px 4px 9px;font:700 .73rem var(--font-ui)}
.setup-footer .start-note{grid-column:1;grid-row:2;text-align:left;font-size:.6rem;letter-spacing:.05em}
.setup-footer #start-button{grid-column:2;grid-row:1/3;min-width:205px;min-height:51px;padding:7px 14px}
.setup-footer #start-button span:first-child{font-family:var(--font-display);font-size:.9rem}
.setup-footer #start-button small{font-family:var(--font-ui);font-size:.57rem}
.setup-footer .online-shortcut{grid-column:1/-1;justify-self:end;font-size:.62rem}
body[data-view=match]:not(.playing) .arena-section{position:relative}
body[data-view=match]:not(.playing) .arena-section::before{content:"";position:absolute;inset:42px -4px 32px;z-index:-1;border-radius:26px;background:radial-gradient(ellipse at 30% 40%,color-mix(in srgb,var(--app-accent) 18%,transparent),transparent 65%),radial-gradient(ellipse at 80% 70%,color-mix(in srgb,var(--app-accent2) 20%,transparent),transparent 65%);filter:blur(24px);pointer-events:none}
body[data-view=match]:not(.playing) .canvas-wrap{border:1px solid color-mix(in srgb,var(--app-accent) 35%,var(--app-border));border-radius:0 0 var(--r-lg) var(--r-lg);background:var(--app-page);box-shadow:0 24px 60px #0006,0 0 25px var(--accent-a)}
body[data-view=match]:not(.playing) .scoreboard{border-color:color-mix(in srgb,var(--app-accent) 30%,var(--app-border))}
body[data-view=match]:not(.playing) .arena-bottom{border-color:color-mix(in srgb,var(--app-accent) 30%,var(--app-border))}
body[data-view=match]:not(.playing) #match-panel>#roster-summary{order:0}
body[data-view=match]:not(.playing) #match-panel #game-mode-section .mode-buttons{grid-template-columns:repeat(5,minmax(0,1fr))}

@media (min-width:821px){
 body:not(.mobile)[data-view=match]:not(.playing) .play-layout{grid-template-columns:minmax(575px,1.17fr) minmax(0,.83fr)}
 body:not(.mobile)[data-view=match]:not(.playing) #match-panel{display:flex;flex-direction:column;gap:clamp(6px,.9vh,11px);overflow:hidden;padding:clamp(12px,1.6vh,18px)}
}
@media (min-width:821px) and (max-height:760px){
 body:not(.mobile)[data-view=match]:not(.playing) #match-panel{gap:4px;padding:10px 12px}
 body:not(.mobile)[data-view=match]:not(.playing) .setup-heading .section-caption{display:none}
 body:not(.mobile)[data-view=match]:not(.playing) .setup-heading h2{font-size:1rem}
 body:not(.mobile)[data-view=match]:not(.playing) .setup-format .mode-card{min-height:58px;padding:5px 8px}
 body:not(.mobile)[data-view=match]:not(.playing) .setup-options{gap:5px;padding:7px 9px}
 body:not(.mobile)[data-view=match]:not(.playing) .arena-options button{min-height:43px}
 body:not(.mobile)[data-view=match]:not(.playing) .ruleset-options button{min-height:25px}
 body:not(.mobile)[data-view=match]:not(.playing) .setup-choice#setup-geometry select{min-height:28px}
 body:not(.mobile)[data-view=match]:not(.playing) .setup-player-card{padding:5px 7px;gap:3px}
 body:not(.mobile)[data-view=match]:not(.playing) .setup-player-config canvas{height:40px;width:27px}
 body:not(.mobile)[data-view=match]:not(.playing) .setup-footer{padding-top:4px;margin-top:0}
 body:not(.mobile)[data-view=match]:not(.playing) .setup-footer .online-shortcut,body:not(.mobile)[data-view=match]:not(.playing) .setup-options .mode-description{display:none}
}
@media (max-width:1100px) and (min-width:821px){body:not(.mobile)[data-view=match]:not(.playing) .play-layout{grid-template-columns:minmax(500px,1.25fr) minmax(0,.75fr)}.setup-player-fields{grid-template-columns:1fr 1fr}}

/* On touch screens, the two named panes stay in one window. Neither pane scrolls. */
html body.mobile[data-view=match]:not(.playing) .play-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(112px,24vh);gap:8px;align-items:stretch;min-height:0;overflow:hidden}
html body.mobile[data-view=match]:not(.playing) #match-panel{display:flex;flex-direction:column;gap:6px;min-height:0;height:100%;padding:10px;overflow:hidden;order:0}
html body.mobile[data-view=match]:not(.playing) #match-panel>*{flex:none;order:0}
html body.mobile[data-view=match]:not(.playing) .setup-heading h2{font-size:1rem}
html body.mobile[data-view=match]:not(.playing) .setup-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--app-surface)}
html body.mobile[data-view=match]:not(.playing) .setup-tabs button{min-height:33px;border-radius:8px;color:var(--app-muted);font:700 .69rem var(--font-display);text-transform:uppercase;letter-spacing:.07em}
html body.mobile[data-view=match]:not(.playing) .setup-tabs button.selected{background:var(--app-accent);color:var(--app-on-accent)}
html body.mobile[data-view=match][data-setup-tab=partie]:not(.playing) .setup-roster-heading,html body.mobile[data-view=match][data-setup-tab=partie]:not(.playing) #roster-summary{display:none!important}
html body.mobile[data-view=match][data-setup-tab=participants]:not(.playing) .setup-format,html body.mobile[data-view=match][data-setup-tab=participants]:not(.playing) .setup-options{display:none!important}
html body.mobile[data-view=match]:not(.playing) .setup-format{grid-template-columns:1.2fr .8fr}
html body.mobile[data-view=match]:not(.playing) .setup-format .mode-card{min-height:60px;padding:5px 7px}
html body.mobile[data-view=match]:not(.playing) .setup-format .mode-symbol{display:none}
html body.mobile[data-view=match]:not(.playing) .setup-options{gap:5px;padding:7px 8px}
html body.mobile[data-view=match]:not(.playing) .arena-options button{min-height:43px;font-size:.57rem}
html body.mobile[data-view=match]:not(.playing) .arena-options button::before{transform:scale(.75);margin:-3px 0}
html body.mobile[data-view=match]:not(.playing) .ruleset-options button{min-height:26px;font-size:.57rem}
html body.mobile[data-view=match]:not(.playing) .setup-options .mode-description{display:none}
html body.mobile[data-view=match]:not(.playing) .setup-roster-heading h3{font-size:.75rem}
html body.mobile[data-view=match]:not(.playing) #roster-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;overflow:hidden;align-content:start}
html body.mobile[data-view=match]:not(.playing) .setup-player-card{padding:5px;gap:3px}
html body.mobile[data-view=match]:not(.playing) .setup-player-id small{display:none}
html body.mobile[data-view=match]:not(.playing) .setup-player-config{grid-template-columns:21px minmax(0,1fr);grid-template-rows:auto auto;gap:3px 6px}
html body.mobile[data-view=match]:not(.playing) .setup-player-config canvas{width:20px;height:31px;grid-column:1;grid-row:1/3}
html body.mobile[data-view=match]:not(.playing) .setup-player-fields{grid-column:2;grid-row:1;grid-template-columns:1fr;gap:2px}
html body.mobile[data-view=match]:not(.playing) .setup-player-fields label{font-size:.48rem}
html body.mobile[data-view=match]:not(.playing) .setup-player-fields select{height:25px;min-height:25px!important;padding:1px 13px 1px 3px;font-size:.58rem}
html body.mobile[data-view=match]:not(.playing) .setup-player-palette{grid-column:2;grid-row:2;justify-items:start}
html body.mobile[data-view=match]:not(.playing) .setup-player-palette label{min-width:0;width:100%}
html body.mobile[data-view=match]:not(.playing) .setup-player-palette select{max-width:none;width:100%;padding:3px}
html body.mobile[data-view=match]:not(.playing) .setup-player-palette button{font-size:.48rem}
html body.mobile[data-view=match]:not(.playing) .setup-footer{margin-top:auto;padding-top:4px;gap:3px}
html body.mobile[data-view=match]:not(.playing) .setup-footer #start-button{min-width:125px;min-height:42px;padding:4px 7px}
html body.mobile[data-view=match]:not(.playing) .setup-footer #start-button span:first-child{font-size:.67rem}
html body.mobile[data-view=match]:not(.playing) .setup-footer .online-shortcut,html body.mobile[data-view=match]:not(.playing) .setup-footer .start-note{display:none}
html body.mobile[data-view=match]:not(.playing) .arena-section{position:relative;inset:auto;z-index:1;display:flex;flex-direction:column;opacity:1;height:100%;min-height:0;min-width:0;pointer-events:none;order:1}
html body.mobile[data-view=match]:not(.playing) .arena-topbar,html body.mobile[data-view=match]:not(.playing) .scoreboard,html body.mobile[data-view=match]:not(.playing) .arena-bottom,html body.mobile[data-view=match]:not(.playing) .under-arena{display:none}
html body.mobile[data-view=match]:not(.playing) .canvas-wrap{position:relative;inset:auto;transform:none;width:100%;height:100%;max-width:none;max-height:none;min-height:0;flex:1;aspect-ratio:auto;border:1px solid var(--line);border-radius:13px;background:var(--app-page)}
html body.mobile[data-view=match][data-setup-tab=participants]:not(.playing) .play-layout{grid-template-rows:minmax(0,1fr)}
html body.mobile[data-view=match][data-setup-tab=participants]:not(.playing) .arena-section{display:none}
@media (orientation:landscape) and (max-height:600px){
 html body.mobile[data-view=match]:not(.playing) .play-layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 html body.mobile[data-view=match]:not(.playing) .setup-heading{display:none}
 html body.mobile[data-view=match]:not(.playing) .arena-section{order:1}
}

/* The four preparation screens follow the supplied spatial layout. */
body[data-view=match]:not(.playing) #screen-title{display:none}
body[data-view=match]:not(.playing) .screen-bar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2.5vw,32px)}
.setup-context{display:flex;align-items:center;justify-content:center;min-height:44px;padding:5px 16px;border:1px solid color-mix(in srgb,var(--app-accent) 44%,var(--app-border));border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--app-accent) 90%,var(--app-surface)),color-mix(in srgb,var(--app-accent) 50%,var(--app-accent)));color:var(--app-on-accent);font:800 clamp(.74rem,1.4vw,1rem) var(--font-display);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 6px 24px var(--accent-a)}
.setup-stage{min-height:0;flex:1}
body[data-view=match]:not(.playing) #match-panel{position:relative}
body[data-view=match]:not(.playing) #match-panel>.setup-stage[hidden]{display:none}
.setup-back{position:absolute;bottom:clamp(10px,2vh,22px);left:clamp(12px,2vw,24px);display:flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;border:1px solid var(--accent-b);border-radius:11px;background:color-mix(in srgb,var(--app-accent) 23%,var(--app-surface));color:var(--app-text);font:700 .75rem var(--font-ui);text-transform:uppercase;letter-spacing:.08em}
.setup-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.setup-entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,48px);height:100%;max-width:1320px;margin:auto;padding:clamp(8px,2vh,24px) clamp(4px,1vw,14px) clamp(12px,2vh,20px)}
.setup-entry{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vh,34px);min-width:0;border:2px solid color-mix(in srgb,var(--app-accent) 62%,var(--app-border));border-radius:clamp(26px,5vw,64px);background:linear-gradient(145deg,color-mix(in srgb,var(--app-accent) 85%,var(--app-surface)),color-mix(in srgb,var(--app-accent) 45%,var(--app-accent)));color:var(--app-on-accent);box-shadow:inset 0 1px 0 #ffffff66,0 25px 65px #0005,0 0 35px var(--accent-a);transition:transform .18s var(--ease),box-shadow .18s}
.setup-entry:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 #ffffff66,0 28px 70px #0006,0 0 55px var(--accent-b)}
.setup-entry:active{transform:scale(.985)}
.setup-entry strong{font:900 clamp(1rem,2.2vw,2rem)/1.12 var(--font-display);letter-spacing:.05em;text-align:center;text-transform:uppercase}
.setup-entry svg{width:clamp(130px,21vw,270px);height:auto;max-height:25%;color:var(--app-on-accent);fill:currentColor}
.setup-entry small{font:700 clamp(.68rem,1.1vw,.95rem) var(--font-ui);letter-spacing:.1em;text-align:center;text-transform:uppercase}
body[data-setup-step=format] #setup-format-step .mode-options{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);height:100%;max-width:1320px;margin:auto;padding:clamp(8px,2vh,24px) clamp(4px,1vw,14px) clamp(54px,7vh,78px)}
body[data-setup-step=format] #setup-format-step .mode-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vh,34px);min-width:0;padding:25px;border:2px solid color-mix(in srgb,var(--app-accent) 60%,var(--app-border));border-radius:clamp(26px,5vw,64px);background:linear-gradient(145deg,color-mix(in srgb,var(--app-accent) 85%,var(--app-surface)),color-mix(in srgb,var(--app-accent) 45%,var(--app-accent)));color:var(--app-on-accent);box-shadow:inset 0 1px 0 #ffffff66,0 25px 65px #0005,0 0 35px var(--accent-a);text-align:center;transition:transform .18s var(--ease),box-shadow .18s}
body[data-setup-step=format] #setup-format-step .mode-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 #ffffff66,0 28px 70px #0006,0 0 55px var(--accent-b)}
body[data-setup-step=format] #setup-format-step .mode-card strong{font:900 clamp(1.2rem,2.4vw,2.3rem) var(--font-display);letter-spacing:.08em;color:inherit}
body[data-setup-step=format] #setup-format-step .mode-card small{font:700 clamp(.72rem,1.1vw,1rem) var(--font-ui);letter-spacing:.12em;color:inherit;text-transform:uppercase}
body[data-setup-step=format] #setup-format-step .mode-symbol{position:relative;display:block;width:clamp(120px,20vw,230px);height:clamp(68px,12vh,105px);background:radial-gradient(circle at center,var(--app-on-accent) 0 5px,transparent 6px);color:var(--app-on-accent)}
body[data-setup-step=format] #setup-format-step .mode-symbol::before,body[data-setup-step=format] #setup-format-step .mode-symbol::after{content:"";position:absolute;top:15%;bottom:15%;width:11px;border-radius:9px;background:currentColor;box-shadow:0 0 14px currentColor}
body[data-setup-step=format] #setup-format-step .mode-symbol::before{left:8%}
body[data-setup-step=format] #setup-format-step .mode-symbol::after{right:8%}
body[data-setup-step=format] #setup-format-step .team-symbol::before,body[data-setup-step=format] #setup-format-step .team-symbol::after{box-shadow:0 28px 0 currentColor,0 0 14px currentColor;height:26px;bottom:auto}
body:not(.mobile)[data-setup-step=format] #setup-format-step .mode-card .mode-symbol{display:block;flex:none;grid-row:auto;width:clamp(120px,20vw,230px);height:clamp(68px,12vh,105px)}
body[data-view=match][data-setup-step=opponent]:not(.playing) .arena-section,body[data-view=match][data-setup-step=format]:not(.playing) .arena-section{display:none!important}
body:not(.mobile)[data-view=match][data-setup-step=opponent]:not(.playing) .play-layout,body:not(.mobile)[data-view=match][data-setup-step=format]:not(.playing) .play-layout{display:block}
body:not(.mobile)[data-view=match][data-setup-step=opponent]:not(.playing) #match-panel,body:not(.mobile)[data-view=match][data-setup-step=format]:not(.playing) #match-panel{width:100%;height:100%;padding:0 0 50px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
body:not(.mobile)[data-view=match][data-setup-step=opponent]:not(.playing) #match-panel::before,body:not(.mobile)[data-view=match][data-setup-step=format]:not(.playing) #match-panel::before{display:none}
body:not(.mobile)[data-view=match][data-setup-step=opponent]:not(.playing) #setup-back{display:none}

body[data-setup-step=court]:not(.playing) #setup-court-step{display:flex;flex-direction:column;gap:12px;padding-bottom:53px}
body[data-setup-step=court]:not(.playing) #setup-court-step .setup-options{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));flex:1;gap:clamp(8px,1.5vh,16px);padding:0;border:0;background:transparent}
body[data-setup-step=court][data-match-mode=team]:not(.playing) #setup-court-step .setup-options,body[data-setup-step=court]:is([data-arena-kind=square],[data-arena-kind=circle]):not(.playing) #setup-court-step .setup-options{grid-template-rows:repeat(2,minmax(0,1fr))}
body[data-setup-step=court]:not(.playing) #setup-court-step .setup-choice,body[data-setup-step=court]:not(.playing) #setup-court-step .game-mode-section{grid-column:1;min-height:0;align-content:start;gap:clamp(5px,1.4vh,14px);padding:clamp(12px,1.8vh,22px);border:1px solid color-mix(in srgb,var(--app-accent) 35%,var(--app-border));border-radius:clamp(20px,3.5vw,42px);background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 21%,var(--app-surface)),color-mix(in srgb,var(--app-accent) 11%,var(--app-surface)));box-shadow:inset 0 1px 0 var(--accent-b),0 12px 35px #0003}
body[data-setup-step=court]:not(.playing) #setup-court-step .section-caption{text-align:center;color:var(--app-text);font:800 clamp(.72rem,1.2vw,1rem) var(--font-display);letter-spacing:.09em}
body[data-setup-step=court]:not(.playing) #setup-court-step .arena-options button{min-height:clamp(44px,8vh,98px);font-size:clamp(.57rem,.85vw,.77rem)}
body[data-setup-step=court]:not(.playing) #setup-court-step .arena-options button::before{transform:scale(1.15);margin:5px 0}
body[data-setup-step=court]:not(.playing) #setup-court-step .ruleset-options button{min-height:clamp(28px,3.7vh,44px);font-size:clamp(.56rem,.85vw,.76rem)}
body[data-setup-step=court]:not(.playing) #setup-court-step .mode-buttons button{min-height:clamp(30px,4vh,46px);font-size:clamp(.54rem,.82vw,.74rem)}
body[data-setup-step=court]:not(.playing) #setup-court-step .mode-description{display:none}
body[data-setup-step=court]:not(.playing) #setup-next{align-self:center;width:min(68%,440px);min-height:clamp(46px,7vh,74px);margin-top:auto;flex:none;font:900 clamp(.9rem,1.7vw,1.45rem) var(--font-display);letter-spacing:.07em;text-transform:uppercase}
body[data-setup-step=court]:not(.playing) #setup-next span{font-family:var(--font-display)}
body[data-setup-step=court]:not(.playing) .arena-section .scoreboard,body[data-setup-step=participants]:not(.playing) .arena-section .scoreboard{display:none}
body[data-setup-step=court]:not(.playing) .arena-section .canvas-wrap,body[data-setup-step=participants]:not(.playing) .arena-section .canvas-wrap{border-radius:clamp(20px,3vw,42px);border:2px solid color-mix(in srgb,var(--app-accent) 38%,var(--app-border));min-height:0}
body[data-setup-step=court]:not(.playing) .arena-section .arena-bottom,body[data-setup-step=participants]:not(.playing) .arena-section .arena-bottom{border-radius:0 0 18px 18px}
body[data-setup-step=court]:not(.playing) .arena-section .under-arena,body[data-setup-step=participants]:not(.playing) .arena-section .under-arena{display:none}

body[data-setup-step=participants]:not(.playing) #setup-roster-step{display:flex;flex-direction:column;gap:clamp(8px,1.5vh,15px);padding-bottom:48px}
body[data-setup-step=participants]:not(.playing) .setup-roster-heading{justify-content:center;padding:10px 14px;border:1px solid color-mix(in srgb,var(--app-accent) 40%,var(--app-border));border-radius:999px;background:color-mix(in srgb,var(--app-accent) 18%,var(--app-surface));text-align:center}
body[data-setup-step=participants]:not(.playing) .setup-roster-heading .section-caption{display:none}
body[data-setup-step=participants]:not(.playing) .setup-roster-heading h3{font:800 clamp(.8rem,1.35vw,1.2rem) var(--font-display);letter-spacing:.08em}
body[data-setup-step=participants]:not(.playing) #roster-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.2vh,14px);align-content:start}
body[data-setup-step=participants]:not(.playing) .setup-player-card{min-height:clamp(95px,15vh,140px);padding:clamp(7px,1vh,13px)}
body[data-setup-step=participants]:not(.playing) .setup-player-config canvas{width:clamp(31px,4vw,50px);height:clamp(46px,6vw,72px)}
body[data-setup-step=participants]:not(.playing) .setup-player-config{grid-template-columns:clamp(32px,4vw,52px) minmax(0,1fr) 42px}
body[data-setup-step=participants]:not(.playing) .setup-footer{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.3vh,16px);align-items:end;margin-top:auto;padding:8px 0 0;border-top:1px solid var(--line)}
body[data-setup-step=participants]:not(.playing) #quick-difficulty-row{grid-column:1;grid-row:1;display:grid;align-items:stretch;gap:5px;font-size:.7rem}
body[data-setup-step=participants]:not(.playing) #quick-difficulty-row select{width:100%!important;min-height:38px}
body[data-setup-step=participants]:not(.playing) .setup-theme{grid-column:2;grid-row:1;font-size:.7rem}
body[data-setup-step=participants]:not(.playing) .setup-theme select{min-height:38px}
body[data-setup-step=participants]:not(.playing) #start-button{grid-column:1/-1;grid-row:3;justify-self:center;width:min(75%,460px);min-height:clamp(52px,8vh,76px);font:900 clamp(.9rem,1.6vw,1.5rem) var(--font-display)}
body[data-setup-step=participants]:not(.playing) .start-note{grid-column:1/-1;grid-row:2;text-align:center}
body[data-setup-step=participants]:not(.playing) .online-shortcut{display:none}
body[data-setup-step=participants]:not(.playing) #quick-difficulty-row[hidden]{display:none}
body[data-setup-step=participants]:not(.playing) #quick-difficulty-row[hidden]+.setup-theme{grid-column:1/-1}
body:not(.mobile)[data-view=match][data-setup-step=participants]:not(.playing) #setup-roster-step .setup-footer{margin-top:auto}

/* Match size is chosen with the participant list, without a separate format screen. */
body[data-setup-step=participants]:not(.playing) .setup-roster-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}
body[data-setup-step=participants]:not(.playing) .setup-roster-heading h3{margin:0}
#roster-size-action{flex:none;max-width:53%;min-height:36px;padding:0 10px;font:800 clamp(.57rem,.8vw,.7rem) var(--font-display);letter-spacing:.04em;white-space:normal;text-align:center}

/* Blockout owns its top navigation and gives the map the whole remaining viewport. */
body[data-view=blockout] .app-shell{max-width:none!important;padding:0!important}
body[data-view=blockout] .header{flex:0 0 auto;height:clamp(58px,8vh,76px);padding:0 clamp(12px,2vw,32px);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--app-page) 88%,var(--app-surface))}
body[data-view=blockout] .header .brand,body[data-view=blockout] .header>nav[aria-label="Menu principal"],body[data-view=blockout] .header-actions{display:none!important}
body[data-view=blockout] .header .bo-header-nav:not([hidden]){display:flex;align-items:center;justify-content:center;gap:clamp(5px,1vw,16px);width:100%;margin:0 auto;padding:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.bo-nav-item{min-height:42px;min-width:clamp(76px,15vw,180px);padding:0 12px;border:1px solid var(--line);border-radius:999px;color:var(--app-muted);font:800 clamp(.68rem,1.15vw,.86rem) var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.bo-nav-item:hover,.bo-nav-item.active{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 18%,var(--app-surface));color:var(--app-text);box-shadow:0 0 20px var(--accent-a)}
.bo-exit{position:absolute;left:clamp(12px,2vw,32px);display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;color:var(--app-text);font:800 1.2rem var(--font-display)}
.bo-exit:hover{border-color:var(--app-accent);color:var(--app-accent)}
body[data-view=blockout] main{flex:1;min-height:0}
body[data-view=blockout] .blockout-view{flex:1;width:100%;max-width:none;min-height:0;margin:0;gap:0}
body[data-view=blockout] .bo-bar{position:absolute;top:clamp(56px,8vh,76px);right:clamp(8px,2vw,24px);z-index:4;gap:6px;pointer-events:none}
.bo-world-picker{position:absolute;z-index:4;top:clamp(56px,8vh,76px);left:clamp(8px,2vw,24px);display:flex;align-items:center;gap:8px;padding:5px 9px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--app-page) 88%,transparent);color:var(--app-text);font:700 .7rem var(--font-display);text-transform:uppercase;letter-spacing:.06em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bo-world-picker select{min-height:34px;max-width:130px;padding:0 30px 0 9px;font:700 .7rem var(--font-display)}
body[data-view=blockout] .bo-wallet{padding:6px 10px;border-color:color-mix(in srgb,var(--app-accent) 28%,var(--line));background:color-mix(in srgb,var(--app-page) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 18px #0007}
.bo-rhombus{position:relative;display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.12em;font-size:1.12rem;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%201.5%202%2012h5l5-5Z%22%20fill%3D%22%23ffc2e3%22%2F%3E%3Cpath%20d%3D%22M12%201.5V7l5%205h5Z%22%20fill%3D%22%23ff6fbf%22%2F%3E%3Cpath%20d%3D%22M22%2012h-5l-5%205v5.5Z%22%20fill%3D%22%23b81a76%22%2F%3E%3Cpath%20d%3D%22M2%2012h5l5%205v5.5Z%22%20fill%3D%22%23e23a98%22%2F%3E%3Cpath%20d%3D%22M12%207l5%205-5%205-5-5Z%22%20fill%3D%22%23ff8fd0%22%2F%3E%3Cpath%20d%3D%22M7.6%208.4%209.4%206.6%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}

.bo-shop-item .bo-rhombus,.bo-continue .bo-rhombus{font-size:1em}
body[data-view=blockout] .bo-map{flex:1;width:100%;max-width:none;min-height:0;border:0;border-radius:0;scrollbar-width:thin}
body[data-view=blockout] .bo-world{min-width:100%;}
.wallet-chip.gems i{color:#42bcff;filter:drop-shadow(0 0 5px #42bcff)}
.wallet-chip.coins i{color:#ffcf32;filter:drop-shadow(0 0 4px #ffcf32)}
@media(max-width:820px){
 body.mobile[data-view=blockout]:not(.playing) .header{height:calc(56px + var(--sat));flex-basis:calc(56px + var(--sat));padding-top:var(--sat)}
 body.mobile[data-view=blockout]:not(.playing) .header .bo-header-nav:not([hidden]){display:flex!important;justify-content:flex-end;padding-left:35px;gap:4px}
 body.mobile[data-view=blockout]:not(.playing) .bo-nav-item{min-width:0;flex:1;min-height:37px;padding:0 4px;font-size:clamp(.52rem,2.3vw,.7rem);letter-spacing:.02em}
 body.mobile[data-view=blockout]:not(.playing) .bo-exit{left:8px;width:34px;height:36px}
 body.mobile[data-view=blockout]:not(.playing) .bo-bar{top:7px;right:7px}
 body.mobile[data-view=blockout]:not(.playing) .bo-world-picker{top:53px;left:7px;padding:4px 6px;font-size:.58rem}
 body.mobile[data-view=blockout]:not(.playing) .bo-world-picker select{min-height:31px;max-width:96px;font-size:.6rem}
 body.mobile[data-view=blockout]:not(.playing) .bo-wallet{padding:4px 7px;font-size:.74rem}
 body.mobile[data-view=blockout]:not(.playing) .bo-world-head{padding-right:118px}
 body.mobile[data-view=blockout]:not(.playing) .blockout-view{gap:0}
 body.mobile[data-view=blockout]:not(.playing) .bo-map{border-radius:0}
 body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-roster-heading{padding:6px 10px}
 body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #roster-size-action{min-height:30px;font-size:.52rem}
}
body.mobile[data-view=blockout]:not(.playing) .header{height:calc(56px + var(--sat));flex-basis:calc(56px + var(--sat));padding-top:var(--sat)}
body.mobile[data-view=blockout]:not(.playing) .app-shell{padding-bottom:var(--sab)!important}
body.mobile[data-view=blockout]:not(.playing) .header{padding-left:max(8px,var(--sal));padding-right:max(8px,var(--sar))}
body.mobile[data-view=blockout]:not(.playing) .header .bo-header-nav:not([hidden]){display:flex!important;justify-content:flex-end;padding-left:35px;gap:4px}
body.mobile[data-view=blockout]:not(.playing) .bo-nav-item{min-width:0;flex:1;min-height:37px;padding:0 4px;font-size:clamp(.52rem,2.3vw,.7rem);letter-spacing:.02em}
body.mobile[data-view=blockout]:not(.playing) .bo-exit{left:max(8px,var(--sal));width:34px;height:36px}
body.mobile[data-view=blockout]:not(.playing) .bo-world-picker{left:max(7px,var(--sal))}
body.mobile[data-view=blockout]:not(.playing) .bo-bar{right:max(7px,var(--sar))}

@media (min-width:821px){
 body:not(.mobile)[data-view=match]:not(.playing) .play-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
 body:not(.mobile)[data-view=match][data-setup-step=court]:not(.playing) #match-panel,body:not(.mobile)[data-view=match][data-setup-step=participants]:not(.playing) #match-panel{padding:0 0 0 2px;border:0;background:transparent;box-shadow:none}
 body:not(.mobile)[data-view=match][data-setup-step=court]:not(.playing) #match-panel::before,body:not(.mobile)[data-view=match][data-setup-step=participants]:not(.playing) #match-panel::before{display:none}
 body:not(.mobile)[data-view=match][data-setup-step=court]:not(.playing) .arena-section,body:not(.mobile)[data-view=match][data-setup-step=participants]:not(.playing) .arena-section{padding:0 0 0 8px}
}
@media (max-height:760px) and (min-width:821px){
 body:not(.mobile)[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step{gap:6px}
 body:not(.mobile)[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .setup-options{gap:6px}
 body:not(.mobile)[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .setup-choice,body:not(.mobile)[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .game-mode-section{padding:8px 12px;gap:4px}
 body:not(.mobile)[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .arena-options button{min-height:48px}
 body:not(.mobile)[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .ruleset-options button{min-height:28px}
 body:not(.mobile)[data-view=match][data-setup-step=participants]:not(.playing) #setup-roster-step{gap:6px}
 body:not(.mobile)[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-card{min-height:95px}
 body:not(.mobile)[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer{gap:6px}
}
@media (max-width:820px){
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .play-layout,html body.mobile[data-view=match][data-setup-step=format]:not(.playing) .play-layout{display:block}
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) #match-panel,html body.mobile[data-view=match][data-setup-step=format]:not(.playing) #match-panel{height:100%;padding:6px 0 52px;border:0;background:transparent;box-shadow:none;justify-content:center;overflow-y:auto}
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry-grid,html body.mobile[data-view=match][data-setup-step=format]:not(.playing) .mode-options{height:auto;grid-template-columns:1fr;gap:14px;padding:0}
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry,html body.mobile[data-view=match][data-setup-step=format]:not(.playing) .mode-card{flex-direction:row;justify-content:flex-start;padding:10px 16px;border-radius:24px;min-height:72px}
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry strong,html body.mobile[data-view=match][data-setup-step=format]:not(.playing) .mode-card strong{font-size:.8rem}
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry svg{width:56px;flex:none}
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry small{text-align:left}
 body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry{text-align:left}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) .play-layout,html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .play-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(120px,24vh)}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #match-panel,html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #match-panel{height:100%;padding:2px 2px 0;border:0;background:transparent;box-shadow:none}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .setup-options{gap:5px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .setup-choice,html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .game-mode-section{padding:6px 9px;border-radius:17px;gap:3px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .arena-options button{min-height:37px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .ruleset-options button{min-height:25px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-next{min-height:40px;width:60%;font-size:.72rem}
 html body.mobile[data-view=match]:not(.playing) #setup-back{bottom:5px;left:3px;min-height:34px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .play-layout{grid-template-rows:minmax(0,1fr)}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .arena-section{display:none}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #setup-roster-step{padding-bottom:38px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-card{min-height:0}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer{gap:4px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #start-button{min-height:44px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) .arena-section{display:flex}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) .setup-geometry{display:none}
}
@media (max-width:820px) and (orientation:landscape) and (max-height:600px){
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry-grid,html body.mobile[data-view=match][data-setup-step=format]:not(.playing) .mode-options{grid-template-columns:repeat(3,1fr)}
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry,html body.mobile[data-view=match][data-setup-step=format]:not(.playing) .mode-card{flex-direction:column;justify-content:center;min-height:0}
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry svg{width:64px}
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry small{text-align:center}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) .play-layout{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #match-panel{height:100%;padding:2px 40px 2px 2px;overflow-y:auto}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step{padding-bottom:6px;gap:6px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .setup-options{grid-template-rows:none;gap:4px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-next{width:100%;min-height:34px;margin-top:0;font-size:.72rem}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #match-panel{height:100%;padding:2px 40px 2px 2px;overflow-y:auto}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-roster-heading{padding-right:44px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #roster-summary{grid-template-columns:1fr}
 html body.mobile[data-view=match]:not(.playing) #setup-back{bottom:auto;top:2px;left:auto;right:2px;min-height:28px;padding:0 9px;font-size:.62rem}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #setup-roster-step{padding-bottom:4px}
}

/* Participant cards: the colour selector needs its own full-width row on desktop too. */
body:not(.mobile)[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config{grid-template-columns:clamp(32px,4vw,52px) minmax(0,1fr);grid-template-rows:auto auto;align-items:start}
body:not(.mobile)[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config canvas{grid-column:1;grid-row:1/3}
body:not(.mobile)[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-fields{grid-column:2;grid-row:1}
body:not(.mobile)[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-palette{grid-column:2;grid-row:2;justify-items:stretch}
body:not(.mobile)[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-palette label{min-width:0;width:100%}
body:not(.mobile)[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-palette select{max-width:none;width:100%}
body[data-view=home] .header,body.mobile[data-view=home]:not(.playing) .header{display:none!important}

/* --- Online lobby: one screen, never scrolls (spec "pages entières") --- */
.online-dialog[open]{display:flex;flex-direction:column;overflow:hidden;gap:8px}
.online-dialog>.dialog-heading{flex:none;margin:0}
.online-dialog .online-nav .small-button{min-height:40px}
.online-dialog #online-entry,.online-dialog #online-room{flex:1 1 auto;min-height:0}
.online-dialog #online-entry:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:min-content;align-content:start;gap:8px}
.online-dialog #online-entry .matchmaking-grid,.online-dialog #online-entry .online-choices{display:contents}
.online-dialog #online-entry>.nickname-label{margin:0}
.online-dialog #online-entry .setting-footnote:empty,.online-dialog #online-entry .matchmaking-status:empty{display:none}
.online-dialog .mm-card,.online-dialog .online-card,.online-dialog .rank-panel{margin:0;padding:12px 14px;gap:6px}
.online-dialog .online-card .muted{font-size:.8rem}
@media (min-width:760px){
 .online-dialog #online-entry:not([hidden]){grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
 .online-dialog #online-entry>.nickname-label,.online-dialog #online-entry>.matchmaking-status,.online-dialog #online-entry>.setting-footnote{grid-column:1/-1}
 .online-dialog .ranked-card{grid-column:1;grid-row:2/4}
 .online-dialog .rank-panel{grid-column:2;grid-row:2}
 .online-dialog .quick-card{grid-column:2;grid-row:3}
 .online-dialog .online-choices .online-card{grid-row:4}
 .online-dialog .online-choices .online-card:first-child{grid-column:1}
 .online-dialog .online-choices .online-card:last-child{grid-column:2}
}
@media (max-width:759px){.online-dialog .rank-reward,.online-dialog .rank-ends{display:none}}
@media (max-height:660px){.online-dialog .rank-reward,.online-dialog .rank-ends{display:none}}
@media (max-height:700px){.online-dialog .mm-card>.muted,.online-dialog .online-card>.muted,.online-dialog #online-entry>.setting-footnote:last-child,.online-dialog .ranked-card .setting-footnote,.online-dialog .rank-next,.online-dialog .dialog-heading .section-caption{display:none}}
/* compact lobby: phones in portrait, and any short landscape screen */
@media (max-width:759px),(max-height:560px){
 .online-dialog .ranked-card{display:none}
 .online-dialog .rank-panel{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;align-items:center;justify-items:start;column-gap:12px;row-gap:2px;text-align:left}
 .online-dialog .rank-panel .rank-emblem{grid-row:1/3;width:44px;height:44px;margin:0;transform:none;font-size:1.1rem}
 .online-dialog .rank-panel .rank-progress,.online-dialog .rank-panel .rank-next{display:none}
 .online-dialog .rank-panel #ranked-play{grid-column:1/-1;width:100%;margin-top:6px}
 .online-dialog .mm-card,.online-dialog .online-card,.online-dialog .rank-panel{padding:10px 12px}
 .online-dialog .primary-button{min-height:44px;padding-block:6px}
 .online-dialog .primary-button small{display:none}
 .online-dialog .quick-card .section-caption,.online-dialog .online-card .section-caption{display:none}
 .online-dialog .mm-card h3,.online-dialog .online-card h3{font-size:.9rem}
 .online-dialog #online-entry>.setting-footnote:last-child{display:none}
}
@media (max-width:759px){
 .online-dialog #online-entry:not([hidden]){gap:6px}
 .online-dialog .dialog-heading h2{font-size:1rem}
}
@media (min-width:560px) and (max-width:759px) and (max-height:560px),(min-width:760px) and (max-height:560px){
 .online-dialog #online-entry:not([hidden]){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .online-dialog .rank-panel{grid-column:1;grid-row:2}
 .online-dialog .quick-card{grid-column:1;grid-row:3}
 .online-dialog .online-choices .online-card:first-child{grid-column:2;grid-row:2}
 .online-dialog .online-choices .online-card:last-child{grid-column:2;grid-row:3}
}
@media (min-width:760px) and (max-height:800px){
 body:not(.mobile) .online-dialog{padding-block:18px}
 .online-dialog .online-card>.muted,.online-dialog .quick-card>.muted{display:none}
}
@media (max-width:759px),(max-height:560px){
 .online-dialog .nickname-label{font-size:0;gap:0}
 .online-dialog .nickname-label input{font-size:1rem;min-height:40px}
 .online-dialog #join-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .online-dialog .online-card .setting-row{gap:8px}.online-dialog .online-card .setting-row>span{white-space:nowrap;font-size:.85rem}
 .online-dialog .dialog-heading h2{font-size:.9rem;letter-spacing:.04em;line-height:1.15}
 .online-dialog #join-form input,.online-dialog #join-form .small-button,.online-dialog .online-card select{min-height:40px}
}
@media (max-height:560px){
 .online-dialog[open]{gap:4px}
 body.mobile .online-dialog{padding-top:calc(var(--sat) + 4px);padding-bottom:calc(var(--sab) + 4px)}
 .online-dialog #online-entry:not([hidden]){gap:5px}
 .online-dialog .primary-button{min-height:38px}
 .online-dialog .small-button,.online-dialog .online-nav .small-button{min-height:36px}
 .online-dialog .nickname-label input{min-height:34px}
 .online-dialog .mm-card,.online-dialog .online-card,.online-dialog .rank-panel{padding:8px 10px;gap:4px}
 .online-dialog .rank-panel #ranked-play{margin-top:2px}
}
@media (max-height:560px){.online-dialog .mm-card,.online-dialog .online-card,.online-dialog .rank-panel{padding:6px 10px;gap:3px}.online-dialog .online-card .setting-row{min-height:0}}
@media (max-width:759px){.online-dialog .dialog-heading h2{font-size:.8rem;max-width:11em}}
@media (max-height:420px){.online-dialog .quick-card h3,.online-dialog .online-choices .online-card h3{display:none}}
@media (max-height:560px){
 .online-dialog #online-room:not([hidden]){display:flex;flex-direction:column;gap:5px}
 .online-dialog .room-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;padding:6px 12px;margin:0}
 .online-dialog .room-banner strong{font-size:1.3rem}
 .online-dialog #online-room>.setting-footnote,.online-dialog #room-rules:empty{display:none}
 .online-dialog #online-room .primary-button{min-height:40px}
}

/* Dedicated, fixed-height pages for the wheel, daily challenge and achievement details. */
body[data-view=wheel],body[data-view=challenge],body[data-view=achievement-detail]{height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none}
body[data-view=wheel] .app-shell,body[data-view=challenge] .app-shell,body[data-view=achievement-detail] .app-shell{height:100vh;height:100dvh;width:100%;max-width:none;margin:0;padding:0;overflow:hidden}
body[data-view=wheel] .header,body[data-view=challenge] .header,body[data-view=achievement-detail] .header,body[data-view=wheel] .footer,body[data-view=challenge] .footer,body[data-view=achievement-detail] .footer,body[data-view=wheel] .download-section,body[data-view=challenge] .download-section,body[data-view=achievement-detail] .download-section{display:none!important}
body[data-view=wheel] main,body[data-view=challenge] main,body[data-view=achievement-detail] main{position:relative;flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:0;overflow:hidden;display:block}
body[data-view=wheel] #announcer,body[data-view=challenge] #announcer,body[data-view=achievement-detail] #announcer{position:fixed}
.dedicated-view[hidden]{display:none!important}
.dedicated-view:not([hidden]){position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(8px,1.6vh,18px);padding:calc(var(--sat) + 10px) calc(var(--sar) + clamp(12px,2.4vw,36px)) calc(var(--sab) + 10px) calc(var(--sal) + clamp(12px,2.4vw,36px));overflow:hidden;min-height:0}
.dedicated-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:48px;border-bottom:1px solid var(--app-border)}
.dedicated-head h1{margin:0;color:var(--app-text);font:800 clamp(1rem,2vw,1.5rem) var(--font-display);letter-spacing:.08em;text-align:center;text-transform:uppercase}
.dedicated-head>.small-button{min-height:44px;justify-self:start;padding-inline:14px}
.dedicated-head>.small-button:last-child{justify-self:end}
.dedicated-body{min-height:0;overflow:hidden}
.dedicated-view .primary-button,.dedicated-view .small-button{min-height:44px}
body[data-view=achievements]{overflow:hidden;overscroll-behavior:none}
body[data-view=achievements] .ach-tabs{grid-template-columns:repeat(4,minmax(0,1fr));min-width:0}
body[data-view=achievements] .ach-tabs button{min-width:0;padding-inline:1px;overflow-wrap:anywhere}
@media(max-width:420px){body[data-view=achievements] .ach-tabs button{font-size:.52rem;letter-spacing:0;line-height:1.05}}
.wheel-view .wheel-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(265px,330px);align-items:center;justify-content:center;gap:clamp(14px,3vw,42px);height:100%;min-height:0}
.wheel-view .wheel-stage{--size:min(72vh,calc(100vw - 390px),680px);--size:min(72dvh,calc(100vw - 390px),680px);width:var(--size);height:var(--size);margin:0 auto}
.wheel-view .wheel-side{display:grid;align-content:center;gap:clamp(8px,1.5vh,16px);max-height:100%;overflow:hidden}
.wheel-view .wheel-side>*{margin-block:0}
.wheel-view .wheel-side .wheel-actions{grid-template-columns:1fr;gap:8px}
.wheel-view .wheel-side .setting-footnote,.wheel-view .wheel-side .shop-banner{font-size:.75rem;line-height:1.2}
.wheel-view .wheel-odds{padding:12px}
.wheel-view .wheel-result{min-height:70px;padding:8px}
.achievement-detail-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto minmax(0,1fr);gap:clamp(10px,2vw,24px);align-items:stretch}
.achievement-detail-hero{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;min-height:0;padding:clamp(16px,4vw,52px);border:1px solid var(--app-border);border-radius:var(--r-lg);background:linear-gradient(145deg,color-mix(in srgb,var(--app-accent) 16%,var(--app-panel)),var(--app-panel));box-shadow:inset 0 1px #ffffff1c,0 18px 48px #0002}
.achievement-detail-icon{display:grid;place-items:center;width:clamp(72px,12vh,132px);height:clamp(72px,12vh,132px);border-radius:24px;border:1px solid var(--app-accent);background:color-mix(in srgb,var(--app-accent) 18%,var(--app-panel));font-size:clamp(2.5rem,7vh,5rem);box-shadow:0 0 32px color-mix(in srgb,var(--app-accent) 28%,transparent)}
.achievement-detail-icon.locked{filter:grayscale(1)}
.achievement-detail-hero h2{margin:4px 0;font:900 clamp(1.15rem,3vw,2.2rem) var(--font-display);letter-spacing:.04em}
.achievement-detail-hero p,.achievement-detail-unlock p{margin:0;color:var(--app-muted);line-height:1.4}
.achievement-detail-rarity{display:inline-flex;padding:5px 10px;border:1px solid var(--app-border);border-radius:999px;color:var(--app-accent);font:700 .7rem var(--font-ui);letter-spacing:.12em;text-transform:uppercase}
.achievement-detail-unlock,.achievement-detail-rewards{min-height:0;padding:clamp(12px,2vw,22px);border:1px solid var(--app-border);border-radius:var(--r-lg);background:color-mix(in srgb,var(--app-panel) 88%,transparent)}
.achievement-detail-unlock h3,.achievement-detail-rewards h3,.challenge-phase-card h3{margin:0 0 8px;font:800 .8rem var(--font-display);letter-spacing:.12em;text-transform:uppercase}
.achievement-detail-rewards{display:grid;grid-template-rows:auto minmax(0,1fr)}
.achievement-detail-reward-list{min-height:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));align-content:start;gap:10px;overflow:hidden}
.achievement-reward-card{min-width:0;display:grid;grid-template-columns:minmax(64px,100px) minmax(0,1fr);align-items:center;gap:10px;padding:8px;border:1px solid var(--app-border);border-radius:14px;background:var(--app-surface)}
.achievement-reward-card>div{display:grid;gap:3px;min-width:0}.achievement-reward-card strong{font:700 .78rem var(--font-display);overflow-wrap:anywhere}.achievement-reward-card small{color:var(--app-muted);font-size:.68rem;line-height:1.2;overflow-wrap:anywhere}
.achievement-reward-card .section-caption{font-size:.55rem}
.achievement-reward-canvas{display:block;width:100%;height:78px;object-fit:contain}.achievement-reward-canvas.skin,.achievement-reward-canvas.ball{max-width:100px;height:78px}
.achievement-reward-swatch,.achievement-reward-glyph{justify-self:center;width:44px;height:44px;border-radius:50%;border:2px solid #ffffffa0;background:var(--reward-color);box-shadow:0 0 18px color-mix(in srgb,var(--reward-color) 55%,transparent)}
.achievement-reward-glyph{display:grid;place-items:center;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 18%,var(--app-surface));font-size:1.6rem}
.challenge-page-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:clamp(14px,3vw,40px)}
.challenge-boss-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;min-height:0;overflow:hidden;padding:clamp(14px,3vw,36px);border:1px solid var(--app-border);border-radius:var(--r-lg);background:linear-gradient(145deg,color-mix(in srgb,var(--app-accent) 15%,var(--app-panel)),var(--app-panel));box-shadow:inset 0 1px #ffffff18,0 18px 48px #0002}
.challenge-boss-card canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.challenge-boss-card>*:not(canvas){z-index:1}
.challenge-boss-card h2{margin:5px 0;font:900 clamp(1.5rem,4vw,3rem) var(--font-display);text-shadow:0 2px 14px #000c}
.challenge-boss-card .section-caption,.challenge-boss-card p{color:#fff;text-shadow:0 2px 8px #000}
.challenge-info{display:grid;align-content:center;gap:clamp(6px,1.2vh,12px);min-height:0;overflow:hidden}
.challenge-difficulty,.challenge-status{margin:0;padding:9px 12px;border:1px solid var(--app-border);border-radius:13px;background:var(--app-panel);font-size:.87rem;line-height:1.3}
.challenge-phase-card{padding:10px 12px;border:1px solid var(--app-border);border-radius:14px;background:color-mix(in srgb,var(--app-panel) 90%,transparent)}
.challenge-phase-card ol{display:grid;gap:7px;margin:0;padding:0;list-style:none}.challenge-phase-card li{display:grid;grid-template-columns:minmax(112px,.7fr) minmax(0,1fr);gap:8px;color:var(--app-muted);font-size:.77rem;line-height:1.25}.challenge-phase-card li b{color:var(--app-text)}
.challenge-rewards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.challenge-rewards li{display:grid;gap:3px;align-content:center;padding:9px 7px;border:1px solid var(--app-border);border-radius:12px;background:var(--app-panel);color:var(--app-muted);font-size:.68rem;text-align:center}
.challenge-rewards b{color:var(--app-accent);font:800 .85rem var(--font-display)}
.challenge-info .primary-button{width:100%}
body[data-view=achievement-detail] .achievement-detail-view,body[data-view=challenge] .challenge-view,body[data-view=wheel] .wheel-view{color:var(--app-text)}
@media(max-width:699px) and (orientation:portrait){
 .dedicated-view:not([hidden]){gap:7px;padding:calc(var(--sat) + 6px) calc(var(--sar) + 12px) calc(var(--sab) + 6px) calc(var(--sal) + 12px)}
 .dedicated-head{min-height:44px;gap:6px}.dedicated-head>.small-button{min-height:40px;padding-inline:9px;font-size:.72rem}.dedicated-head h1{font-size:.95rem;letter-spacing:.04em}
 .wheel-view .wheel-body{grid-template-columns:minmax(0,1fr);grid-template-rows:min(44vh,calc(100vw - 50px)) minmax(0,1fr);grid-template-rows:min(44dvh,calc(100vw - 50px)) minmax(0,1fr);align-content:start;gap:5px;overflow:hidden}
 .wheel-view .wheel-stage{--size:min(44vh,calc(100vw - 50px));--size:min(44dvh,calc(100vw - 50px));margin:0 auto}
 .wheel-view .wheel-side{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;align-content:start;gap:5px 8px}
 .wheel-view .wheel-side .wheel-odds,.wheel-view .wheel-side .wheel-actions{grid-column:1/-1}
 .wheel-view .wheel-odds{display:grid;grid-template-columns:1fr auto;gap:3px 8px;padding:7px 10px}.wheel-view .wheel-odds-label{font-size:.68rem}.wheel-view .wheel-odds strong{font-size:1rem}.wheel-view .wheel-meter{grid-column:1/-1}.wheel-view .wheel-odds small{grid-column:1/-1;font-size:.65rem}
 .wheel-view .wheel-result{grid-column:1/-1;min-height:48px;padding:4px 8px}.wheel-view .wheel-result canvas{width:42px;height:42px}.wheel-view .wheel-result strong{font-size:.78rem}.wheel-view .wheel-result span{font-size:.66rem}
 .wheel-view #wheel-timer{font-size:.66rem;text-align:center}.wheel-view .wheel-actions{display:flex!important;flex-direction:row;flex-wrap:wrap;justify-content:center}.wheel-view .wheel-actions>*{flex:1 1 46%;min-width:0}.wheel-view .wheel-actions .primary-button{flex-basis:100%}.wheel-view .wheel-actions .primary-button span:first-child{font-size:.85rem}.wheel-view .wheel-actions .primary-button small{font-size:.58rem}.wheel-view .wheel-actions .small-button{font-size:.68rem;padding:5px 8px}
 .achievement-detail-body{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr);gap:7px}.achievement-detail-hero{grid-column:auto;grid-row:auto;display:grid;grid-template-columns:64px minmax(0,1fr);align-content:center;gap:8px;padding:9px 11px}.achievement-detail-icon{grid-row:1/4;width:56px;height:56px;border-radius:14px;font-size:1.8rem}.achievement-detail-hero h2{font-size:1rem;margin:1px 0}.achievement-detail-hero p{font-size:.75rem;line-height:1.25}.achievement-detail-hero .section-caption{font-size:.56rem}.achievement-detail-rarity{justify-self:start;padding:3px 8px;font-size:.58rem}
 .achievement-detail-unlock,.achievement-detail-rewards{padding:8px 10px}.achievement-detail-unlock h3,.achievement-detail-rewards h3{font-size:.68rem;margin-bottom:4px}.achievement-detail-unlock p{font-size:.72rem;line-height:1.2}.achievement-detail-reward-list{grid-template-columns:1fr;gap:5px}.achievement-reward-card{grid-template-columns:64px minmax(0,1fr);gap:7px;padding:4px 7px}.achievement-reward-canvas{height:48px}.achievement-reward-card strong{font-size:.7rem}.achievement-reward-card small{font-size:.62rem}.achievement-reward-card .section-caption{font-size:.48rem}
 .challenge-page-body{grid-template-columns:1fr;grid-template-rows:minmax(112px,.68fr) minmax(0,1.32fr);gap:7px}.challenge-boss-card{padding:9px 12px}.challenge-boss-card h2{font-size:1.2rem}.challenge-boss-card p{font-size:.65rem;margin:0}.challenge-boss-card .section-caption{font-size:.56rem}.challenge-info{gap:5px}.challenge-difficulty,.challenge-status{padding:6px 8px;font-size:.72rem}.challenge-phase-card{padding:7px 9px}.challenge-phase-card h3{font-size:.65rem;margin-bottom:4px}.challenge-phase-card ol{gap:4px}.challenge-phase-card li{grid-template-columns:112px 1fr;font-size:.66rem}.challenge-rewards li{padding:5px 3px;font-size:.6rem}.challenge-rewards b{font-size:.73rem}.challenge-info .primary-button{min-height:42px}
 .achievements-view .ach-grid{grid-template-columns:1fr;overflow:hidden}
}
@media(min-width:700px){.achievements-view .ach-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.achievements-view .ach-grid{overflow:hidden;align-content:center}}
@media(orientation:landscape){
 .wheel-view .wheel-body{grid-template-columns:minmax(0,1fr) minmax(230px,.8fr);gap:14px}
 .wheel-view .wheel-stage{--size:min(69vh,calc(100vw - 430px));--size:min(69dvh,calc(100vw - 430px));margin:0 auto}
 .wheel-view .wheel-side{gap:7px}.wheel-view .wheel-side>*{margin:0!important}.wheel-view .wheel-actions{gap:6px}
 .challenge-page-body{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:12px}.challenge-phase-card li{font-size:.7rem}.challenge-info{gap:6px}
}
@media(max-height:520px){
 .dedicated-view:not([hidden]){gap:4px;padding:calc(var(--sat) + 4px) calc(var(--sar) + 10px) calc(var(--sab) + 4px) calc(var(--sal) + 10px)}.dedicated-head{min-height:38px}.dedicated-head>.small-button{min-height:34px}.dedicated-body{min-height:0}
 .wheel-view .wheel-stage{--size:min(60vh,calc(100vw - 430px),290px);--size:min(60dvh,calc(100vw - 430px),290px)}.wheel-view .wheel-odds{padding:7px}.wheel-view .wheel-side{gap:5px}
 .challenge-boss-card{padding:8px 12px}.challenge-boss-card h2{font-size:1.25rem}.challenge-info{gap:4px}.challenge-phase-card{padding:6px 8px}.challenge-phase-card ol{gap:3px}.challenge-phase-card li{font-size:.64rem}.challenge-difficulty,.challenge-status{font-size:.68rem;padding:5px 7px}.challenge-rewards li{padding:4px 3px}
 .achievement-detail-body{gap:8px}.achievement-detail-hero{padding:10px}.achievement-detail-icon{width:64px;height:64px;font-size:2.2rem}.achievement-detail-unlock,.achievement-detail-rewards{padding:8px 10px}
}

/* Keep every achievement reachable without scrolling: compact cards form a 2-column grid on phones. */
@media(max-width:699px) and (orientation:portrait){
 body[data-view=achievements] .ach-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 body[data-view=achievements] .ach-tabs button{min-height:38px;font-size:.68rem;letter-spacing:.04em;line-height:1.1}
 body[data-view=achievements] .ach-tabs button::after{display:inline;margin:0}
 body[data-view=achievements] .achievements-view .ach-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:hidden;align-content:start}
 body[data-view=achievements] .achievements-view .ach-card{grid-template-columns:30px minmax(0,1fr);gap:6px;padding:6px;align-items:start}
 body[data-view=achievements] .achievements-view .ach-icon{width:30px;height:30px;font-size:1rem}
 body[data-view=achievements] .achievements-view .ach-text strong{font-size:.72rem;letter-spacing:.03em;line-height:1.12}
 body[data-view=achievements] .achievements-view .ach-text small,body[data-view=achievements] .achievements-view .ach-reward{display:none}
 body[data-view=achievements] .achievements-view .ach-rarity{display:none}
}
@media(max-height:520px) and (orientation:landscape){
 body[data-view=achievements] .achievements-view .ach-summary{display:none}
 body[data-view=achievements] .achievements-view .ach-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;overflow:hidden;align-content:center}
 body[data-view=achievements] .achievements-view .ach-card{grid-template-columns:30px minmax(0,1fr);gap:6px;padding:4px 6px;min-height:38px}
 body[data-view=achievements] .achievements-view .ach-icon{width:30px;height:30px;font-size:1rem}
 body[data-view=achievements] .achievements-view .ach-text strong{font-size:.62rem;letter-spacing:.025em;line-height:1.1}
 body[data-view=achievements] .achievements-view .ach-text small,body[data-view=achievements] .achievements-view .ach-reward,body[data-view=achievements] .achievements-view .ach-rarity{display:none}
}
@media (max-height:440px){.shop-view .shop-note{display:none}.shop-view{gap:5px}}
@media (max-width:759px){.online-dialog .dialog-heading{gap:8px;min-width:0}.online-dialog .online-nav{gap:4px;flex:none}.online-dialog .online-nav .small-button{padding-inline:9px;font-size:.72rem;min-width:0}}
.scoreboard{max-width:100%;box-sizing:border-box}.scoreboard>*{min-width:0}
@media (min-width:768px) and (max-width:1000px){body:not(.playing) .score-team{gap:6px}body:not(.playing) .score-team strong{min-width:0;font-size:clamp(1.6rem,3.4vw,2.2rem)}}

/* ===== v2.47 — pages entières : Blockout (barre + carte), aide / boutique Blockout / classement en pages plein écran ===== */
html body[data-view=blockout]:not(.playing) .header{position:relative;inset:auto;z-index:6;display:flex;align-items:center;width:100%;height:calc(52px + var(--sat));flex:0 0 auto;padding:var(--sat) max(8px,var(--sar)) 0 max(8px,var(--sal));border-bottom:1px solid var(--line)}
html body[data-view=blockout]:not(.playing) .header .bo-header-nav:not([hidden]){display:flex!important;justify-content:center;align-items:center;gap:6px;width:100%;padding:0}
html body[data-view=blockout]:not(.playing) .bo-exit{position:static;flex:none;width:44px;height:40px}
html body[data-view=blockout]:not(.playing) .bo-nav-item{flex:1 1 0;max-width:170px;min-width:0;min-height:40px;padding:0 6px;font-size:clamp(.6rem,2.5vw,.8rem);letter-spacing:.06em;white-space:nowrap}
html body[data-view=blockout]:not(.playing) .blockout-view{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);align-items:center}
html body[data-view=blockout]:not(.playing) .bo-world-picker{position:static;grid-column:1;grid-row:1;justify-self:start;margin:6px 0 6px max(8px,var(--sal));padding:3px 8px;font-size:.66rem}
html body[data-view=blockout]:not(.playing) .bo-world-picker select{min-height:36px;max-width:150px;font-size:.72rem}
html body[data-view=blockout]:not(.playing) .bo-bar{position:static;grid-column:2;grid-row:1;margin:6px max(8px,var(--sar)) 6px 0;pointer-events:auto}
html body[data-view=blockout]:not(.playing) .bo-map{grid-column:1/-1;grid-row:2;align-self:stretch}
html body[data-view=blockout]:not(.playing) .bo-world-head{padding:8px max(16px,var(--sar)) 8px max(16px,var(--sal))}
@media (max-height:440px){html body[data-view=blockout]:not(.playing) .header{height:calc(46px + var(--sat))}html body[data-view=blockout]:not(.playing) .bo-nav-item,html body[data-view=blockout]:not(.playing) .bo-exit{min-height:36px;height:36px}html body[data-view=blockout]:not(.playing) .bo-world-picker{margin-block:3px}html body[data-view=blockout]:not(.playing) .bo-bar{margin-block:3px}}

/* Pages plein écran : même patron que le salon En ligne (Retour + Menu, rien qui déborde de la page) */
.page-dialog{position:fixed;inset:0;width:auto;height:auto;max-width:none!important;max-height:none;margin:0;border-radius:0;padding:calc(var(--sat) + 12px) calc(var(--sar) + 16px) calc(var(--sab) + 12px) calc(var(--sal) + 16px);z-index:15}
.page-dialog[open]{display:flex;flex-direction:column;gap:10px;overflow:hidden}
.page-dialog>*{width:100%;max-width:960px;margin-inline:auto;min-width:0}
.page-dialog>.dialog-heading{flex:none;margin-bottom:0;align-items:center}
.page-dialog .page-nav{flex:none}
.page-dialog .page-nav .small-button{min-height:42px;white-space:nowrap}
body.playing .page-dialog .dialog-menu{display:none}
.page-dialog .dialog-heading h2{font-size:clamp(1.05rem,3.4vw,1.6rem);margin:2px 0 0}
.page-dialog .dialog-heading .section-caption{font-size:.6rem}
.page-dialog .setting-footnote,.page-dialog .bo-balance{margin:0}
#bo-shop-dialog .bo-shop-grid{flex:1 1 auto;min-height:0;overflow-y:auto;align-content:start;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
#bo-rank-dialog .bo-rank-list{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;margin:0}
#bo-rank-dialog .dialog-actions{flex:none;margin:0}
#bo-rank-dialog .dialog-actions .primary-button{width:100%}
#help-dialog .help-info{flex:1 1 auto;min-height:0;overflow-y:auto;align-content:start}
#help-dialog .help-controls{flex:none;max-height:38%;overflow-y:auto}
@media (max-width:759px){.page-dialog .page-nav{gap:4px}.page-dialog .page-nav .small-button{padding-inline:10px;font-size:.74rem}.page-dialog .dialog-heading{gap:8px}.page-dialog .dialog-heading .section-caption{display:none}}
@media (max-height:520px){.page-dialog{padding-top:calc(var(--sat) + 6px);padding-bottom:calc(var(--sab) + 6px);gap:6px}.page-dialog .dialog-heading .section-caption{display:none}.page-dialog .page-nav .small-button{min-height:38px}.page-dialog .dialog-heading h2{font-size:1.05rem}#bo-shop-dialog .bo-balance{display:none}#bo-shop-dialog .setting-footnote{display:none}}
@media (min-width:760px) and (max-height:520px){#help-dialog .help-info{grid-template-columns:1fr 1fr 1fr}}
html body[data-view=blockout]:not(.playing) .bo-world-head{flex-wrap:nowrap;white-space:nowrap;align-items:center;gap:8px}html body[data-view=blockout]:not(.playing) .bo-world-head strong{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:clamp(.85rem,3.6vw,1.05rem)}html body[data-view=blockout]:not(.playing) .bo-world-head small{flex:none;font-size:.58rem;letter-spacing:.14em}

/* Préparation de partie — téléphone en paysage : participants sur deux colonnes, tout tient sans défilement */
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #match-panel{display:flex;flex-direction:column;gap:5px;overflow:hidden}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-roster-heading{padding:2px 4px;min-height:0;margin:0}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-roster-heading .section-caption{display:none}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-roster-heading h3{font-size:.85rem;margin:0}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #roster-size-action{min-height:34px;padding-block:0;font-size:.7rem}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #roster-summary{grid-template-columns:1fr 1fr;gap:6px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-card{padding:6px 8px;gap:4px;min-width:0}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-id small,html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config canvas{display:none}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config{display:grid;grid-template-columns:1fr 1fr;gap:4px 6px;padding:0}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-fields{display:contents}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-palette{grid-column:1/-1}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config label{min-width:0;font-size:.55rem;gap:1px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config select,html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config button{min-height:34px;font-size:.72rem;padding-block:0;width:100%}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer{display:flex;flex-wrap:nowrap;align-items:end;gap:6px;padding:4px 0 0;margin-top:0}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer .select-label{flex:1 1 0;min-width:0}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer #start-button{flex:1.4 1 0;min-height:44px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer .start-note,html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer .online-shortcut{display:none}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #setup-back{position:static;align-self:flex-start;min-height:34px}
}
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #match-panel{overflow:hidden}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-back{position:static;align-self:flex-start;min-height:34px;margin-top:2px}
}
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .section-caption{display:none}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .setup-options{gap:6px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #match-panel{gap:4px}
}
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .setup-options{grid-template-rows:none;grid-auto-rows:auto;align-content:start;flex:0 1 auto;gap:5px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .setup-choice{padding:6px 8px;gap:3px;min-height:0}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .segmented button{min-height:36px;padding-block:2px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #ruleset-description{display:none}
}
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #match-panel .mode-description{display:none!important}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .segmented button{min-height:32px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .arena-options button{min-height:56px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step #rule-chips+*,html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .segmented:last-child button{font-size:.62rem;letter-spacing:0}
}
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step{min-height:0;padding-bottom:0;flex:0 0 auto;gap:4px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step #setup-next{min-height:38px;padding-block:0}
}
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #setup-roster-step{min-height:0;padding-bottom:0;flex:0 0 auto;gap:4px}
 html body.mobile[data-view=match][data-setup-step]:not(.playing) #setup-back{min-height:30px;padding-block:0;margin-top:0}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .setup-choice{padding:4px 8px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .arena-options button{min-height:50px}
 html body.mobile[data-view=match][data-setup-step]:not(.playing) #match-panel{padding-block:6px}
}
@media (orientation:landscape) and (max-height:380px){
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .arena-options button{min-height:42px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .segmented button{min-height:30px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config select,html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config button{min-height:30px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer #start-button{min-height:40px}
}
@media (orientation:landscape) and (max-height:380px){html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .arena-options button{min-height:36px}html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step #setup-next{min-height:34px}}

/* Réglages : onglets lisibles sur téléphone (deux rangées en portrait), boutons segmentés sans texte coupé */
@media (max-width:520px) and (orientation:portrait){
 body.mobile .settings-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 body.mobile .settings-tabs button{min-height:40px;padding-inline:4px;font-size:.72rem;letter-spacing:.06em}
}
#settings-view .segmented button{min-width:0;padding-inline:6px;font-size:clamp(.62rem,2.8vw,.82rem);letter-spacing:.04em;white-space:normal;line-height:1.15;overflow-wrap:anywhere}

/* Boutique — téléphone : filtres sur une seule ligne, grille plus dense en paysage */
@media (max-width:520px) and (orientation:portrait){
 body.mobile #shop-filters{flex-wrap:nowrap;overflow-x:auto;gap:5px;scrollbar-width:none}
 body.mobile #shop-filters>*{flex:1 1 0;min-width:0;min-height:34px;padding-inline:3px;font-size:.6rem;letter-spacing:0;white-space:nowrap}
}
@media (orientation:landscape) and (max-height:520px){
 body.mobile .shop-view .shop-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 body.mobile .shop-view #shop-filters>*{min-height:32px;padding-block:0;font-size:.66rem}
 body.mobile .shop-view .shop-card{padding:6px 6px;gap:3px}
 body.mobile .shop-view .shop-thumb{width:auto;height:40px;max-width:100%}
 body.mobile .shop-view .shop-actions .small-button{min-height:32px;padding-block:0}
 body.mobile .shop-view .shop-fav{width:30px;height:30px}
}
@media (orientation:landscape) and (max-height:520px){
 body.mobile .shop-view .shop-nav .small-button,body.mobile .shop-view #shop-back-button,body.mobile .shop-view #shop-menu-button{min-height:34px;height:34px;padding-block:0}
 body.mobile .shop-view #shop-tabs>*{min-height:32px;padding-block:0;font-size:.7rem}
 body.mobile .shop-view #shop-filters>*{min-height:28px}
 body.mobile .shop-view .shop-note{display:none}
}
#settings-view .choice-chips button{min-width:0;padding-inline:4px;letter-spacing:0;font-size:clamp(.6rem,2.6vw,.78rem);overflow-wrap:anywhere;hyphens:auto}
@media (max-width:520px){html body[data-view=blockout]:not(.playing) .bo-world-head small{display:none}}
body.mobile #roster-summary select,body.mobile .setup-player-config select{min-height:38px}
body.mobile .arena-options button{min-width:0;letter-spacing:0;font-size:clamp(.56rem,2.4vw,.72rem);overflow-wrap:anywhere}
@media (orientation:portrait){html body.mobile[data-view=match] #roster-summary select,html body.mobile[data-view=match] #roster-summary button{min-height:38px}}

/* ===== v2.49 — Blockout : capacités en colonne à côté du terrain (à gauche pour un droitier, à droite pour un gaucher) ===== */
html body .bo-capacity-actions:not([hidden]){position:fixed;z-index:4;top:calc(50% + 24px);bottom:auto;left:calc(var(--sal) + 8px);right:auto;transform:translateY(-50%);display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:10px;width:clamp(62px,8vw,108px);max-width:none}
html body[data-hand=left] .bo-capacity-actions:not([hidden]){left:auto;right:calc(var(--sar) + 8px)}
html body .bo-capacity-action{display:grid;justify-items:center;align-content:center;gap:3px;min-width:0;min-height:78px;padding:8px 4px;border-radius:14px;text-align:center}
html body .bo-capacity-action span{font-size:1.25rem;line-height:1}
html body .bo-capacity-action strong{font-size:.62rem;line-height:1.15;overflow-wrap:anywhere}
html body .bo-capacity-action small{margin:0;font-size:.6rem;white-space:nowrap}
html body.touch .bo-capacity-action kbd{display:none}
html body:not(.touch) .bo-capacity-action kbd{position:static;margin-top:2px;font-size:.6rem;opacity:.7}
@media (orientation:landscape) and (max-height:520px){html body .bo-capacity-actions:not([hidden]){top:calc(50% + 20px);gap:6px;width:clamp(56px,10vh,84px)}html body .bo-capacity-action{min-height:0;padding:5px 3px;gap:1px}html body .bo-capacity-action span{font-size:1rem}}

/* Long menus use native touch scrolling inside their visible panels. */
#settings-view .settings-card.active,
#roster-summary,#online-entry,#match-panel .setup-stage,#ach-grid,
#bo-rank-list,#help-controls,#help-dialog .help-info,
#achievement-detail-reward-list,
body.mobile #workshop-panel .workshop-pane:not([hidden]){
 overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
 scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
body:not(.playing) #settings-view .settings-grid{min-height:0}
body.mobile[data-view=workshop] #workshop-panel{min-height:0}
body.mobile[data-view=workshop] #workshop-panel .workshop-pane:not([hidden]){min-height:0}
@media (orientation:portrait) and (max-height:760px){html body.mobile[data-view=workshop][data-ws-tab=themes]:not(.playing) .arena-section{height:min(20vh,132px);height:min(20dvh,132px)}}
@media (max-height:520px) and (min-width:560px){
 #bo-rank-dialog[open]{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto auto auto auto 1fr auto;column-gap:16px;row-gap:6px}
 #bo-rank-dialog>.dialog-heading{grid-column:1/-1;grid-row:1}
 #bo-rank-dialog>.bo-rank-me{grid-column:1;grid-row:2}
 #bo-rank-dialog>.nickname-label{grid-column:1;grid-row:3}
 #bo-rank-dialog>.setting-row{grid-column:1;grid-row:4}
 #bo-rank-dialog>#bo-rank-status{grid-column:1;grid-row:5;align-self:start;margin:0}
 #bo-rank-dialog>.dialog-actions{grid-column:1;grid-row:6}
 #bo-rank-dialog>.bo-rank-list{grid-column:2;grid-row:2/6;contain:size;min-height:0;align-self:stretch}
 #bo-rank-dialog>.menu-pager{grid-column:2;grid-row:6;padding:0}
}
@media(max-width:700px) and (max-height:700px){.bo-loadout-persist{display:none}}
body:not(.mobile):not(.playing) #workshop-panel{overflow:hidden}
body:not(.mobile):not(.playing) #workshop-panel>.workshop-pane:not([hidden]){flex:1 1 0;min-height:0}

/* Blockout map: one world per screen, the levels snake across the free space (no scroll). */
html body[data-view=blockout] .bo-map{overflow-y:auto!important;overflow-x:hidden;display:block;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
html body[data-view=blockout] .bo-map::-webkit-scrollbar{display:none}
html body[data-view=blockout] .bo-map .bo-world{height:var(--world-h,100%);min-height:0;display:flex;flex-direction:column;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
html body[data-view=blockout] .bo-world-head{position:static;flex:none;padding:6px 14px}
.bo-world-head strong{font-size:clamp(.85rem,3.4vw,1.05rem)}
html body[data-view=blockout] .bo-map .bo-track{flex:1 1 0;min-height:0;height:auto;--node:56px}
.bo-track .bo-road-base{stroke-width:calc(var(--node) * .42)}
.bo-track .bo-road-done{stroke-width:calc(var(--node) * .2);stroke-dasharray:1 14}
.bo-track .bo-node{width:var(--node);height:var(--node);font-size:calc(var(--node) * .34);border-width:calc(var(--node) * .05 + 1px)}
.bo-track .bo-node.boss{width:calc(var(--node) * 1.18);height:calc(var(--node) * 1.18);font-size:calc(var(--node) * .5)}
.bo-track .bo-node.hard::after{width:calc(var(--node) * .34);height:calc(var(--node) * .34);font-size:calc(var(--node) * .24)}
.bo-track .bo-node-stars{margin-top:2px;font-size:calc(var(--node) * .24)}
.bo-track .bo-boss-mark{width:calc(var(--node) * .55);height:calc(var(--node) * .42)}
.bo-track .bo-chest{top:calc(var(--node) * -.12);right:calc(var(--node) * -.2);width:calc(var(--node) * .36);height:calc(var(--node) * .3)}
.bo-track .bo-you{width:calc(var(--node) * .3);height:calc(var(--node) * .3);margin-bottom:calc(var(--node) * .1)}
.bo-world-picker{gap:4px}
.bo-world-step{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--app-surface);color:var(--app-text);font:800 1.2rem var(--font-display);line-height:1}
.bo-world-step:disabled{opacity:.3}

/* Home: Jouer, Blockout, then three icon tiles; settings live in the corner gear. */
.home-gear{position:absolute;top:2px;right:0;z-index:6;width:44px;height:44px;display:grid;place-items:center}
.home-gear svg{width:24px;height:24px}
body:not(.mobile) .home-gear{top:6px;right:4px}
.home .player-chip,.home .home-version{display:none}
.home .home-status{justify-content:flex-start;padding-right:52px}
.home .play-tile .tile-text small,.home .play-tile .tile-text em#home-blockout-level~*,.home .play-tile:not(.blockout-tile) .tile-text em{display:none}
.home-daily-grid .quick-tile .tile-text small{display:none}
.home-daily-grid .quick-tile{flex-direction:column;justify-content:center}
.home-daily-grid .quick-tile .tile-icon{width:44px;height:44px;border-radius:14px}
.home-daily-grid .quick-tile .tile-icon svg{width:24px;height:24px}
body.mobile:not(.playing) .home-daily-grid .quick-tile{min-height:78px}
body.mobile:not(.playing) .home-daily-grid .quick-tile .tile-icon{width:38px;height:38px}
body.mobile:not(.playing) .home-daily-grid .quick-tile .tile-icon svg{width:22px;height:22px}
body:not(.mobile) .home-daily-grid .quick-tile{min-height:112px}
body.mobile .home-status{display:flex}
@media (orientation:landscape){body.mobile .home-status{display:flex}}
body:not(.mobile) .home-daily-grid .quick-tile{min-height:clamp(112px,20vh,168px)}
body:not(.mobile) .home-daily-grid .quick-tile .tile-icon{width:clamp(44px,7vh,64px);height:clamp(44px,7vh,64px)}
body:not(.mobile) .home-daily-grid .quick-tile .tile-icon svg{width:55%;height:55%}
body:not(.mobile) .home .play-tile{min-height:clamp(96px,17vh,140px)}
body:not(.mobile) .home .play-tile .tile-text strong{font-size:clamp(1.5rem,4.4vh,2.3rem)}
body:not(.mobile) .home-daily-grid .quick-tile .tile-text strong{font-size:clamp(.78rem,1.9vh,1rem)}

/* Shop on a phone: icon-only category tabs that always fit, paged grid. */
body.mobile .shop-view .shop-sidebar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;overflow:hidden}
body.mobile .shop-view .shop-sidebar button[data-shop-tab]{justify-content:center;min-height:42px;padding:0 2px}
body.mobile .shop-view .shop-sidebar button[data-shop-tab] span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.mobile .shop-view .shop-sidebar button[data-shop-tab] span:last-child{margin:0;font-size:1.15rem}
/* Blockout level card on a phone: icon tiles instead of wide rows. */
@media(max-width:700px){
 .bo-loadout-panel .bo-boosters{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .bo-loadout-panel .bo-booster{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;justify-items:center;row-gap:3px;min-height:0;padding:6px 3px;text-align:center}
 .bo-loadout-panel .bo-booster .bo-booster-icon{grid-column:1;grid-row:1;width:34px;height:34px}
 .bo-loadout-panel .bo-booster strong{grid-column:1;grid-row:2;align-self:start;font-size:.62rem}
 .bo-loadout-panel .bo-booster small{display:none}
 .bo-loadout-panel .bo-booster .bo-pick-mark{position:absolute;top:4px;right:4px;grid-column:auto;grid-row:auto;width:16px;height:16px}
}
.online-dialog #online-entry:not([hidden]){overflow:hidden}
@media(max-height:500px) and (min-width:560px){.bo-loadout-panel .bo-boosters{grid-template-columns:repeat(auto-fit,minmax(54px,1fr));gap:4px}.bo-loadout-panel .bo-booster{padding:4px 2px}.bo-loadout-panel .bo-booster .bo-booster-icon{width:30px;height:30px;font-size:1rem}.bo-loadout-heading{min-height:0;margin-bottom:4px}}
.wallet-add{min-width:32px;min-height:32px;width:32px;height:32px}

/* Défis quotidiens: less text, phases as three chips. */
.challenge-difficulty,.challenge-status:empty{display:none}
.challenge-phase-card{padding:8px}
.challenge-phase-card ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.challenge-phase-card li{grid-template-columns:minmax(0,1fr);gap:0;text-align:center;padding:6px 4px;border:1px solid var(--app-border);border-radius:10px}
.challenge-phase-card li b{color:var(--app-text)}
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config{grid-template-columns:repeat(3,minmax(0,1fr))}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-palette{grid-column:auto}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-card{gap:2px;padding:5px 7px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config select{min-height:32px;font-size:.66rem;padding-inline:5px}
}
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-palette{grid-column:3;grid-row:1}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config label:not(.setup-player-palette label){grid-row:1}
}
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer .select-label{font-size:0;gap:0}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer .select-label select{font-size:.72rem}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #match-panel{gap:3px}
}
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:6px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-id strong{display:none}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-id{padding-bottom:4px}
}
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config select{padding:0 18px 0 6px;background-position:right 5px center;text-overflow:ellipsis}
}
body:not(.mobile) .home .play-tile .tile-text strong{font-size:clamp(1.4rem,min(4.4vh,3.2vw),2.3rem)}

/* Less prose on every screen: icons and labels carry the meaning. */
.setup-entry small{display:none}
body.mobile #settings-view .settings-card:not(#parental-card) :is(.muted,.setting-footnote:not(#app-version)){display:none}
body.mobile #settings-view .settings-card:not(#parental-card)>p:not(:first-child){display:none}
@media (orientation:portrait){
 body.mobile.playing:not(.phone-hud) .scoreboard{gap:10px;padding:0 12px}
 body.mobile.playing:not(.phone-hud) .scoreboard .score-center{letter-spacing:.05em}
}


#setup-roster-step:not([hidden]){display:flex;flex-direction:column}
#setup-roster-step>#roster-summary{flex:1 1 auto;min-height:0}
#setup-roster-step>:is(.setup-roster-heading,.setup-footer,.menu-pager){flex:none}

/* Shop: one continuous scroll, a titled section per category; the side tabs jump to their section. */
.shop-view .shop-grid{display:block;position:relative;overflow-y:auto;overscroll-behavior:contain;padding:2px 6px 24px 2px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.shop-section+.shop-section{margin-top:26px}
.shop-section-title{margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line);font:800 clamp(.95rem,1.4vw,1.2rem) var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.shop-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
@media (max-width:1180px){.shop-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.shop-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (orientation:landscape) and (max-height:520px){body.mobile .shop-view .shop-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
body:not(.mobile) .shop-view .shop-card{padding:16px 14px;gap:8px}
body:not(.mobile) .shop-view .shop-thumb{width:clamp(76px,12vh,116px);height:clamp(76px,12vh,116px)}
body:not(.mobile) .shop-view .shop-thumb.tall{width:clamp(56px,8vh,80px);height:clamp(84px,12vh,120px)}
body:not(.mobile) .shop-view .shop-thumb.wide{width:100%;max-width:220px;height:auto}
body:not(.mobile) .shop-view .shop-card strong{font-size:.95rem}
body.mobile .shop-view .shop-sidebar button[data-shop-tab][aria-pressed=true]{transform:none}

body:not(.mobile) .shop-view .shop-swatch{width:84px;height:84px}
body:not(.mobile) .shop-view .shop-theme{height:clamp(64px,10vh,96px)}

@media (max-height:440px){html body[data-view=blockout] .bo-world-head{padding:2px 12px}html body[data-view=blockout] .bo-world-head small{display:none}}
html body[data-view=blockout] .bo-map{position:relative}

/* Atelier: phones page through the panes, computers scroll them in larger grids (4 columns, 3 on small monitors). */
body.mobile #workshop-panel .workshop-pane{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
body:not(.mobile) #workshop-panel .workshop-pane{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-right:6px}
body:not(.mobile)[data-view=workshop]:not(.playing) .play-layout{grid-template-columns:minmax(500px,1.2fr) minmax(0,.8fr)}
body:not(.mobile) #workshop-panel :is(.skin-grid,.ball-grid){grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
body:not(.mobile) #workshop-panel .theme-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
body:not(.mobile) #workshop-panel :is(.skin-button,.ball-button){min-height:112px}
@media (max-width:1180px){
 body:not(.mobile) #workshop-panel :is(.skin-grid,.ball-grid,.theme-grid){grid-template-columns:repeat(3,minmax(0,1fr))}
 body:not(.mobile)[data-view=workshop]:not(.playing) .play-layout{grid-template-columns:minmax(420px,1.1fr) minmax(0,.9fr)}
}

/* Blockout menus: world colours, thicker full-width top bar, big two-column shop (abilities left, start bonuses right). */
body[data-view=blockout]:not(.playing){--boc:var(--bo-glow,var(--app-accent));--bos:var(--bo-sky,var(--app-page))}
html body[data-view=blockout]:not(.playing) .header{height:auto;min-height:calc(64px + var(--sat));padding:calc(var(--sat) + 8px) clamp(10px,2vw,28px) 8px;border-bottom:2px solid color-mix(in srgb,var(--boc) 60%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--boc) 26%,var(--bos)),var(--bos));transition:background .4s}
html body[data-view=blockout]:not(.playing) .header .bo-header-nav:not([hidden]){display:flex!important;justify-content:stretch;align-items:stretch;gap:clamp(6px,1vw,14px);width:100%;padding:0}
html body[data-view=blockout]:not(.playing) .bo-exit{position:static;flex:none;width:clamp(52px,5vw,72px);height:auto;min-height:52px;border-radius:16px;border:2px solid color-mix(in srgb,var(--boc) 55%,var(--line));background:color-mix(in srgb,var(--bos) 70%,#000);font-size:1.5rem}
html body[data-view=blockout]:not(.playing) .bo-nav-item{flex:1 1 0;max-width:none;min-width:0;min-height:52px;padding:0 10px;border:2px solid color-mix(in srgb,var(--boc) 40%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--bos) 70%,#000);font-size:clamp(.78rem,1.5vw,1.05rem);letter-spacing:.1em;white-space:nowrap}
html body[data-view=blockout]:not(.playing) .bo-nav-item:hover,html body[data-view=blockout]:not(.playing) .bo-nav-item.active{border-color:var(--boc);background:color-mix(in srgb,var(--boc) 34%,var(--bos));box-shadow:0 0 22px color-mix(in srgb,var(--boc) 55%,transparent)}
html body.mobile[data-view=blockout]:not(.playing) .header{min-height:calc(54px + var(--sat));padding:calc(var(--sat) + 6px) max(8px,var(--sal)) 6px max(8px,var(--sal))}
html body.mobile[data-view=blockout]:not(.playing) .bo-nav-item,html body.mobile[data-view=blockout]:not(.playing) .bo-exit{min-height:46px;border-radius:14px;font-size:clamp(.66rem,3vw,.9rem);letter-spacing:.04em}
html body.mobile[data-view=blockout]:not(.playing) .bo-exit{width:50px}
@media (max-height:440px){html body.mobile[data-view=blockout]:not(.playing) .header{min-height:calc(46px + var(--sat));padding-block:calc(var(--sat) + 3px) 3px}html body.mobile[data-view=blockout]:not(.playing) .bo-nav-item,html body.mobile[data-view=blockout]:not(.playing) .bo-exit{min-height:38px}}
body[data-view=blockout]:not(.playing) #bo-map{background:linear-gradient(180deg,color-mix(in srgb,var(--boc) 14%,var(--bos)),var(--bos))}
:is(#bo-shop-dialog,#bo-rank-dialog,#blockout-dialog){--boc:var(--bo-glow,var(--app-accent));--bos:var(--bo-sky,var(--app-page));border-color:color-mix(in srgb,var(--boc) 55%,var(--line));background:radial-gradient(120% 70% at 50% 0,color-mix(in srgb,var(--boc) 24%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--bos) 82%,var(--app-page)),var(--app-page))}
:is(#bo-shop-dialog,#bo-rank-dialog,#blockout-dialog) .section-caption,:is(#bo-shop-dialog,#bo-rank-dialog,#blockout-dialog) .bo-shop-section{color:var(--boc)}

#bo-shop-dialog.page-dialog>*{max-width:none}
#bo-shop-dialog .bo-shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,28px);align-content:stretch;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.bo-shop-col{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}
.bo-shop-col>.bo-shop-section{margin:0;font-size:clamp(.9rem,1.5vw,1.25rem);padding-bottom:6px;border-bottom:2px solid color-mix(in srgb,var(--boc,var(--app-accent)) 50%,transparent)}
.bo-shop-col>.bo-shop-intro{margin:0;font-size:clamp(.72rem,1vw,.9rem)}
.bo-shop-list{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(84px,1fr);gap:clamp(8px,1.4vh,14px)}
#bo-shop-dialog .bo-shop-item{grid-template-columns:clamp(60px,10vh,104px) minmax(0,1fr) auto;gap:clamp(12px,1.6vw,22px);padding:clamp(10px,1.6vh,18px) clamp(14px,1.8vw,26px);border-width:2px;border-radius:22px}
#bo-shop-dialog .bo-shop-item>.bo-booster-icon{width:clamp(56px,10vh,100px);height:clamp(56px,10vh,100px);border-radius:20px;font-size:clamp(1.8rem,5vh,3.2rem)}
#bo-shop-dialog .bo-shop-item strong{font-size:clamp(1rem,2.2vh,1.4rem)}
#bo-shop-dialog .bo-shop-item small{font-size:clamp(.78rem,1.6vh,1rem);line-height:1.3}
#bo-shop-dialog .bo-shop-item em{font-size:clamp(.72rem,1.4vh,.9rem)}
#bo-shop-dialog .bo-shop-item .small-button{min-height:clamp(46px,7vh,68px);min-width:clamp(96px,10vw,150px);padding:0 16px;font-size:clamp(.95rem,2vh,1.3rem);border-radius:16px}
@media (max-width:759px),(max-height:520px){
 #bo-shop-dialog .bo-shop-grid{gap:8px;align-content:start}
 .bo-shop-list{grid-auto-rows:auto;gap:8px}
 .bo-shop-col>.bo-shop-intro{display:none}
 #bo-shop-dialog .bo-shop-item{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:6px;padding:10px 8px;border-radius:16px}
 #bo-shop-dialog .bo-shop-item>.bo-booster-icon{width:44px;height:44px;font-size:1.5rem;border-radius:14px}
 #bo-shop-dialog .bo-shop-item strong{font-size:.8rem}
 #bo-shop-dialog .bo-shop-item small{font-size:.66rem}
 #bo-shop-dialog .bo-shop-item em{font-size:.62rem}
 #bo-shop-dialog .bo-shop-item .small-button{width:100%;min-width:0;min-height:40px;padding:0 6px;font-size:.85rem}
}
html body.mobile[data-view=blockout]:not(.playing) .header .bo-header-nav:not([hidden]){padding:0!important;justify-content:stretch!important;gap:5px!important}
html body.mobile[data-view=blockout]:not(.playing) .bo-nav-item{padding:0 2px;font-size:clamp(.6rem,2.9vw,.85rem);letter-spacing:0}
html body.mobile[data-view=blockout]:not(.playing) .bo-exit{width:44px;flex:none;left:auto}

/* ---- Pixel icons (js/icons.js): sized by the surrounding font-size, tinted by the text colour ---- */
.pix{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.14em;line-height:0}
.pix svg{display:block;width:100%;height:100%}
.shop-fav .pix{width:1.15em;height:1.15em}
.dedicated-head-spacer{display:block}
#bo-hud-lives .pix{width:1em;height:1em;margin-right:.14em}
.bo-node-stars .pix,.bo-level-best .pix{width:1em;height:1em}
.wallet-chip .pix{width:1em;height:1em}

/* ---- Shop: category column with the supervised note under « Diamants » ---- */
.shop-side{display:flex;flex-direction:column;gap:8px;min-height:0}
.shop-side .shop-sidebar{flex:1 1 auto;min-height:0}
html body .shop-view .shop-side .shop-note{display:block;flex:none;margin:0;color:var(--app-muted);font:500 .62rem/1.35 var(--font-ui)}
html body .shop-view .shop-side .shop-note .text-button{min-height:0;padding:0;font:inherit;text-decoration:underline}
html body .shop-view .shop-sidebar button[data-shop-tab]{flex:1 1 0;min-height:52px;max-height:96px;padding:0 18px}
html body .shop-view .shop-sidebar button[data-shop-tab] .pix{width:1.7em;height:1.7em;font-size:1rem}
@media (max-width:700px) and (orientation:portrait){
 html body.mobile .shop-view .shop-body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
 html body.mobile .shop-view .shop-side{display:contents}
 html body.mobile .shop-view .shop-sidebar{grid-row:1}
 html body.mobile .shop-view .shop-main{grid-row:2}
 html body.mobile .shop-view .shop-side .shop-note{grid-row:3;text-align:center}
 html body.mobile .shop-view .shop-sidebar button[data-shop-tab]{max-height:none;min-height:42px}
 html body.mobile .shop-view .shop-sidebar button[data-shop-tab] .pix{width:1.4rem;height:1.4rem}
}
/* Phone held sideways: same two-column layout as the computer */
@media (orientation:landscape) and (max-height:520px){
 html body.mobile .shop-view .shop-body{grid-template-columns:clamp(118px,19vw,150px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:10px}
 html body.mobile .shop-view .shop-side{display:flex;gap:4px}
 html body.mobile .shop-view .shop-sidebar{display:flex;flex-direction:column;grid-auto-flow:row;gap:4px;overflow:visible}
 html body.mobile .shop-view .shop-sidebar button[data-shop-tab]{justify-content:space-between;flex:1 1 0;min-height:0;max-height:none;padding:0 8px;border-radius:10px;font-size:.62rem;letter-spacing:.02em}
 html body.mobile .shop-view .shop-sidebar button[data-shop-tab] span:first-child{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:nowrap}
 html body.mobile .shop-view .shop-sidebar button[data-shop-tab] .pix{width:1.5em;height:1.5em;font-size:.8rem;margin:0}
 html body.mobile .shop-view .shop-sidebar button[data-shop-tab][aria-pressed=true]{transform:none}
 html body.mobile .shop-view .shop-side .shop-note{font-size:.5rem;line-height:1.25}
 html body.mobile .shop-view .shop-cards{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
}

/* Jouer: the top-left Retour is the only back button (it steps back between the three steps) */
html body #setup-back{display:none!important}

/* Blockout map: the world fills the whole screen (no page theme, no dead band). Header, picker and gems float over the world's own colours. */
body[data-view=blockout]:not(.playing)::before{background:linear-gradient(180deg,var(--bo-sky,#0b0c22),var(--bo-ground,#04050d))}
body[data-view=blockout]:not(.playing)::after{display:none}
html body[data-view=blockout][data-view]:not(.playing) .header{position:fixed;top:0;left:0;right:0;z-index:7;width:auto}
html body[data-view=blockout][data-view]:not(.playing) #blockout-view{position:fixed;inset:0;z-index:5;display:block;width:auto;max-width:none;margin:0;padding:0;gap:0}
html body[data-view=blockout][data-view]:not(.playing) #bo-map{position:absolute;top:var(--bo-head-h,64px);right:0;bottom:0;left:0;width:auto;height:auto;border:0;border-radius:0;background:none}
html body[data-view=blockout][data-view]:not(.playing) .bo-map .bo-world{box-sizing:border-box;padding:0 var(--sar) var(--sab) var(--sal)}
html body[data-view=blockout][data-view]:not(.playing) .bo-world-picker{position:absolute;z-index:4;top:calc(var(--bo-head-h,64px) + 5px);left:max(8px,var(--sal));right:auto;margin:0;padding:2px 6px;border-radius:12px;background:#04050d99}
html body[data-view=blockout][data-view]:not(.playing) .bo-world-picker select{min-height:32px;max-width:120px}
html body[data-view=blockout][data-view]:not(.playing) .bo-world-step{width:32px;height:32px}
html body[data-view=blockout][data-view]:not(.playing) .bo-bar{position:absolute;z-index:4;top:calc(var(--bo-head-h,64px) + 5px);right:max(8px,var(--sar));left:auto;margin:0;pointer-events:none}
html body[data-view=blockout][data-view]:not(.playing) .bo-wallet{padding:5px 12px;background:#04050d99}
html body[data-view=blockout][data-view]:not(.playing) .bo-world-head{min-height:44px;box-sizing:border-box;padding:0 calc(max(14px,var(--sar)) + 122px) 0 calc(max(14px,var(--sal)) + 222px);align-items:center;background:none}
@media (max-width:600px) and (orientation:portrait){html body[data-view=blockout][data-view]:not(.playing) .bo-world-head{padding:50px max(14px,var(--sar)) 0 max(14px,var(--sal));min-height:0;align-items:flex-start;justify-content:space-between}html body[data-view=blockout][data-view]:not(.playing) .bo-world-head small{display:inline}}

/* Blockout map: the world picker is a single pill in the world's colours; the arrows are bare glyphs. */
html body[data-view=blockout][data-view]:not(.playing) .bo-world-picker{padding:0;border:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;gap:2px}
html body[data-view=blockout][data-view]:not(.playing) .bo-world-picker select{border:1px solid color-mix(in srgb,var(--bo-glow,var(--app-accent)) 65%,transparent);border-radius:999px;background-color:color-mix(in srgb,var(--bo-glow,var(--app-accent)) 22%,var(--bo-sky,#0b0c22));color:#fff;box-shadow:0 0 12px color-mix(in srgb,var(--bo-glow,var(--app-accent)) 35%,transparent)}
html body[data-view=blockout][data-view]:not(.playing) .bo-world-step{width:30px;border:0;border-radius:0;background:none;box-shadow:none;color:#fff;font-size:1.7rem;text-shadow:0 0 8px color-mix(in srgb,var(--bo-glow,var(--app-accent)) 70%,transparent)}
html body[data-view=blockout][data-view]:not(.playing) .bo-world-step:disabled{opacity:.25}

/* Blockout map: portrait centres the picker under the middle tab; wide screens centre a big world name with « Monde n » under it. */
@media (max-width:600px) and (orientation:portrait){html body[data-view=blockout][data-view]:not(.playing) .bo-world-picker{left:50%;transform:translateX(-50%)}}
@media (min-width:601px),(orientation:landscape){
html body[data-view=blockout][data-view]:not(.playing) .bo-world-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;justify-items:center;align-content:center;row-gap:0;min-height:clamp(46px,11vh,64px);padding:0 calc(max(14px,var(--sar)) + 130px) 0 calc(max(14px,var(--sal)) + 222px);text-align:center}
html body[data-view=blockout][data-view]:not(.playing) .bo-world-head strong{grid-row:1;font-size:clamp(1.15rem,4.2vh,1.9rem);line-height:1.1;max-width:100%}
html body[data-view=blockout][data-view]:not(.playing) .bo-world-head small{grid-row:2;display:block;font-size:clamp(.55rem,1.7vh,.72rem);letter-spacing:.2em}
html body[data-view=blockout][data-view]:not(.playing) .bo-world-head>span{position:absolute;right:calc(max(14px,var(--sar)) + 122px);top:50%;transform:translateY(-50%);white-space:nowrap}
}

/* --- Direction artistique néo (v2.54, demande du propriétaire 2026-09-28) ---
   Ultra lisse : aucun balayage d’écran, aucun quadrillage en perspective, aucun motif de fond ; des aplats de couleurs vives
   et une typographie Helvetica grasse, serrée. Les thèmes animés viendront par le canvas (themefx.js), pas par des motifs CSS. */
html::after,body::after{display:none!important}
html body:not([data-view=blockout])::before{background:var(--app-page)}
*,*::before,*::after{text-shadow:none!important}
body{font-weight:500;letter-spacing:0}
h1,h2,h3{font-weight:800;letter-spacing:-.025em}
.primary-button,.small-button,.menu-tile,.nav-item,.eyebrow,.section-caption,.micro-badge{letter-spacing:.01em}
.primary-button{background:var(--app-accent);box-shadow:none}

.logo{font-style:italic;font-weight:900;letter-spacing:-.04em}
.logo-pong{color:var(--app-accent);letter-spacing:-.045em}
.logo-year{letter-spacing:-.02em;-webkit-text-stroke:2px var(--app-accent2-ink);filter:none}
.menu-tile.primary{background:var(--app-accent);box-shadow:none}
.menu-tile.primary strong{font-style:italic;font-weight:900;letter-spacing:-.02em}
.menu-tile.primary.blockout-tile{background:#ff5a3d;color:#1d0f04;box-shadow:none}
.play-tile .play-orbit{background:color-mix(in srgb,currentColor 12%,transparent);border:0;box-shadow:none}
.play-tile .play-orbit .tile-icon{background:none;border:0}
.setup-entry{background:var(--app-accent);border-color:transparent;box-shadow:none}
.setup-entry strong{font-style:italic;letter-spacing:-.01em}
body[data-view=match]:not(.playing) #match-panel{background:var(--app-panel);box-shadow:none}
body[data-view=match]:not(.playing) #match-panel::before{background:var(--app-accent)}
.serve-overlay{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.serve-overlay span{border:0;background:var(--app-accent);color:var(--app-on-accent);letter-spacing:.08em}
.serve-overlay strong{font-style:italic;letter-spacing:-.04em}
body.playing .scoreboard,body.playing #pause-button{-webkit-backdrop-filter:none;backdrop-filter:none}
/* Animated tones (Épique / Légendaire): page, panels and accents turn together through twelve nearby hue stops of equal
   luminance (app.js sets --tone-<key>-<n>). Nearby stops keep contrast during CSS interpolation, not just at keyframes.
   the animation pauses during a match so gameplay never pays for the restyle. */
@property --app-page{syntax:'<color>';inherits:true;initial-value:#ffffff}
@property --app-surface{syntax:'<color>';inherits:true;initial-value:#ffffff}
@property --app-panel{syntax:'<color>';inherits:true;initial-value:#ffffff}
@property --app-accent{syntax:'<color>';inherits:true;initial-value:#ffffff}
@property --app-accent2{syntax:'<color>';inherits:true;initial-value:#ffffff}
@property --app-motif2{syntax:'<color>';inherits:true;initial-value:#ffffff}
@keyframes neo-tones{0%{--app-page:var(--tone-page-0);--app-surface:var(--tone-surface-0);--app-panel:var(--tone-panel-0);--app-accent:var(--tone-accent-0);--app-accent2:var(--tone-accent2-0);--app-motif2:var(--tone-motif2-0);}8.3333%{--app-page:var(--tone-page-1);--app-surface:var(--tone-surface-1);--app-panel:var(--tone-panel-1);--app-accent:var(--tone-accent-1);--app-accent2:var(--tone-accent2-1);--app-motif2:var(--tone-motif2-1);}16.6667%{--app-page:var(--tone-page-2);--app-surface:var(--tone-surface-2);--app-panel:var(--tone-panel-2);--app-accent:var(--tone-accent-2);--app-accent2:var(--tone-accent2-2);--app-motif2:var(--tone-motif2-2);}25%{--app-page:var(--tone-page-3);--app-surface:var(--tone-surface-3);--app-panel:var(--tone-panel-3);--app-accent:var(--tone-accent-3);--app-accent2:var(--tone-accent2-3);--app-motif2:var(--tone-motif2-3);}33.3333%{--app-page:var(--tone-page-4);--app-surface:var(--tone-surface-4);--app-panel:var(--tone-panel-4);--app-accent:var(--tone-accent-4);--app-accent2:var(--tone-accent2-4);--app-motif2:var(--tone-motif2-4);}41.6667%{--app-page:var(--tone-page-5);--app-surface:var(--tone-surface-5);--app-panel:var(--tone-panel-5);--app-accent:var(--tone-accent-5);--app-accent2:var(--tone-accent2-5);--app-motif2:var(--tone-motif2-5);}50%{--app-page:var(--tone-page-6);--app-surface:var(--tone-surface-6);--app-panel:var(--tone-panel-6);--app-accent:var(--tone-accent-6);--app-accent2:var(--tone-accent2-6);--app-motif2:var(--tone-motif2-6);}58.3333%{--app-page:var(--tone-page-7);--app-surface:var(--tone-surface-7);--app-panel:var(--tone-panel-7);--app-accent:var(--tone-accent-7);--app-accent2:var(--tone-accent2-7);--app-motif2:var(--tone-motif2-7);}66.6667%{--app-page:var(--tone-page-8);--app-surface:var(--tone-surface-8);--app-panel:var(--tone-panel-8);--app-accent:var(--tone-accent-8);--app-accent2:var(--tone-accent2-8);--app-motif2:var(--tone-motif2-8);}75%{--app-page:var(--tone-page-9);--app-surface:var(--tone-surface-9);--app-panel:var(--tone-panel-9);--app-accent:var(--tone-accent-9);--app-accent2:var(--tone-accent2-9);--app-motif2:var(--tone-motif2-9);}83.3333%{--app-page:var(--tone-page-10);--app-surface:var(--tone-surface-10);--app-panel:var(--tone-panel-10);--app-accent:var(--tone-accent-10);--app-accent2:var(--tone-accent2-10);--app-motif2:var(--tone-motif2-10);}91.6667%{--app-page:var(--tone-page-11);--app-surface:var(--tone-surface-11);--app-panel:var(--tone-panel-11);--app-accent:var(--tone-accent-11);--app-accent2:var(--tone-accent2-11);--app-motif2:var(--tone-motif2-11);}100%{--app-page:var(--tone-page-0);--app-surface:var(--tone-surface-0);--app-panel:var(--tone-panel-0);--app-accent:var(--tone-accent-0);--app-accent2:var(--tone-accent2-0);--app-motif2:var(--tone-motif2-0);}}
html:has(body[data-tones=cycle]:not([data-view=blockout]):not(.playing):not(.reduced-motion)){animation:neo-tones 12s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html{animation:none!important}}
/* Rarity tiers (rarity.js): one colour per tier, same everywhere. */
.shop-card.normal .shop-rarity,.rarity-tag.normal{color:#8b93a7}
.shop-card.rare .shop-rarity,.rarity-tag.rare{color:#1f8bff}
.shop-card.epic .shop-rarity,.rarity-tag.epic{color:#9b3dff}
.shop-card.legendary .shop-rarity,.rarity-tag.legendary{color:#ff9500}
.shop-card.exotic .shop-rarity,.rarity-tag.exotic{color:#ff2d8a}
.rarity-tag{font:800 .58rem/1 var(--font-ui);font-style:normal;letter-spacing:.08em;text-transform:uppercase}
.theme-card .rarity-tag{padding:9px 12px 0}
/* Motif themes (v2.61, patterns.js): the design lies faintly behind the menus, one masked layer per ink (app.js
   renderMotif), and fills the theme's picture in the Atelier and the shop, under the paddles and the ball. */
/* html carries the page colour, so body goes transparent while a motif is shown (a body background would paint over it). */
.theme-motif{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:var(--motif-strength,.4)}
body.has-motif{background:transparent}body.has-motif::before{display:none}
.theme-motif>i{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
body.playing .theme-motif,body[data-view=blockout] .theme-motif{display:none}
/* Scene themes (v2.62): the scene's page texture behind the menus, animated by app.js (tickBackdrop). */
.theme-scene{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;display:none}
body.has-scene{background:transparent}body.has-scene .theme-scene{display:block}
body.playing .theme-scene,body[data-view=blockout] .theme-scene{display:none!important}
/* An Exotique theme keeps every button out of its scene's hue: the Blockout tile takes the theme's second tone. */
body[data-rarity=exotic] .menu-tile.primary.blockout-tile{background:var(--app-accent2);color:var(--app-on-accent2)}
body[data-rarity=exotic] .menu-tile.primary.blockout-tile .tile-icon{background:#80808024;background:color-mix(in srgb,var(--app-on-accent2) 10%,transparent);border-color:#80808055;border-color:color-mix(in srgb,var(--app-on-accent2) 27%,transparent);color:var(--app-on-accent2)}
body[data-rarity=exotic] .menu-tile.primary.blockout-tile .tile-text small,body[data-rarity=exotic] .menu-tile.primary.blockout-tile .tile-text em,body[data-rarity=exotic] .menu-tile.primary.blockout-tile .tile-chevron{color:var(--app-on-accent2)}
.motif-swatch{position:absolute;inset:0;width:100%;height:100%;display:block}
.theme-swatch::before,.theme-swatch::after,.theme-swatch .swatch-ball,.shop-theme .swatch-ball{z-index:1}
.shop-theme:has(.motif-swatch){overflow:hidden}

/* Online lobby on narrow phones (320–390 px): the room format label and its select share the row, wrapping instead of overflowing the card. */
.online-dialog .online-card .setting-row{flex-wrap:wrap}.online-dialog .online-card .setting-row select{min-width:0;max-width:100%;flex:1 1 150px}
/* Rarity tag on paddle, ball and trail buttons (Atelier), same colours as the themes'. */
.skin-button .rarity-tag,.ball-button .rarity-tag{display:block;margin-top:2px;font-size:.5rem;text-align:center}
/* Courts (Atelier > Terrains, shop): the two halves, the optional centre band; an Épique court's tones turn. */
.court-swatch,.shop-court{position:relative;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:10px;border:1px solid var(--line)}
.court-swatch{height:44px;margin:10px 12px 0}
.court-swatch canvas{grid-column:1/-1;display:block;width:100%;height:100%}
.shop-court{width:100%;height:clamp(64px,10vh,96px)}
.court-swatch i,.shop-court i{display:block}
.court-swatch i:nth-child(1),.shop-court i:nth-child(1){background:var(--court-a)}
.court-swatch i:nth-child(2),.shop-court i:nth-child(2){background:var(--court-b)}
.court-swatch i:nth-child(3),.shop-court i:nth-child(3){position:absolute;left:47.5%;right:47.5%;top:0;bottom:0;background:var(--court-band)}
.court-swatch.cycle,.shop-court.cycle{animation:court-cycle 14s linear infinite}
@keyframes court-cycle{to{filter:hue-rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.court-swatch.cycle,.shop-court.cycle{animation:none}}
html.reduced-motion .court-swatch.cycle,html.reduced-motion .shop-court.cycle{animation:none}
/* Four Atelier tabs (Raquettes, Balle, Thèmes, Terrains) on one row everywhere. */
.workshop-tabs,body:not(.mobile) .workshop-tabs{grid-template-columns:repeat(4,1fr)}
.workshop-tabs button{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Music list (Réglages > Le son): one row per owned track, flat neo tile; the playing one shows three moving bars. */
.music-list{display:grid;gap:8px;margin:10px 0 12px}
.music-track{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 14px;border:1px solid var(--line);border-radius:14px;background:var(--app-surface,transparent);color:inherit;text-align:left;font:inherit;cursor:pointer}
.music-track.selected{border-color:var(--app-accent);box-shadow:inset 0 0 0 1px var(--app-accent)}
.music-track strong{display:block;font-weight:800;font-style:italic;letter-spacing:-.01em}
.music-track small{display:block;margin-top:2px;color:var(--app-muted);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.music-track em{font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--app-accent)}
.music-eq{display:flex;align-items:flex-end;gap:3px;width:18px;height:18px}
.music-eq i{flex:1;height:30%;border-radius:2px;background:var(--app-accent)}
.music-track.playing .music-eq i{animation:music-eq .9s ease-in-out infinite alternate}
.music-track.playing .music-eq i:nth-child(2){animation-delay:-.3s}
.music-track.playing .music-eq i:nth-child(3){animation-delay:-.6s}
@keyframes music-eq{from{height:25%}to{height:100%}}
@media (prefers-reduced-motion:reduce){.music-track.playing .music-eq i{animation:none;height:70%}}
html.reduced-motion .music-track.playing .music-eq i{animation:none;height:70%}
/* Blockout keeps its dark world colours under the neo light theme (v2.58): its menus (map bar, shop, ranking, level card)
   get a dark palette derived from the world, otherwise the page's dark ink vanished on the dark sky (back arrow, active tab,
   gem balance, map notice, shop headings). */
body[data-view=blockout]:not(.playing),:is(#bo-shop-dialog,#bo-rank-dialog,#blockout-dialog){--app-page:var(--bos);--app-surface:color-mix(in srgb,var(--bos) 80%,#000);--app-panel:color-mix(in srgb,var(--bos) 86%,#fff);--app-text:#f4f6ff;--app-muted:#b9c0dc;--app-border:color-mix(in srgb,#fff 22%,transparent);--app-accent:var(--boc);--app-accent2:var(--boc);--app-accent-end:var(--boc);--app-on-accent:#0b0b1a;--app-accent-ink:var(--boc);--app-accent2-ink:var(--boc);--app-logo:#fff;color:var(--app-text)}
:is(#bo-shop-dialog,#bo-rank-dialog,#blockout-dialog){background:radial-gradient(120% 70% at 50% 0,color-mix(in srgb,var(--boc) 24%,transparent),transparent 70%),linear-gradient(180deg,var(--bos),color-mix(in srgb,var(--bos) 70%,#000))}

/* Neo currency icons (v2.58): the coin and the diamond are vector icons with their own colours, no glow. */
.wallet-chip i,.pack-gems i,.wheel-reroll i{filter:none}
.wallet-chip i.pix,.pack-gems .pix,.wheel-reroll i.pix,.challenge-rewards i.pix{width:1.35em;height:1.35em;font-size:1em;vertical-align:-.16em}
/* Pong score: the faint numbers drawn on the court (Renderer.drawCourtScore) replace the score pill during 2-sided matches. */
body.playing:is([data-arena-kind=classic],[data-arena-kind=breakout]) .scoreboard{display:none!important}
/* Blockout on a phone in landscape (v2.58): the court fills the screen, the four stats stack in a slim column in the free
   top corner on the other side of the ability buttons (under the pause button for a right-handed player). */
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-arena-kind=blockout].playing .bo-hud:not([hidden]){top:calc(var(--sat) + 62px);right:calc(var(--sar) + 8px);left:auto;bottom:auto;width:clamp(76px,11vw,100px);height:auto;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;padding:8px 6px;border-radius:16px;transform:none}
 html body.mobile[data-hand=left][data-arena-kind=blockout].playing .bo-hud:not([hidden]){top:calc(var(--sat) + 8px);left:calc(var(--sal) + 8px);right:auto}
 html body.mobile[data-arena-kind=blockout].playing .bo-stat strong{font-size:.95rem}
 html body.mobile[data-arena-kind=blockout].playing #bo-hud-lives .pix{width:.85em;height:.85em}
 html body.mobile[data-arena-kind=blockout].playing .under-arena{display:none!important}
}

/* Sound button = a small record (owner, 2026-09-28): it turns at 33 rpm while the music plays, stops where it is when the
   music stops, and is struck through when all sound is off. Reduced motion keeps it still. */
.disc-button .disc{width:26px;height:26px;overflow:visible;animation:disc-spin 1.8s linear infinite;animation-play-state:paused}
.disc-button.spinning .disc{animation-play-state:running}
.disc-button .disc-off{display:none}
.disc-button.off .disc-off{display:inline}
.disc-button.off .disc-body{opacity:.45}
@keyframes disc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.disc-button .disc{animation:none}}
html.reduced-motion .disc-button .disc{animation:none}

/* Game version: bottom-right corner of the main menu, on every platform. */
html body .home .home-version{display:block;position:fixed;right:calc(12px + var(--sar));bottom:calc(6px + var(--sab));z-index:5;margin:0;pointer-events:none;color:var(--app-muted);font:600 .66rem/1 var(--font-mono);letter-spacing:.12em;text-align:right}
html body.mobile .home .home-version{bottom:calc(3px + var(--sab));font-size:.58rem}
html body.mobile:not(.playing) .home{padding-bottom:13px}
/* On the home screen the header is hidden: the record sits beside the settings gear. */
.home-disc{position:absolute;top:2px;right:52px;z-index:6;width:44px;height:44px;display:grid;place-items:center}
body:not(.mobile) .home-disc{top:6px;right:56px}
html body .home .home-status{padding-right:104px}
html body.mobile:not(.playing) .home .home-status{padding-right:108px}

/* Phones (owner, 2026-09-28): « Jouer · Atelier · Réglages » stay reachable on their three screens — a tab bar at the
   bottom in portrait, beside the record at the top right in landscape (the header was hidden there, record included). */
html body.mobile:not(.playing):is([data-view=match],[data-view=workshop],[data-view=settings]) .header>nav[aria-label="Menu principal"]{display:flex!important;position:fixed;z-index:20;left:calc(14px + var(--sal));right:calc(14px + var(--sar));bottom:calc(8px + var(--sab));height:52px;gap:4px;padding:4px;border-radius:16px;background:var(--app-panel);box-shadow:0 8px 28px #10122a24}
html body.mobile:not(.playing):is([data-view=match],[data-view=workshop],[data-view=settings]) .header>nav .nav-item{flex:1 1 0;min-width:0;min-height:0;padding:0 4px;border-radius:12px;font-size:.72rem;letter-spacing:.06em;white-space:nowrap}
html body.mobile:not(.playing):is([data-view=match],[data-view=workshop],[data-view=settings]) .app-shell{padding-bottom:calc(72px + var(--sab))}
@media (orientation:landscape) and (max-height:520px){
 html body.mobile:not(.playing):is([data-view=match],[data-view=workshop],[data-view=settings]) .header{display:flex!important;top:calc(var(--sat) + 10px);height:44px;gap:8px}
 html body.mobile:not(.playing):is([data-view=match],[data-view=workshop],[data-view=settings]) .header>nav[aria-label="Menu principal"]{position:static;height:44px;padding:3px;box-shadow:none}
 html body.mobile:not(.playing):is([data-view=match],[data-view=workshop],[data-view=settings]) .header>nav .nav-item{flex:none;padding:0 12px}
 html body.mobile:not(.playing):is([data-view=match],[data-view=workshop],[data-view=settings]) .app-shell{padding-bottom:calc(8px + var(--sab))}
 html body.mobile:not(.playing):is([data-view=match],[data-view=workshop],[data-view=settings]) #screen-title{display:none}
 html body.mobile:not(.playing):is([data-view=match],[data-view=workshop],[data-view=settings]) .screen-bar{padding-right:318px}
}
/* The match summary chip belongs to the Jouer screen; on phones it sat over the record in Atelier and Réglages. */
html body.mobile:not(.playing):not([data-view=match]) #setup-context{display:none!important}

/* ===================================================================
   FINITION DES MENUS (v2.60.0, demande du propriétaire du 2026-09-28) — chaque écran occupe tout l'écran ou se
   centre, sans zone morte : cartes de mode façon jeu vidéo, tuiles qui remplissent leur carte, aperçu du terrain
   sans bandes vides, fenêtres centrées et opaques. Ce bloc vient en dernier et fait foi sur la mise en page des menus.
   ========================================================================== */

/* --- Jouer, étape 1 : trois grandes cartes de mode (numéro détouré, pictogramme, titre, sous-titre, flèche) --- */
html body[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:clamp(14px,2vw,32px);width:100%;max-width:1480px;height:100%;margin:0 auto;padding:clamp(4px,1.2vh,16px) 0 clamp(8px,2vh,24px)}
html body[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"num go" "art art" "title title" "sub sub";align-items:end;justify-items:start;gap:8px 12px;min-height:0;padding:clamp(18px,2.4vw,40px);border:0;border-radius:clamp(22px,2.2vw,36px);background-color:var(--app-accent);color:var(--app-on-accent);text-align:left;box-shadow:0 22px 44px -26px color-mix(in srgb,var(--app-accent) 80%,#000);transition:transform .22s var(--ease)}
@media (hover:hover) and (pointer:fine){html body[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry{will-change:transform}}
html body[data-view=match][data-setup-step=opponent]:not(.playing) #preset-solo{background-image:radial-gradient(circle at 104% -4%,color-mix(in srgb,var(--app-on-accent) 13%,transparent) 0 36%,transparent 36.2%)}
html body[data-view=match][data-setup-step=opponent]:not(.playing) #preset-local{background-image:radial-gradient(circle at 0% 104%,color-mix(in srgb,var(--app-on-accent) 11%,transparent) 0 30%,transparent 30.2%),radial-gradient(circle at 100% 104%,color-mix(in srgb,var(--app-on-accent) 11%,transparent) 0 30%,transparent 30.2%)}
html body[data-view=match][data-setup-step=opponent]:not(.playing) #preset-online{background-image:repeating-radial-gradient(circle at 106% -6%,color-mix(in srgb,var(--app-on-accent) 10%,transparent) 0 26px,transparent 26px 52px)}
html body[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry:hover{transform:translateY(-6px)}
html body[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry:active{transform:scale(.985)}
html body[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry::before{content:"01";grid-area:num;align-self:start;font:900 italic clamp(2.6rem,5.4vw,6rem)/.82 var(--font-display);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--app-on-accent) 72%,transparent)}
html body[data-view=match][data-setup-step=opponent]:not(.playing) #preset-local::before{content:"02"}
html body[data-view=match][data-setup-step=opponent]:not(.playing) #preset-online::before{content:"03"}
html body[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry::after{content:"→";grid-area:go;align-self:start;display:grid;place-items:center;width:clamp(40px,3.4vw,58px);height:clamp(40px,3.4vw,58px);border-radius:50%;background:var(--app-on-accent);color:var(--app-accent);font:900 clamp(1.1rem,1.5vw,1.6rem)/1 var(--font-display);transition:transform .22s var(--ease)}
html body[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry:hover::after{transform:translateX(4px)}
html body[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry svg{grid-area:art;align-self:center;justify-self:center;width:min(82%,340px);height:auto;max-height:100%;margin:0;color:var(--app-on-accent);fill:currentColor}
html body[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry strong{grid-area:title;margin:0;font:900 italic clamp(1.35rem,2.5vw,2.7rem)/1 var(--font-display);letter-spacing:-.02em;text-transform:uppercase;text-align:left}
html body[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry small{grid-area:sub;display:block;margin:0;font:700 clamp(.7rem,.85vw,.9rem)/1.3 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;text-align:left;opacity:.82}
html body:not(.mobile)[data-view=match][data-setup-step=opponent]:not(.playing) #match-panel{padding:0}
/* Phones upright: the three cards share the height, picture on the right. */
html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) #match-panel{padding:0;border:0;background:transparent;box-shadow:none}
html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) #match-panel::before{display:none}
html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) #setup-opponent-step{height:100%}
html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry-grid{grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;height:100%;padding:4px 0 8px}
html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry{grid-template-columns:minmax(0,1fr) 44%;grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"num art" ". art" "title art" "sub art";flex-direction:initial;justify-content:initial;min-height:0;padding:18px 18px 18px 20px;border-radius:24px;box-shadow:none}
html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry::before{font-size:2.6rem}
html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry::after{display:none}
html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry svg{width:100%;max-width:150px;flex:none}
html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry strong{font-size:1.3rem}
html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry small{font-size:.66rem;text-align:left}
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .play-layout{display:block!important}
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) #match-panel{width:100%;height:100%}
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:12px;padding:2px 0 6px}
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"num go" "art art" "title title" "sub sub";padding:14px 16px;border-radius:20px}
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry::before{font-size:2rem}
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry::after{display:grid;width:32px;height:32px;font-size:1rem}
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry svg{width:auto;height:100%;max-width:100%;max-height:78px}
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry strong{font-size:1.05rem}
 html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry small{font-size:.58rem}
}

/* --- Jouer, étapes 2 et 3 sur ordinateur : colonne de réglages en tuiles pleines + aperçu du terrain au format réel --- */
html body:not(.mobile)[data-view=match]:is([data-setup-step=court],[data-setup-step=participants]):not(.playing) .play-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,2.4vw,44px);align-items:stretch}
html body:not(.mobile)[data-view=match]:is([data-setup-step=court],[data-setup-step=participants]):not(.playing) #match-panel{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
html body:not(.mobile)[data-view=match]:is([data-setup-step=court],[data-setup-step=participants]):not(.playing) #match-panel::before{display:none}
html body[data-view=match]:not(.playing) #setup-context{justify-self:start;justify-content:flex-start;width:auto;min-height:44px;padding:0 6px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--app-text);font:900 italic clamp(1.25rem,1.9vw,2rem)/1 var(--font-display);letter-spacing:-.01em;text-transform:uppercase}
html body:not(.mobile)[data-setup-step=court]:not(.playing) #setup-court-step{gap:clamp(10px,1.6vh,18px);padding-bottom:0}
html body[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .setup-options{gap:clamp(10px,1.6vh,18px)}
html body[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step :is(.setup-choice,.game-mode-section){display:flex;flex-direction:column;gap:clamp(8px,1.3vh,14px);min-height:0;padding:clamp(14px,2.1vh,26px);border:1px solid var(--line);border-radius:24px;background:var(--app-surface);box-shadow:none}
html body[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .section-caption{justify-content:flex-start;margin:0;color:var(--app-text);font:900 italic clamp(1rem,1.35vw,1.35rem)/1 var(--font-display);letter-spacing:-.005em;text-align:left;text-transform:uppercase}
html body[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step :is(.arena-options,.ruleset-options,.mode-buttons){flex:1 1 auto;min-height:0;grid-auto-rows:minmax(0,1fr);align-content:stretch;gap:clamp(6px,.7vw,12px)}
html body[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step :is(.arena-options,.ruleset-options,.mode-buttons) button{min-height:0;height:auto;padding:4px 8px;border:1px solid var(--line);border-radius:16px;background:var(--app-panel);color:var(--app-text);font:800 clamp(.7rem,.85vw,.92rem)/1.15 var(--font-display);letter-spacing:.06em;text-transform:uppercase;box-shadow:none;transition:background .16s,border-color .16s,color .16s,transform .16s var(--ease)}
html body[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step :is(.arena-options,.ruleset-options,.mode-buttons) button:hover{border-color:var(--app-accent);transform:translateY(-2px)}
html body[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step :is(.arena-options,.ruleset-options,.mode-buttons) button:is(.selected,[aria-pressed=true]){border-color:var(--app-accent);background:var(--app-accent);color:var(--app-on-accent);box-shadow:0 12px 26px -16px var(--app-accent)}
html body[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .arena-options button{gap:clamp(8px,1.4vh,16px)}
html body[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .arena-options button::before{transform:none;margin:0;width:clamp(52px,5vw,88px);height:clamp(30px,2.9vw,52px);border-width:2px;border-radius:4px;background-color:var(--app-page)}
html body[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .arena-options button:is([data-arena=square],[data-arena=circle])::before{width:clamp(34px,3.2vw,56px);height:clamp(34px,3.2vw,56px)}
html body[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .arena-options button[data-arena=circle]::before{border-radius:50%}
html body:not(.mobile)[data-setup-step=court]:not(.playing) #setup-next{align-self:stretch;justify-content:space-between;width:100%;min-height:clamp(54px,7.4vh,78px);margin:0;padding:0 clamp(20px,2vw,32px);border-radius:20px;font:900 italic clamp(1.1rem,1.6vw,1.6rem) var(--font-display);letter-spacing:.01em;box-shadow:0 18px 34px -20px var(--app-accent)}
/* Live preview: the court card keeps the court's real shape (5:3, square for Carré and Cercle), centred in its column. */
html body:not(.mobile)[data-view=match]:is([data-setup-step=court],[data-setup-step=participants]):not(.playing) .arena-section{justify-content:center;gap:12px;min-height:0}
html body:not(.mobile)[data-view=match]:is([data-setup-step=court],[data-setup-step=participants]):not(.playing) .arena-section .canvas-wrap{flex:none;width:100%;height:auto;aspect-ratio:5/3;max-height:calc(100% - 140px);margin:0 auto}
html body:not(.mobile)[data-view=match]:is([data-setup-step=court],[data-setup-step=participants]):is([data-arena-kind=square],[data-arena-kind=circle]):not(.playing) .arena-section .canvas-wrap{width:auto;height:min(100% - 140px,100%);aspect-ratio:1}
html body:not(.mobile)[data-view=match]:is([data-setup-step=court],[data-setup-step=participants]):not(.playing) .arena-section .arena-bottom{display:none}
html body:not(.mobile)[data-view=match]:is([data-setup-step=court],[data-setup-step=participants]):not(.playing) .arena-topbar{justify-content:flex-start;min-height:0;padding:0 4px}
html body:not(.mobile)[data-view=match][data-setup-step=court]:not(.playing) .setup-geometry{margin:0;min-height:0;padding:10px 12px 10px 20px;border:1px solid var(--line);border-radius:18px;background:var(--app-surface);box-shadow:none}
/* Participants: heading, player cards and launch button form one centred block. */
html body:not(.mobile)[data-setup-step=participants]:not(.playing) #setup-roster-step{justify-content:center;gap:clamp(12px,2vh,22px);padding-bottom:0}
html body:not(.mobile)[data-setup-step=participants]:not(.playing) .setup-roster-heading{padding:12px 12px 12px 22px;border:1px solid var(--line);border-radius:20px;background:var(--app-surface)}
html body:not(.mobile)[data-setup-step=participants]:not(.playing) .setup-roster-heading h3{font:900 italic clamp(1.05rem,1.45vw,1.45rem)/1 var(--font-display);letter-spacing:-.005em}
html body:not(.mobile)[data-setup-step=participants]:not(.playing) #roster-size-action{min-height:42px;padding:0 16px;border-radius:12px}
html body:not(.mobile)[data-setup-step=participants]:not(.playing) #setup-roster-step>#roster-summary{flex:none;gap:clamp(10px,1.4vh,16px);overflow:visible}
html body:not(.mobile)[data-setup-step=participants]:not(.playing) .setup-player-card{min-height:clamp(150px,22vh,230px);align-content:space-between;gap:12px;padding:clamp(14px,1.8vh,22px);border-radius:22px;border-width:1px;background:color-mix(in srgb,var(--player-color) 7%,var(--app-surface));box-shadow:inset 5px 0 0 var(--player-color)}
html body:not(.mobile)[data-setup-step=participants]:not(.playing) .setup-player-config{grid-template-columns:clamp(40px,4vw,60px) minmax(0,1fr);gap:10px 16px}
html body:not(.mobile)[data-setup-step=participants]:not(.playing) .setup-player-config canvas{width:clamp(36px,3.4vw,54px);height:clamp(64px,6.4vw,100px)}
html body:not(.mobile)[data-setup-step=participants]:not(.playing) .setup-footer{margin-top:0!important;padding:0;border-top:0;gap:clamp(10px,1.4vh,16px)}
html body:not(.mobile)[data-setup-step=participants]:not(.playing) #start-button{width:100%;min-height:clamp(58px,8vh,82px);padding:0 clamp(20px,2vw,32px);border-radius:20px;box-shadow:0 18px 34px -20px var(--app-accent)}
html body:not(.mobile)[data-setup-step=participants]:not(.playing) .start-note{font-size:.72rem;letter-spacing:.12em}
html body:not(.mobile)[data-setup-step=participants]:not(.playing) .setup-footer>label{justify-self:stretch;min-width:0}
html body:not(.mobile)[data-setup-step=participants]:not(.playing) .setup-footer select{width:100%!important;min-height:44px}

/* Menu previews (owner, 2026-09-28): the court sits straight on the page — no frame, card, glow or background around it
   (the renderer leaves its canvas transparent outside a match, see Renderer.transparent). */
html body:not(.playing):not([data-view=home]) .arena-section::before{display:none!important}
html body:not(.playing):not([data-view=home]) .arena-section .canvas-wrap{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0}
html body:not(.playing):not([data-view=home]) .arena-section #arena{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
html body:not(.playing):not([data-view=home]) .arena-section :is(.scoreboard,.arena-bottom){border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* Phones upright, steps 2 and 3: the options fill the screen above the court, which keeps its real shape. */
@media (orientation:portrait){
 html body.mobile[data-view=match]:is([data-setup-step=court],[data-setup-step=participants]):not(.playing) .play-layout{display:flex!important;flex-direction:column;gap:12px}
 html body.mobile[data-view=match]:is([data-setup-step=court],[data-setup-step=participants]):not(.playing) #match-panel{flex:1 1 auto;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
 html body.mobile[data-view=match]:is([data-setup-step=court],[data-setup-step=participants]):not(.playing) #match-panel::before{display:none}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) .arena-section{flex:none;height:auto;min-height:0}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) .arena-section .canvas-wrap{flex:none;width:100%;height:auto;aspect-ratio:5/3}
 html body.mobile[data-view=match][data-setup-step=court]:is([data-arena-kind=square],[data-arena-kind=circle]):not(.playing) .arena-section .canvas-wrap{width:auto;height:min(34vh,100vw - 28px);aspect-ratio:1;margin:0 auto}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step{height:100%;gap:10px;padding:0}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .setup-options{flex:1 1 auto;min-height:0;gap:10px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step :is(.setup-choice,.game-mode-section){padding:12px;border-radius:18px;gap:8px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .section-caption{display:flex;font-size:.9rem}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step :is(.arena-options,.ruleset-options,.mode-buttons){gap:6px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step :is(.arena-options,.ruleset-options,.mode-buttons) button{min-height:40px;padding:4px;border-radius:12px;font-size:.62rem;letter-spacing:.04em}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .arena-options button{gap:6px;min-height:72px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .arena-options button::before{transform:none;margin:0;width:40px;height:24px;border-width:2px;background-color:var(--app-page)}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .arena-options button:is([data-arena=square],[data-arena=circle])::before{width:26px;height:26px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .mode-description{display:block;margin:0;padding:0 4px;color:var(--app-muted);font:600 .74rem/1.3 var(--font-ui);text-align:center}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-next{align-self:stretch;width:100%;min-height:54px;margin:0;padding:0 20px;border-radius:16px;font:900 italic 1.05rem var(--font-display);letter-spacing:.02em}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #setup-roster-step{height:100%;justify-content:center;gap:14px;padding:0}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #setup-roster-step>#roster-summary{flex:none}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-roster-heading{padding:10px 10px 10px 16px;border:1px solid var(--line);border-radius:16px;background:var(--app-surface)}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-roster-heading h3{font:900 italic .95rem/1.1 var(--font-display);letter-spacing:0}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-card{padding:12px;border-radius:16px;border-width:1px;background:color-mix(in srgb,var(--player-color) 7%,var(--app-surface));box-shadow:inset 4px 0 0 var(--player-color)}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer{margin-top:0!important;padding:0;border-top:0}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #start-button{width:100%;min-height:58px;border-radius:16px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-palette select{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}
}
html body.mobile[data-view=match]:not(.playing) #setup-context{min-height:0;height:auto;padding:0 4px;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Phones held sideways, steps 2 and 3: same flat tiles, the player cards put their two selects side by side. */
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-view=match]:is([data-setup-step=court],[data-setup-step=participants]):not(.playing) #match-panel{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
 html body.mobile[data-view=match]:is([data-setup-step=court],[data-setup-step=participants]):not(.playing) #match-panel::before{display:none}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step{gap:8px;padding:0}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step :is(.setup-choice,.game-mode-section){padding:8px;border-radius:14px}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .section-caption{display:none}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-next{align-self:stretch;width:100%;min-height:44px;margin:0;border-radius:14px;font:900 italic .95rem var(--font-display)}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #setup-roster-step{justify-content:center;gap:8px;padding:0}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-roster-heading{padding:6px 6px 6px 12px;border:1px solid var(--line);border-radius:14px;background:var(--app-surface)}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-roster-heading h3{font:900 italic .8rem/1.1 var(--font-display);letter-spacing:0}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-card{display:grid;grid-template-columns:minmax(0,1fr)!important;align-items:start;gap:6px;padding:8px 10px;border-radius:14px;border-width:1px;background:color-mix(in srgb,var(--player-color) 7%,var(--app-surface));box-shadow:inset 4px 0 0 var(--player-color)}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:auto;gap:4px 6px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config canvas{display:none}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-fields{display:contents}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-palette{grid-column:1/-1;grid-row:2!important}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config label{grid-row:auto!important;display:grid;gap:2px;min-width:0;font-size:.55rem}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config select{width:100%;min-height:30px;font-size:.7rem}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer{margin-top:0!important;padding:0;border-top:0}
}

/* --- Réglages sur ordinateur : colonne d'onglets à gauche, la carte choisie remplit le reste de l'écran --- */
html body:not(.mobile)[data-view=settings] #settings-view{display:grid;grid-template-columns:clamp(210px,17vw,280px) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:stretch;gap:clamp(12px,1.6vh,20px) clamp(18px,2vw,34px);width:100%;max-width:1320px;height:100%;min-height:0;margin:0 auto}
html body:not(.mobile)[data-view=settings] #settings-view>.settings-tabs{grid-column:1;grid-row:1;align-self:start;display:flex;flex-direction:column;gap:8px;width:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
html body:not(.mobile)[data-view=settings] #settings-view>.settings-tabs button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:clamp(50px,7vh,68px);padding:0 18px 0 22px;border:1px solid var(--line);border-radius:16px;background:var(--app-surface);color:var(--app-text);font:900 italic clamp(.95rem,1.1vw,1.15rem)/1 var(--font-display);letter-spacing:0;text-align:left;text-transform:uppercase;transition:background .16s,border-color .16s,color .16s,transform .16s var(--ease)}
html body:not(.mobile)[data-view=settings] #settings-view>.settings-tabs button::after{content:"›";font:800 1.4rem/1 var(--font-display);opacity:.45}
html body:not(.mobile)[data-view=settings] #settings-view>.settings-tabs button:hover{border-color:var(--app-accent);transform:translateX(3px)}
html body:not(.mobile)[data-view=settings] #settings-view>.settings-tabs button.selected{border-color:var(--app-accent);background:var(--app-accent);color:var(--app-on-accent)}
html body:not(.mobile)[data-view=settings] #settings-view>.settings-tabs button.selected::after{opacity:1}
html body:not(.mobile)[data-view=settings] #settings-view>.settings-grid{grid-column:2;grid-row:1/3;display:block;height:100%;min-height:0;width:100%}
html body:not(.mobile)[data-view=settings] #settings-view .settings-card.active{display:block;height:100%;max-height:100%;padding:clamp(20px,3.4vh,40px) clamp(24px,2.8vw,48px);border:1px solid var(--line);border-radius:24px;background:var(--app-surface);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
html body:not(.mobile)[data-view=settings] #settings-view .settings-card>h2{margin:0 0 clamp(10px,2.2vh,24px);font:900 italic clamp(1.6rem,2.4vw,2.5rem)/1 var(--font-display);letter-spacing:-.015em;text-transform:uppercase}
html body:not(.mobile)[data-view=settings] #settings-view .setting-row{min-height:clamp(58px,8vh,82px);padding:10px 0;gap:24px}
html body:not(.mobile)[data-view=settings] #settings-view .setting-row>span:first-child{font-size:clamp(.95rem,1vw,1.08rem);font-weight:700}
html body:not(.mobile)[data-view=settings] #settings-view .setting-row small{font-size:.82rem}
html body:not(.mobile)[data-view=settings] #settings-view .setting-row select{flex:0 1 240px;min-height:46px}
html body:not(.mobile)[data-view=settings] #settings-view .setting-row .range-wrap{flex:0 1 300px}
html body:not(.mobile)[data-view=settings] #settings-view>.settings-bottom{grid-column:1;grid-row:2;align-self:end;justify-content:flex-start;width:auto;padding:0 4px}

/* --- Succès : un bloc centré (collection, onglets, cartes) ; cartes plus grandes, texte aligné à gauche --- */
html body:not(.mobile)[data-view=achievements] #achievements-view{display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2vh,22px);width:100%;max-width:1180px;height:100%;min-height:0;margin:0 auto}
html body:not(.mobile)[data-view=achievements] #achievements-view>.ach-summary{flex:none;gap:clamp(16px,2vw,28px);padding:clamp(14px,2.2vh,24px) clamp(18px,2vw,30px);border:1px solid var(--line);border-radius:24px;background:var(--app-surface);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
html body:not(.mobile)[data-view=achievements] #achievements-view>.ach-summary::before,html body:not(.mobile)[data-view=achievements] #achievements-view>.ach-summary::after{display:none}
html body:not(.mobile)[data-view=achievements] #achievements-view>.ach-summary h2{font:900 italic clamp(1.6rem,2.4vw,2.4rem)/1 var(--font-display);letter-spacing:-.01em}
html body:not(.mobile)[data-view=achievements] #achievements-view>.ach-tabs{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;padding:0;border:0;background:none}
html body:not(.mobile)[data-view=achievements] #achievements-view>.ach-tabs button{min-height:clamp(46px,6vh,58px);border:1px solid var(--line);border-radius:14px;background:var(--app-surface);color:var(--app-text);font:900 italic clamp(.85rem,1vw,1.05rem) var(--font-display);letter-spacing:0;text-transform:uppercase}
html body:not(.mobile)[data-view=achievements] #achievements-view>.ach-tabs button.selected{border-color:var(--app-accent);background:var(--app-accent);color:var(--app-on-accent)}
html body:not(.mobile)[data-view=achievements] #achievements-view>.ach-grid{flex:0 1 auto;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(clamp(96px,13vh,132px),auto);align-content:start;gap:clamp(10px,1.4vh,14px);overflow:visible}
html body:not(.mobile)[data-view=achievements] #achievements-view .ach-card{grid-template-columns:clamp(56px,6vh,72px) minmax(0,1fr) auto;gap:18px;align-items:center;padding:clamp(12px,1.8vh,20px) 20px;border-radius:20px;text-align:left;background:var(--app-surface);transition:transform .16s var(--ease),border-color .16s}
html body:not(.mobile)[data-view=achievements] #achievements-view .ach-card:hover{transform:translateY(-2px);border-color:var(--app-accent)}
html body:not(.mobile)[data-view=achievements] #achievements-view .ach-card.locked{opacity:1}
html body:not(.mobile)[data-view=achievements] #achievements-view .ach-card.locked :is(.ach-icon,.ach-text){opacity:.62}
html body:not(.mobile)[data-view=achievements] #achievements-view .ach-icon{width:clamp(56px,6vh,72px);height:clamp(56px,6vh,72px);border-radius:16px;font-size:1.8rem}
html body:not(.mobile)[data-view=achievements] #achievements-view .ach-text{justify-items:start;gap:4px;text-align:left}
html body:not(.mobile)[data-view=achievements] #achievements-view .ach-text strong{font:900 italic clamp(1rem,1.2vw,1.2rem)/1.1 var(--font-display);letter-spacing:0}
html body:not(.mobile)[data-view=achievements] #achievements-view .ach-text small{font-size:.86rem}
html body:not(.mobile)[data-view=achievements] #achievements-view .ach-reward{font-size:.74rem;letter-spacing:.03em}
/* Phones: same flat cards, text on the left, description and reward always shown. */
html body.mobile[data-view=achievements] #achievements-view .ach-text{justify-items:start;gap:3px;text-align:left}
html body.mobile[data-view=achievements] #achievements-view>.ach-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
html body.mobile[data-view=achievements] #achievements-view>.ach-tabs button.selected{background:var(--app-accent);color:var(--app-on-accent)}
html body.mobile[data-view=achievements] #achievements-view>.ach-grid{align-content:start}
html body.mobile[data-view=achievements] #achievements-view .ach-card{background:var(--app-surface);border-radius:16px}
html body.mobile[data-view=achievements] #achievements-view .ach-card.locked{opacity:1}
html body.mobile[data-view=achievements] #achievements-view .ach-card.locked :is(.ach-icon,.ach-text){opacity:.62}
html body.mobile[data-view=achievements] #achievements-view .ach-text strong{font:900 italic .95rem/1.1 var(--font-display);letter-spacing:0}
html body.mobile[data-view=achievements] #achievements-view .ach-text small,html body.mobile[data-view=achievements] #achievements-view .ach-reward{display:block}
@media (orientation:portrait){
 html body.mobile[data-view=achievements] #achievements-view>.ach-summary{border-radius:18px;background:var(--app-surface);box-shadow:none}
 html body.mobile[data-view=achievements] #achievements-view>.ach-summary::before,html body.mobile[data-view=achievements] #achievements-view>.ach-summary::after{display:none}
 html body.mobile[data-view=achievements] #achievements-view>.ach-grid{grid-template-columns:1fr;gap:10px}
 html body.mobile[data-view=achievements] #achievements-view .ach-card{grid-template-columns:52px minmax(0,1fr);gap:14px;min-height:88px;padding:12px 14px}
 html body.mobile[data-view=achievements] #achievements-view .ach-icon{width:52px;height:52px;border-radius:14px;font-size:1.4rem}
 html body.mobile[data-view=achievements] #achievements-view .ach-text small{font-size:.78rem}
 html body.mobile[data-view=achievements] #achievements-view .ach-reward{font-size:.66rem}
 html body.mobile[data-view=achievement-detail] .achievement-detail-body{grid-template-rows:auto auto auto;align-content:center}
}
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-view=achievements] #achievements-view .ach-card{grid-template-columns:40px minmax(0,1fr);gap:10px;min-height:64px;padding:8px 12px}
 html body.mobile[data-view=achievements] #achievements-view .ach-icon{width:40px;height:40px;border-radius:12px;font-size:1.1rem}
 html body.mobile[data-view=achievements] #achievements-view .ach-text strong{font-size:.8rem}
 html body.mobile[data-view=achievements] #achievements-view .ach-text small{font-size:.66rem}
 html body.mobile[data-view=achievements] #achievements-view .ach-reward{font-size:.58rem}
 html body.mobile[data-view=achievements] #achievements-view>.ach-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
 html body.mobile[data-view=achievements] #achievements-view{justify-content:center}
 html body.mobile[data-view=achievements] #achievements-view>.ach-grid{flex:0 1 auto;grid-auto-rows:minmax(72px,auto)}
 html body.mobile[data-view=achievement-detail] .achievement-detail-hero{align-items:center;justify-content:center;text-align:center}
 html body.mobile[data-view=achievement-detail] .achievement-detail-hero>div{display:grid;justify-items:center}
}

/* --- Pages dédiées (détail d'un succès, défis, roulette) : même largeur utile que les autres écrans, centrée --- */
html body:not(.mobile) .dedicated-view:not([hidden])>.dedicated-head,html body:not(.mobile) .dedicated-view:not([hidden])>.dedicated-body{width:100%;max-width:1480px;margin-inline:auto}
html body:not(.mobile) .dedicated-view:not([hidden])>.dedicated-head{border-bottom:0}
html body:not(.mobile) .dedicated-head h1{font:900 italic clamp(1.3rem,2vw,2rem)/1 var(--font-display);letter-spacing:-.005em}
html body:not(.mobile)[data-view=achievement-detail] .achievement-detail-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);align-content:stretch}
html body:not(.mobile)[data-view=achievement-detail] .achievement-detail-hero{grid-row:1/3;align-items:center;justify-content:center;gap:18px;text-align:center;border-radius:28px;background:var(--app-surface);box-shadow:none}
html body:not(.mobile)[data-view=achievement-detail] .achievement-detail-hero>div{display:grid;justify-items:center;gap:10px}
html body:not(.mobile)[data-view=achievement-detail] .achievement-detail-icon{width:clamp(120px,22vh,220px);height:clamp(120px,22vh,220px);border-radius:32px;font-size:clamp(3.5rem,10vh,7rem);box-shadow:none}
html body:not(.mobile)[data-view=achievement-detail] .achievement-detail-icon :is(svg,i){width:55%;height:55%}
html body:not(.mobile)[data-view=achievement-detail] .achievement-detail-hero h2{margin:0;font:900 italic clamp(2rem,3.6vw,3.6rem)/1 var(--font-display);letter-spacing:-.02em;text-transform:uppercase}
html body:not(.mobile)[data-view=achievement-detail] .achievement-detail-hero p{max-width:34ch;font-size:clamp(.95rem,1.1vw,1.15rem)}
html body:not(.mobile)[data-view=achievement-detail] :is(.achievement-detail-unlock,.achievement-detail-rewards){display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2.6vh,32px) clamp(20px,2vw,32px);border-radius:28px;background:var(--app-surface);box-shadow:none}
html body:not(.mobile)[data-view=achievement-detail] .achievement-detail-unlock{justify-content:center}
html body:not(.mobile)[data-view=achievement-detail] :is(.achievement-detail-unlock,.achievement-detail-rewards) h3{margin:0;font:900 italic clamp(1.05rem,1.4vw,1.4rem)/1 var(--font-display);letter-spacing:0}
html body:not(.mobile)[data-view=achievement-detail] .achievement-detail-unlock p{color:var(--app-text);font:700 clamp(1.1rem,1.6vw,1.6rem)/1.25 var(--font-display)}
html body:not(.mobile)[data-view=achievement-detail] .achievement-detail-reward-list{flex:1;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));grid-auto-rows:minmax(0,1fr);align-content:stretch;gap:12px}
html body:not(.mobile)[data-view=achievement-detail] .achievement-reward-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.6vh,18px);min-height:0;padding:clamp(12px,2vh,22px);border:1px solid var(--line);border-radius:20px;background:var(--app-panel);text-align:center}
html body:not(.mobile)[data-view=achievement-detail] .achievement-reward-card>div{display:grid;justify-items:center;gap:4px}
html body:not(.mobile)[data-view=achievement-detail] .achievement-reward-card strong{font:900 italic clamp(1.05rem,1.3vw,1.35rem)/1.1 var(--font-display)}
html body:not(.mobile)[data-view=achievement-detail] .achievement-reward-canvas{flex:none;max-width:100%;height:auto}
html body:not(.mobile)[data-view=achievement-detail] .achievement-reward-canvas.theme{width:min(100%,260px);border-radius:12px}
html body:not(.mobile)[data-view=achievement-detail] .achievement-reward-canvas:is(.skin,.ball){width:clamp(72px,11vh,112px)}

/* --- Fenêtres pleine page (En ligne, Aide, Magasin et Classement Blockout) : opaques, « Retour » en haut à gauche
   comme sur les autres écrans, contenu centré dans l'écran --- */
html body dialog:is(.page-dialog,.online-dialog)[open]{position:fixed;inset:0;display:flex;flex-direction:column;gap:clamp(10px,2vh,22px);width:100%!important;height:100%;max-width:none!important;max-height:none!important;margin:0;border:0;border-radius:0;box-shadow:none;padding:calc(var(--sat) + clamp(10px,2vh,24px)) calc(var(--sar) + clamp(14px,4vw,64px)) calc(var(--sab) + clamp(10px,2vh,24px)) calc(var(--sal) + clamp(14px,4vw,64px));overflow-y:auto;overflow-x:hidden}
html body dialog:is(.page-dialog,.online-dialog):not(#bo-shop-dialog):not(#bo-rank-dialog)[open]{background:var(--app-page)!important;color:var(--app-text)}
html body dialog:is(.page-dialog,.online-dialog):not(#bo-shop-dialog):not(#bo-rank-dialog)::backdrop{background:var(--app-page)}
html body dialog:is(.page-dialog,.online-dialog)[open]>*{flex:none;width:100%;max-width:1180px;margin-inline:auto!important;min-width:0}
html body .online-dialog[open]>:is(#online-entry,#online-room){flex:none}
html body dialog:is(.page-dialog,.online-dialog)[open]>.dialog-heading{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:clamp(12px,1.6vw,22px);margin-bottom:0}
html body dialog:is(.page-dialog,.online-dialog)[open]>.dialog-heading>div:not(.shop-nav){min-width:0}
html body dialog:is(.page-dialog,.online-dialog)[open]>.dialog-heading h2{margin:0;font:900 italic clamp(1.15rem,2vw,2rem)/1.05 var(--font-display);letter-spacing:-.01em;text-transform:uppercase}
html body dialog:is(.page-dialog,.online-dialog)[open]>.dialog-heading .shop-nav{flex:none;margin:0}
/* The content between the heading and the bottom is centred vertically (auto margins give way when it is taller). */
html body dialog:is(.page-dialog,.online-dialog)[open]>.dialog-heading+*{margin-top:auto!important}
html body dialog:is(.page-dialog,.online-dialog)[open]::after{content:"";display:block;flex:none;height:0;margin-top:auto}
html body #help-dialog[open] .help-info{flex:none;overflow:visible}
html body:not(.mobile) #help-dialog[open] .help-info p{padding:14px 16px;border-radius:16px;background:var(--app-surface);font-size:.92rem}
html body:not(.mobile) .online-dialog[open] :is(.mm-card,.online-card,.rank-panel){border-radius:22px;background:var(--app-surface);box-shadow:none}
html body:not(.mobile) .online-dialog[open] :is(.mm-card,.online-card,.rank-panel)::before{display:none}
html body:not(.mobile) .online-dialog[open] :is(.mm-card,.online-card) h3{font:900 italic clamp(1.1rem,1.4vw,1.4rem)/1.1 var(--font-display);letter-spacing:0}
/* Blockout leaderboard: one centred column, the refresh button under the list instead of alone in a corner. */
html body #bo-rank-dialog[open]>*{max-width:900px}
html body #bo-rank-dialog[open] :is(.primary-button,#bo-rank-refresh){width:100%;max-width:900px;margin-inline:auto;justify-self:center;align-self:center}

/* --- Défis quotidiens sur ordinateur : le boss à gauche, à droite un bloc centré aux tuiles lisibles --- */
html body:not(.mobile)[data-view=challenge] .challenge-page-body{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,2.6vw,44px)}
html body:not(.mobile)[data-view=challenge] .challenge-boss-card{border-radius:28px;box-shadow:none}
html body:not(.mobile)[data-view=challenge] .challenge-boss-card h2{font:900 italic clamp(2.4rem,4.4vw,4.6rem)/1 var(--font-display);letter-spacing:-.02em;text-transform:uppercase;color:#fff}
html body:not(.mobile)[data-view=challenge] .challenge-info{align-content:center;gap:clamp(12px,2vh,20px)}
html body:not(.mobile)[data-view=challenge] .challenge-info .challenge-difficulty:not(:empty){display:block;padding:clamp(14px,2vh,22px) 22px;border:1px solid var(--line);border-radius:20px;background:var(--app-surface);font:700 clamp(.95rem,1.1vw,1.15rem)/1.35 var(--font-ui)}
html body:not(.mobile)[data-view=challenge] .challenge-phase-card{padding:0;border:0;background:none;box-shadow:none}
html body:not(.mobile)[data-view=challenge] #challenge-phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;border:0;background:none}
html body:not(.mobile)[data-view=challenge] #challenge-phases li{display:grid;align-content:center;justify-items:center;gap:6px;min-height:clamp(84px,12vh,124px);padding:14px;border:1px solid var(--line);border-radius:20px;background:var(--app-surface);color:var(--app-muted);font:600 clamp(.8rem,.9vw,.95rem) var(--font-ui);text-align:center}
html body:not(.mobile)[data-view=challenge] #challenge-phases li b{color:var(--app-text);font:900 italic clamp(1.1rem,1.5vw,1.5rem)/1 var(--font-display);text-transform:uppercase}
html body:not(.mobile)[data-view=challenge] .challenge-rewards{gap:12px}
html body:not(.mobile)[data-view=challenge] .challenge-rewards li{gap:8px;min-height:clamp(84px,12vh,124px);padding:14px;border:1px solid var(--line);border-radius:20px;background:var(--app-surface);font:600 clamp(.8rem,.9vw,.95rem) var(--font-ui);text-transform:uppercase;letter-spacing:.08em}
html body:not(.mobile)[data-view=challenge] .challenge-rewards b{font:900 italic clamp(1.5rem,2.1vw,2.2rem)/1 var(--font-display);letter-spacing:0}
html body:not(.mobile)[data-view=challenge] #challenge-play{min-height:clamp(62px,8.6vh,88px);padding:0 clamp(20px,2vw,32px);border-radius:22px;font-size:clamp(1.05rem,1.4vw,1.4rem);box-shadow:0 18px 34px -20px var(--app-accent)}

/* --- Roulette sur ordinateur : la roue et son panneau forment un bloc centré, panneau plus lisible --- */
html body:not(.mobile)[data-view=wheel] .wheel-view .wheel-body{grid-template-columns:auto minmax(320px,420px);justify-content:center;gap:clamp(28px,5vw,96px)}
html body:not(.mobile)[data-view=wheel] .wheel-view .wheel-side{gap:clamp(12px,2vh,20px)}
html body:not(.mobile)[data-view=wheel] .wheel-view .wheel-odds{padding:18px 20px;border-radius:20px;background:var(--app-surface)}
html body:not(.mobile)[data-view=wheel] .wheel-view .wheel-side :is(p,.setting-footnote){font-size:1rem}
html body:not(.mobile)[data-view=wheel] .wheel-view .wheel-side .primary-button{min-height:clamp(62px,8.6vh,84px);border-radius:22px;font-size:1.2rem;box-shadow:0 18px 34px -20px var(--app-accent)}
/* Phones keep the live demo court as a faint backdrop on the home screen only (and show it for real in Jouer and Atelier):
   now that the court is drawn without a background, elsewhere it read as a grey box behind the page. */
html body.mobile:not(.playing):not([data-view=home]):not([data-view=match]):not([data-view=workshop]) .arena-section{visibility:hidden}

/* --- Défis et Roulette sur téléphone : pas de trou au milieu, le nom du boss lisible --- */
.challenge-boss-card{box-shadow:none}
.challenge-boss-card h2{color:#fff}
@media (orientation:portrait){
 html body.mobile[data-view=challenge] .challenge-page-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:12px}
 html body.mobile[data-view=challenge] .challenge-boss-card{border-radius:22px}
 html body.mobile[data-view=challenge] .challenge-boss-card h2{font:900 italic 2.2rem/1 var(--font-display);text-transform:uppercase}
 html body.mobile[data-view=challenge] .challenge-info{align-content:end;gap:10px}
 html body.mobile[data-view=challenge] .challenge-phase-card{padding:0;border:0;background:none}
 html body.mobile[data-view=challenge] :is(#challenge-phases li,.challenge-rewards li){border-radius:14px;background:var(--app-surface)}
 html body.mobile[data-view=challenge] .challenge-rewards b{font:900 italic 1.2rem/1 var(--font-display)}
 html body.mobile[data-view=challenge] #challenge-play{min-height:60px;border-radius:16px}
 html body.mobile[data-view=wheel] .wheel-view .wheel-body{align-content:center;grid-template-rows:auto auto;gap:18px}
 html body.mobile[data-view=wheel] .wheel-view .wheel-stage{--size:min(50vh,calc(100vw - 72px));--size:min(50dvh,calc(100vw - 72px));justify-self:center;margin:0 auto}
 html body.mobile[data-view=wheel] .wheel-view .wheel-body{justify-items:center}
 html body.mobile[data-view=wheel] .wheel-view .wheel-body{overflow:visible}
 html body.mobile[data-view=wheel] .wheel-view .wheel-side{width:100%;text-align:center}
 html body.mobile[data-view=wheel] .wheel-view .wheel-side p{width:100%;text-align:center}
 html body.mobile[data-view=wheel] .wheel-view .wheel-side .primary-button{width:100%;min-height:58px;border-radius:16px}
}

/* --- Accueil sur ordinateur : logo centré dans sa moitié, menu dans l'autre, compteurs plus lisibles --- */
html body:not(.mobile)[data-view=home] .home{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,96px)}
html body:not(.mobile)[data-view=home] .home-hero{align-items:center;justify-content:center;gap:clamp(18px,3vh,32px);text-align:center}
html body:not(.mobile)[data-view=home] .home-hero .logo{align-items:center}
html body:not(.mobile)[data-view=home] .home-hero .logo-pong{font-size:clamp(4.4rem,min(12vw,22vh),13rem)}
html body:not(.mobile)[data-view=home] .home-hero .logo-year{font-size:clamp(2.6rem,min(7.6vw,14vh),8.4rem)}
html body:not(.mobile)[data-view=home] .home-records{gap:12px}
html body:not(.mobile)[data-view=home] .home-records>*{min-width:clamp(96px,8vw,128px);padding:14px 18px;border-radius:18px}
html body:not(.mobile)[data-view=home] .home-records strong{font:900 italic clamp(1.4rem,1.8vw,1.9rem)/1 var(--font-display)}
html body:not(.mobile)[data-view=home] .home-menu{width:100%;max-width:720px;justify-self:center}
/* Blockout level sheet: the play button spans the sheet instead of sitting alone on the left. */
html body #blockout-dialog[open] .primary-button{width:100%;max-width:none;justify-self:stretch}
/* Phones held sideways: the ten Blockout tiles share one row each side, so each is a picture with its name under it
   (they overlapped each other's text). */
@media (orientation:landscape) and (max-height:520px){
 html body #blockout-dialog .bo-booster{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;justify-items:center;align-content:center;gap:3px;padding:4px 3px;text-align:center}
 html body #blockout-dialog .bo-booster>*{grid-column:1!important;grid-row:auto!important}
 html body #blockout-dialog .bo-booster .bo-booster-icon{width:26px;height:26px}
 html body #blockout-dialog .bo-booster strong{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.56rem;line-height:1.1}
 html body #blockout-dialog .bo-booster small{display:none}
 html body #blockout-dialog .bo-booster .bo-pick-mark{position:absolute;top:3px;right:3px}
}

/* --- Compte à rebours (v2.60.1) : le grand chiffre centré d'avant la v2.60 revient (demande du propriétaire), en plus
   fini. Un léger fondu (voile sombre et petit flou qui s'estompent vers les bords) le détache du terrain ; la légende est
   la même pastille d'accent partout ; le chiffre, blanc cerclé de sombre, porte un relief net couleur d'accent (filtre
   drop-shadow : la direction néo interdit text-shadow) ; chaque
   seconde arrive d'un petit rebond (data-tick, app.js) et GO ! passe à la couleur d'accent. Ce bloc fait foi sur le
   compte à rebours (ids : il l'emporte sur les règles .serve-overlay précédentes, téléphone compris). --- */
#serve-overlay::before{content:"";position:absolute;left:50%;top:50%;z-index:0;width:min(480px,86%);height:min(330px,66%);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,#04050d4d,#04050d24 50%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent);mask-image:radial-gradient(closest-side,#000 35%,transparent);pointer-events:none;animation:serve-halo .32s ease-out both}
#serve-overlay>*{position:relative;z-index:1}
#serve-overlay #serve-caption{max-width:calc(100% - 32px);margin:0;padding:8px 15px 7px;border:0;border-radius:999px;background:var(--app-accent);color:var(--app-on-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:800 .74rem/1 var(--font-display);letter-spacing:.16em;box-shadow:0 10px 22px -12px #04050dcc;animation:serve-caption .36s cubic-bezier(.2,.9,.3,1.15) both}
#serve-overlay #serve-caption:empty{visibility:hidden}
#serve-overlay #serve-count{margin:16px 0 0;padding:0 .1em 0 0;border:0;border-radius:0;background:none;opacity:1;color:#fff;font:900 italic clamp(5.5rem,16vmin,9.5rem)/.92 var(--font-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;-webkit-text-stroke:.07em #04050d;paint-order:stroke fill;filter:drop-shadow(.05em .06em 0 var(--app-accent));transform-origin:50% 60%}
#serve-overlay[data-go] #serve-count{color:var(--app-accent);filter:drop-shadow(.05em .06em 0 #04050d)}
#serve-overlay[data-tick=a] #serve-count{animation:serve-pop-a .46s cubic-bezier(.2,.9,.3,1.3) both}
#serve-overlay[data-tick=b] #serve-count{animation:serve-pop-b .46s cubic-bezier(.2,.9,.3,1.3) both}
#serve-overlay[data-go][data-tick] #serve-count{animation-duration:.4s}
@keyframes serve-pop-a{from{opacity:0;transform:scale(1.55)}to{opacity:1;transform:none}}
@keyframes serve-pop-b{from{opacity:0;transform:scale(1.55)}to{opacity:1;transform:none}}
@keyframes serve-caption{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
@keyframes serve-halo{from{opacity:0;transform:translate(-50%,-50%) scale(.75)}to{opacity:1;transform:translate(-50%,-50%)}}

body:not(.playing) .score-team strong{min-width:0;font-size:clamp(1rem,1.4vw,1.3rem);text-shadow:none}
body:not(.playing) .scoreboard{gap:clamp(14px,3vw,36px)}

/* Compact record player: library scrolls independently; transport and volumes stay visible. */
.audio-player{position:fixed;z-index:1500;top:76px;right:max(18px,env(safe-area-inset-right));width:370px;max-width:calc(100vw - 24px);max-height:calc(100vh - 92px);max-height:calc(100dvh - 92px);overflow:auto;background:var(--panel,#151827);color:var(--text,#fff);border:1px solid var(--line,#ffffff30);border-radius:20px;padding:18px;box-shadow:0 24px 80px #0008;font-size:13px}
.audio-player[hidden],.player-library[hidden]{display:none}
.player-heading,.player-now,.album-heading{display:flex;align-items:center;gap:12px}.player-heading{justify-content:space-between;margin-bottom:14px}.player-heading h2{margin:2px 0;font-size:20px}.audio-player small{display:block;opacity:.65;font-size:10px;line-height:1.5}.player-now strong{display:block;font-size:16px}.album-cover{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:9px;border:1px solid currentColor;background:linear-gradient(140deg,#ffffff18,#ffffff04);font-size:25px;object-fit:cover}.player-now .album-cover{width:58px;height:58px}.player-now{min-height:64px}.player-now>div{min-width:0}.player-transport{display:flex;gap:8px;justify-content:center;margin:14px 0}.audio-player button{color:inherit;cursor:pointer}.player-transport button,.player-modes button,.player-tabs button,.queue-actions button,.album-heading button{background:#ffffff09;border:1px solid #ffffff20;border-radius:8px;min-height:34px;padding:6px 10px;font:inherit}.player-transport #player-play{min-width:112px}.player-modes,.player-tabs{display:flex;gap:5px;margin:10px 0}.player-modes button{flex:1;font-size:10px;padding:6px 4px}.player-tabs button{flex:1}.audio-player button[aria-pressed=true]{background:#ffffff20;border-color:currentColor}.audio-player button:disabled{opacity:.3;cursor:default}.audio-player button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.player-library{max-height:220px;overflow:auto;overscroll-behavior:contain;margin:12px -4px;padding:0 4px}.player-track{display:flex;align-items:center;gap:4px;padding:7px 0;border-bottom:1px solid #ffffff10}.player-track.current{background:#ffffff08;border-radius:8px}.player-track-play{display:flex;align-items:center;gap:9px;flex:1;min-width:0;text-align:left;background:none;border:0;padding:4px;font:inherit}.player-track-play .album-cover{width:32px;height:32px;font-size:19px}.player-track-play span:last-child{min-width:0}.player-track strong{font-size:11px;display:block}.queue-actions{display:flex;gap:2px}.queue-actions button{padding:3px 7px;min-width:28px}.player-album{margin:10px 0 18px}.album-heading{margin-bottom:8px}.album-heading>div{flex:1}.album-heading strong{font-size:12px}.album-heading button{font-size:9px;padding:4px 7px}.album-song{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:0;border-bottom:1px solid #ffffff10;background:none;text-align:left;padding:9px 5px;font:inherit;font-size:11px}.player-volume{border-top:1px solid #ffffff20;padding-top:12px}.player-volume .setting-row{margin:8px 0;gap:10px}.player-volume .range-wrap{width:170px;max-width:58%}.player-volume .setting-row>span:first-child{font-size:11px}.player-volume .small-button{width:100%;margin-bottom:6px}.player-empty{padding:18px 8px;opacity:.65;text-align:center}.audio-player{scrollbar-width:thin}.audio-player button:hover:not(:disabled){background:#ffffff18}
@media(max-width:480px){.audio-player{top:64px;right:12px;padding:14px;max-height:calc(100vh - 78px);max-height:calc(100dvh - 78px)}.player-library{max-height:190px}.player-volume .setting-row{padding:5px 0}}

body .audio-player .setting-row{min-height:32px;padding:4px 0;margin:4px 0}.player-volume .range-wrap{font-size:11px}

/* Final mobile overflow rules take precedence over the earlier full-screen layouts. */
html body.mobile:not(.playing) :is(#match-panel,#roster-summary,#online-entry,#ach-grid,#bo-rank-list,#help-controls,#achievement-detail-reward-list){overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html body.mobile:not(.playing) #match-panel .setup-stage:not([hidden]){overflow-y:auto;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html body.mobile[data-view=workshop]:not(.playing) #workshop-panel{overflow-y:auto;overflow-x:hidden}
html body.mobile[data-view=workshop]:not(.playing) #workshop-panel .workshop-pane:not([hidden]){overflow-y:auto;min-height:0}
html body.mobile[data-view=achievements] #achievements-view>.ach-grid{overflow-y:auto;min-height:0}
#bo-rank-dialog .bo-rank-list,#help-dialog .help-info,#help-dialog .help-controls{overflow-y:auto!important;min-height:0}
/* Portrait header: keep the back action and match context in one clear row beside the record. */
@media (orientation:portrait){
 html body.mobile:not(.playing):is([data-view=match],[data-view=workshop],[data-view=settings]) .header .brand{display:none}
 html body.mobile[data-view=match]:not(.playing) .screen-bar{padding-right:52px;grid-template-columns:auto minmax(0,1fr);gap:8px}
 html body.mobile[data-view=match]:not(.playing) #setup-context{min-width:0;width:100%;font-size:clamp(.76rem,3.5vw,1.05rem);line-height:1.1}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #setup-roster-step{justify-content:flex-start}
}
/* Short portrait screens keep controls at touch size and scroll the setup stage. */
@media (orientation:portrait) and (max-height:650px){
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step{height:auto;min-height:100%;overflow-y:auto;align-content:start}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .setup-options{flex:none;min-height:auto}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step :is(.setup-choice,.game-mode-section){flex:none;min-height:max-content}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step :is(.arena-options,.ruleset-options,.mode-buttons){flex:none;grid-auto-rows:minmax(40px,auto)}
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-next{flex:none}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #setup-roster-step{height:auto;min-height:100%;justify-content:flex-start}
}
@media (orientation:portrait) and (max-height:650px){
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step{height:100%;min-height:0;max-height:100%;flex:1 1 auto}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #setup-roster-step{height:100%;min-height:0;max-height:100%;flex:1 1 auto}
}
@media (orientation:landscape) and (max-height:520px) and (max-width:740px){
 html body.mobile:not(.playing):is([data-view=match],[data-view=workshop],[data-view=settings]) .header .brand{display:none}
 html body.mobile[data-view=match]:not(.playing) .screen-bar{padding-right:318px;grid-template-columns:auto minmax(0,1fr);gap:8px}
 html body.mobile[data-view=match]:not(.playing) #setup-context{min-width:0;width:100%;font-size:.82rem;line-height:1.1}
 html body.mobile:not(.playing):is([data-view=match],[data-view=workshop],[data-view=settings]) .header>nav .nav-item{padding:0 7px;font-size:.66rem}
}
/* Full-screen, smoky music library. Two columns keep transport separate from the catalogue. */
.audio-player{inset:0;top:0;right:0;bottom:0;left:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;overflow:hidden;display:grid;grid-template-columns:minmax(250px,.85fr) minmax(300px,1.15fr);grid-template-rows:auto auto auto auto minmax(0,1fr);gap:10px clamp(18px,3vw,42px);padding:clamp(16px,3vw,36px);padding-top:max(clamp(16px,3vw,36px),env(safe-area-inset-top));padding-bottom:max(clamp(16px,3vw,36px),env(safe-area-inset-bottom));border:0;border-radius:0;background:linear-gradient(145deg,#101529eb,#121522ef 56%,#1a1d2cec);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:none;color:#f7f8ff;isolation:isolate}
.audio-player::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 15% 20%,#e9ab5330,transparent 35%),radial-gradient(circle at 85% 78%,#67bdd329,transparent 42%)}
.audio-player[hidden]{display:none}
.audio-player>*{min-width:0}
.audio-player .player-heading{grid-column:1/-1;grid-row:1;margin:0;padding-bottom:8px;border-bottom:1px solid #ffffff22}
.audio-player .player-heading h2{font-size:clamp(20px,3vw,32px)}
.audio-player .player-now{grid-column:1;grid-row:2;min-width:0}
.audio-player .player-now>div{min-width:0}
.audio-player .player-now strong{font-size:clamp(16px,2.3vw,25px);line-height:1.2;overflow-wrap:anywhere}
.audio-player .player-transport{grid-column:1;grid-row:3;margin:0;justify-content:flex-start}
.audio-player .player-modes{grid-column:1;grid-row:4;margin:0;min-width:0}
.audio-player .player-tabs{grid-column:2;grid-row:2;margin:0;align-items:center;min-width:0}
.audio-player .player-tabs button{min-width:0;white-space:nowrap}
.audio-player .player-album-filter{flex:1 1 150px;min-width:0}
.audio-player .player-album-filter[hidden]{display:none}
.audio-player .player-album-filter select{width:100%;height:36px;min-width:0;padding:4px 26px 4px 10px;border:1px solid #ffffff30;border-radius:8px;background:#242938;color:#f7f8ff;font:inherit;font-size:12px;text-overflow:ellipsis}
.audio-player .player-library{grid-column:2;grid-row:3/6;align-self:stretch;min-height:0;max-height:none;margin:0;padding:4px 10px 4px 0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#ffffff66 transparent}
.audio-player .player-track{min-width:0}
.audio-player .player-track-play strong,.audio-player .album-song{font-size:clamp(11px,1.15vw,14px);overflow-wrap:anywhere}
.audio-player .player-volume{grid-column:1;grid-row:5;align-self:end;min-width:0;padding-top:10px}
.audio-player .player-volume .setting-row{min-width:0;gap:8px}
.audio-player .player-volume .setting-row>span:first-child{flex:0 1 110px;min-width:0;overflow-wrap:anywhere}
.audio-player .player-volume .range-wrap{flex:1 1 150px;max-width:none;min-width:0;width:auto}
.audio-player .player-transport button,.audio-player .player-modes button,.audio-player .player-tabs button{min-height:38px}
@media (orientation:portrait){
 .audio-player{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto auto minmax(95px,1fr) auto;gap:7px;padding:14px max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
 .audio-player .player-heading{grid-column:1;grid-row:1;padding-bottom:3px}
 .audio-player .player-now{grid-column:1;grid-row:2;min-height:0}
 .audio-player .player-transport{grid-column:1;grid-row:3;justify-content:center}
 .audio-player .player-modes{grid-column:1;grid-row:4}
 .audio-player .player-tabs{grid-column:1;grid-row:5}
 .audio-player .player-library{grid-column:1;grid-row:6;min-height:95px}
 .audio-player .player-volume{grid-column:1;grid-row:7;align-self:stretch}
}
@media (orientation:landscape) and (max-height:520px){
 .audio-player{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto auto auto auto minmax(0,1fr);gap:3px 14px;padding:7px max(12px,env(safe-area-inset-right)) 7px max(12px,env(safe-area-inset-left))}
 .audio-player .player-heading{padding-bottom:2px}
 .audio-player .player-heading h2{font-size:17px}
 .audio-player .player-heading .icon-button{width:34px;height:34px}
 .audio-player .player-now{min-height:0;gap:8px}
 .audio-player .player-now .album-cover{width:38px;height:38px}
 .audio-player .player-now strong{font-size:15px}
 .audio-player .player-transport{gap:5px}
 .audio-player .player-transport button,.audio-player .player-modes button,.audio-player .player-tabs button{min-height:30px;padding:3px 5px}
 .audio-player .player-modes button{font-size:9px}
 .audio-player .player-volume{padding-top:3px}
 .audio-player .player-volume .small-button{min-height:28px;margin:0}
 body .audio-player .player-volume .setting-row{min-height:25px;padding:1px 0;margin:1px 0}
 .audio-player .player-library{padding-top:0}
}
@media (max-width:350px) and (orientation:portrait){
 .audio-player .player-modes button{font-size:9px}
 .audio-player .player-tabs button{padding:4px 5px}
 .audio-player .player-album-filter select{font-size:10px}
 .audio-player .queue-actions button{min-width:25px;padding:2px 5px}
}
@media (orientation:portrait) and (max-height:650px){
 .audio-player{grid-template-rows:max-content max-content max-content max-content max-content max-content max-content;align-content:start;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 .audio-player .player-library{height:140px;min-height:140px;max-height:140px}
 .audio-player .player-volume{align-self:start}
}
@media (orientation:portrait) and (max-width:350px){
 .audio-player .player-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
 .audio-player .player-tabs button{width:100%}
 .audio-player .player-album-filter{grid-column:1/-1;width:100%}
}
@media (orientation:landscape) and (max-height:520px) and (max-width:740px){
 .audio-player .player-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
 .audio-player .player-tabs button{width:100%;min-width:0}
 .audio-player .player-album-filter{grid-column:1/-1;width:100%}
 .audio-player .player-album-filter select{height:28px}
}
@media (orientation:landscape) and (max-height:350px){
 .audio-player{grid-template-rows:40px 70px 30px 34px minmax(145px,1fr);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 .audio-player .player-volume{align-self:start}
 .audio-player .player-library{min-height:0;max-height:230px}
}
html body.mobile:not(.playing):not([data-view=home]) .header .brand{display:none}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #roster-summary{overflow-y:auto;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* The original two-line type treatment, enlarged with a restrained offset for depth. */
html body[data-view=home] .home-hero .logo{display:flex;flex-direction:column;align-items:flex-start;max-width:100%;font-style:normal;font-weight:900;line-height:.84;text-transform:uppercase;transform:none}
html body[data-view=home] .home-hero .logo-pong{display:block;align-self:flex-start;margin:0;color:var(--app-logo);font:900 clamp(5.5rem,min(14.5vw,27vh),12rem)/.84 var(--font-ui);letter-spacing:-.01em;background:none;-webkit-text-stroke:4px var(--app-logo);paint-order:stroke fill;filter:drop-shadow(3px 4px 0 color-mix(in srgb,var(--app-accent2) 28%,transparent)) drop-shadow(0 0 12px color-mix(in srgb,var(--app-accent) 28%,transparent))}
html body[data-view=home] .home-hero .logo-pong::after{content:none}
html body[data-view=home] .home-hero .logo-year{display:block;align-self:flex-start;margin-top:.07em;color:var(--app-logo);font:900 clamp(3.5rem,min(9.6vw,18vh),8rem)/.84 var(--font-ui);letter-spacing:-.01em;-webkit-text-stroke:4px var(--app-logo);paint-order:stroke fill;filter:drop-shadow(3px 4px 0 color-mix(in srgb,var(--app-accent2) 28%,transparent)) drop-shadow(0 0 12px color-mix(in srgb,var(--app-accent) 28%,transparent));text-shadow:none;transform:none}
@media(max-width:700px){html body.mobile[data-view=home] .home-hero .logo-pong{font-size:clamp(3.8rem,min(25vw,14vh),7rem);font-size:clamp(3.8rem,min(25vw,14dvh),7rem)}html body.mobile[data-view=home] .home-hero .logo-year{font-size:clamp(2.5rem,min(17vw,10vh),4.7rem);font-size:clamp(2.5rem,min(17vw,10dvh),4.7rem)}}
@media(max-height:520px) and (orientation:landscape){html body.mobile[data-view=home] .home-hero .logo-pong{font-size:clamp(2.7rem,19vh,5.9rem);font-size:clamp(2.7rem,19dvh,5.9rem)}html body.mobile[data-view=home] .home-hero .logo-year{font-size:clamp(2rem,13vh,3.8rem);font-size:clamp(2rem,13dvh,3.8rem)}}

/* Let the ambient panel dissolve into the stage. The card edges remain solid targets. */
html body[data-view=match][data-setup-step=opponent]:not(.playing) #play-layout{isolation:isolate}
html body[data-view=match][data-setup-step=opponent]:not(.playing) #match-panel{position:relative;isolation:isolate;border:0;background:transparent;box-shadow:none;overflow:visible}
html body[data-view=match][data-setup-step=opponent]:not(.playing) #match-panel::before{content:"";display:block;position:absolute;inset:-8% -9%;z-index:-1;width:auto;height:auto;border:0;border-radius:0;background:radial-gradient(ellipse 66% 64% at center,color-mix(in srgb,var(--app-panel) 65%,transparent) 0%,color-mix(in srgb,var(--app-panel) 38%,transparent) 43%,transparent 100%);filter:blur(18px);pointer-events:none}
html body.mobile[data-view=match][data-setup-step=opponent]:not(.playing) #match-panel::before{display:block}
body:is([data-theme=flames],[data-theme=emberstorm],[data-theme=magma]) .theme-motif{opacity:.68}
body[data-theme=basalt] .theme-motif{opacity:.58}
/* Legible silhouettes and small independent movements on any focus source, including gamepads. */
html body[data-view=match][data-setup-step=opponent]:not(.playing) .setup-entry svg{overflow:visible}
.setup-entry .device-carousel>g{transform-origin:90px 44px;opacity:0;animation:device-cycle 12s ease-in-out infinite}
.setup-entry .device-carousel .device-tv{animation-delay:0s}.setup-entry .device-carousel .device-phone{animation-delay:-9s}.setup-entry .device-carousel .device-tablet{animation-delay:-6s}.setup-entry .device-carousel .device-laptop{animation-delay:-3s}
@keyframes device-cycle{0%,20%{opacity:1;transform:translateY(0) scale(1)}25%,95%{opacity:0;transform:translateY(5px) scale(.82)}100%{opacity:1;transform:translateY(0) scale(1)}}
.setup-entry:is(:hover,:focus-visible,.selected) .robot-head{transform:translateY(-4px) rotate(-4deg);transform-origin:139px 46px}
.setup-entry:is(:hover,:focus-visible,.selected) .robot-face{animation:robot-blink 2.8s ease-in-out infinite}
@keyframes robot-blink{0%,43%,49%,100%{transform:scaleY(1)}46%{transform:scaleY(.15)}}
.setup-entry:is(:hover,:focus-visible,.selected) .player-silhouette{transform:translateY(-3px)}
.setup-entry .robot-head,.setup-entry .player-silhouette,.setup-entry .link-spark{transition:transform .35s var(--ease)}
.setup-entry:is(:hover,:focus-visible,.selected) .link-spark{transform:scaleX(1.3);transform-origin:90px 44px}
.menu-tile .tile-icon,.shop-sidebar button [data-pix],.shop-card :is(.shop-thumb,.shop-swatch,.shop-theme,.shop-court),.theme-card .theme-swatch,.skin-button :is(svg,canvas),.shop-fav{transition:transform .38s var(--ease),filter .38s var(--ease)}
.menu-tile:is(:hover,:focus-visible) .tile-icon{transform:rotate(-9deg) scale(1.13)}
.shop-sidebar button:is(:hover,:focus-visible,[aria-pressed=true]) [data-pix]{transform:rotate(-12deg) scale(1.15)}
.shop-card:is(:hover,:focus-within) :is(.shop-thumb,.shop-swatch,.shop-theme,.shop-court){transform:translateY(-5px) rotate(-3deg) scale(1.04);filter:drop-shadow(0 8px 12px var(--accent-a))}
.shop-card:is(:hover,:focus-within) .shop-fav{transform:rotate(12deg) scale(1.12)}
.theme-card:is(:hover,:focus-visible) .theme-swatch,.skin-button:is(:hover,:focus-visible) :is(svg,canvas){transform:scale(1.045)}
/* The player shares the selected theme and the game’s high contrast typography. */
.audio-player{--player-ink:var(--app-text);--player-hair:color-mix(in srgb,var(--app-text) 20%,transparent);color:var(--player-ink);background:var(--app-page);font-family:var(--font-ui)}
.audio-player::before{background:radial-gradient(ellipse at 4% 14%,color-mix(in srgb,var(--app-accent) 23%,transparent),transparent 53%),radial-gradient(ellipse at 94% 83%,color-mix(in srgb,var(--app-accent2) 20%,transparent),transparent 52%)}
.audio-player .player-heading{border-bottom:2px solid var(--player-ink)}
.audio-player .player-heading small,.audio-player .player-now small{opacity:1;color:var(--app-muted);font-weight:800;letter-spacing:.16em}
.audio-player .player-heading h2{font-style:italic;font-weight:900;letter-spacing:-.055em;text-transform:uppercase}
.audio-player .player-now{padding:clamp(12px,2vw,24px);border:1px solid var(--player-hair);border-radius:22px;background:color-mix(in srgb,var(--app-surface) 88%,transparent)}
.audio-player .player-now .album-cover{width:clamp(58px,7vw,92px);height:clamp(58px,7vw,92px);border-radius:18px;border:2px solid var(--player-ink);color:var(--app-accent-ink);background:var(--app-page);box-shadow:7px 7px 0 color-mix(in srgb,var(--app-accent) 32%,transparent)}
.audio-player :is(.player-transport button,.player-modes button,.player-tabs button,.queue-actions button,.album-heading button){border:1px solid var(--player-hair);border-radius:12px;background:color-mix(in srgb,var(--app-surface) 87%,transparent);color:var(--player-ink);font-weight:800;transition:transform .2s var(--ease),background .2s,border-color .2s}
.audio-player :is(.player-transport button,.player-modes button,.player-tabs button,.queue-actions button,.album-heading button):is(:hover,:focus-visible){transform:translateY(-2px);border-color:var(--app-accent)}
.audio-player #player-play{background:var(--app-accent);color:var(--app-on-accent);border-color:var(--app-accent)}
.audio-player button[aria-pressed=true]{background:var(--app-accent);border-color:var(--app-accent);color:var(--app-on-accent)}
.audio-player .player-library{scrollbar-color:var(--app-accent) transparent}
.audio-player .player-track{border-bottom:1px solid var(--player-hair)}
.audio-player .player-track.current{background:color-mix(in srgb,var(--app-accent) 12%,var(--app-surface));border-radius:12px}
.audio-player .player-track .album-cover{border:1px solid var(--player-hair);background:var(--app-surface);color:var(--app-accent-ink)}
.audio-player .player-track-play:is(:hover,:focus-visible) .album-cover,.audio-player .album-heading:hover .album-cover{transform:rotate(-7deg) scale(1.08)}
.audio-player .album-cover{transition:transform .28s var(--ease)}
.audio-player .album-song,.audio-player .player-volume{border-color:var(--player-hair)}
.audio-player .player-album-filter select{background:var(--app-surface);color:var(--app-text);border-color:var(--player-hair)}
.audio-player .player-empty{color:var(--app-muted);opacity:1}
@media (max-width:600px){body:is([data-theme=inkwash],[data-theme=sakura]) .logo-jp{font-size:clamp(2rem,9vw,3.4rem)}.logo-kicker,.logo-caption{white-space:normal}}
@media (prefers-reduced-motion:reduce){.setup-entry .device-carousel>g{animation:none}.setup-entry .device-tv{opacity:1}}
.reduced-motion .setup-entry .device-carousel>g{animation:none}.reduced-motion .setup-entry .device-tv{opacity:1}
/* Compact mark in the navigation echoes the selected title treatment. */
.brand{font-weight:900;letter-spacing:-.035em}
.brand-icon{border:2px solid currentColor;border-radius:50%;background:transparent;color:var(--app-accent-ink);transform:rotate(-12deg)}
.brand-year{color:var(--app-accent-ink)}
body:is([data-theme=arcade],[data-theme=terminal],[data-theme=lcd],[data-theme=retrocomputer],[data-theme=grid]) .brand{font-family:monospace;letter-spacing:-.065em}
body:is([data-theme=chrome],[data-theme=mercury],[data-theme=holoprism]) .brand{transform:skewX(-8deg)}
body[data-theme=cyber] .logo-pong{filter:drop-shadow(.025em .025em 0 var(--app-accent2)) drop-shadow(.045em .045em 0 var(--app-text))}
body[data-theme=blueprint] .logo-pong{color:transparent;-webkit-text-stroke:2px var(--app-text);filter:drop-shadow(.03em .04em 0 var(--app-accent-ink))}
body:is([data-theme=magma],[data-theme=basalt],[data-theme=emberstorm],[data-theme=lavalake]) .logo-pong{color:var(--app-accent-ink);filter:drop-shadow(.025em .035em 0 var(--app-accent2)) drop-shadow(.055em .075em 0 var(--app-text))}

/* Collectible previews are interactive targets; the canvas itself turns in real 3D. */
.shop-preview{appearance:none;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:138px;margin:0;padding:12px 6px;border:1px solid transparent;border-radius:12px;background:transparent;color:inherit;cursor:pointer;position:relative;font:inherit;transition:background .18s,border-color .18s,transform .22s cubic-bezier(.2,.8,.2,1)}
.shop-preview strong{font-weight:800;text-align:center;font-size:.85rem}
.shop-preview:is(:hover,:focus-visible,[aria-pressed=true]){border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 9%,transparent)}
.shop-preview canvas{pointer-events:none;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.shop-preview:is(:hover,:focus-visible) canvas{transform:translateY(-4px) scale(1.12)}
.preview-360{position:absolute;top:7px;right:8px;font-size:.65rem;font-weight:900;letter-spacing:.08em;opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s}
.shop-preview:is(:hover,:focus-visible,[aria-pressed=true]) .preview-360{opacity:1;transform:none}
.shop-card{transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s}
.shop-card:focus-within{border-color:var(--app-accent);box-shadow:0 8px 26px color-mix(in srgb,var(--app-accent) 12%,transparent)}
.skin-button,.ball-button,.trail-button{transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .18s,background .18s}
:is(.skin-button,.ball-button,.trail-button):is(:hover,:focus-visible){transform:translateY(-3px);border-color:var(--app-accent)}
:is(.skin-button,.ball-button,.trail-button):active{transform:scale(.96)}
.cosmetic-inspect-hint{margin:12px 0;font-size:.78rem;color:var(--app-muted);line-height:1.5}
.ball-finish-options{display:flex;flex-wrap:wrap;gap:7px}
.ball-finish-options button{min-height:40px;padding:8px 13px;border:1px solid var(--app-border);border-radius:8px;background:color-mix(in srgb,var(--app-panel) 80%,transparent);color:var(--app-text);font:700 .78rem var(--font-ui);cursor:pointer;transition:background .18s,transform .18s}
.ball-finish-options button[aria-pressed=true]{background:var(--app-accent);border-color:var(--app-accent);color:var(--app-on-accent)}
.ball-finish-options button:is(:hover,:focus-visible){transform:translateY(-2px)}
.inspect-fixed-red{align-self:center;padding:8px 12px;border-radius:999px;background:linear-gradient(110deg,#ab151e,#ed3c42 54%,#a91a20);color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.04em;box-shadow:inset 0 1px 0 #ffffff55,0 5px 18px #970e2040}
.cosmetic-inspector.dialog{width:min(840px,94vw);height:min(800px,92vh);height:min(800px,92dvh);max-height:92vh;max-height:92dvh;max-width:94vw;padding:22px;overflow:hidden;border-radius:24px;border:1px solid var(--app-border);background:var(--app-panel);color:var(--app-text)}
.cosmetic-inspector.dialog[open]{display:grid;grid-template-rows:auto minmax(130px,1fr) auto auto auto;gap:14px}
.inspect-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.inspect-heading small{color:var(--app-accent-ink);font-weight:900;letter-spacing:.2em}.inspect-heading h2{margin:5px 0 0;font-size:clamp(1.25rem,3vw,2rem);font-weight:900}.inspect-heading button{width:44px;height:44px;flex-shrink:0}
.inspect-stage{position:relative;min-height:0;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--app-accent) 13%,transparent),transparent 70%)}
.inspect-stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.inspect-stage canvas:active{cursor:grabbing}.inspect-stage canvas:focus-visible{outline:2px solid var(--app-accent);outline-offset:-3px}
.inspect-step{position:absolute;top:50%;z-index:2;width:clamp(40px,5vw,54px);height:clamp(40px,5vw,54px);transform:translateY(-50%);border:1px solid var(--app-border);border-radius:50%;background:color-mix(in srgb,var(--app-panel) 88%,transparent);color:var(--app-text);font:700 clamp(2rem,4vw,2.6rem)/1 var(--font-ui);box-shadow:0 8px 24px #0002;cursor:pointer;transition:background .18s,transform .18s}.inspect-step:is(:hover,:focus-visible){background:var(--app-accent);color:var(--app-on-accent);transform:translateY(-50%) scale(1.07)}.inspect-prev{left:10px}.inspect-next{right:10px}
.inspect-stage p{position:absolute;bottom:6px;left:0;right:0;text-align:center;margin:0;font-size:.75rem;color:var(--app-muted);pointer-events:none}.inspect-degrees{position:absolute;bottom:6px;left:12px;font:800 .8rem monospace;color:var(--app-accent-ink);pointer-events:none}
.inspect-transport{display:flex;align-items:center;justify-content:center;gap:8px}.inspect-transport button{min-width:44px;min-height:44px;padding:8px 14px;border:1px solid var(--app-border);border-radius:10px;background:var(--app-panel);color:var(--app-text);font:700 .8rem var(--font-ui);cursor:pointer}.inspect-transport button:hover{background:color-mix(in srgb,var(--app-accent) 15%,var(--app-panel))}.inspect-transport label{display:flex;align-items:center;gap:8px;font-size:.75rem;margin-left:8px}.inspect-transport input{width:90px;accent-color:var(--app-accent)}
.inspect-colors{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-width:0}.inspect-color-heading{font-size:.76rem;font-weight:800;white-space:nowrap;color:var(--app-muted)}.inspect-color-list{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;min-width:0;padding:6px 4px 10px;scrollbar-width:thin;overscroll-behavior-x:contain}.inspect-color-choice{flex:0 0 35px;width:35px;height:35px;border:2px solid color-mix(in srgb,var(--app-text) 35%,transparent);border-radius:50%;background:var(--inspect-swatch);box-shadow:inset 0 1px 3px #ffffff66,0 2px 8px #0004;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s}.inspect-color-choice:is(:hover,:focus-visible){transform:translateY(-3px) scale(1.1);border-color:var(--app-accent)}.inspect-color-choice[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px var(--app-accent),0 3px 12px #0006}.cosmetic-inspector [hidden]{display:none!important}
@media(max-width:600px){.cosmetic-inspector.dialog{padding:14px;border-radius:18px}.cosmetic-inspector.dialog[open]{gap:10px}.inspect-colors{grid-template-columns:minmax(0,1fr) auto;gap:5px}.inspect-color-heading{grid-column:1/-1}.inspect-stage p{font-size:.65rem}.inspect-degrees{font-size:.65rem}.inspect-step{width:38px;height:38px;font-size:2rem}.inspect-transport{gap:4px}.inspect-transport label{margin-left:0;gap:4px}.inspect-transport input{width:60px}}
@media(max-height:520px) and (orientation:landscape){.cosmetic-inspector.dialog[open]{grid-template-columns:minmax(180px,1fr) minmax(230px,.8fr);grid-template-rows:auto 1fr auto auto;gap:8px}.inspect-heading{grid-column:1/-1}.inspect-stage{grid-row:2/5}.inspect-transport{flex-wrap:wrap}.inspect-colors{gap:8px}}
.setup-entry .robot-face{transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:reduce){.shop-preview,.shop-preview canvas,.shop-card,.skin-button,.ball-button,.trail-button,.ball-finish-options button{transition:none}}

/* Atelier: a single, predictable scroll area, with tabs and action always in reach. */
html body[data-view=workshop]:not(.playing) #workshop-panel{display:flex;flex-direction:column;min-height:0;overflow-y:auto!important;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--app-border) transparent}
html body[data-view=workshop]:not(.playing) #workshop-panel>.workshop-pane:not([hidden]){flex:0 0 auto!important;min-height:auto!important;overflow:visible!important;padding-right:0}
html body[data-view=workshop]:not(.playing) #workshop-panel>.workshop-tabs{position:sticky;top:0;z-index:5;flex:none;background:var(--app-panel);box-shadow:0 8px 18px color-mix(in srgb,var(--app-page) 70%,transparent)}
html body[data-view=match][data-setup-step=opponent]:not(.playing) #preset-solo .solo-versus{font:900 19px/1 var(--font-display);font-style:italic;letter-spacing:-.08em;fill:var(--app-on-accent);stroke:var(--app-accent);stroke-width:1.2px;paint-order:stroke fill}
#preset-solo:is(:hover,:focus-visible,.selected) .solo-versus{animation:versus-pop .48s cubic-bezier(.2,.9,.2,1.2) both}
@keyframes versus-pop{0%{opacity:.4;transform:scale(.72)}65%{opacity:1;transform:scale(1.15)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){#preset-solo:is(:hover,:focus-visible,.selected) .solo-versus{animation:none}}
.color-more{margin-top:10px;min-width:0;width:100%;max-width:100%;overflow:hidden;box-sizing:border-box;border:1px solid var(--app-border);border-radius:12px;background:color-mix(in srgb,var(--app-panel) 82%,transparent)}
.color-more summary{cursor:pointer;list-style:none;padding:10px 14px;font:700 11px/1.3 var(--font-display);letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between;gap:8px}
.color-more summary::-webkit-details-marker{display:none}
.color-more summary::after{content:'+';font-size:17px;line-height:1}
.color-more[open] summary::after{content:'−'}
.color-more summary span{margin-left:auto;opacity:.6}
.color-more>.color-palette{min-width:0;max-width:100%;grid-template-columns:repeat(6,minmax(0,1fr));padding:0 12px 12px;box-sizing:border-box}
#workshop-panel .color-picker,#workshop-panel .color-palette{min-width:0;max-width:100%}
#workshop-panel .color-swatch{width:clamp(26px,3vw,38px);height:clamp(26px,3vw,38px);min-height:0;aspect-ratio:1;justify-self:center}

.inspect-material-name{font-size:.54em;font-weight:500;opacity:.7;letter-spacing:0;vertical-align:middle}.cosmetic-color-name{font-size:.66em;font-weight:500;opacity:.7;letter-spacing:0}

/* Catalogue controls and labelled colour samples. */
.catalog-sort{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--app-muted);font:700 .72rem var(--font-ui);letter-spacing:.04em}
.catalog-sort select{min-width:0;max-width:220px;padding:8px 28px 8px 10px;border:1px solid var(--app-border);border-radius:9px;background:var(--app-surface);color:var(--app-text);font:600 .76rem var(--font-ui)}
.shop-sort{padding:8px 0 12px;justify-content:flex-end}
#workshop-panel .color-palette,#workshop-panel .color-more>.color-palette{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
#workshop-panel .color-swatch{width:100%;height:auto;min-height:52px;aspect-ratio:auto;justify-self:stretch;display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:10px;background:color-mix(in srgb,var(--app-surface) 88%,transparent);text-align:left;box-shadow:0 0 0 1px var(--app-border)}
#workshop-panel .color-swatch:hover{transform:translateY(-2px)}
#workshop-panel .color-swatch[aria-pressed=true]{border-color:var(--app-accent);box-shadow:0 0 0 1px var(--app-accent)}
#workshop-panel .color-swatch .color-dot{position:relative;display:block;flex:none;width:32px;height:32px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #ffffff66;overflow:hidden}
#workshop-panel .color-swatch.fx canvas{position:absolute;inset:0;width:100%;height:100%}
#workshop-panel .color-swatch .color-name{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--app-text);font:700 .72rem/1.2 var(--font-ui);letter-spacing:0;text-transform:none}
#workshop-panel .color-swatch .color-name small{display:block;margin-top:3px;color:var(--app-muted);font:500 .61rem/1.2 var(--font-ui)}
@media(max-width:360px){#workshop-panel .color-palette,#workshop-panel .color-more>.color-palette{grid-template-columns:1fr}}
@media(max-width:350px) and (orientation:portrait){
 #workshop-panel .workshop-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 #workshop-panel .workshop-tabs button{min-height:36px;overflow:visible;text-overflow:clip;white-space:normal;font-size:.7rem;line-height:1.1}
 #workshop-panel .skin-grid,#workshop-panel .ball-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #roster-summary{grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #setup-roster-step{height:100%;max-height:100%;overflow:hidden}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #setup-roster-step>#roster-summary{flex:1 1 auto;min-height:0;overflow-y:auto}
}

/* Blockout shares the game's clean, solid visual language. World colours remain the only decoration. */
body[data-view=blockout]:not(.playing),
:is(#blockout-dialog,#bo-shop-dialog,#bo-rank-dialog){
 --bos:color-mix(in srgb,var(--bo-sky,#171b36) 82%,#070b18);
 --boc:var(--bo-glow,#77dff0);
 --app-page:#101425;
 --app-surface:#1a2034;
 --app-panel:#171c30;
 --app-text:#f5f7ff;
 --app-muted:#c1c9df;
 --app-border:#69718c;
 --app-accent:var(--boc);
 --app-accent-end:var(--boc);
 --app-on-accent:#09111b;
 --app-accent-ink:var(--boc);
 color:var(--app-text);
}
html body[data-view=blockout]:not(.playing) .header{
 border-bottom:1px solid #ffffff29;
 background:#101425;
}
html body[data-view=blockout]:not(.playing) :is(.bo-exit,.bo-nav-item){
 border:1px solid #ffffff35;
 border-radius:12px;
 background:#20263b;
 color:#f5f7ff;
 box-shadow:none;
}
html body[data-view=blockout]:not(.playing) :is(.bo-exit,.bo-nav-item):is(:hover,:focus-visible){border-color:var(--boc);background:#2a3048;box-shadow:none}
html body[data-view=blockout]:not(.playing) .bo-nav-item.active{border-color:var(--boc);background:var(--boc);color:#09111b;box-shadow:none}
html body[data-view=blockout]:not(.playing) .bo-map .bo-world{
 background:linear-gradient(170deg,color-mix(in srgb,var(--sky) 88%,#070b18),color-mix(in srgb,var(--ground) 57%,#070b18));
 border-top:1px solid #ffffff24;
}
html body[data-view=blockout]:not(.playing) .bo-world::before{
 inset:15% 0 0;
 opacity:.5;
 background:radial-gradient(ellipse 65% 35% at 18% 78%,color-mix(in srgb,var(--glow) 18%,transparent),transparent),radial-gradient(ellipse 55% 28% at 90% 20%,color-mix(in srgb,var(--road) 15%,transparent),transparent);
}
html body[data-view=blockout]:not(.playing) .bo-world::after{
 content:"";position:absolute;inset:10% 0 0;pointer-events:none;opacity:.25;
 background:linear-gradient(transparent 70%,color-mix(in srgb,var(--road) 14%,transparent));
}
html body[data-view=blockout]:not(.playing) .bo-world[data-biome="0"]::after{background:repeating-linear-gradient(90deg,transparent 0 11%,#081128 11% 15%,transparent 15% 20%) bottom/100% 25% no-repeat,linear-gradient(transparent 70%,#081128 95%)}
html body[data-view=blockout]:not(.playing) .bo-world[data-biome="1"]::after{background:repeating-linear-gradient(120deg,transparent 0 11%,#c49bf544 11% 12%,transparent 12% 25%) center/100% 45% no-repeat}
html body[data-view=blockout]:not(.playing) .bo-world[data-biome="2"]::after{background:radial-gradient(ellipse at 50% 105%,#ff9a423d,transparent 58%)}
html body[data-view=blockout]:not(.playing) .bo-world[data-biome="3"]::after{background:repeating-radial-gradient(ellipse at 55% 105%,transparent 0 42px,#b4fff522 43px 45px,transparent 46px 88px)}
html body[data-view=blockout]:not(.playing) .bo-world[data-biome="4"]::after{background:repeating-linear-gradient(115deg,transparent 0 50px,#b9ff8b27 52px 56px,transparent 58px 110px)}
html body[data-view=blockout]:not(.playing) .bo-world[data-biome="5"]::after{background:linear-gradient(165deg,transparent 55%,#f7d68b22 55% 58%,transparent 58% 70%,#f7d68b1c 70% 73%,transparent 73%)}
html body[data-view=blockout]:not(.playing) .bo-world[data-biome="6"]::after{background:repeating-linear-gradient(145deg,transparent 0 70px,#d2eaff24 72px 75px,transparent 78px 150px)}
html body[data-view=blockout]:not(.playing) .bo-world[data-biome="7"]::after{background:linear-gradient(125deg,transparent 45%,#cbb7ff38 46%,transparent 47% 70%,#cbb7ff2e 71%,transparent 72%)}
html body[data-view=blockout]:not(.playing) .bo-world[data-biome="8"]::after{background:repeating-linear-gradient(90deg,transparent 0 72px,#e7a66b1e 73px 77px,transparent 78px 150px)}
html body[data-view=blockout]:not(.playing) .bo-world[data-biome="9"]::after{background:radial-gradient(circle at 70% 72%,#ffffff5c 0 2px,transparent 3px),radial-gradient(circle at 22% 28%,#ffffff4d 0 1px,transparent 3px);background-size:145px 130px,210px 170px}
html body[data-view=blockout]:not(.playing) .bo-world.locked{filter:none}
html body[data-view=blockout]:not(.playing) .bo-world.locked .bo-track{opacity:.62}
html body[data-view=blockout]:not(.playing) .bo-world-head{color:#f5f7ff}
html body[data-view=blockout]:not(.playing) .bo-world-head small{color:var(--road)}
html body[data-view=blockout]:not(.playing) .bo-world-head>span{color:#f2d782}
html body[data-view=blockout]:not(.playing) .bo-road-base{stroke:#ffffff3b;stroke-width:9}
html body[data-view=blockout]:not(.playing) .bo-road-done{stroke:var(--road);stroke-width:5;stroke-dasharray:none;filter:none}
html body[data-view=blockout]:not(.playing) .bo-node{
 border:2px solid color-mix(in srgb,var(--road) 80%,#fff);
 background:#202941;
 color:#f7f8ff;
 box-shadow:0 3px 0 #060b17a8;
 font-weight:900;
}
html body[data-view=blockout]:not(.playing) .bo-node:is(:hover,:focus-visible){box-shadow:0 0 0 4px #ffffff3b,0 3px 0 #060b17a8}
html body[data-view=blockout]:not(.playing) .bo-node.current{border-color:#fff;background:var(--road);color:#111626;box-shadow:0 0 0 5px color-mix(in srgb,var(--road) 28%,transparent)}
html body[data-view=blockout]:not(.playing) .bo-node.hard{border-color:#ffac87;background:#8f3040;color:#fff;box-shadow:0 3px 0 #30111b}
html body[data-view=blockout]:not(.playing) .bo-node.hard::after{background:#ffba8e;color:#2a1220}
html body[data-view=blockout]:not(.playing) .bo-node.boss{border-color:#ffd795;background:#a73d50;color:#fff;box-shadow:0 0 0 4px #ffd79538,0 4px 0 #321321}
html body[data-view=blockout]:not(.playing) .bo-node.locked{border-color:#9ba5bd;background:#343b50;color:#f5f7ff;box-shadow:0 3px 0 #101425}
html body[data-view=blockout]:not(.playing) .bo-node.boss.locked{background:#493944}
html body[data-view=blockout]:not(.playing) .bo-node.current:is(.hard,.boss){color:#fff}
html body[data-view=blockout]:not(.playing) .bo-chest{box-shadow:0 2px 0 #161927}
html body[data-view=blockout]:not(.playing) .bo-you{background:#fff;box-shadow:0 0 0 3px #161927}
html body[data-view=blockout][data-view]:not(.playing) .bo-world-picker select{border:1px solid #ffffff5c;background:#20263b;color:#f5f7ff;box-shadow:none}
html body[data-view=blockout]:not(.playing) .bo-world-picker select option{background:#20263b;color:#f5f7ff}
html body[data-view=blockout]:not(.playing) .bo-world-step{color:#f5f7ff;text-shadow:none}
html body[data-view=blockout]:not(.playing) .bo-wallet{border-color:#ffffff50;background:#20263b;color:#f5f7ff}
:is(#blockout-dialog,#bo-shop-dialog,#bo-rank-dialog){border:1px solid #ffffff40;background:#101425;color:#f5f7ff;box-shadow:0 24px 70px #0009}
:is(#blockout-dialog,#bo-shop-dialog,#bo-rank-dialog) :is(.bo-loadout-panel,.bo-shop-item,.bo-rank-list li,.bo-rank-me){background:#1b2135;border-color:#ffffff30;box-shadow:none}
:is(#blockout-dialog,#bo-shop-dialog,#bo-rank-dialog) :is(.section-caption,.bo-shop-section){color:var(--boc)}
:is(#blockout-dialog,#bo-shop-dialog,#bo-rank-dialog) .small-button{color:#f5f7ff;background:#252c43;border-color:#ffffff50}
:is(#blockout-dialog,#bo-shop-dialog,#bo-rank-dialog) .primary-button{background:var(--boc);color:#09111b;box-shadow:none}
:is(#blockout-dialog,#bo-shop-dialog,#bo-rank-dialog) :is(input,select){color:#f5f7ff;background:#252c43;border-color:#ffffff50}
:is(#blockout-dialog,#bo-shop-dialog,#bo-rank-dialog) .bo-kind[data-kind=hard]{color:#ffb4a2;border-color:#ffb4a2;background:#7a2d3933}
:is(#blockout-dialog,#bo-shop-dialog,#bo-rank-dialog) .bo-kind[data-kind=boss]{color:#ffe0a1;border-color:#ffe0a1;background:#7e542633}
:is(#blockout-dialog,#bo-shop-dialog,#bo-rank-dialog) .bo-booster-icon{background:#30364e;border-color:color-mix(in srgb,var(--bo-item-color) 65%,#30364e)}
:is(#blockout-dialog,#bo-shop-dialog,#bo-rank-dialog) .bo-booster.selected{background:#303d4a;border-color:var(--bo-item-color);box-shadow:inset 0 0 0 1px var(--bo-item-color)}
:is(#blockout-dialog,#bo-shop-dialog,#bo-rank-dialog) .bo-rank-list li.me{border:1px solid var(--boc);background:#293346}
#bo-shop-dialog .bo-shop-grid{align-content:start}
#bo-shop-dialog .bo-shop-col{min-height:auto}
#bo-shop-dialog .bo-shop-list{flex:none;grid-auto-rows:minmax(112px,auto)}
#bo-shop-dialog .bo-shop-item{min-height:112px}
body[data-arena-kind=blockout].playing .bo-hud:not([hidden]){border-color:#ffffff50;background:#101425ed;box-shadow:0 8px 22px #0005}
@media (prefers-reduced-motion:reduce){html body[data-view=blockout]:not(.playing) .bo-node.current{animation:none}}
@media (orientation:landscape) and (max-height:520px){
 html body #blockout-dialog .bo-booster strong{display:block;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;font-size:.54rem;line-height:1.05}
}

/* World landmarks stay static and outside the route; two inks carry the biome palette. */
html body[data-view=blockout]:not(.playing) .bo-world::after{display:none}
html body[data-view=blockout]:not(.playing) .bo-map .bo-world{background:linear-gradient(155deg,var(--sky),var(--ground))}
.bo-scenery{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:var(--glow);fill-opacity:.15;stroke:none}
.bo-scenery .bo-detail{fill:none;stroke:var(--road);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.55;vector-effect:non-scaling-stroke}
html body[data-view=blockout]:not(.playing) .bo-world-head{background:linear-gradient(var(--sky) 65%,transparent);padding-bottom:18px}
html body[data-view=blockout]:not(.playing) .bo-node:not(.hard):not(.boss):not(.current){background:color-mix(in srgb,var(--sky) 85%,#111827)}

/* The 2D/3D choice remains on the court setup where that is its only location. */
#setup-geometry[hidden],#team-formation-row[hidden]{display:none!important}
body[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .setup-options{grid-template-rows:none;grid-auto-rows:min-content;align-content:start;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
body[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step #setup-geometry{display:flex;grid-column:1;flex:none;min-height:0;margin:0;border-radius:clamp(17px,3vw,30px)}
body[data-view=match][data-setup-step=court]:not(.playing) #setup-geometry .select-label{min-width:0;display:flex;flex:1;flex-direction:column;align-items:stretch;gap:5px}
body[data-view=match][data-setup-step=court]:not(.playing) #setup-geometry select{width:100%;min-width:0;min-height:40px}
@media(max-width:420px){body[data-view=match][data-setup-step=court]:not(.playing) #setup-geometry .select-label{font-size:.67rem}}
/* A quiet version label sits inside the home status area, clear of the bottom navigation. */
html body.mobile .home .home-version{font-size:.64rem}
html body .home .home-hero{position:relative}
html body .home .home-version{position:absolute;top:6px;right:6px;align-self:auto;margin:0;padding:2px 4px;border-radius:4px;background:color-mix(in srgb,var(--app-page) 78%,transparent);white-space:nowrap}
html body.mobile .home .home-version{top:0;right:0}
html body .home .home-version,html body.mobile .home .home-version{top:auto;bottom:-27px;right:0;height:auto}

/* Mobile match setup: the controls own the screen; the court preview no longer squeezes them. */
.setup-layout{display:none}
html body.mobile[data-view=match][data-setup-step=court]:not(.playing) .play-layout,
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .play-layout{display:flex;flex-direction:column;min-height:0;overflow:hidden}
html body.mobile[data-view=match]:is([data-setup-step=court],[data-setup-step=participants]):not(.playing) .arena-section{display:none!important}
html body.mobile[data-view=match]:is([data-setup-step=court],[data-setup-step=participants]):not(.playing) #match-panel{display:flex;flex:1 1 auto;min-height:0;height:100%;overflow:hidden;order:0}
html body.mobile[data-view=match]:is([data-setup-step=court],[data-setup-step=participants]):not(.playing) #setup-back{display:none}
html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step{height:100%;min-height:0;max-height:100%;overflow:hidden}
html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .setup-options{flex:1 1 auto;min-height:0;overflow-y:auto;grid-template-rows:none;grid-auto-rows:max-content;align-content:start;gap:8px;padding-bottom:8px}
html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step :is(.setup-choice,.game-mode-section){min-height:max-content;flex:none}
html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step :is(.arena-options,.ruleset-options,.mode-buttons){flex:none;grid-auto-rows:max-content}
html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-next{position:static;flex:none;min-height:48px;margin:0;box-shadow:none}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #setup-roster-step{display:flex;flex:1 1 auto;height:100%;min-height:0;max-height:100%;justify-content:flex-start;gap:6px;padding:0;overflow:hidden}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #setup-roster-step>#roster-summary{display:grid;flex:1 1 auto;min-height:0;max-height:none;overflow:hidden;align-content:start;gap:6px}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-roster-heading{flex:none;min-height:0;padding:5px 8px}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-card{display:grid;min-height:0;align-content:start;gap:3px;padding:6px 7px;border-radius:12px}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-id{min-height:17px;gap:4px}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-id small,
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config canvas{display:none}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto auto;gap:3px 5px}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-fields{display:contents}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config label{display:grid;grid-row:auto!important;min-width:0;gap:1px;font-size:.55rem}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-palette{grid-column:1/-1;grid-row:2!important;justify-items:stretch}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-palette label{min-width:0}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config select{width:100%;max-width:none;height:30px;min-height:30px!important;padding:2px 17px 2px 5px;font-size:.66rem;text-overflow:ellipsis}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer{display:grid;flex:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:0!important;padding:0;border:0;align-items:end}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer .setup-theme{display:none}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer .setup-layout{display:grid;grid-column:2;grid-row:1;min-width:0;gap:2px;font-size:.66rem}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer #quick-difficulty-row{display:grid;grid-column:1;grid-row:1;min-width:0;gap:2px;font-size:.66rem}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer #quick-difficulty-row[hidden]{display:none}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer #quick-difficulty-row[hidden]~.setup-layout{grid-column:1/-1}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer select{width:100%!important;min-height:35px;padding:4px 23px 4px 7px;font-size:.69rem}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer #start-button{display:flex;grid-column:1/-1;grid-row:2;justify-self:stretch;width:100%;min-height:48px;margin:0;padding:4px 12px;font-size:.84rem}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer #start-button span:first-child{font-size:.84rem}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer #start-button small{display:none}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer :is(.start-note,.online-shortcut){display:none}
@media (orientation:portrait){
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #roster-summary{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:min-content}
}
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #roster-summary{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:min-content}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(150px,1.25fr)}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer #start-button{grid-column:3;grid-row:1;min-height:43px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer #quick-difficulty-row[hidden]~.setup-layout{grid-column:1/3}
}
.color-pages{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 10px 12px;color:var(--app-muted);font:700 .7rem var(--font-ui)}
.color-pages button{display:grid;place-items:center;width:38px;height:34px;border:1px solid var(--app-border);border-radius:9px;background:var(--app-surface);color:var(--app-text);font-size:1.2rem}
.color-pages button:disabled{opacity:.35}
/* Each participant keeps all three choices on one row, so four players fit above the launch controls. */
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:auto;align-items:end}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-palette{grid-column:3;grid-row:1!important}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-id{min-height:16px}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-id strong{font-size:.6rem}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config label{font-size:.5rem}
@media (orientation:portrait){
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #roster-summary{grid-template-columns:minmax(0,1fr);grid-auto-rows:min-content}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-card{padding:4px 7px;gap:2px}
}
@media (orientation:portrait) and (max-height:650px){
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-roster-heading{padding:3px 6px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-roster-heading h3{font-size:0}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-roster-heading h3::after{content:'Participants';font:900 italic .82rem var(--font-display)}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #roster-size-action{min-height:30px;font-size:.58rem;padding:2px 6px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-id .team-marker{min-width:22px;height:21px;padding:0 3px;font-size:.54rem}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-config select{height:28px;min-height:28px!important}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer select{min-height:30px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer #start-button{min-height:40px}
}
@media (orientation:portrait) and (max-height:650px){
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-id .team-marker{height:19px;min-width:20px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #quick-difficulty-row select{min-height:30px!important;height:30px}
}
html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step #setup-geometry{flex-direction:row!important;align-items:stretch;gap:6px}
html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-geometry .select-label{flex:1 1 0;min-width:0}
html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-geometry select{min-height:36px;padding-inline:6px 20px;font-size:.7rem}
/* Against the AI, mobile players choose 2D/3D on the participants screen only. */
html body.mobile[data-view=match][data-setup-step=court][data-opponent-choice=solo]:not(.playing) #setup-geometry .layout-select{display:none!important}
html body.mobile[data-view=match][data-setup-step=court][data-opponent-choice=solo][data-match-mode=duel]:not(.playing) #setup-geometry{display:none!important}
/* Short portrait screens scroll the complete court form, so no rule sits behind Suivant. */
@media (orientation:portrait) and (max-height:650px){
 html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-court-step .setup-options{flex:none;overflow:visible;padding-bottom:0}
html body.mobile[data-view=match][data-setup-step=court]:not(.playing) #setup-next{margin-top:8px}
}
/* The header uses the same two-line wordmark as the home screen at navigation size. */
body .header .brand{align-items:center;min-width:110px;min-height:52px;letter-spacing:normal;text-decoration:none}
body .header .brand-lockup{display:flex!important;flex-direction:column;align-items:flex-start;gap:1px;line-height:.85}
body .header .brand-pong{color:var(--app-logo);font:900 1.66rem/.85 var(--font-ui);letter-spacing:-.01em;-webkit-text-stroke:1px var(--app-logo);paint-order:stroke fill;filter:drop-shadow(1px 2px 0 color-mix(in srgb,var(--app-accent2) 28%,transparent))}
body .header .brand-year{margin-top:.07em;color:var(--app-logo);font:900 1.03rem/.85 var(--font-ui);letter-spacing:-.01em;-webkit-text-stroke:1px var(--app-logo);paint-order:stroke fill;text-shadow:none;filter:drop-shadow(1px 2px 0 color-mix(in srgb,var(--app-accent2) 28%,transparent))}
body:is([data-theme=inkwash],[data-theme=sakura]) .header .brand::after{content:none}
/* Team formation belongs with the players; the launch control keeps its own grid cell. */
body[data-setup-step=participants]:not(.playing) .setup-footer #team-formation-row:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr);grid-column:1;grid-row:2;min-width:0;gap:4px;font-size:.7rem}
body[data-setup-step=participants]:not(.playing) .setup-footer #team-formation-row select{width:100%;min-width:0}
html body[data-setup-step=participants]:not(.playing) .setup-footer #team-formation-row select{width:100%!important;max-width:none;flex:none}
body:not(.mobile)[data-setup-step=participants]:not(.playing) .setup-footer:has(#team-formation-row:not([hidden])) .start-note{grid-column:2;grid-row:2}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer #team-formation-row:not([hidden]){grid-column:1/-1;grid-row:2;gap:2px;font-size:.66rem}
html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer:has(#team-formation-row:not([hidden])) #start-button{grid-row:3}
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer:has(#team-formation-row:not([hidden])){grid-template-columns:repeat(3,minmax(0,1fr)) minmax(135px,1.2fr)}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer #team-formation-row:not([hidden]){grid-column:3;grid-row:1}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer:has(#team-formation-row:not([hidden])) #start-button{grid-column:4;grid-row:1}
}
@media (orientation:portrait) and (max-height:650px){
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) #setup-roster-step .setup-player-config select{height:26px;min-height:26px!important}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer #team-formation-row:not([hidden]){grid-column:1;grid-row:2}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer:has(#team-formation-row:not([hidden])) #start-button{grid-column:2;grid-row:2;min-height:36px;padding:4px 7px}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer:has(#team-formation-row:not([hidden])) #start-button span:first-child{font-size:.65rem;white-space:nowrap}
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-footer:has(#team-formation-row:not([hidden])) #start-button span:last-child{display:none}
}
@media (orientation:landscape) and (max-height:520px){
 html body.mobile[data-view=match][data-setup-step=participants]:not(.playing) .setup-player-id .team-marker{min-width:22px;height:21px;padding:0 3px;font-size:.54rem}
}
/* Daily hub: independently scrollable missions and a boss gallery inside the full-screen game shell. */
.challenge-view:not([hidden]){grid-template-rows:auto auto minmax(0,1fr);gap:12px}
.challenge-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(760px,100%);margin:0 auto;padding:4px;border:1px solid var(--app-border);border-radius:16px;background:var(--app-panel)}
.challenge-tabs button{min-height:42px;border:0;border-radius:12px;background:transparent;color:var(--app-muted);font:800 clamp(.7rem,1.3vw,.9rem) var(--font-display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.challenge-tabs button[aria-selected=true]{background:linear-gradient(110deg,color-mix(in srgb,var(--app-accent) 25%,var(--app-surface)),var(--app-surface));color:var(--app-text);box-shadow:inset 0 0 0 1px var(--app-accent),0 0 16px color-mix(in srgb,var(--app-accent) 18%,transparent)}
.challenge-panel{min-height:0;overflow:auto;overscroll-behavior:contain;width:min(1480px,100%);margin:0 auto;padding:2px 4px 14px}
.quest-intro,.boss-gallery-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0 0 14px}.quest-intro h2,.boss-gallery-head h2{margin:3px 0;color:var(--app-text);font:900 clamp(1.1rem,2.5vw,1.8rem) var(--font-display)}.quest-intro p,.boss-gallery-head p{margin:0;color:var(--app-muted);font-size:.83rem;line-height:1.35}
.quest-boost-status{flex:none;padding:10px 14px;border:1px solid var(--app-border);border-radius:12px;background:var(--app-panel);font:800 .76rem var(--font-display);letter-spacing:.06em;text-transform:uppercase}.quest-boost-status.active{color:var(--app-accent);border-color:var(--app-accent);box-shadow:0 0 18px color-mix(in srgb,var(--app-accent) 22%,transparent)}
.daily-quest-list{display:grid;gap:14px}.quest-tier h3{margin:0 0 8px;color:var(--app-accent);font:900 .72rem var(--font-display);letter-spacing:.16em}.quest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.quest-card{display:grid;grid-template-rows:auto auto 1fr auto auto;gap:8px;min-width:0;padding:14px;border:1px solid var(--app-border);border-radius:16px;background:linear-gradient(155deg,color-mix(in srgb,var(--app-accent) 6%,var(--app-panel)),var(--app-panel));box-shadow:inset 0 1px #ffffff12}.quest-card.complete{border-color:color-mix(in srgb,var(--app-accent) 55%,var(--app-border))}.quest-card.claimed{opacity:.7}.quest-reward{justify-self:start;padding:4px 8px;border:1px solid color-mix(in srgb,var(--app-accent) 50%,transparent);border-radius:7px;color:var(--app-accent);font:800 .63rem var(--font-display);letter-spacing:.08em}.quest-card h4{margin:0;font:850 1rem var(--font-display);color:var(--app-text)}.quest-card p{margin:0;color:var(--app-muted);font-size:.78rem;line-height:1.35}.quest-progress{height:6px;border-radius:20px;background:var(--app-border);overflow:hidden}.quest-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--app-accent),#cb8cff)}.quest-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.quest-bottom small{color:var(--app-muted);font:800 .7rem var(--font-display)}.quest-bottom button{min-height:32px;padding:5px 12px;border:1px solid var(--app-accent);border-radius:8px;background:color-mix(in srgb,var(--app-accent) 20%,var(--app-panel));color:var(--app-text);font:800 .7rem var(--font-display);cursor:pointer}.quest-bottom button:disabled{border-color:var(--app-border);background:transparent;color:var(--app-muted);cursor:default}
.boss-gallery-tabs{display:grid;grid-template-columns:repeat(10,minmax(105px,1fr));gap:6px;margin:0 0 12px;overflow-x:auto;padding-bottom:5px}.boss-gallery-tabs button{min-height:48px;padding:6px;border:1px solid var(--app-border);border-radius:10px;background:var(--app-panel);color:var(--app-muted);font:800 .67rem var(--font-display);line-height:1.15;cursor:pointer}.boss-gallery-tabs button.selected{border-color:var(--app-accent);color:var(--app-text);background:color-mix(in srgb,var(--app-accent) 21%,var(--app-panel));box-shadow:0 0 15px color-mix(in srgb,var(--app-accent) 20%,transparent)}
.challenge-duel-panel .challenge-page-body{min-height:360px}.challenge-view .challenge-boss-card{min-height:360px}.challenge-view .challenge-boss-card:after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#07101dcc);pointer-events:none}.challenge-view .challenge-boss-card>*:not(canvas){z-index:2}.challenge-power{margin:0;padding:12px 14px;border:1px solid color-mix(in srgb,var(--app-accent) 45%,var(--app-border));border-radius:13px;background:color-mix(in srgb,var(--app-accent) 12%,var(--app-panel));color:var(--app-text);font:800 .9rem var(--font-display);line-height:1.35}
/* The wheel uses the same dark court, neon rails and LEDs as Pong 2099. */
.wheel-rim{background:conic-gradient(from 10deg,#07182e,#3487a5,#0b2744,#79e9fb,#112d4f,#2f708e,#08182f);box-shadow:0 20px 50px #000b,0 0 0 2px #061327,inset 0 0 0 2px #b0f5ff66,inset 0 0 22px #000a}.wheel-bulbs i{background:radial-gradient(circle at 35% 35%,#fff,#a7f5ff 35%,#25b9d7 78%);box-shadow:0 0 8px 2px #40dfff88}.wheel-disc{box-shadow:0 0 0 3px #041328,0 0 0 5px #60dff088}.wheel-hub{border:2px solid #75e6f6;background:radial-gradient(circle at 35% 30%,#28708d,#102f51 50%,#061327);box-shadow:0 8px 20px #000b,inset 0 -5px 12px #0008,inset 0 2px 7px #bafaff77,0 0 20px #41d4ef55;color:#d9fbff}.wheel-hub span{background:#05172c66;box-shadow:inset 0 1px 0 #aaf3ff55}.wheel-pointer::before{background:linear-gradient(180deg,#e1fcff,#6ee2f6 30%,#247a9c 70%,#12304b)}.wheel-pointer::after{background:radial-gradient(circle at 35% 30%,#fff,#f46bbe 45%,#762c82);box-shadow:0 0 9px #ff6bbe}.wheel-meter i{background:linear-gradient(90deg,var(--app-accent),#b769ef)}
@media(max-width:720px){.challenge-view:not([hidden]){gap:7px}.quest-intro,.boss-gallery-head{align-items:flex-start;flex-direction:column;gap:5px;margin-bottom:10px}.quest-boost-status{padding:7px 10px}.quest-grid{grid-template-columns:1fr}.quest-card{padding:11px;gap:6px}.boss-gallery-tabs{grid-template-columns:repeat(10,minmax(112px,1fr))}.challenge-view .challenge-page-body{grid-template-columns:1fr;grid-template-rows:auto auto;gap:10px}.challenge-view .challenge-boss-card{min-height:260px}.challenge-view .challenge-info{overflow:visible}.challenge-tabs button{min-height:38px}.challenge-panel{padding-bottom:24px}}
@media(min-width:721px) and (max-width:1100px){.quest-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.challenge-view .challenge-difficulty:not(:empty){display:block}

/* Reflexz 99: retain the current lockup, fit the longer name on every screen. */
html body[data-view=home] .home-hero .logo-pong{font-size:clamp(3.2rem,min(8.3vw,15vh),7rem);font-size:clamp(3.2rem,min(8.3vw,15dvh),7rem)}
@media(max-width:700px){html body.mobile[data-view=home] .home-hero .logo-pong{font-size:clamp(2.6rem,min(14vw,8vh),4.4rem);font-size:clamp(2.6rem,min(14vw,8dvh),4.4rem)}}
body .header .brand-pong{font-size:1.3rem}
html body:not(.mobile)[data-view=home] .home-hero .logo-pong{font-size:clamp(2.6rem,min(7.7vw,14vh),7rem);font-size:clamp(2.6rem,min(7.7vw,14dvh),7rem)}

.challenge-view .challenge-boss-card{background:transparent;border:0;box-shadow:none}.challenge-view .challenge-boss-card:after{content:none}.challenge-view .challenge-boss-card canvas{height:calc(100% - 78px);object-fit:contain}.challenge-view .challenge-boss-card h2,.challenge-view .challenge-boss-card .section-caption{color:var(--app-text);text-shadow:none}

.reflexz-lettering{display:block;height:.84em;width:auto;overflow:visible;transform:skewX(-7deg)}html body[data-view=home] .home-hero :is(.logo-pong,.logo-year),body .header :is(.brand-pong,.brand-year){color:var(--app-accent-ink);-webkit-text-stroke:0;letter-spacing:0}
html body:not(.mobile)[data-view=challenge] .challenge-boss-card h2,.challenge-view .challenge-boss-card .section-caption{color:var(--app-text);text-shadow:none}

.challenge-boss-card canvas{image-rendering:pixelated}