:root{--ink:#1b2430;--ink-soft:#2a3445;--linen:#faf5ec;--linen-deep:#f1e6d3;--kraft:#d9b98c;--kraft-deep:#b8925f;--coral:#e8693a;--coral-deep:#c44f24;--teal:#1f6f6b;--teal-deep:#14504c;--graphite:#4b5160;--line:#1b24301f;--bg:var(--linen);--bg-elevated:#fff;--bg-sunken:var(--linen-deep);--text:var(--ink);--text-muted:var(--graphite);--accent:var(--coral);--accent-deep:var(--coral-deep);--accent-2:var(--teal);--border:var(--line);--board-area:#11161f;--shadow:#1b160e2e;--font-display:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;--font-body:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--radius-sm:8px;--radius-md:14px;--radius-lg:22px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}[data-theme=dark]{--bg:#161b22;--bg-elevated:#1f2630;--bg-sunken:#11151b;--text:#f1ece1;--text-muted:#aab2c0;--border:#f1ece11f;--board-area:#0a0d12;--shadow:#00000073}[data-contrast=high]{--bg:#000;--bg-elevated:#000;--bg-sunken:#000;--text:#fff;--text-muted:#fff;--border:#fff;--accent:#ffd43a;--accent-deep:#ffd43a;--board-area:#000}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;padding:0}body{font-family:var(--font-body);font-size:16px;line-height:1.5}#root{height:100%;min-height:100vh}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em;margin:0}button{font-family:inherit}img,svg{max-width:100%;display:block}a{color:var(--accent)}button,[role=button]{cursor:pointer}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.btn{justify-content:center;align-items:center;gap:var(--space-2);min-width:44px;min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-md);background:var(--bg-elevated);color:var(--text);box-shadow:0 1px 2px var(--shadow);border:1px solid #0000;font-size:15px;font-weight:600;transition:transform .12s,box-shadow .12s;display:inline-flex}.btn:active{transform:scale(.96)}.btn-primary{background:var(--accent);color:#fff5ec}.btn-ghost{border-color:var(--border);background:0 0}.btn-icon{width:44px;padding:0}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.skip-link{background:var(--accent);color:#fff;padding:var(--space-2) var(--space-4);z-index:1000;border-radius:0 0 var(--radius-sm) 0;position:absolute;top:0;left:-999px}.skip-link:focus{left:0}.app-header{align-items:center;gap:var(--space-2);padding:calc(var(--safe-top) + var(--space-2)) var(--space-3) var(--space-2);background:var(--bg);z-index:20;border-bottom:1px solid var(--border);display:flex;position:sticky;top:0}.app-header__title{text-align:center;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:19px;font-weight:600;overflow:hidden}.app-header__side{align-items:center;width:44px;display:flex}.app-header__side--right{justify-content:flex-end}.sheet-backdrop{z-index:100;background:#0a0a0c73;justify-content:center;align-items:flex-end;animation:.16s fadeIn;display:flex;position:fixed;inset:0}.sheet{background:var(--bg-elevated);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;max-width:560px;padding:var(--space-3) var(--space-5) calc(var(--space-6) + var(--safe-bottom));box-shadow:0 -8px 30px var(--shadow);animation:.2s slideUp}.sheet__handle{background:var(--border);width:40px;height:4px;margin:0 auto var(--space-4);border-radius:2px}.sheet__title{margin-bottom:var(--space-4);font-size:20px}.sheet__row{padding:var(--space-3) 0;border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;font-size:15px;display:flex}.sheet__row--column{align-items:flex-start;gap:var(--space-2);flex-direction:column}.sheet__close{width:100%;margin-top:var(--space-5)}.toggle{background:var(--border);border:none;border-radius:15px;width:50px;height:30px;padding:3px;transition:background .15s;position:relative}.toggle.is-on{background:var(--accent)}.toggle__thumb{background:#fff;border-radius:50%;width:24px;height:24px;transition:transform .15s;display:block}.toggle.is-on .toggle__thumb{transform:translate(20px)}.segmented{border-radius:var(--radius-md);background:var(--bg-sunken);width:100%;padding:3px;display:flex}.segmented__item{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:0 0;border:none;flex:1;min-height:38px;font-size:14px;font-weight:600}.segmented__item.is-active{background:var(--bg-elevated);box-shadow:0 1px 3px var(--shadow)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:.6;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.image-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);text-align:left;width:100%;box-shadow:0 2px 6px var(--shadow);flex-direction:column;padding:0;transition:transform .14s,box-shadow .14s;display:flex;overflow:hidden}.image-card:active{transform:scale(.97)}.image-card__art{aspect-ratio:1;background:var(--bg-sunken);clip-path:url(#card-notch);width:100%;display:block}.image-card__art img{object-fit:cover;width:100%;height:100%}.image-card__meta{padding:var(--space-3) var(--space-3) var(--space-4);flex-direction:column;gap:2px;display:flex}.image-card__title{color:var(--text);font-size:15px;font-weight:700}.image-card__category{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:12px}@media (hover:hover){.image-card:hover{box-shadow:0 6px 18px var(--shadow);transform:translateY(-2px)}}.screen{background:var(--bg);min-height:100vh;padding-bottom:calc(var(--space-6) + var(--safe-bottom));flex-direction:column;display:flex}.home-screen__intro{padding:var(--space-4) var(--space-4) 0}.home-screen__intro h2{margin-bottom:var(--space-1);font-size:26px}.home-screen__intro p{color:var(--text-muted);margin:0;font-size:14px}.upload-cta{margin:var(--space-4);align-items:center;gap:var(--space-3);background:var(--ink);color:#fdf8ee;border-radius:var(--radius-lg);padding:var(--space-4);border:none;min-height:44px;display:flex}.upload-cta__icon{background:var(--accent);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.upload-cta span:last-child{text-align:left;flex-direction:column;gap:2px;display:flex}.upload-cta strong{font-size:15px}.upload-cta small{color:#fdf8eeb3;font-size:12px}.chip-row{gap:var(--space-2);padding:0 var(--space-4);margin-bottom:var(--space-4);scrollbar-width:none;display:flex;overflow-x:auto}.chip-row::-webkit-scrollbar{display:none}.chip{border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);padding:0 var(--space-4);border-radius:999px;flex-shrink:0;height:38px;font-size:13px;font-weight:600}.chip.is-active{background:var(--ink);color:#fdf8ee;border-color:var(--ink)}.gallery-grid{gap:var(--space-3);padding:0 var(--space-4);grid-template-columns:repeat(2,1fr);display:grid}@media (width>=640px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}@media (width>=960px){.gallery-grid{grid-template-columns:repeat(4,1fr);max-width:1100px;margin:0 auto}.home-screen__intro,.upload-cta,.chip-row{width:100%;max-width:1100px;margin-left:auto;margin-right:auto}}.multiplayer-cta{margin:var(--space-4) var(--space-4) var(--space-2);align-items:center;gap:var(--space-3);background:linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);color:#e8f9f8;border-radius:var(--radius-lg);padding:var(--space-4);border:none;min-height:44px;display:flex}.multiplayer-cta__icon{background:#ffffff2e;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.multiplayer-cta>span:nth-child(2){text-align:left;flex-direction:column;flex:1;gap:2px;display:flex}.multiplayer-cta strong{font-size:15px}.multiplayer-cta small{color:#e8faf8bf;font-size:12px}.multiplayer-cta__arrow{opacity:.7;flex-shrink:0}.cropper{padding:var(--space-4);gap:var(--space-4);flex-direction:column;flex:1;display:flex}.cropper__frame-wrap{flex:1;justify-content:center;align-items:center;width:100%;min-height:0;display:flex}.cropper__frame{border-radius:var(--radius-md);box-shadow:0 4px 24px var(--shadow);position:relative;overflow:hidden}.cropper__canvas{touch-action:none;width:100%;height:100%;display:block}.cropper__controls{gap:var(--space-3);flex-direction:column;display:flex}.cropper__aspects{margin-bottom:0;padding:0}.cropper__row{gap:var(--space-3);justify-content:center;display:flex}.cropper__row--actions{justify-content:space-between}.cropper__row--actions .btn{flex:1}.upload-screen{flex-direction:column;display:flex}.upload-screen__body{padding:var(--space-5);justify-content:center;align-items:center;gap:var(--space-3);flex-direction:column;flex:1;display:flex}.upload-dropzone{border:2px dashed var(--border);border-radius:var(--radius-lg);width:100%;max-width:420px;padding:var(--space-7) var(--space-5);align-items:center;gap:var(--space-2);text-align:center;color:var(--text-muted);background:var(--bg-elevated);flex-direction:column;display:flex}.upload-dropzone p{color:var(--text);margin:0;font-weight:600}.upload-dropzone__hint{font-size:13px}.upload-screen__error{color:var(--coral-deep);text-align:center;font-size:14px}.difficulty-screen__preview{align-items:center;gap:var(--space-3);padding:var(--space-4);display:flex}.difficulty-screen__preview img{border-radius:var(--radius-md);object-fit:cover;width:64px;height:64px}.difficulty-screen__preview div{flex-direction:column;display:flex}.difficulty-screen__preview span{color:var(--text-muted);font-size:13px}.difficulty-grid{gap:var(--space-3);padding:var(--space-2) var(--space-4) var(--space-5);grid-template-columns:repeat(2,1fr);display:grid}@media (width>=640px){.difficulty-grid{grid-template-columns:repeat(3,1fr);max-width:720px;margin:0 auto}}.difficulty-card{align-items:center;gap:var(--space-1);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-2);box-shadow:0 2px 6px var(--shadow);flex-direction:column;display:flex}.difficulty-card:active{transform:scale(.96)}.difficulty-card__count{font-family:var(--font-display);font-size:30px;font-weight:700}.difficulty-card__grid{color:var(--text-muted);font-size:13px}.diff-pill{margin-top:var(--space-2);text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700}.diff-pill--easy{color:var(--teal-deep);background:#1f6f6b26}.diff-pill--medium{color:var(--coral-deep);background:#e8693a26}.diff-pill--hard{color:#6b3fae;background:#9b6be02e}.diff-pill--expert{color:var(--ink);background:#1b24301f}.stats-bar{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--bg-elevated);border-bottom:1px solid var(--border);display:flex}.stats-bar__item{flex-direction:column;min-width:56px;display:flex}.stats-bar__item--right{align-items:flex-end}.stats-bar__label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-size:10px}.stats-bar__value{font-variant-numeric:tabular-nums;font-size:15px;font-weight:700}.stats-bar__progress{align-items:center;gap:var(--space-2);flex:1;display:flex}.stats-bar__track{background:var(--bg-sunken);border-radius:999px;flex:1;height:8px;overflow:hidden}.stats-bar__fill{background:linear-gradient(90deg, var(--accent), var(--accent-2));border-radius:999px;height:100%;transition:width .22s}.stats-bar__percent{color:var(--text-muted);text-align:right;min-width:34px;font-size:12px;font-weight:700}.toolbar{background:var(--bg-elevated);border-top:1px solid var(--border);padding:var(--space-2) var(--space-2) calc(var(--space-2) + var(--safe-bottom));gap:var(--space-1);flex-direction:column;display:flex}.toolbar__row{justify-content:space-around;gap:var(--space-1);display:flex}.tool-btn{border-radius:var(--radius-sm);max-width:64px;height:44px;color:var(--text);background:0 0;border:none;flex:1;justify-content:center;align-items:center;display:flex}.tool-btn:active{background:var(--bg-sunken)}.tool-btn.is-active{color:var(--accent)}.tool-btn:disabled{opacity:.35}.preview-modal{z-index:200;padding:var(--space-5);background:#0a0a0cd9;justify-content:center;align-items:center;animation:.16s fadeIn;display:flex;position:fixed;inset:0}.preview-modal img{border-radius:var(--radius-md);max-width:100%;max-height:100%;box-shadow:0 10px 40px #00000080}.preview-modal__close{top:calc(var(--safe-top) + var(--space-3));right:var(--space-4);color:#fff;background:#ffffff26;position:absolute}.completion-modal{z-index:250;padding:var(--space-5);background:#0a0a0c99;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.completion-card{background:var(--bg-elevated);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-5);text-align:center;width:100%;max-width:380px;box-shadow:0 20px 60px var(--shadow);animation:.26s cubic-bezier(.2,.8,.3,1.2) pop}.completion-card__badge{margin-bottom:var(--space-2);font-size:44px;display:block}.completion-card h2{margin-bottom:var(--space-1);font-size:24px}.completion-card__subtitle{color:var(--text-muted);margin:0 0 var(--space-5)}.completion-stats{margin-bottom:var(--space-5);justify-content:space-around;display:flex}.completion-stats>div{flex-direction:column;display:flex}.completion-stats__value{font-family:var(--font-display);font-size:22px;font-weight:700}.completion-stats__label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:11px}.completion-actions{gap:var(--space-2);flex-direction:column;display:flex}@keyframes pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.player-list{gap:var(--space-2);flex-direction:column;display:flex}.player-list--compact{gap:var(--space-1);flex-flow:wrap}.player-chip{background:var(--player-color,var(--accent));border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;transition:opacity .15s;display:flex;position:relative}.player-chip--offline{opacity:.45}.player-chip__avatar{color:#fff;font-size:15px;font-weight:700}.player-chip__crown{font-size:12px;line-height:1;position:absolute;top:-6px;right:-4px}.player-row{align-items:center;gap:var(--space-3);padding:var(--space-2) 0;transition:opacity .15s;display:flex}.player-row--offline{opacity:.5}.player-row--self{font-weight:600}.player-row__avatar{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:15px;font-weight:700;display:flex}.player-row__info{flex-direction:column;flex:1;min-width:0;display:flex}.player-row__name{text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.player-row__host{font-size:12px}.player-row__moves{color:var(--text-muted);font-size:12px}.player-row__status{border-radius:50%;flex-shrink:0;width:8px;height:8px}.player-row__status.is-online{background:var(--teal)}.player-row__status.is-offline{background:var(--border)}.workspace-screen{flex-direction:column;height:100vh;padding-bottom:0;display:flex;overflow:hidden}.workspace-canvas-area{background:#11161f;flex:1;min-height:0;position:relative}.workspace-canvas{touch-action:none;width:100%;height:100%;display:block}.workspace-loading{color:#f1ece1;justify-content:center;align-items:center;font-weight:600;display:flex;position:absolute;inset:0}.workspace-pause-overlay{background:#0a0a0c99;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.workspace-conn-banner{background:var(--kraft-deep);color:#fff;text-align:center;padding:4px var(--space-3);font-size:12px;font-weight:600}.player-toggle{gap:var(--space-1);position:relative;width:auto!important;padding:0 var(--space-2)!important}.player-toggle__count{min-width:16px;font-size:12px;font-weight:700}.workspace-players-panel{background:var(--bg-elevated);border-left:1px solid var(--border);width:240px;box-shadow:-4px 0 20px var(--shadow);z-index:30;padding:var(--space-3);gap:var(--space-3);flex-direction:column;display:flex;position:absolute;top:0;bottom:0;right:0;overflow-y:auto}.workspace-players-panel__header{justify-content:space-between;align-items:center;font-size:15px;font-weight:700;display:flex}.workspace-room-code{color:var(--text-muted);gap:var(--space-1);flex-direction:column;margin-top:auto;font-size:12px;display:flex}.workspace-room-code code{font-family:var(--font-mono);color:var(--accent);letter-spacing:.08em;font-size:16px;font-weight:700}@media (width<=480px){.workspace-players-panel{border-left:none;border-top:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;height:60vh;inset:auto 0 0}}.lobby-screen{flex-direction:column;display:flex}.lobby-body{padding:var(--space-5) var(--space-4) calc(var(--space-7) + var(--safe-bottom));align-items:center;gap:var(--space-4);flex-direction:column;flex:1;width:100%;max-width:480px;margin:0 auto;display:flex}.lobby-hero{text-align:center;padding:var(--space-4) 0}.lobby-hero__icon{font-size:44px}.lobby-hero h2{margin:var(--space-2) 0 var(--space-1);font-size:28px}.lobby-hero p{color:var(--text-muted);margin:0;font-size:15px}.lobby-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;padding:var(--space-5);gap:var(--space-3);box-shadow:0 2px 8px var(--shadow);flex-direction:column;display:flex}.lobby-label{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-size:13px;font-weight:700}.lobby-input{width:100%;padding:var(--space-3) var(--space-4);border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--bg);color:var(--text);outline:none;min-height:50px;font-family:inherit;font-size:17px;transition:border-color .12s}.lobby-input:focus{border-color:var(--accent)}.lobby-input--code{font-family:var(--font-mono);letter-spacing:.15em;text-transform:uppercase;text-align:center;font-size:22px;font-weight:700}.lobby-btn{width:100%;min-height:50px;font-size:16px}.lobby-error{color:var(--coral-deep);margin:0;font-size:13px}.lobby-divider{align-items:center;gap:var(--space-3);width:100%;color:var(--text-muted);font-size:13px;display:flex}.lobby-divider:before,.lobby-divider:after{content:"";background:var(--border);flex:1;height:1px}.room-setup-screen{flex-direction:column;display:flex;overflow-y:auto}.room-setup__invite-bar{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--bg-elevated);border-bottom:1px solid var(--border);color:var(--text-muted);flex-wrap:wrap;font-size:13px;display:flex}.room-setup__invite-bar code{font-family:var(--font-mono);color:var(--accent);letter-spacing:.06em;font-size:15px;font-weight:700}.btn-sm{min-height:34px;padding:0 var(--space-3);font-size:13px}.room-setup__players-row{gap:var(--space-2);padding:var(--space-2) var(--space-4);display:flex}.room-setup__player-avatar{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:15px;font-weight:700;display:flex}.room-setup__tabs{border-bottom:1px solid var(--border);display:flex}.rs-tab{padding:var(--space-3);color:var(--text-muted);background:0 0;border:none;border-bottom:2px solid #0000;flex:1;font-size:14px;font-weight:600}.rs-tab.is-active{color:var(--accent);border-bottom-color:var(--accent)}.gallery-item{position:relative}.gallery-item.is-selected:after{content:"✓";background:var(--accent);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:13px;font-weight:700;display:flex;position:absolute;top:6px;right:6px}.room-setup__upload,.room-setup__difficulty-section{padding:var(--space-4)}.room-setup__difficulty-section h3{margin-bottom:var(--space-3)}.difficulty-card.is-selected{border-color:var(--accent);background:#e8693a14}.room-setup__start-bar{padding:var(--space-4);bottom:calc(var(--safe-bottom));background:var(--bg);border-top:1px solid var(--border);position:sticky}.room-setup__start-btn{width:100%;min-height:52px;font-size:17px}.room-setup__waiting{padding:var(--space-6) var(--space-5);justify-content:center;align-items:center;gap:var(--space-4);text-align:center;flex-direction:column;flex:1;width:100%;max-width:420px;margin:0 auto;display:flex}.room-setup__waiting-icon{font-size:42px}.room-setup__waiting h2{margin:0;font-size:24px}.room-setup__waiting p{color:var(--text-muted);margin:0}.room-setup__players{gap:var(--space-2);flex-wrap:wrap;justify-content:center;display:flex}.room-setup__player-chip{align-items:center;gap:var(--space-2);border:1.5px solid;border-radius:999px;padding:4px 12px 4px 8px;font-size:14px;font-weight:600;display:flex}.room-setup__player-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.room-setup__invite{width:100%}.room-setup__invite-label{color:var(--text-muted);font-size:13px}.room-setup__link-row{gap:var(--space-2);margin-top:var(--space-2);background:var(--bg-sunken);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);align-items:center;display:flex}.room-setup__code{font-family:var(--font-mono);letter-spacing:.1em;color:var(--accent);flex:1;font-size:20px;font-weight:700}.conn-badge{color:var(--text-muted);font-size:12px;font-weight:600}.conn-badge[data-status=connected]{color:var(--teal-deep)}.conn-badge[data-status=reconnecting]{color:var(--kraft-deep)}