/* Neumorphic study: same ChatBattle screens, separate offline preview.
   Flow: setup -> sample lobby -> simulated voting -> sample results.
   All votes and submissions in this file are demonstration data. */
:root{--bg:#e9e4d8;--canvas:#e9e4d8;--panel:#e9e4d8;--panel2:#e9e4d8;--input:#e9e4d8;--text:#213c34;--muted:#5d675d;--lime:#155b4c;--accent:#b7cdb8;--on-accent:#173d31;--border:#c5bfaf;--hi:#fffdf4;--lo:#bdb5a3;--raised:9px 9px 20px #c3bcac,-9px -9px 20px #fffdf4;--inset:inset 5px 5px 10px #c7bfaf,inset -5px -5px 10px #fffaf0;--small:4px 4px 8px #c1b9a9,-4px -4px 8px #fffdf4}
:root[data-theme=dark]{--bg:#242823;--canvas:#242823;--panel:#242823;--panel2:#242823;--input:#242823;--text:#ede9d8;--muted:#bec3b4;--lime:#d8c48b;--accent:#b9ad83;--on-accent:#25291e;--border:#4b5044;--hi:#353b32;--lo:#131710;--raised:10px 10px 22px #161a14,-10px -10px 22px #32382e;--inset:inset 5px 5px 11px #151912,inset -5px -5px 11px #343a30;--small:4px 4px 9px #151912,-4px -4px 9px #353b32}
body{background:var(--canvas);padding:24px}.app-shell{background:var(--canvas);border:0;box-shadow:none;overflow:visible;max-width:1400px}.topbar{border:0;padding-inline:24px}.page{padding-inline:24px}.brand-icon{background:var(--panel);color:var(--lime);box-shadow:var(--small)}.brand-icon svg path{fill:var(--lime)}
.preview-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 24px 20px;padding:12px 18px;background:var(--panel);border:1px solid color-mix(in srgb,var(--hi) 60%,transparent);border-radius:20px;box-shadow:var(--small);flex-wrap:wrap}.preview-label{color:var(--muted);font-size:11px}.preview-label strong{display:block;color:var(--text);font:800 10px var(--latin);letter-spacing:2px;margin-bottom:3px}.preview-nav{display:flex;gap:10px;flex-wrap:wrap}.preview-nav button{padding:10px 16px;border:0;border-radius:12px;background:var(--panel);color:var(--muted);box-shadow:var(--small);font-size:11px}.preview-nav button[aria-current=page]{box-shadow:var(--inset);color:var(--lime)}
.hero-copy{padding:32px 16px}.setup-hero h1{font-weight:850}.setup-hero h1:after{background:var(--accent);box-shadow:2px 2px 4px var(--lo)}.hero-art{border-radius:32px;border:10px solid var(--panel);box-shadow:var(--raised);aspect-ratio:1.15}.hero-art img{border-radius:22px}.hero-art figcaption{bottom:0;border-radius:0 0 22px 22px}.hero-pills{gap:12px}.hero-pills span{box-shadow:var(--small);border:0!important;border-radius:10px;padding:10px!important}
.glass,.setup-panel.glass,.video-card,.video-card.right-card,.card,.winner-card,.ranking-row{background:var(--panel);border:1px solid color-mix(in srgb,var(--hi) 55%,transparent);box-shadow:var(--raised);border-radius:28px}.setup-panel.glass{margin-top:48px;padding:36px;column-gap:36px}.panel-heading{border-color:var(--border)}
input,select,textarea,input[readonly],.prefix-input{background:var(--panel);border:1px solid var(--border);box-shadow:var(--inset);border-radius:12px;padding:14px 16px}.prefix-input input{background:transparent;box-shadow:none;border:0}.prefix-input span{padding-inline-start:12px}.prefix-input{padding:0}.prefix-input input{padding:14px}
input:focus,select:focus,textarea:focus{box-shadow:var(--inset);outline:2px solid var(--lime);outline-offset:2px}.prefix-input:focus-within{outline:2px solid var(--lime);outline-offset:2px}
.segment span,.capacity-select span{background:var(--panel);border:0;border-radius:12px;box-shadow:var(--small);color:var(--muted);padding:12px}.segment input:checked+span,.capacity-select input:checked+span{background:var(--panel);box-shadow:var(--inset);color:var(--lime);border:0}.capacity-select input:checked+span{font-weight:850}
.primary-btn,.submit,.play-action{background:linear-gradient(145deg,#216c5a,#104e42);color:#fff9e8;border:1px solid #357766;box-shadow:5px 5px 10px var(--lo),-4px -4px 10px var(--hi),inset 1px 1px 2px #ffffff45;border-radius:14px;padding:13px 22px}.primary-btn:not(:disabled):hover,.submit:not(:disabled):hover,.play-action:hover{background:linear-gradient(145deg,#2b7966,#165b4c);color:#fff9e8;box-shadow:7px 7px 14px var(--lo),-5px -5px 12px var(--hi)}
:root[data-theme=dark] .primary-btn,:root[data-theme=dark] .play-action{background:linear-gradient(145deg,#dfcf9f,#b9a670);color:#24281e;border-color:#e6d5a5}
.secondary-btn,.icon-btn,.fullscreen-action,.external-action,.subtle,#coinBtn,.language-switch{background:var(--panel);color:var(--text);border:1px solid color-mix(in srgb,var(--hi) 45%,transparent);box-shadow:var(--small);border-radius:12px}.secondary-btn:hover,.icon-btn:hover,.fullscreen-action:hover,.external-action:hover,#coinBtn:hover{background:var(--panel);box-shadow:var(--raised);color:var(--lime)}
button:active:not(:disabled),.external-action:active{box-shadow:var(--inset)!important;transform:translateY(1px)}button:disabled{box-shadow:none;opacity:.46}.language-switch button[aria-pressed=true]{background:var(--panel);color:var(--lime);box-shadow:var(--inset)}
.toggle-row{padding-block:6px}.toggle-row i{width:48px;height:25px;border:0;background:var(--panel);box-shadow:var(--inset)}.toggle-row i:after{width:21px;height:21px;top:2px;right:2px;background:var(--panel);box-shadow:2px 2px 4px #0003,-1px -1px 3px var(--hi)}.toggle-row input:checked+i{background:var(--lime)}.toggle-row input:checked+i:after{background:var(--canvas)}
.lobby-main{padding:26px}.entry-grid{gap:22px}.entry-tile{box-shadow:var(--small);border:0;padding:8px;background:var(--panel);border-radius:18px}.entry-photo{border-radius:12px;background:var(--panel);box-shadow:var(--inset);min-height:140px;display:grid;place-content:center;color:var(--lime);font:800 48px var(--latin)}.entry-details strong{font-size:12px}.entry-details small{display:block;font-size:10px}.sample-tag{font:600 9px var(--f);color:var(--muted);text-align:center;margin-top:6px}.pill,.chip,.platform-tag,.connection-indicator{background:var(--panel);box-shadow:var(--inset);border:0;color:var(--muted)}.progress-track,.votes-meter,.timer-track{box-shadow:var(--inset);background:var(--panel);height:12px}.progress-track>div,.votes-meter>div,.timer-track>div{background:var(--lime);border-radius:12px;box-shadow:inset 1px 1px 2px #ffffff45}
.video-card,.video-card.right-card{padding:20px}.video-frame{box-shadow:var(--inset);border:6px solid var(--panel);border-radius:22px;height:380px}.video-cover,.right-card .video-cover{background:var(--panel);box-shadow:var(--inset)}.video-lock,.video-lock>span,.right-card .video-lock{color:var(--lime)}.video-lock small,.right-card .video-lock small{color:var(--muted)}.lock-symbol{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;box-shadow:var(--raised);font-size:26px}.number-corner{box-shadow:var(--small);background:var(--panel);color:var(--lime);border:0}.stage-center .timer-block{background:var(--panel);box-shadow:var(--inset);border:0;border-radius:20px}.versus-medal{box-shadow:var(--small);background:var(--panel);color:var(--lime);border:0}.vote-display{box-shadow:var(--inset);border:0;padding:18px}.advance-action,.right-card .advance-action{background:var(--panel);box-shadow:var(--small);border:0;color:var(--lime);margin-top:18px}.demo-voting:not(.hidden){display:flex!important;padding:20px;gap:12px;flex-wrap:wrap;margin-top:30px}.demo-voting button{padding:10px 14px;background:var(--panel);color:var(--lime);border:0;box-shadow:var(--small);border-radius:10px}.demo-voting input{width:140px}.mini-match{box-shadow:var(--inset);padding:20px;border:0}.ranking-row{margin-bottom:16px}.winner-card{padding:28px}.winner-image,.ranking-photo{box-shadow:var(--inset);background:var(--panel);color:var(--lime)}.winner-image{font:800 48px var(--latin)}.ranking-photo{font:700 24px var(--latin)}.site-footer{background:none;border:0;color:var(--muted)}.sample-poster{width:100%;height:100%;object-fit:cover}.stage-center{gap:20px}.lobby-side{gap:26px}.side-card{padding:26px}.toast{box-shadow:var(--raised);border:1px solid var(--border)}.confirm-card{background:var(--panel);box-shadow:var(--raised)}
@media(max-width:760px){body{padding:8px}.preview-bar{margin:12px 12px 20px;padding:16px}.preview-nav{gap:8px;width:100%;display:grid;grid-template-columns:repeat(4,1fr)}.preview-nav button{padding:10px 7px;font-size:10px}.page{padding-inline:16px}.setup-panel.glass{padding:24px 20px}.hero-copy{padding:0}.hero-art{border-width:7px;border-radius:25px}.hero-art img{border-radius:18px}.hero-pills{gap:8px}.hero-pills span{font-size:8px;padding:8px!important}.video-frame{height:340px}.video-card{padding:16px}.demo-voting{padding:16px}.topbar{padding-inline:16px}.lobby-side{display:flex}.entry-grid{gap:14px}.entry-photo{min-height:100px}.hero-art figcaption{padding:12px 16px}}

.sample-poster{position:absolute;inset:0;z-index:4;width:100%;height:100%;object-fit:cover}.sample-poster~.number-corner{z-index:5}.skip-link:not(:focus-visible){transform:translateY(-200%)}

/* Keep the lobby title readable over either neumorphic surface. */
#page-collecting .lobby-topic-title{color:var(--text);text-shadow:none}
/* Organic frame and restrained spring motion. */
:root{--ease-soft:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.22,1.35,.36,1)}
.hero-art{border-radius:32px;transition:transform .65s var(--ease-spring),box-shadow .65s var(--ease-soft);will-change:auto}
.hero-art img{border-radius:0;transition:transform .9s var(--ease-soft)}
.hero-art figcaption{left:12%;right:12%;bottom:5%;inset-inline:12%;padding:12px 16px;border-radius:999px;font-size:8px;background:#14251cda;backdrop-filter:blur(10px)}
.hero-art figcaption span{font-size:7px}
button,a.secondary-btn,a.external-action,.entry-tile,.video-card,.ranking-row,.side-card,.hero-pills span{transition:transform .45s var(--ease-spring),box-shadow .45s var(--ease-soft),background .25s ease,border-color .25s ease,color .25s ease}
@media(hover:hover) and (pointer:fine){button:not(:disabled):not([aria-disabled=true]):hover,a.secondary-btn:hover,a.external-action:hover{transform:translateY(-3px) scale(1.025)}.entry-tile:hover,.side-card:hover,.ranking-row:hover{transform:translateY(-5px) scale(1.012);box-shadow:12px 12px 26px var(--lo),-10px -10px 24px var(--hi)}.hero-art:hover{transform:translateY(-4px) scale(1.008)}.hero-art:hover img{transform:scale(1.15)}.hero-pills span:hover{transform:translateY(-3px)}}
button:active:not(:disabled),a.secondary-btn:active,a.external-action:active{transform:translateY(1px) scale(.955)!important;transition-duration:.12s}
input,select,textarea{transition:box-shadow .35s var(--ease-soft),border-color .25s ease,outline-color .25s ease}
.toggle-row i{transition:background .3s ease,box-shadow .3s ease}.toggle-row i:after{transition:transform .45s var(--ease-spring),background .3s ease}
.progress-track>div,.votes-meter>div,.timer-track>div{transition:width .65s var(--ease-soft)}
.page.active{animation:none}.toast{transition:opacity .25s ease,transform .5s var(--ease-spring);transform:translate(-50%,18px) scale(.94)}.toast.visible{transform:translate(-50%,0) scale(1)}
.confirm-card{animation:neo-dialog .5s var(--ease-spring) both}.modal-backdrop.hidden .confirm-card{animation:none}
@keyframes neo-dialog{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:760px){.hero-art{border-radius:25px}.hero-art figcaption{padding:9px 12px;font-size:7px;left:10%;right:10%;inset-inline:10%}.hero-art figcaption span{font-size:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-art:hover,.hero-art:hover img,button:not(:disabled):hover,.entry-tile:hover,.side-card:hover,.ranking-row:hover{transform:none}.hero-art:hover img{transform:scale(1.12)}}
/* Snapshot morphs preserve the position of the hero and settings between RTL/LTR. */
.hero-art{view-transition-name:neo-art}.hero-copy{view-transition-name:neo-copy}.setup-panel{view-transition-name:neo-form}.topbar{view-transition-name:neo-header}.preview-bar{view-transition-name:neo-navigation}
::view-transition-group(*){animation-duration:.7s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root){animation:neo-dissolve-out .4s ease both}
::view-transition-new(root){animation:neo-dissolve-in .65s var(--ease-soft) both}
::view-transition-old(neo-copy),::view-transition-old(neo-form){animation:neo-morph-out .3s ease both}
::view-transition-new(neo-copy),::view-transition-new(neo-form){animation:neo-morph-in .7s var(--ease-soft) both}
@keyframes neo-dissolve-out{to{opacity:0}}
@keyframes neo-dissolve-in{from{opacity:0}to{opacity:1}}
@keyframes neo-morph-out{to{opacity:0;filter:blur(3px);transform:translateY(-4px) scale(.99)}}
@keyframes neo-morph-in{from{opacity:0;filter:blur(3px);transform:translateY(8px) scale(.985)}to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* Audit fixes: readable supporting text, visible fields and comfortable targets. */
.hint,.toggle-row small,.panel-heading p,.side-card p,.entry-details small,.sample-tag,.ranking-meta small,.preview-label,.page-title p{font-size:12px;line-height:1.9}
.form-field>label,.wrap label{font-size:13px}.section-number,.eyebrow{font-size:11px;letter-spacing:1px}
input,select,textarea,.prefix-input{border-color:var(--muted)}
.segment input:checked+span,.capacity-select input:checked+span{outline:2px solid var(--lime);outline-offset:2px}
.language-switch button{min-width:44px;min-height:44px}.theme-toggle,.icon-btn{min-width:44px;min-height:44px}
button,.external-action,.secondary-btn{min-height:44px}.preview-nav button[aria-current=page]{font-weight:800;outline:1px solid var(--lime);outline-offset:2px}
.toggle-row{min-height:54px}.toggle-row i{flex-shrink:0}.field-error{color:var(--salmon);font-size:12px;margin:6px 0}
.control-hint{font-size:12px;line-height:1.9;color:var(--muted);margin:0;text-align:center}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.demo-voting small{color:var(--muted);font-size:12px}.demo-voting button:disabled{box-shadow:none}.vote-display .voter-frame{margin-top:12px}
.lobby-side{display:flex;flex-direction:column}.invite-panel p{font-size:12px}.invite-panel{min-width:0}.invite-buttons{flex-wrap:wrap}.invite-buttons>*{min-width:120px}
.video-card .advance-action:disabled{cursor:not-allowed}.entry-tile{min-width:0}.entry-details strong{overflow-wrap:anywhere}
@media(max-width:1100px){.lobby-grid{grid-template-columns:1fr}.lobby-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.lobby-side>.instruction-card,.lobby-side>#launchBtn{grid-column:1/-1}.invite-panel{grid-column:1/-1}.lobby-main{min-width:0}}
@media(max-width:760px){.topbar{display:grid;grid-template-columns:1fr auto;height:auto;min-height:0;padding:12px 16px;gap:18px}.topbar>.brand{grid-column:1;grid-row:1}.header-mid{position:static;transform:none;width:60px;height:60px;grid-column:2;grid-row:1}.header-logo{width:60px;height:60px}.header-actions{grid-column:1/-1;justify-content:space-between;gap:8px;flex-wrap:wrap}.language-switch button{min-width:44px;min-height:44px;font-size:11px}.theme-toggle,.icon-btn{min-width:44px;min-height:44px}.brand strong{font-size:18px}.brand-icon{width:38px;height:38px}.preview-nav button{font-size:11px;min-height:44px}.lobby-side{display:flex}.hero-art figcaption{display:none}.hero-pills span{font-size:10px}.hero-pills{flex-wrap:wrap}.stage-center .control-buttons{flex-wrap:wrap}.demo-voting{gap:12px}.demo-voting input{width:100%}.demo-voting button{flex:1}.setup-panel.glass{padding:24px}.hint,.toggle-row small{font-size:12px}.video-frame{height:320px}}

.invite-label{font-size:12px;color:var(--muted)}
/* Hidden states must win over component display rules. */
[hidden]{display:none!important}
.lobby-side>.invite-panel{order:0}.lobby-side>.side-card:has(#modeTitle){order:1}.lobby-side>.side-card:has(#livePerUser){order:2}.lobby-side>.instruction-card{order:3}.lobby-side>#launchBtn{order:4}
@media(min-width:761px) and (max-width:1100px){.lobby-side>.side-card:has(#modeTitle),.lobby-side>.side-card:has(#livePerUser){grid-column:auto}}
/* Bright, contrasting thumbs; mint indicates an enabled switch in either theme. */
.toggle-row i{position:relative;width:50px;height:28px;flex:none;border:1px solid #727d69;background:#8c9783;box-shadow:inset 3px 3px 6px #0003,inset -2px -2px 5px #ffffff25}
.toggle-row i:after{width:22px;height:22px;top:2px;right:2px;background:#fffbed!important;border:1px solid #5c6c50;box-shadow:0 2px 5px #0004,inset 0 1px 1px #ffffff;box-sizing:border-box}
.toggle-row input:checked+i{background:#77dda6;border-color:#37684d;box-shadow:inset 2px 2px 5px #1b58382b,inset -2px -2px 5px #d5ffe74d}
.toggle-row input:checked+i:after{background:#fffbed!important;transform:translateX(-22px)}
:root[data-theme=dark] .toggle-row i{background:#434f3c;border-color:#7f8d74}
:root[data-theme=dark] .toggle-row input:checked+i{background:#77dda6;border-color:#37684d}
/* Keep the hidden-video instruction readable when real thumbnails arrive. */
.video-cover:has(.cover-thumb:not([hidden])) .video-lock{background:color-mix(in srgb,var(--panel) 94%,transparent);padding:22px;border-radius:24px;max-width:calc(100% - 32px);box-shadow:var(--small)}
@media(max-width:760px){.topbar{grid-template-columns:minmax(0,1fr) 60px}.header-actions{min-width:0;width:100%;flex-wrap:wrap}.topbar>.brand{min-width:0}}