:root{--clr-gold-400: #e8c36b;--clr-gold-500: #cda24d;--clr-gold-600: #9f7930;--clr-mint-400: #2cc6a3;--clr-sky-400: #5c8cff;--clr-cream-100: #f7f1e6;--clr-cream-200: #e7dcc8;--clr-ink-700: #14171f;--clr-ink-800: #0b0d12;--clr-ink-900: #050608;--clr-bg: var(--clr-ink-900);--clr-bg-elevated: var(--clr-ink-800);--clr-accent: var(--clr-gold-500);--clr-accent-dim: rgba(205, 162, 77, .22);--clr-border: rgba(255, 255, 255, .08);--clr-border-accent: rgba(205, 162, 77, .28);--clr-status-good: var(--clr-mint-400);--clr-status-warn: var(--clr-gold-400);--clr-status-bad: #ff5d6c;--clr-text-1: #f5f0e0;--clr-text-2: rgba(245, 240, 224, .55);--clr-text-3: rgba(245, 240, 224, .28);--clr-text-accent: var(--clr-gold-500);--surface-1: rgba(11, 13, 18, .68);--surface-2: rgba(11, 13, 18, .88);--surface-border: rgba(255, 255, 255, .07);--surface-blur: blur(14px);--surface-blur-sm: blur(7px);--surface-blur-xs: blur(4px);--shadow-xs: 0 1px 3px rgba(0, 0, 0, .45);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .55);--shadow-md: 0 4px 16px rgba(0, 0, 0, .65);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .75);--shadow-accent: 0 0 18px rgba(205, 162, 77, .18);--radius-xs: 3px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--sp-0: 0px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-7: 28px;--sp-8: 32px;--sp-10: 40px;--sp-12: 48px;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;--text-2xs: 10px;--text-xs: 11px;--text-sm: 13px;--text-base: 15px;--text-lg: 18px;--text-xl: 22px;--text-2xl: 28px;--fw-regular: 400;--fw-medium: 500;--fw-semibold: 600;--fw-bold: 700;--leading-tight: 1.2;--leading-base: 1.5;--leading-loose: 1.8;--tracking-tight: 0em;--tracking-base: 0em;--tracking-wide: 0em;--tracking-wider: 0em;--tracking-widest: 0em;--z-scene: 0;--z-ui: 10;--z-hud: 20;--z-dev: 25;--z-overlay: 30;--z-modal: 40;--z-loading: 50;--z-top: 100;--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);--viewport-w: 100vw;--viewport-h: 100vh;--viewport-h-small: 100svh;--viewport-h-dynamic: 100dvh;--viewport-max-w: 960px;--viewport-max-h: 540px;--viewport-bg: var(--clr-bg);--app-frame-shadow: 0 18px 70px rgba(0, 0, 0, .55);--game-board-w: 100%;--game-board-h: 100%;--game-board-aspect: 16 / 9;--hud-pad-x: var(--sp-4);--hud-pad-y: var(--sp-3);--hud-badge-h: 28px;--hud-badge-px: var(--sp-3);--hud-badge-radius: var(--radius-sm);--hud-panel-min-w: 120px;--hud-control-h: 30px;--hud-control-px: var(--sp-3);--hud-edge-gap: var(--sp-4);--dur-instant: 80ms;--dur-fast: .15s;--dur-base: .24s;--dur-slow: .38s;--dur-slower: .6s;--ease-out: cubic-bezier(.25, 0, 0, 1);--ease-in: cubic-bezier(.5, 0, 1, .5);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;tab-size:4}b,strong{font-weight:bolder}code,kbd,samp,pre{font-size:1em}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}img,svg,video,canvas,audio,iframe,embed,object{display:block}img,video{max-width:100%;height:auto}:root{--tg-viewport-height: 100dvh;--tg-viewport-stable-height: 100svh;--app-landscape-width: 100vw;--app-landscape-height: 56.25vw ;--app-landscape-scale: 1}html,body,#root{width:100%;height:100%;min-height:100dvh;overflow:hidden;overscroll-behavior:none;touch-action:none}html{background-color:var(--clr-bg);color-scheme:dark}body{position:fixed;inset:0;height:var(--tg-viewport-stable-height, 100dvh);min-height:var(--tg-viewport-stable-height, 100dvh);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:none;-webkit-text-size-adjust:none;background-color:var(--clr-bg);color:var(--clr-text-1)}#root{position:fixed;inset:0;height:var(--tg-viewport-stable-height, 100dvh);min-height:var(--tg-viewport-stable-height, 100dvh)}canvas{display:block;touch-action:none;outline:none;-webkit-tap-highlight-color:transparent}.game-canvas{position:absolute;inset:0;width:var(--game-board-w);height:var(--game-board-h)}.game-canvas canvas{width:100%!important;height:100%!important}.app-shell{position:fixed;inset:0;width:100%;height:var(--tg-viewport-stable-height, 100dvh);display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--viewport-bg)}@media(orientation:portrait){.app-shell{width:var(--tg-viewport-stable-height, 100dvh);height:100vw;position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center center}}.game-frame{position:relative;width:min(var(--app-landscape-width),var(--viewport-max-w));height:min(var(--app-landscape-height),var(--viewport-max-h));aspect-ratio:var(--game-board-aspect);max-width:var(--viewport-max-w);max-height:var(--viewport-max-h);overflow:hidden;isolation:isolate;background:var(--clr-bg);box-shadow:var(--app-frame-shadow)}@media(max-width:960px),(max-height:540px){.game-frame{max-width:none;max-height:none;box-shadow:none}}@media(pointer:coarse){.game-frame{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;box-shadow:none;transform:none!important}}.safe-area{position:absolute;inset:0;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);padding-left:var(--safe-left);padding-right:var(--safe-right);pointer-events:none}@media(orientation:portrait){.safe-area{padding-top:var(--safe-left);padding-bottom:var(--safe-right);padding-left:var(--safe-bottom);padding-right:var(--safe-top)}}.ui-layer{position:absolute;inset:0;pointer-events:none;z-index:var(--z-hud)}.loading-screen{position:absolute;inset:0;z-index:var(--z-loading);display:flex;align-items:center;justify-content:center;background:var(--clr-bg)}.loading-screen__spinner{width:36px;height:36px;border:3px solid var(--clr-accent-dim);border-top-color:var(--clr-accent);border-radius:var(--radius-full);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.stats-panel{position:absolute;bottom:var(--hud-edge-gap);left:var(--hud-edge-gap);z-index:var(--z-dev);min-width:var(--hud-panel-min-w);padding:var(--sp-2) var(--sp-3);border:1px solid var(--surface-border);border-left-width:3px;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--clr-text-2);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--leading-base);pointer-events:none;-webkit-backdrop-filter:var(--surface-blur-xs);backdrop-filter:var(--surface-blur-xs)}.stats-panel--good{border-left-color:var(--clr-status-good)}.stats-panel--warn{border-left-color:var(--clr-status-warn)}.stats-panel--bad{border-left-color:var(--clr-status-bad)}.stats-panel--good .stats-panel__fps{color:var(--clr-status-good)}.stats-panel--warn .stats-panel__fps{color:var(--clr-status-warn)}.stats-panel--bad .stats-panel__fps{color:var(--clr-status-bad)}.stats-panel__fps{font-weight:var(--fw-bold)}.stats-panel__quality{margin-top:var(--sp-1);color:var(--clr-text-3);font-size:var(--text-2xs)}.scene-health-panel{position:absolute;top:var(--hud-edge-gap);left:var(--hud-edge-gap);z-index:var(--z-dev);min-width:154px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--surface-border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--clr-text-2);font-family:var(--font-mono);font-size:var(--text-2xs);line-height:var(--leading-base);pointer-events:none;-webkit-backdrop-filter:var(--surface-blur-xs);backdrop-filter:var(--surface-blur-xs)}.dice-debug-panel,.telegram-debug-panel{position:absolute;z-index:var(--z-dev);min-width:150px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--surface-border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--clr-text-2);font-family:var(--font-mono);font-size:var(--text-2xs);line-height:var(--leading-base);pointer-events:none;-webkit-backdrop-filter:var(--surface-blur-xs);backdrop-filter:var(--surface-blur-xs)}.dice-debug-panel{top:calc(var(--hud-edge-gap) + 46px);right:var(--hud-edge-gap)}.telegram-debug-panel{top:calc(var(--hud-edge-gap) + 92px);left:var(--hud-edge-gap)}.ui-layer--interactive{pointer-events:auto}.roll-button{position:absolute;right:calc(var(--safe-right) + 16px);bottom:calc(var(--safe-bottom) + 16px);z-index:var(--z-hud);min-width:100px;height:42px;padding:0 var(--sp-4);border:1px solid rgba(255,255,255,.35);border-radius:22px;background:linear-gradient(135deg,#d4af37,#aa7c11);color:#070403;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:.08em;box-shadow:0 4px 15px #aa7c1166,inset 0 1px #ffffff4d;cursor:pointer;pointer-events:auto;transition:box-shadow var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}.roll-button:active{transform:scale(.96) translateY(1px)}.roll-button:hover:not(:disabled){box-shadow:0 6px 20px #aa7c1199,inset 0 1px #fff6;transform:translateY(-1px)}.roll-button:disabled{cursor:default;opacity:.45;box-shadow:none;background:#332a22;color:#8c7f75;border-color:#ffffff0d}.dev-skin-switcher{position:absolute;right:var(--hud-edge-gap);bottom:var(--hud-edge-gap);z-index:var(--z-dev);display:grid;grid-template-columns:repeat(5,minmax(0,auto));gap:var(--sp-1);max-width:min(92vw,620px);overflow-x:auto;scrollbar-width:none;pointer-events:auto}.dev-skin-switcher::-webkit-scrollbar{display:none}.dev-skin-btn{min-height:var(--hud-control-h);padding:var(--sp-1) var(--hud-control-px);border:1px solid var(--clr-border);border-radius:var(--radius-sm);background:var(--surface-1);color:var(--clr-text-2);font-family:var(--font-mono);font-size:var(--text-2xs);white-space:nowrap;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);-webkit-backdrop-filter:var(--surface-blur-xs);backdrop-filter:var(--surface-blur-xs)}.dev-skin-btn:hover{border-color:var(--clr-border-accent);color:var(--clr-text-1)}.dev-skin-btn.active{border-color:var(--clr-accent);background:var(--clr-accent-dim);color:var(--clr-accent)}.dev-boot-marker{position:fixed;top:var(--sp-2);right:var(--sp-2);z-index:var(--z-top);padding:var(--sp-1) var(--sp-2);border:1px solid var(--surface-border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--clr-status-good);font-family:var(--font-mono);font-size:var(--text-2xs);line-height:var(--leading-tight);pointer-events:none}.dev-error-boundary{position:fixed;inset:var(--sp-4);z-index:var(--z-top);display:flex;flex-direction:column;gap:var(--sp-3);justify-content:center;max-width:680px;margin:auto;padding:var(--sp-4);border:1px solid var(--clr-status-bad);border-radius:var(--radius-md);background:var(--surface-2);color:var(--clr-text-1);font-family:var(--font-sans);-webkit-backdrop-filter:var(--surface-blur-sm);backdrop-filter:var(--surface-blur-sm)}.dev-error-boundary pre{overflow:auto;color:var(--clr-status-bad);font-family:var(--font-mono);font-size:var(--text-xs);white-space:pre-wrap}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:#d4af37;box-shadow:0 0 8px #d4af37e6;cursor:pointer;transition:transform .1s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.22)}input[type=range]::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:#d4af37;box-shadow:0 0 8px #d4af37e6;cursor:pointer;transition:transform .1s ease}input[type=range]::-moz-range-thumb:hover{transform:scale(1.22)}
