:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f3e8d0;--case:#101a12;--olive:#233528;--brass:#d8b77b;--ivory:#f3e8d0;--border:#59634a;--muted:#b8b29f;background:#101a12;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brass);outline-offset:3px}.app{height:calc(100dvh - max(10px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom)));background:linear-gradient(115deg, var(--olive), var(--case) 45%, #0c140e);border:8px solid #101a12;border-radius:23px;flex-direction:column;gap:12px;min-height:0;padding:18px 28px 16px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #62654a66,0 3px 6px #171b1529}.app:before{content:"";pointer-events:none;border:1px solid #9b947333;border-radius:10px;position:absolute;inset:5px}.maker-line{color:#b6ac8c;letter-spacing:1.4px;flex-shrink:0;justify-content:space-between;font-size:8px;display:flex;position:absolute;top:20px;left:28px;right:28px}.identity{text-align:center;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;height:57px;padding:0 80px;display:flex}.instrument-face{background:linear-gradient(115deg, var(--olive), var(--case) 45%, #0c140e);border-radius:5px;flex-direction:column;flex:1;gap:12px;min-height:0;display:flex}.dim-overlay{opacity:0;pointer-events:none;z-index:10;background:#000;transition:opacity 2s;position:fixed;inset:0}.topbar{z-index:11;position:relative}.brandmark img{object-fit:contain;width:40px;height:40px;margin:auto;display:block}.clock-row .flap{font-size:var(--clock-font,3.35cqw)}.brandmark{margin:0;line-height:0}.model-number{color:var(--brass);letter-spacing:3px;justify-content:center;align-items:center;gap:10px;margin-top:6px;font-size:11px;font-weight:700;display:flex}.model-number span{background:linear-gradient(90deg,#0000,#c3b18acc);width:34px;height:1px}.model-number span:last-child{background:linear-gradient(270deg,#0000,#c3b18acc)}.company-name{color:#b2b19a;letter-spacing:1.5px;margin:8px 0 0;font-size:8px}.topbar{flex-shrink:0;order:2;justify-content:flex-end;align-items:center;gap:10px;width:100%;padding-top:2px;transition:opacity .6s;display:flex}.brand-sub{color:var(--muted);letter-spacing:1.2px;white-space:nowrap;font-size:8px}.status-led{background:#c57b43;border-radius:50%;width:5px;height:5px;margin-right:7px;display:inline-block;box-shadow:0 0 5px #bc6c3133}.status-led.degraded{background:#e4b65e}.status-led.connecting,.status-led.local{background:#929787}.actions{background:linear-gradient(#2a3024cc,#181e17cc);border:1px solid #a394704d;border-radius:12px;gap:4px;padding:4px;display:flex;box-shadow:inset 0 1px #ffffff0f,0 2px 6px #0006}.actions button,.icon-btn{color:#c3bea1;letter-spacing:1px;background:0 0;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;gap:7px;padding:7px 10px;font-size:8px;transition:background .15s,color .15s;display:flex}.settings header .icon-btn{background:#ffffff0d;border-radius:50%;width:38px;height:38px;padding:0}.settings header .icon-btn:hover{background:#ffffff1c}.actions .settings-button{color:var(--brass);background:#c3b18a1f;border-color:#a3947066}.actions button:hover,.icon-btn:hover{color:#f0e6c6;background:#ffffff14}.actions button:disabled{opacity:.55;cursor:wait}.display-area{flex:1;justify-content:center;align-items:center;width:100%;min-height:0;display:flex;container-type:size}.board-stage{min-height:0;width:var(--fit-width);flex-direction:column;flex-shrink:0;display:flex;container-type:inline-size}.frame-label,.board-footer{color:var(--muted);letter-spacing:.08cqw;flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;padding:0 2px 1cqw;font-size:clamp(4px,.8cqw,9px);display:flex}.board-footer{color:#a08c59;padding:1cqw 2px 0}.frame-label span,.board-footer span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.frame-label span:last-child{max-width:36%}.board{background:#0f150e;border:1px solid #59634a;border-radius:7px;flex:1;min-height:0;padding:1.1cqw;position:relative;overflow:hidden;box-shadow:inset 0 3px 9px #0008,0 1px #74745b55}.board:after{content:"";z-index:6;pointer-events:none;background:linear-gradient(115deg,#ffffff0a 0%,#ffffff05 28%,#0000 29% 100%);position:absolute;inset:0}.board-inner{gap:.38cqw;height:100%;display:grid}.flap-row{grid-template-columns:repeat(var(--board-columns,24), minmax(0, 1fr));gap:.28cqw;min-height:0;display:grid}.flap-row.section-start{margin-top:.45cqw;position:relative}.flap-row.section-start:before{content:"";background:linear-gradient(90deg, transparent, var(--brass) 8%, var(--brass) 92%, transparent);opacity:.6;pointer-events:none;height:1px;position:absolute;top:calc(-.415cqw - .5px);left:0;right:0}.flap{perspective:300px;min-width:0;height:100%;font-family:Arial Narrow,Trebuchet MS,Arial,sans-serif;font-size:var(--flap-font,2.8cqw);color:var(--ivory);background:#233528;border-radius:2px;font-weight:600;line-height:1;position:relative;overflow:hidden;box-shadow:inset 0 1px #69705244,0 1px 2px #0009}.flap.unit-flap{font-size:calc(var(--flap-font,2.8cqw) * .85);letter-spacing:-.08em}.art-pixel{background:var(--brass);color:#0000;position:absolute;inset:0;box-shadow:inset 0 1px #f3e8d066}.drawing-grid{background:var(--case);border:1px solid var(--border);touch-action:none;border-radius:5px;grid-template-columns:repeat(32,minmax(0,1fr));gap:1px;margin:18px 0;padding:6px;display:grid}.settings .drawing-grid button{aspect-ratio:1;background:var(--olive);touch-action:none;border:1px solid #59634a;border-radius:2px;min-width:0;min-height:0;padding:0}.settings .drawing-grid button[aria-pressed=true]{background:var(--brass);border-color:var(--brass)}.drawing-grid button:focus-visible{outline-offset:0;outline-color:var(--ivory);z-index:1}.drawing-style-preview{background:var(--olive);width:100%;max-height:180px;fill:var(--brass);border:1px solid var(--border);border-radius:4px;margin:12px auto;display:block}.gesture-cards .message-editor{min-width:0}.gesture-cards legend,.gesture-cards button,.gesture-cards label{overflow-wrap:anywhere}.flap{contain:layout style}.flap-top,.flap-bottom,.flap-turn{justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.flap-top{clip-path:inset(0 0 50%);background:linear-gradient(#2d3527,#232a1f 90%,#1e251b)}.flap-bottom{clip-path:inset(50% 0 0);background:linear-gradient(#1b2119,#181e16 20%,#161c14)}.flap-turn{clip-path:inset(0 0 50%);transform-origin:50%;backface-visibility:hidden;z-index:3;will-change:transform, opacity;background:#2b4030;animation:ease-in both flap-turn}.flap:before{content:"";z-index:4;background:#0b110b;height:1px;position:absolute;top:50%;left:0;right:0;box-shadow:0 1px #61634a44}.flap:after{content:"";opacity:.5;z-index:5;background:linear-gradient(#797153,#797153) 0/1px 3px no-repeat,linear-gradient(#797153,#797153) 100%/1px 3px no-repeat;height:3px;position:absolute;top:calc(50% - 1px);left:0;right:0}@keyframes flap-turn{0%{opacity:1;transform:rotateX(0)}to{opacity:0;transform:rotateX(-92deg)}}:root[data-hidden=true] .flap-turn{animation-play-state:paused}.bottom{color:var(--muted);letter-spacing:.4px;flex-wrap:wrap;flex-shrink:0;order:3;justify-content:center;gap:5px 16px;font-size:8px;transition:opacity .6s;display:flex}.maker-footer{letter-spacing:1.2px;color:var(--brass);flex-direction:column;flex-shrink:0;order:4;align-items:center;gap:4px;padding-top:0;font-size:8px;display:flex}.display-idle .topbar{opacity:0}.display-idle .topbar:hover,.display-idle .topbar:focus-within,.display-idle .bottom:hover{opacity:1}.feed-warnings{color:#e4b65e;flex-wrap:wrap;flex-shrink:0;order:3;justify-content:center;gap:6px 16px;font-size:10px;display:flex}.feed-warnings:empty{display:none}@media (hover:none),(prefers-reduced-motion:reduce){.topbar,.bottom{transition:none}}@media (prefers-reduced-motion:reduce){.dim-overlay{transition:none}}:root:fullscreen body{padding:0}:root:fullscreen .app{border:0;border-radius:0;height:100dvh;padding:2.2vh 2.2vw}:root:fullscreen .app:before,:root:fullscreen .identity,:root:fullscreen .maker-line{display:none}@media (hover:none){.display-idle .topbar{opacity:.7}.display-idle .bottom{opacity:.5}}.maker-footer span:last-child{color:#9c997d;font-size:8px}.notice{color:#efcf89;background:#3a3020;flex-shrink:0;justify-content:space-between;gap:10px;padding:8px 12px;font-size:12px;display:flex}.notice button{color:inherit;background:0 0;border:0}.settings-shade{z-index:20;background:#05080acc;justify-content:flex-end;animation:.18s ease-out shade-in;display:flex;position:fixed;inset:0}.settings{--panel:#1b2119;--card:#232a21;--field:#141913;--line:#394133;background:var(--panel);border-left:1px solid var(--line);border-radius:18px 0 0 18px;flex-direction:column;width:min(500px,100%);min-width:0;height:100%;animation:.22s cubic-bezier(.2,.8,.2,1) panel-in;display:flex;box-shadow:-24px 0 60px #0007}@keyframes shade-in{0%{opacity:0}}@keyframes panel-in{0%{opacity:0;transform:translate(32px)}}@media (prefers-reduced-motion:reduce){.settings-shade,.settings{animation:none}}.settings header{flex-shrink:0;justify-content:space-between;align-items:center;padding:22px 24px 8px;display:flex}.settings header small{color:var(--brass);letter-spacing:2px;font-size:9px}.settings h2{letter-spacing:.2px;margin:0;font-size:22px;font-weight:700}.settings h3{color:var(--brass);letter-spacing:2px;margin:28px 0 16px;font-size:10px}.settings-content{overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#4a5342 transparent;flex-direction:column;gap:10px;min-height:0;padding:8px 20px 28px;display:flex;overflow:auto}.settings-save-note{color:var(--muted);align-items:center;gap:8px;margin:0;padding:0 24px 14px;font-size:12px;display:flex}.settings-save-note:before{content:"";background:#7fb069;border-radius:50%;width:7px;height:7px;box-shadow:0 0 6px #7fb06988}.settings-section{background:var(--card);border:1px solid var(--line);border-radius:14px;transition:border-color .15s}.settings-section[open]{border-color:#4d5844}.settings summary{cursor:pointer;color:#f1ecd9;overflow-wrap:anywhere;border-radius:14px;padding:16px 44px 16px 18px;font-size:14px;font-weight:600;line-height:1.4;list-style:none;position:relative}.settings summary::-webkit-details-marker{display:none}.settings summary:after{content:"";border-right:2px solid var(--brass);border-bottom:2px solid var(--brass);width:8px;height:8px;margin-top:-6px;transition:transform .2s;position:absolute;top:50%;right:18px;transform:rotate(45deg)}.settings details[open]>summary:after{margin-top:-2px;transform:rotate(-135deg)}.settings summary:hover{background:#ffffff08}.settings summary:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}.settings summary>span{color:var(--muted);padding-top:2px;font-size:12px;font-weight:400;display:block}.settings-section[open]>summary{color:var(--brass)}.settings-section-body{border-top:1px solid var(--line);padding:4px 18px 18px}.settings-section-body>:first-child,.settings-help{margin-top:12px}.settings-help>summary{color:var(--muted);padding:10px 28px 10px 0;font-size:12px;font-weight:500}.settings-help>summary:after{right:6px}.favorite-section{border:1px solid var(--line);background:var(--field);border-radius:12px;margin-top:12px;padding:0 14px 8px}.favorite-section>summary{padding:12px 28px 6px 0;font-size:13px}.favorite-section>summary:after{right:4px}.league-options{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;display:grid}.settings .league-options label{margin:8px 0;font-size:12px}.range-captions{color:var(--muted);justify-content:space-between;font-size:11px;display:flex}.settings-reset{border-top:1px solid var(--line);margin-top:24px}.backup-confirm{border:1px solid var(--line);background:var(--field);border-radius:12px;margin-top:16px;padding:14px}.settings input:disabled{opacity:.4;cursor:not-allowed}.selected-city{color:#f1ecd9;margin:0 0 16px;font-size:16px;font-weight:600;line-height:1.5}.message-editor{border:1px solid var(--line);background:var(--field);border-radius:12px;margin:18px 0;padding:14px}.message-editor legend{color:var(--brass);font-size:12px;font-weight:600}.settings textarea{resize:vertical;background:var(--field);color:#f0eddf;border:1px solid var(--line);border-radius:10px;width:100%;padding:11px 12px}.message-preview{gap:8px;display:grid}.message-preview pre{color:var(--ivory);border:1px solid var(--border);white-space:pre;background:#101a12;margin:0;padding:10px 6px;font:clamp(8px,2.5vw,12px)/1.7 monospace;overflow-x:auto}.settings label{color:#dedccb;flex-direction:column;gap:8px;margin:16px 0;font-size:13px;font-weight:500;display:flex}.settings input:not([type=checkbox]):not([type=range]),.settings select{background:var(--field);border:1px solid var(--line);color:#f0eddf;border-radius:10px;width:100%;padding:11px 12px;transition:border-color .15s,box-shadow .15s}.settings input:not([type=checkbox]):not([type=range]):hover,.settings select:hover,.settings textarea:hover{border-color:#566049}.settings input:not([type=checkbox]):not([type=range]):focus-visible,.settings select:focus-visible,.settings textarea:focus-visible{border-color:var(--brass);outline:none;box-shadow:0 0 0 3px #c3b18a33}.settings select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23c3b18a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 13px center;background-repeat:no-repeat;padding-right:36px}.settings .two{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.settings .two>*,.settings label{min-width:0}.settings .check{cursor:pointer;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:14px}.settings input[type=checkbox]{appearance:none;cursor:pointer;background:#3a4234;border:1px solid #4a5342;border-radius:999px;flex-shrink:0;width:40px;height:24px;margin:0;transition:background .2s;position:relative}.settings input[type=checkbox]:before{content:"";background:#d9d3bd;border-radius:50%;width:18px;height:18px;transition:transform .2s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #0006}.settings input[type=checkbox]:checked{background:#a9915f;border-color:#c3b18a}.settings input[type=checkbox]:checked:before{background:#fffaf0;transform:translate(16px)}.settings input[type=checkbox]:focus-visible{outline:2px solid var(--brass);outline-offset:3px}@media (prefers-reduced-motion:reduce){.settings input[type=checkbox],.settings input[type=checkbox]:before{transition:none}}.settings input[type=range]{accent-color:var(--brass)}.hint{color:var(--muted);font-size:12px;line-height:1.6}.settings-identity{align-items:center;gap:12px;display:flex}.settings-identity img{flex-shrink:0}.maker-about{border-top:1px solid var(--border);text-align:center;margin-top:28px;padding:20px 0 8px}.maker-about h3{margin-top:0}.maker-wordmark{width:min(100%,290px);height:auto;color:var(--ivory);margin:20px auto;display:block}.maker-wordmark-detail{color:var(--brass)}.maker-about p{color:#dedccb;letter-spacing:.06em;font-size:12px}.maker-about .hint{color:var(--muted);letter-spacing:normal;font-size:11px}.reset{width:100%;color:var(--brass);background:0 0;border:1px solid #6b6648;border-radius:10px;margin-top:18px;padding:12px;font-weight:600;transition:background .15s}.reset:hover{background:#c3b18a1f}.city-results{gap:6px;margin-top:12px;display:grid}.city-results button{background:var(--field);border:1px solid var(--line);color:#eee9d7;text-align:left;border-radius:10px;padding:11px 12px}.city-results button:hover{border-color:var(--brass)}.team-picker{border:1px solid var(--line);border-radius:10px;max-height:220px;margin-top:16px;overflow:auto}.team-picker legend{color:var(--brass);font-size:12px}@media (max-width:360px){.settings-content{padding-left:12px;padding-right:12px}.settings .two,.league-options{grid-template-columns:minmax(0,1fr)}}@media (max-width:650px){body{padding:5px}.app{border-width:7px;border-radius:18px;gap:8px;height:calc(100dvh - 10px);padding:14px 12px 12px}.identity{height:60px;padding:0}.maker-line{font-size:7px;top:14px;left:12px;right:12px}.company-name{letter-spacing:1px;font-size:7px}.actions button{padding:7px}.actions button span,.frame-label span:nth-child(2),.board-footer span:nth-child(2){display:none}.maker-footer{font-size:8px}.bottom{gap:4px 10px;font-size:7px}.bottom span:last-child{display:none}}@media (max-height:600px){.app{gap:6px;padding-top:10px;padding-bottom:10px}.identity{height:48px;padding:0 65px}.brandmark img{width:34px;height:34px}.model-number{margin-top:3px;font-size:11px}.company-name{margin-top:5px;font-size:8px}.maker-line{font-size:8px}.topbar{padding-top:6px}.actions button{padding:5px 7px}.maker-footer{gap:3px;font-size:7px}.maker-footer span:last-child{font-size:7px}}@media (max-width:650px) and (max-height:600px){.identity{height:50px;padding:0}}@media (pointer:coarse),(max-width:650px){button,summary,input,select,textarea{touch-action:manipulation}.actions button,.icon-btn{min-width:44px;min-height:44px}.display-idle .topbar{opacity:1}.settings header{padding-top:max(16px, env(safe-area-inset-top));padding-right:max(20px, env(safe-area-inset-right));padding-left:max(20px, env(safe-area-inset-left))}.settings-content{padding-bottom:max(24px, env(safe-area-inset-bottom));padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right))}.settings-save-note{padding-left:max(24px, env(safe-area-inset-left));padding-right:max(24px, env(safe-area-inset-right))}.settings label{font-size:14px}.settings .league-options label{font-size:13px}.settings .check{min-height:44px;margin-top:8px;margin-bottom:8px}.settings input:not([type=checkbox]):not([type=range]),.settings select,.settings textarea{min-height:44px;font-size:16px}.settings input[type=range],.settings summary{min-height:44px}.settings .hint{font-size:12px}.settings button{min-height:44px}.team-picker{overscroll-behavior:contain}}@media (max-width:650px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){body{padding:max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left))}.app{height:calc(100dvh - max(5px, env(safe-area-inset-top)) - max(5px, env(safe-area-inset-bottom)));border-width:4px;border-radius:16px;gap:12px;padding:10px 8px;overflow:hidden}.app.settings-open{overflow:hidden}.instrument-face{flex:1;gap:12px}.identity{padding:8px 0}.brandmark img{width:42px;height:42px}.display-area{flex:1;container-type:size}.board-stage{width:var(--fit-width);min-height:0}.topbar{z-index:10;background:#101a12f5;border:1px solid #d8b77b33;border-radius:6px;order:-1;padding:4px;position:sticky;top:0}.display-idle .topbar{opacity:0;pointer-events:none}.display-idle .topbar:has(button:focus-visible){opacity:1;pointer-events:auto}.actions{gap:4px;width:100%}.actions button{letter-spacing:.5px;flex-direction:column;flex:1;gap:4px;min-width:0;min-height:48px;padding:6px 3px;font-size:8px}.actions button span{display:inline}.feed-warnings{font-size:11px;line-height:1.5}.notice{overflow-wrap:anywhere;font-size:12px}.settings{border-left:0;border-radius:0;width:100%;height:100dvh}}@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){.topbar{background:0 0;width:auto;padding:0;position:absolute;top:10px;right:8px}.actions{width:auto}.actions button{flex:none}}@keyframes face-drift{0%{transform:translate(0)}25%{transform:translate(6px,4px)}50%{transform:translateY(8px)}75%{transform:translate(-6px,4px)}to{transform:translate(0)}}.instrument-face.drift{animation:600s linear infinite face-drift}