:root{--ivory:#f4f0e5;--brass:#c9a36d;--cloth:#218c42;--gold-guide:#ffce4c;--blue-guide:#8cdceb;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{color:var(--ivory);font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,sans-serif;background:#10171b;font-size:14px}button,input,select{font:inherit}button{color:inherit;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.45}button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brass);outline-offset:4px}button,input,select{border-radius:8px}button{border:0}button:active:not(:disabled){filter:brightness(1.2)}[hidden]{display:none!important}#app{height:100dvh;display:grid;grid-template-rows:52px 94px minmax(0,1fr) 56px;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));background:radial-gradient(ellipse at 15% 10%,#79603425,transparent 35%),radial-gradient(ellipse at 85% 25%,#8c672a15,transparent 40%),linear-gradient(110deg,#192327,#10171d 50%,#1b2022);position:relative}#app:before{content:"";position:absolute;pointer-events:none;inset:0;background:repeating-linear-gradient(90deg,transparent 0 16%,#0002 16.2% 16.5%,transparent 16.8% 30%);opacity:.3}.topbar,.hud,.arena,.footer{position:relative;z-index:1}.topbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #fff1;padding:0 10px}.brand{text-align:center;position:absolute;left:50%;transform:translate(-50%)}.brand strong{font-weight:500;font-size:20px;letter-spacing:3px}.brand>span{display:block;font:9px Georgia,serif;letter-spacing:5px;color:#a0a6a4;margin-top:2px}.icon-button{height:42px;min-width:42px;padding:8px 10px;background:none;color:#ccd0cd;display:flex;gap:10px;align-items:center;justify-content:center;font-size:24px}.icon-button .desktop-label{font-size:13px;color:#99a39f}.hamburger{width:20px;height:15px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}.hamburger:after{content:"";position:absolute;top:5px;left:0;right:0;border-top:2px solid}.top-actions{display:flex;align-items:center;gap:5px}.connection{font-size:11px;color:#95aba0;margin-right:12px}.connection:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#73b692;margin-right:6px}.connection.offline:before{background:#e5b974}.hud{display:grid;grid-template-columns:1fr 150px 1fr;align-items:center;max-width:1190px;width:100%;margin:auto;height:100%;gap:18px}.player{display:flex;align-items:center;gap:15px;min-width:0;position:relative;transition:opacity .2s}.player.opponent{flex-direction:row-reverse;text-align:right}.avatar{flex-shrink:0;width:58px;height:58px;border-radius:50%;border:1px solid #bc9b62;display:grid;place-items:center;box-shadow:0 4px 12px #0008,inset 0 0 0 4px #102626;font-family:Georgia,serif;font-size:23px;color:#e3d2af;background:radial-gradient(ellipse at 30% 10%,#9caf8c 0,transparent 36%),linear-gradient(145deg,#344e46,#18262b 70%)}.avatar-second{background:radial-gradient(ellipse at 75% 15%,#d0a263,transparent 43%),linear-gradient(130deg,#403730,#1d2430 70%)}.player.active .avatar{box-shadow:0 0 0 3px #c9a36d25,0 0 20px #c9a36d30,inset 0 0 0 4px #102626}.player-detail{min-width:0;flex:1}.player-title{display:flex;align-items:center;gap:10px;margin-bottom:9px}.player-title strong{font-size:17px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}.player-title>span{font-size:11px;color:#abb5af}.opponent .player-title{justify-content:flex-end}.ball-tray{display:flex;gap:7px;background:#0a111780;border:1px solid #afaf9d20;padding:6px 9px;border-radius:24px;width:max-content}.opponent .ball-tray{margin-left:auto}.hud-ball{width:24px;height:24px;border-radius:50%;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#fff9 0,transparent 40%),var(--ball-color);box-shadow:inset -3px -4px 5px #0008,0 2px 3px #0008;flex-shrink:0}.hud-ball.stripe{background:radial-gradient(circle at 30% 20%,#fff8 0,transparent 40%),linear-gradient(#eee4cc 18%,var(--ball-color) 21% 78%,#ece4d3 80%)}.hud-ball i{font-style:normal;width:12px;height:12px;display:grid;place-items:center;border-radius:50%;background:#fbf4e4;color:#171b1c;font-weight:700;font-size:9px}.hud-ball.empty{background:none;box-shadow:inset 0 1px 4px #0008;border:1px solid #71807740}.hud-ball.potted{opacity:.14;filter:grayscale(1)}.ready-label{position:absolute;right:0;top:-4px;font-size:10px;color:#c9ab77}.opponent .ready-label{right:auto;left:0}.turn{text-align:center;align-self:center}.clock{margin:0 auto;width:54px;height:54px;border-radius:50%;padding:3px;background:conic-gradient(var(--brass) var(--progress,100%),#43504850 0);box-shadow:0 3px 12px #0007}.clock span{display:grid;place-items:center;width:100%;height:100%;background:#161e21;border-radius:50%;font-size:25px;font-variant-numeric:tabular-nums;font-weight:300;border:2px solid #383f3e}.clock.urgent{--brass:#ea795b}.turn p{margin:5px -20px 0;font-size:12px;letter-spacing:1px;color:#e9e4d6}.arena{display:grid;grid-template-columns:76px minmax(0,1fr) 90px;gap:12px;min-height:0;align-items:center}.table-stage{width:100%;height:100%;min-height:0;position:relative;display:grid;place-items:center}#table{width:100%;height:100%;display:block;touch-action:none;outline:none}.fine-control{display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:90%;height:360px;color:#d9dcd6}.control-label{font-size:12px;color:#c4cdc5;white-space:nowrap}.fine-slider{width:52px;flex:1;min-height:70px;position:relative;border:1px solid #6e706a88;border-radius:5px;background:linear-gradient(90deg,#090f12,#2c3030 47%,#0b1115 56%);touch-action:none;cursor:ns-resize;box-shadow:inset 0 0 0 4px #10171c,0 3px 10px #0008}.fine-ticks{position:absolute;inset:9px 28%;background:repeating-linear-gradient(0deg,#a9a79688 0 1px,transparent 1px 6px);border-left:1px solid #bebbaa80}.fine-knob{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:conic-gradient(from 30deg,#9c743f,#f9e4ab,#9c7037,#c99c56,#f1d99c,#9c743f);border:1px solid #f0d494;box-shadow:0 3px 9px #000c;pointer-events:none}.nudge{height:32px;min-height:28px;width:54px;background:transparent;font-size:25px;color:#acb6ae}.fine-value{font-variant-numeric:tabular-nums;font-size:14px;letter-spacing:1px;padding-top:8px;color:#d1bb96}.shot-controls{height:95%;max-height:470px;display:flex;flex-direction:column;align-items:center;gap:18px}.spin-control{display:flex;flex-direction:column;align-items:center;gap:9px}.spin-ball{width:70px;height:70px;position:relative;border-radius:50%;background:radial-gradient(circle at 32% 22%,#fffefa 0 12%,#eee7d2 35%,#c9c2ae 75%,#7b786a);box-shadow:0 5px 13px #000a,inset -2px -4px 8px #0003;border:1px solid #e8ddbe;touch-action:none;cursor:crosshair}.spin-axis{position:absolute;left:50%;top:4%;bottom:4%;border-left:1px solid #8a826e70}.spin-axis:after{content:"";position:absolute;top:50%;left:-10px;width:20px;border-top:1px solid #8a826e70}#spin-dot{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(at 30% 20%,#f27664,#b91f24 65%);box-shadow:0 1px 2px #0007;border:1px solid #8b1a1a;pointer-events:none}.power-panel{display:flex;flex-direction:column;align-items:center;gap:5px;width:72px;flex:1;min-height:100px;background:linear-gradient(90deg,#141a1d,#24282a 45%,#101619);padding:10px 9px 9px;border:1px solid #81817455;border-radius:10px;box-shadow:0 6px 15px #0005}.power-panel strong{font-weight:400;font-size:21px;font-variant-numeric:tabular-nums}.power-panel strong span{font-size:14px}.power-slider{position:relative;flex:1;width:35px;min-height:55px;margin:3px 0 6px;border:1px solid #9a998b;border-radius:6px;background:linear-gradient(90deg,#101313,#34332b 60%,#11171a);box-shadow:inset 0 0 0 3px #101416;touch-action:none;cursor:ns-resize}.power-slider:before{content:"";position:absolute;inset:-8px -13px}#power-fill{position:absolute;bottom:3px;left:3px;right:3px;height:30%;max-height:calc(100% - 6px);border-radius:0 0 3px 3px;background:linear-gradient(90deg,#bd8532,#ffcd72 65%,#d39635);box-shadow:0 0 9px #c79a5040;opacity:.55}body.charging #power-fill{opacity:1}.power-ticks{position:absolute;inset:7px 6px 7px 14px;background:repeating-linear-gradient(0deg,#ebe0ba66 0 1px,transparent 1px 12px)}#power-cue{position:absolute;left:6px;top:3px;width:8px;height:35px;border-radius:3px;background:linear-gradient(#96b9b3 0 4%,#eee9cf 4% 13%,#aa7040 14%,#e3bd80 60%,#794b2e);box-shadow:1px 1px 3px #000;pointer-events:none}.power-key{font-size:10px;white-space:nowrap;color:#a8b0a8}kbd{display:inline-grid;place-items:center;border:1px solid #b7b9ac88;background:linear-gradient(#282f31,#141b1f);padding:2px 5px;border-radius:4px;box-shadow:0 2px #050c10;font:13px ui-monospace,monospace;color:#e3e4d9}.touch-label{display:none}.footer{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}.invite-button{background:#0f161b88;border:1px solid #a4a08835;padding:10px 12px;display:flex;gap:10px;align-items:center;white-space:nowrap}.invite-button>span:first-child{color:#a7b0a7}.invite-button strong{font-size:13px;letter-spacing:1px;font-weight:500}.copy-icon{font-size:11px;color:#c6b38d;border-left:1px solid #ffffff15;padding-left:10px}.input-hint{margin:0;text-align:center;color:#d9d8cb;font-size:12px;white-space:nowrap}.input-hint kbd{margin-right:9px;padding:5px 8px}.hint-secondary{margin-left:18px;border-left:1px solid #fff2;padding-left:18px;font-size:11px;color:#9fa79e}.legend{display:flex;gap:20px;color:#adb5aa;white-space:nowrap;font-size:11px}.legend>span{display:flex;align-items:center;gap:8px}.legend i{width:30px;height:0;border-top:2px solid var(--gold-guide);position:relative}.legend i:after{content:"";position:absolute;right:-1px;top:-4px;width:6px;height:6px;border-top:2px solid var(--gold-guide);border-right:2px solid var(--gold-guide);transform:rotate(45deg)}.legend .blue-line{border-top:2px dashed var(--blue-guide)}.legend .blue-line:after{border-color:var(--blue-guide)}.table-note{position:absolute;top:7%;left:50%;transform:translate(-50%);padding:9px 18px;color:#f0e7ca;background:#10271dd9;border:1px solid #d4c28955;border-radius:30px;font-size:12px;pointer-events:none;white-space:nowrap;box-shadow:0 4px 16px #0004}.placement{position:absolute;bottom:11%;left:50%;transform:translate(-50%)}.network-banner{position:absolute;z-index:12;top:146px;left:50%;transform:translate(-50%);border:1px solid #c0985b77;border-radius:8px;background:#322c20f2;padding:10px 20px;color:#f5deb0;font-size:12px;white-space:nowrap}.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#090f1477;backdrop-filter:blur(5px);padding:20px}.lobby-card{width:410px;padding:36px 38px 24px;background:linear-gradient(135deg,#23312df8,#142020fb 70%);border:1px solid #9c8a6355;border-radius:18px;box-shadow:0 25px 80px #0009,0 0 0 8px #0b16122a}.eyebrow{font:9px Georgia,serif;letter-spacing:3px;color:#c8a974;margin-bottom:16px}h1{font-weight:500;font-size:34px;letter-spacing:2px;margin:0 0 15px}h2{font-weight:500;font-size:25px;margin:0 0 15px;letter-spacing:1px}.subtle{color:#a4b1a8;font-size:12px;line-height:1.9}.lobby-card .subtle{margin-bottom:23px}.lobby-card label{display:block;font-size:11px;color:#bdc7b8;margin:10px 0 8px}input{width:100%;height:44px;border:1px solid #a9b09c44;background:#09181670;color:#f1eada;padding:10px 12px;outline:none}input:focus{border-color:#c4a46d;box-shadow:0 0 0 3px #c9a36d15}input::placeholder{color:#7e9087}.lobby-tabs{display:flex;gap:4px;padding:4px;background:#08161370;border-radius:8px;margin:18px 0 16px}.lobby-tabs button{flex:1;background:none;padding:9px 6px;font-size:12px;color:#95a69b}.lobby-tabs button[aria-selected=true]{background:#3b4a3c;color:#e9e6d3;box-shadow:0 2px 5px #0002}.gold-button{background:linear-gradient(115deg,#c6a16a,#e5c58e 70%,#c8a46d);color:#252b22;border:1px solid #e3c996;min-height:43px;padding:11px 20px;font-size:13px;font-weight:600;box-shadow:0 3px 12px #0004;transition:filter .15s}.gold-button span{margin-left:12px}#connect-button{width:100%;margin-top:4px}.error{color:#f0ad90;font-size:12px;line-height:1.6;margin:10px 0 0;min-height:0}.error:empty{display:none}.lobby-foot{display:flex;align-items:center;gap:9px;font-size:10px;color:#95a298;border-top:1px solid #ffffff10;margin-top:22px;padding-top:17px}.tiny-ball{width:20px;height:20px;background:#dedbcc;border:5px solid #090f12;color:#192020;display:grid;place-items:center;border-radius:50%;font-size:9px;font-weight:700}.text-button{background:none;font-size:12px;color:#d0bd96;padding:9px 4px}.lobby-foot .text-button{margin-left:auto;font-size:10px}.outline-button{min-height:42px;padding:10px 18px;border:1px solid #b8b39b55;color:#d1d6c9;background:#0c171955;font-size:12px}.small-card{width:360px;text-align:center;background:linear-gradient(130deg,#25322dfc,#15211ffb);border:1px solid #bd9d6566;padding:32px;border-radius:15px;box-shadow:0 20px 80px #000a}.small-card p{font-size:12px;line-height:1.7;color:#abb9ad}.small-card>.gold-button,.small-card>.outline-button{width:100%;margin:5px 0}.small-card>.text-button{margin-top:8px}.soft-overlay{backdrop-filter:blur(2px);background:#0a101440}.room-code{margin:22px 0 10px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px}.room-code>span{font:28px ui-monospace,monospace;letter-spacing:4px;color:#ead7b3}.room-code>button{font-size:10px}.waiting-players{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#a3bbab;margin:24px 0 15px}.result-emblem{width:64px;height:64px;display:grid;place-items:center;border:17px solid #0b1013;border-radius:50%;background:#eee7d3;color:#1c2420;font-size:28px;font-weight:700;box-shadow:0 5px 15px #000a,inset 0 0 5px #6e6647;margin:0 auto 20px}.result-card .eyebrow{margin-bottom:10px}dialog{color:var(--ivory);background:linear-gradient(120deg,#24312d,#15211f);border:1px solid #b99b6555;border-radius:14px;padding:30px;max-width:min(500px,90vw);max-height:90dvh;box-shadow:0 25px 90px #000a}dialog::backdrop{background:#071010aa;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:12px;top:8px;background:none;font-size:28px;width:35px;height:35px;color:#a3b0a5}.instructions p{font-size:12px;line-height:1.8;color:#b7c3b8;margin:15px 0}.instructions b{display:block;color:#e2d9c2;font-weight:500;font-size:13px;margin-bottom:4px}.setting-row{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #fff1;padding-top:16px;margin-top:20px;font-size:12px}.setting-row select{padding:7px 10px;background:#1d2927;color:#e8dec4;border:1px solid #a2a68c55}.small{font-size:10px}.danger{color:#e4a58b}#resign-button{width:100%;margin-top:8px}#leave-button{display:block;margin:6px auto 0}#confirm-dialog p{color:#b3bbaa;font-size:13px;line-height:1.8}.confirm-actions{display:flex;gap:12px;margin-top:25px;justify-content:center}.toast{position:fixed;bottom:75px;left:50%;transform:translate(-50%);max-width:90vw;padding:12px 22px;z-index:80;border-radius:9px;background:#243b2cf5;border:1px solid #a4b48955;color:#f0ead5;font-size:13px;box-shadow:0 10px 35px #0008;pointer-events:none;text-align:center}.portrait{display:none}.controls-disabled .fine-control,.controls-disabled .shot-controls{opacity:.48}.charging .fine-control,.charging .spin-control{opacity:.45}.charging .power-panel{border-color:#c9a36d99;box-shadow:0 0 18px #d29e3620}@media(pointer:coarse){.touch-label{display:inline}.desktop-label{display:none!important}.power-panel .touch-label{font-size:10px;white-space:nowrap}.table-note{font-size:11px}.fine-slider{width:52px}.power-slider:before{inset:-7px -14px}}@media(max-width:1050px){#app{grid-template-rows:44px 82px minmax(0,1fr) 46px;padding-inline:12px}.hud{gap:12px;grid-template-columns:1fr 106px 1fr}.avatar{width:46px;height:46px;font-size:19px}.player{gap:10px}.hud-ball{width:21px;height:21px}.ball-tray{gap:4px;padding:5px 7px}.player-title strong{font-size:14px;max-width:90px}.arena{grid-template-columns:58px minmax(0,1fr) 70px;gap:5px}.shot-controls{gap:10px}.spin-ball{width:58px;height:58px}.power-panel{width:58px}.control-label{font-size:10px}.hint-secondary{display:none}.legend{gap:10px;font-size:10px}.legend i{width:23px}.invite-button{padding:8px}.invite-button>span:first-child{display:none}.footer{font-size:10px}.input-hint{font-size:11px}.network-banner{top:130px}}@media(max-height:540px)and (orientation:landscape){#app{grid-template-rows:58px minmax(0,1fr) 30px;padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))}.topbar{position:absolute;left:max(7px,env(safe-area-inset-left));right:max(7px,env(safe-area-inset-right));top:5px;height:42px;z-index:3;border:0;padding:0;pointer-events:none}.topbar button{pointer-events:auto}.brand,.connection,.topbar .desktop-label,#fullscreen-button{display:none}.topbar .icon-button{font-size:21px;min-width:36px;padding:8px}.hud{padding:0 42px;grid-template-columns:1fr 88px 1fr;gap:10px;max-width:940px}.avatar{height:36px;width:36px;font-size:16px}.player{gap:8px}.player-title{margin-bottom:4px;gap:6px}.player-title strong{font-size:12px;max-width:80px}.player-title>span{font-size:9px}.ball-tray{padding:3px 5px;gap:3px}.hud-ball{width:16px;height:16px}.hud-ball i{width:9px;height:9px;font-size:7px}.clock{height:34px;width:34px;padding:2px}.clock span{font-size:17px;border-width:1px}.turn p{font-size:9px;margin-top:3px;letter-spacing:0}.ready-label{font-size:8px;top:0}.fine-control{height:88%}.control-label{font-size:10px}.fine-slider{width:38px}.fine-knob{width:29px;height:29px}.nudge{height:25px;min-height:23px;font-size:22px}.fine-value{font-size:10px;padding-top:5px}.arena{grid-template-columns:52px minmax(0,1fr) 61px;gap:2px}.shot-controls{height:95%;gap:6px}.spin-ball{width:46px;height:46px}.spin-control{gap:4px}.spin-control .control-label{font-size:9px}#spin-dot{width:9px;height:9px}.power-panel{width:49px;padding:5px 7px 4px;gap:1px}.power-panel strong{font-size:15px}.power-panel strong span{font-size:10px}.power-panel .control-label{font-size:8px}.power-slider{width:27px;margin:3px 0 5px}.power-slider:before{inset:-6px -12px}.power-ticks{left:10px}.power-key{font-size:8px}#power-cue{width:6px;height:28px;left:4px}.power-panel .touch-label{font-size:8px}.footer{gap:6px;padding:0 3px}.invite-button{font-size:9px;padding:5px 6px;gap:6px;border:0;background:none}.invite-button strong{font-size:10px;letter-spacing:1px}.copy-icon{font-size:9px;padding-left:6px}.input-hint{font-size:9px}.input-hint kbd{font-size:9px;padding:1px 3px;margin-right:3px}.legend{font-size:9px;gap:9px}.legend i{width:18px}.legend>span{gap:5px}.table-note{top:8%;padding:6px 12px;font-size:10px}.placement{bottom:12%;min-height:34px;font-size:11px;padding:7px 14px}.network-banner{top:59px;font-size:10px;padding:7px 14px}.overlay{padding:9px}.lobby-card{width:510px;padding:20px 25px;display:grid;grid-template-columns:1fr 1.15fr;column-gap:25px}.lobby-card .eyebrow{grid-column:1;margin-top:7px;font-size:8px;line-height:1.7}.lobby-card h1{font-size:25px;grid-column:1;margin-bottom:8px}.lobby-card>.subtle{grid-column:1;font-size:11px;margin:0;line-height:1.7}.lobby-card form{grid-column:2;grid-row:1/5}.lobby-card .lobby-foot{grid-column:1;grid-row:4;flex-wrap:wrap;margin-top:16px;gap:6px;padding-top:10px}.lobby-foot .text-button{margin-left:0;padding:0}.lobby-card input{height:37px;font-size:12px}.lobby-card label{margin:4px 0 6px}.lobby-tabs{margin:11px 0;padding:3px}.lobby-tabs button{padding:7px 5px}.gold-button{min-height:37px;font-size:12px;padding:8px 16px}.small-card{padding:19px 26px;width:330px}.small-card h2{font-size:21px;margin:0 0 8px}.small-card .eyebrow{font-size:8px;margin-bottom:9px}.small-card p{margin:6px 0;font-size:11px}.room-code{margin:10px 0 5px}.room-code>span{font-size:24px}.waiting-players{margin:12px 0 9px}.small-card>.text-button{margin-top:4px;padding:5px}.small-card>.outline-button{min-height:33px;padding:7px}.result-emblem{width:46px;height:46px;border-width:12px;font-size:20px;margin-bottom:10px}.toast{bottom:40px;font-size:11px;padding:8px 16px}dialog{padding:22px;max-height:88dvh}.instructions p{font-size:11px}dialog h2{font-size:21px}.instructions b{font-size:12px}}@media(orientation:portrait)and (max-width:900px){.portrait{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at center,#253b2d,#101b1a 70%);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}.rotate-phone{font-size:110px;color:#c9a36d;transform:rotate(90deg);line-height:1.4}.portrait h2{font-size:25px}.portrait p{color:#a3b4a5;font-size:13px;line-height:1.8}.portrait>span{font-size:10px;color:#809583;margin-top:35px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.arena{grid-template-rows:minmax(0,1fr)}#table{position:absolute;inset:0}.demo-note{color:#bac8bb;font-size:12px;line-height:1.9;margin:15px 0}.repo-link{color:#d7bc85;font-size:12px;text-underline-offset:4px;line-height:1.8}#mode-actions>.gold-button{width:100%}.demo-mode .lobby-card{border-top:3px solid #c9a36d}@media(max-height:540px)and (orientation:landscape){#mode-actions{grid-column:2;grid-row:1/5;align-self:center}.demo-note{font-size:11px;margin:12px 0}.repo-link{font-size:11px}}#mode-actions>.outline-button{width:100%;margin-top:10px}.mode-description{font-size:11px;color:#a6b9aa;margin:7px 0 14px;line-height:1.6}#friend-panel>.text-button{margin-top:8px}@media(max-height:540px)and (orientation:landscape){#friend-panel{grid-column:2;grid-row:1/5;align-self:center}.mode-description{font-size:10px;margin:5px 0 9px}#mode-actions>.outline-button{margin-top:2px}}.sound-preview{border-top:1px solid #fff1;margin-top:18px;padding-top:14px;font-size:12px;color:#b7c3b8}.sound-preview>div{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.sound-preview button{flex:1;min-width:65px;padding:8px;min-height:44px}.sound-preview a{font-size:11px;color:#d0bd96}#tutorial{width:600px;max-width:92vw;padding:24px 28px;max-height:94dvh}.tutorial-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}#tutorial-progress{font-size:12px;color:var(--brass);letter-spacing:1px}#tutorial-skip{min-height:44px;padding:10px 12px;border:1px solid #c9a36d55}#tutorial-art{background:#174e31;border:1px solid #c9a36d44;border-radius:10px;margin-bottom:22px;overflow:hidden}#tutorial-art svg{display:block;width:100%;max-height:170px}.tutorial-copy h2{font-size:24px;margin-bottom:12px}#tutorial-body{color:#e1e4d8;font-size:14px;line-height:1.9;min-height:54px;margin:0 0 10px}#tutorial-hint{font-size:12px;line-height:1.8;color:#b8c9b9;margin:0}#tutorial-note{color:#95aa9c;font-size:11px;margin:20px 0 12px;line-height:1.6}.tutorial-actions{display:flex;justify-content:space-between;gap:12px}.tutorial-actions button{min-width:110px;min-height:44px}@media(max-height:540px)and (orientation:landscape){#tutorial{width:730px;padding:14px 22px}.tutorial-head{margin-bottom:10px}.tutorial-layout{display:grid;grid-template-columns:210px 1fr;gap:22px;align-items:center}#tutorial-art{margin:0}#tutorial-art svg{height:140px}.tutorial-copy h2{font-size:21px;margin-bottom:8px}#tutorial-body{font-size:12px;min-height:0;line-height:1.8}#tutorial-hint{font-size:11px}#tutorial-note{margin:12px 0 8px}}