@font-face{font-family:Montserrat;src:url('assets/montserrat-cyrillic.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Montserrat;src:url('assets/montserrat-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--bg:#29282e;--card:#353840;--gold:#f6d179;--orange:#fb7809;--text:#f8f6f1;--muted:#b4b3bd;--line:#ffffff14;--good:#97d6b4;--bad:#ffaaa6;--shadow:0 18px 60px #10101555;color-scheme:dark;font-family:Montserrat,system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:#1e1e23;color:var(--text);font-size:14px;line-height:1.5}button,input,select{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.38}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}a{color:var(--gold)}button{touch-action:manipulation}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:600;line-height:1.18}h1{font-size:31px;letter-spacing:-1px}h2{font-size:22px;letter-spacing:-.5px}h3{font-size:16px}small{font-size:11px}.app-shell{max-width:480px;min-height:100dvh;margin:auto;background:var(--bg);position:relative;box-shadow:0 0 80px #0004;overflow:hidden}.app-header{position:relative;z-index:2;padding:14px 20px 11px;border-bottom:1px solid var(--line);background:#29282ef5}.header-main{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{border:0;background:transparent;padding:0}.brand img{display:block;width:120px;height:auto}.balance-box{text-align:right}.balance-line{display:flex;align-items:center;justify-content:flex-end;gap:8px;color:var(--gold);font-weight:600;font-size:18px}.points-icon{width:23px;height:23px;border:1px solid #f6d17966;border-radius:50%;font-size:13px;display:grid;place-items:center;background:#f6d1790b}.balance-box small{display:block;color:var(--muted);font-size:10px;line-height:1.5}.header-note{display:flex;align-items:center;justify-content:space-between;margin-top:8px;color:var(--muted);font-size:10px}.connection{display:inline-flex;align-items:center;gap:5px}.status-dot{width:5px;height:5px;border-radius:50%;background:var(--good)}.status-dot.offline{background:var(--orange)}main{padding:22px 20px 112px;position:relative;min-height:calc(100dvh - 115px)}.eyebrow{font-size:10px;font-weight:600;letter-spacing:1.7px;text-transform:uppercase;color:var(--gold);margin-bottom:10px}.muted{color:var(--muted)}.gold{color:var(--gold)}.small{font-size:12px}.hero{padding:1px 0 22px;position:relative}.hero h1{max-width:350px}.hero p{margin-top:12px;max-width:340px;color:var(--muted);font-size:12px;line-height:1.7}.hero-gem{position:absolute;right:-37px;top:10px;width:96px;transform:rotate(-15deg);opacity:.35;filter:drop-shadow(0 0 30px #f6d1792b);pointer-events:none}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0}.section-heading h2{font-size:18px}.section-heading .counter{font-size:11px;color:var(--muted)}.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.game-card{padding:0;text-align:left;position:relative;overflow:hidden;border:1px solid #ffffff0d;border-radius:20px;background:linear-gradient(145deg,#3b3b44,#303139);min-width:0;transition:transform .18s,border-color .18s}.game-card:hover{transform:translateY(-3px);border-color:#f6d17966}.game-art{height:116px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,#f6d17912,transparent 70%)}.game-art:after{content:'';position:absolute;inset:10px 25px;border:1px solid #f6d17913;border-radius:50%;transform:rotate(-20deg)}.game-art img{position:absolute;object-fit:contain;filter:drop-shadow(0 10px 12px #0006);z-index:1}.game-art .g-main{width:88px;height:75px;left:50%;top:24px;transform:translateX(-50%)}.game-art .g-side{width:52px;height:49px;left:16px;top:60px;transform:rotate(-14deg)}.game-art .g-right{width:53px;height:49px;right:12px;top:56px;transform:rotate(15deg)}.game-art.match3{background:radial-gradient(ellipse at center,#4f51443d,transparent 70%)}.game-art.battleship{background:radial-gradient(ellipse,#354c702e,transparent 75%)}.art-grid{position:absolute;width:94px;height:94px;left:50%;top:13px;transform:translateX(-50%) rotate(-12deg);background-image:linear-gradient(#bcd4ff24 1px,transparent 1px),linear-gradient(90deg,#bcd4ff24 1px,transparent 1px);background-size:18px 18px;border:1px solid #bcd4ff24;border-radius:9px}.mini-card{position:absolute;left:calc(50% - 37px);top:20px;width:57px;height:81px;background:#f4ecdc;border-radius:8px;box-shadow:0 7px 18px #0004;color:#282831;transform:rotate(-15deg);padding:6px 9px;font-family:Georgia,serif;font-size:19px;font-weight:bold;line-height:1.1}.mini-card.second{left:calc(50% - 7px);top:27px;transform:rotate(13deg);color:#b84c42}.mini-card span{display:block;font-size:22px}.game-copy{padding:5px 14px 16px}.game-copy h3{font-size:16px}.game-copy p{font-size:10px;color:var(--muted);margin-top:5px}.game-tags{display:flex;align-items:center;gap:5px;margin-top:11px;font-size:8px;color:var(--gold)}.game-tags span{border:1px solid #f6d17926;border-radius:5px;padding:3px 5px}.card-arrow{position:absolute;right:12px;bottom:14px;color:#e9dac070;font-size:16px}.city-banner{margin-top:24px;min-height:143px;border:1px solid var(--line);border-radius:18px;padding:17px 16px 35px;position:relative;overflow:hidden;background:#303039}.city-banner:after{content:'';position:absolute;bottom:-20px;left:0;right:0;height:100px;background:url('assets/city.png') center bottom/cover no-repeat;opacity:.2;pointer-events:none}.city-banner h3{font-size:14px;margin-bottom:5px}.city-banner p{font-size:11px;color:var(--muted);max-width:290px}.city-banner .link-button{position:relative;z-index:1;margin-top:9px}.link-button{border:0;background:none;padding:5px 0;color:var(--gold);font-size:12px;text-align:left}.primary,.secondary,.danger{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;min-height:48px;padding:12px 18px;font-weight:600;font-size:13px;border:1px solid transparent;text-decoration:none}.primary{background:var(--orange);color:#231d18;box-shadow:0 5px 16px #fb780916}.secondary{background:#ffffff07;border-color:#ffffff19;color:var(--text)}.danger{background:#de585812;color:var(--bad);border-color:#ffaaa633}.full{width:100%}.button-row{display:flex;gap:10px;margin-top:15px}.button-row>*{flex:1}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,480px);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;justify-content:space-around;gap:8px;background:#25262cf5;backdrop-filter:blur(16px);border-top:1px solid var(--line);z-index:10}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:90px;min-height:48px;font-size:10px;color:#92939f;background:none;border:0;position:relative}.nav-item.active{color:var(--gold)}.nav-item.active:before{content:'';height:2px;width:26px;position:absolute;top:-11px;background:var(--gold);border-radius:2px}.nav-item svg{width:23px;height:23px}.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:17px;margin:14px 0}.notice{padding:12px 14px;border:1px solid #f6d17926;background:#f6d17909;border-radius:12px;color:#d9d1c0;font-size:11px;line-height:1.6;margin:14px 0}.resume-banner{display:flex;gap:10px;align-items:center;background:#f6d1790c;border:1px solid #f6d17928;border-radius:12px;padding:12px;margin:0 0 18px}.resume-banner>div{flex:1;font-size:12px}.resume-banner button{font-size:11px;padding:8px 12px;min-height:38px}.page-title{display:flex;align-items:center;gap:10px;margin-bottom:18px}.page-title h1{font-size:25px}.icon-button{border:1px solid var(--line);background:#ffffff05;width:40px;height:40px;display:grid;place-items:center;border-radius:11px;flex-shrink:0}.page-title .help-button{margin-left:auto;color:var(--gold)}.field{display:flex;flex-direction:column;gap:7px;margin:15px 0}.field label{font-size:12px;color:#ddd8cf}.field input,.field select{min-height:48px;border:1px solid #ffffff24;border-radius:11px;background:#26272e;padding:12px;color:white;width:100%;outline-offset:2px}.field input::placeholder{color:#858591}.field small{color:var(--muted)}.join-row{display:flex;gap:9px}.join-row input{min-width:0;letter-spacing:2px;text-transform:uppercase}.join-row button{flex-shrink:0}.empty-state{text-align:center;padding:35px 17px;color:var(--muted);font-size:12px}.empty-state svg{width:40px;height:40px;color:var(--gold);margin-bottom:16px}.empty-state h3{color:var(--text);margin-bottom:8px}.empty-state .primary{margin-top:20px}.room-list{display:flex;flex-direction:column;gap:10px}.public-room{display:flex;align-items:center;gap:12px;padding:15px;background:var(--card);border:1px solid var(--line);border-radius:15px}.public-room>div{flex:1}.public-room h3{font-size:14px}.public-room small{color:var(--muted)}.public-room .secondary{font-size:11px;padding:10px;min-height:40px}.profile-top{display:flex;align-items:center;gap:14px}.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,#5d503c,#38363d);border:1px solid #f6d17945;display:grid;place-items:center;font-weight:600;color:var(--gold);font-size:17px;flex-shrink:0}.avatar.large{width:62px;height:62px;font-size:24px}.profile-name{font-size:21px}.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:17px 0}.stat-box{border:1px solid var(--line);border-radius:14px;background:#ffffff04;padding:14px}.stat-box strong{font-size:22px;display:block;color:var(--gold)}.stat-box span{font-size:10px;color:var(--muted)}.history-item{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:12px;gap:12px}.history-item small{display:block;color:var(--muted);margin-top:3px}.room-code-card{text-align:center;padding:21px 16px;background:linear-gradient(140deg,#3e3d45,#33333b);border:1px solid #f6d17935;border-radius:18px}.room-code{display:block;color:var(--gold);font-size:31px;letter-spacing:7px;font-weight:600;margin:10px 0}.room-code-card>p{font-size:11px;color:var(--muted)}.players-list{display:flex;flex-direction:column;gap:8px}.player-row{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px;background:#ffffff03}.player-row>div:nth-child(2){flex:1;min-width:0}.player-row strong{font-size:12px;display:block;overflow-wrap:anywhere}.player-row small{color:var(--muted);font-size:10px}.player-row .avatar{width:34px;height:34px;font-size:12px}.ready-pill{border-radius:99px;padding:4px 7px;font-size:9px;background:#ffffff07;color:var(--muted)}.ready-pill.yes{color:var(--good);background:#97d6b411}.room-metrics{display:flex;justify-content:space-between;gap:12px;margin:17px 0;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}.room-metrics strong{display:block;color:var(--text);font-size:18px;margin-top:3px}.wait-message{text-align:center;font-size:11px;color:var(--muted);margin:12px 0}.game-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.game-toolbar h2{font-size:20px}.game-toolbar .room-chip{font-size:9px;color:var(--muted)}.turn-banner{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;background:#353840;border-radius:12px;border:1px solid var(--line);font-size:12px;margin:12px 0}.turn-banner.yours{border-color:#f6d17988;color:var(--gold);background:#f6d17909}.score-strip{display:flex;gap:8px;margin:12px 0}.score-chip{flex:1;min-width:0;background:#ffffff05;border-radius:11px;padding:9px 10px;border:1px solid var(--line)}.score-chip small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:9px}.score-chip strong{font-size:18px;color:var(--gold)}.board-hint{font-size:11px;color:var(--muted);margin:12px 0;text-align:center}.gem-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;background:#20222a;border:1px solid #f6d1792d;border-radius:16px;padding:7px;box-shadow:inset 0 0 28px #0002}.gem-cell{border:1px solid #ffffff07;background:#363840;border-radius:9px;padding:2px;aspect-ratio:1;position:relative;min-width:0}.gem-cell img{width:100%;height:100%;object-fit:contain;pointer-events:none}.gem-cell.selected{border:2px solid var(--gold);background:#f6d17924;transform:scale(1.06);z-index:1}.gem-cell .gem-mark{position:absolute;bottom:0;right:3px;font-size:7px;color:#fff9;pointer-events:none}.gem-cell.type-4 img{filter:sepia(.85) saturate(1.65)}.gem-cell:disabled{opacity:.74}.gem-cell:focus-visible{outline-offset:0;z-index:1}.board-panel{background:linear-gradient(145deg,#30343d,#292a32);padding:15px 12px;border:1px solid var(--line);border-radius:18px;margin:12px 0}.board-panel h3{font-size:12px;margin-bottom:12px}.sea-board{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;background:#232832;border-radius:9px;padding:5px}.sea-cell{aspect-ratio:1;min-width:0;min-height:0;border:1px solid #7096cb26;background:#384659;border-radius:4px;padding:0;font-size:13px;line-height:1}.sea-cell.ship{background:#9e9b8b;border-color:#cec3a6}.sea-cell.hit,.sea-cell.sunk{background:#a8593e;border-color:#ffbca5}.sea-cell.miss{color:#9cbbcf;background:#283646}.sea-cell.target{background:#f6d17933;border:2px solid var(--gold)}.sea-cell:disabled{opacity:.9}.sea-board.own{gap:2px;max-width:244px;margin:auto}.sea-board.own .sea-cell{font-size:10px}.sea-legend{display:flex;gap:14px;justify-content:center;font-size:9px;color:var(--muted);margin:10px 0 2px}.sea-legend span:before{content:'';display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:5px;background:#a8593e}.sea-legend span:last-child:before{background:#9e9b8b}.table-surface{background:radial-gradient(ellipse,#37413f,#2e3337 70%);border:1px solid #f6d17928;border-radius:20px;padding:17px 14px;min-height:230px;margin:14px 0;position:relative;overflow:hidden}.table-surface:before{content:'';position:absolute;inset:12px;border:1px solid #f6d1790f;border-radius:40%;pointer-events:none}.hand-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:10px;position:relative;gap:10px}.hand-label strong{color:var(--gold);font-size:16px}.playing-cards{display:flex;gap:7px;flex-wrap:wrap;position:relative}.playing-card{width:58px;height:83px;flex-shrink:0;background:#f8f3e8;color:#242733;border:1px solid #ddd5c5;border-radius:8px;box-shadow:0 4px 9px #0003;padding:6px 7px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;font-family:Georgia,serif;position:relative;font-size:19px;line-height:1}.playing-card.red{color:#b23b37}.playing-card .suit-big{align-self:flex-end;font-size:29px}.playing-card.hidden{background:repeating-linear-gradient(45deg,#30313b,#30313b 5px,#424049 5px,#424049 6px);border:1px solid #e1b76999;align-items:center;justify-content:center;color:var(--gold);font-size:32px}.playing-card.hidden:after{content:'◇'}.playing-card.selected{outline:2px solid var(--gold);transform:translateY(-7px)}button.playing-card:hover:not(:disabled){transform:translateY(-4px)}button.playing-card:disabled{opacity:.5}.opponent-mini{margin-top:17px}.opponent-mini .playing-card{width:40px;height:56px;font-size:13px;padding:4px}.opponent-mini .suit-big{font-size:19px}.card-hand{margin:18px 0}.table-pairs{display:flex;flex-wrap:wrap;gap:14px 8px;min-height:105px;align-items:flex-start}.card-pair{width:98px;height:112px;position:relative;background:transparent;border:0;padding:0}.card-pair .playing-card{position:absolute;left:0;top:0}.card-pair .playing-card:nth-child(2){left:31px;top:24px;transform:rotate(9deg)}.card-pair.target{outline:1px dashed var(--gold);border-radius:10px}.trump-row{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted)}.trump-row .playing-card{width:36px;height:51px;padding:4px;font-size:13px}.trump-row .suit-big{font-size:16px}.game-log{font-size:10px;color:#aaa7ae;margin:16px 0;padding:12px 13px;background:#ffffff03;border-radius:10px}.game-log p+p{margin-top:6px}.room-actions{display:flex;justify-content:space-between;gap:15px;margin:18px 0}.room-actions .link-button{font-size:10px}.modal-backdrop{position:fixed;z-index:40;inset:0;background:#131319b8;backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;padding:20px 0 0;overflow:auto}.modal-sheet{width:min(100%,480px);max-height:92dvh;overflow-y:auto;background:#303139;border:1px solid #ffffff18;border-bottom:0;border-radius:25px 25px 0 0;padding:24px 22px calc(28px + env(safe-area-inset-bottom));box-shadow:var(--shadow);position:relative;animation:sheet-in .2s ease-out}.modal-sheet:before{content:'';display:block;width:34px;height:4px;border-radius:4px;background:#74737a;margin:-11px auto 19px}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.modal-head h2{font-size:23px}.modal-close{border:0;background:#ffffff07;width:35px;height:35px;border-radius:50%;font-size:25px;line-height:1}.modal-description{color:var(--muted);font-size:12px;line-height:1.7;margin-bottom:16px}.mode-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:15px 0}.mode-option{border:1px solid #ffffff1a;background:#393b44;border-radius:12px;padding:13px 11px;text-align:left;min-height:75px}.mode-option strong{font-size:12px;display:block}.mode-option small{font-size:9px;color:var(--muted);display:block;margin-top:5px;line-height:1.5}.mode-option.selected{border-color:var(--gold);background:#f6d17910;color:var(--gold)}.entry-list{display:flex;gap:8px;margin:10px 0}.entry-option{flex:1;min-height:43px;border:1px solid #ffffff20;background:#393b44;border-radius:10px;font-size:13px}.entry-option.selected{border-color:var(--gold);background:#f6d17912;color:var(--gold)}.form-error{font-size:12px;color:var(--bad);border:1px solid #ffaaa622;background:#ffaaa60b;border-radius:10px;padding:11px;margin:12px 0}.rules-list{padding-left:20px;color:#dedbd3;font-size:13px;line-height:1.8}.rules-list li+li{margin-top:9px}.outcome{text-align:center}.outcome img{width:116px;height:93px;object-fit:contain;filter:drop-shadow(0 0 25px #f6d17925);margin:5px auto 19px;display:block}.outcome h2{font-size:28px}.outcome p{font-size:12px;color:var(--muted);line-height:1.7;margin:12px 0 20px}.toast{position:fixed;left:50%;bottom:100px;transform:translate(-50%,15px);width:max-content;max-width:min(410px,90vw);padding:12px 17px;background:#f6d179;color:#252329;box-shadow:var(--shadow);border-radius:11px;font-size:12px;z-index:60;opacity:0;pointer-events:none;transition:.2s;line-height:1.5}.toast.show{opacity:1;transform:translate(-50%,0)}.boot-state{text-align:center;padding:60px 0;color:var(--muted);font-size:12px}.boot-state img{width:180px;display:block;margin:0 auto 35px}.loading-ring{display:block;width:23px;height:23px;border:2px solid #f6d17925;border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;margin:15px auto}.skeleton{height:100px;border-radius:15px;background:linear-gradient(90deg,#33343b,#40414a,#33343b);background-size:200%;animation:shimmer 1.6s infinite;margin:12px 0}.no-script{padding:24px;text-align:center}.badge-local{border:1px solid #f6d17924;padding:3px 6px;border-radius:5px;font-size:8px;color:#cfb575;letter-spacing:.6px}.connection-notice{margin:0 0 15px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}.privacy-note{text-align:center;color:var(--muted);font-size:10px;margin-top:14px}.round-summary{font-size:12px;color:var(--muted);margin:10px 0}.board-spectator{pointer-events:none;opacity:.75}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--good);margin-right:5px}.back-link{display:inline-flex;align-items:center;gap:5px}.danger-link{color:var(--bad)}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{to{background-position:-200% 0}}@keyframes sheet-in{from{transform:translateY(25px);opacity:.3}to{transform:translateY(0);opacity:1}}
@media(min-width:700px){body{padding:24px 0}.app-shell{border:1px solid #ffffff12;border-radius:25px;min-height:calc(100dvh - 48px)}.bottom-nav{bottom:24px;border-radius:0 0 24px 24px;width:480px}.modal-backdrop{align-items:center;padding:24px}.modal-sheet{border-radius:24px;border-bottom:1px solid #ffffff18;max-height:90dvh}.app-header{padding-top:17px}.toast{bottom:120px}}
@media(max-width:370px){main{padding:18px 14px 108px}.app-header{padding:12px 14px}.hero h1{font-size:28px}.game-grid{gap:9px}.game-copy{padding:4px 11px 15px}.game-copy h3{font-size:14px}.game-art{height:101px}.game-tags span{padding:2px 4px;font-size:7px}.gem-board{gap:2px;padding:5px}.sea-board{gap:2px}.playing-card{width:50px;height:74px}.modal-sheet{padding:22px 18px 28px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Compact room controls and readable labels at phone widths. */
.score-chip>span{display:block;font-size:10px;color:var(--muted);margin-bottom:3px}
.score-chip>strong{display:block;line-height:1.2}
.page-title{display:block}.page-title .eyebrow{margin-bottom:9px}
.resume-banner{width:100%;text-align:left;flex-direction:column;align-items:flex-start;gap:3px;font-size:12px}.resume-banner>span{font-size:10px;color:var(--gold)}
.join-row{margin-top:15px}.join-row input{width:100%;border:1px solid #ffffff24;border-radius:11px;background:#26272e;padding:10px;color:var(--text);font-size:12px}
.public-room{text-align:left}.public-room p{font-size:10px;color:var(--muted);margin-top:4px}.public-room .gold{flex:0 0 auto;text-align:right;font-size:14px}.public-room .gold span{display:block;font-size:10px;margin-top:4px}
.room-code-card .secondary{margin-top:15px}.modal-sheet>.primary,.modal-sheet>.secondary,.outcome>.primary,.outcome>.secondary,.panel>.primary{margin-top:14px}
.players-list+.room-metrics{margin-bottom:8px}.button-row+.secondary{margin-top:10px}.history-item p{font-size:10px;color:var(--muted);margin-top:4px}
.game-toolbar .help-button{width:32px;height:32px;border:1px solid #f6d17940;border-radius:50%;background:#f6d1790b;color:var(--gold);font-weight:600}
.profile-name{overflow-wrap:anywhere}.profile-top>div:last-child{min-width:0}.stat-row{grid-template-columns:repeat(3,minmax(0,1fr))}.stat-box{padding:12px 10px}.stat-box strong{font-size:19px}
.game-active{padding-top:12px}.game-active .game-toolbar{margin-bottom:4px}.game-active>.section-heading{margin:6px 0 10px}.game-active>.score-strip{margin:8px 0}.game-active>.score-strip .score-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px}.game-active>.score-strip .score-chip>span{margin:0;font-size:9px}.game-active>.score-strip .score-chip>strong{font-size:15px}
.game-active .table-surface{min-height:0;margin:10px 0;padding:13px 12px}.game-active .turn-banner{padding:9px 12px;margin:9px 0}.game-active .card-hand{margin:13px 0}.game-active .button-row{position:sticky;bottom:78px;z-index:4;background:#29282ef5;padding:8px 0;backdrop-filter:blur(12px)}
.gem-board{touch-action:none;user-select:none;-webkit-user-select:none}.gem-cell.touch-pressed,.gem-cell:active:not(:disabled){border-color:var(--gold);background:#f6d1792c;transform:scale(.95)}
.primary:active:not(:disabled),.secondary:active:not(:disabled),.mode-option:active:not(:disabled){filter:brightness(1.15);transform:translateY(1px)}
.modal-close{width:44px;height:44px}.game-toolbar .help-button{width:44px;height:44px}.entry-option{min-height:44px}
.card-hand .playing-card{min-width:48px;min-height:74px}.card-hand .playing-cards{row-gap:12px;padding-top:7px}
@media(pointer:coarse){.game-active .button-row{bottom:calc(72px + env(safe-area-inset-bottom));padding:8px 0}.game-active .primary,.game-active .secondary{min-height:48px}}

/* Revision-timed motion: negative elapsed time preserves progress across renders. */
.gem-board{isolation:isolate;overflow:visible}
.gem-cell{transition:border-color .14s,background-color .14s,transform .14s}
.gem-enter{animation:gem-arrive .65s cubic-bezier(.22,.75,.24,1) both;animation-delay:calc(var(--motion-elapsed,0ms) + var(--motion-stagger,0ms))}
.gem-swap-ghost,.gem-burst{position:absolute;inset:2px;pointer-events:none;z-index:3}
.gem-swap-ghost{inset:0;padding:2px}
.gem-swap-ghost>img,.gem-burst>img{width:100%;height:100%;object-fit:contain}
.gem-swap-ghost{animation:gem-travel .65s cubic-bezier(.3,.8,.2,1) both;animation-delay:calc(var(--motion-elapsed,0ms) + var(--motion-stagger,0ms))}
.gem-burst{animation:gem-dissolve .65s ease-out both;animation-delay:calc(var(--motion-elapsed,0ms) + var(--motion-stagger,0ms));filter:drop-shadow(0 0 8px #f6d179)}
.gem-pending-swap{animation:gem-slide .16s ease-out both;animation-delay:var(--pending-delay,0ms)}
.sea-cell{position:relative;transition:background-color .18s,border-color .18s}
.sea-shot-impact:after,.sea-hit-impact:after{content:'';position:absolute;inset:-1px;border:2px solid #95c8ed;border-radius:35%;pointer-events:none;animation:sea-ripple .65s ease-out both;animation-delay:calc(var(--motion-elapsed,0ms) + var(--motion-stagger,0ms));z-index:3}
.sea-hit-impact:after{border-color:var(--gold);box-shadow:0 0 12px #fb780970;animation-duration:.75s}
.sea-target-pulse{animation:sea-aim 1.4s ease-in-out infinite}
.playing-card{transition:transform .2s ease-out,box-shadow .2s ease-out,outline-color .2s}
.card-deal{animation:card-arrive .32s cubic-bezier(.2,.75,.23,1) both}
.card-reveal{animation:card-flip .46s cubic-bezier(.3,.75,.25,1) both;backface-visibility:hidden;transform-origin:center}
.table-enter{animation:card-table .28s cubic-bezier(.2,.8,.25,1) both}
.score-pop{animation:score-bounce .3s ease-out both}
.card-deal,.card-reveal,.table-enter,.score-pop,.table-clear,.table-feedback{animation-delay:calc(var(--motion-elapsed,0ms) + var(--motion-stagger,0ms))}
.table-ghosts{position:absolute;inset:45px 14px 15px;pointer-events:none;z-index:3;display:flex;flex-wrap:wrap;gap:14px 8px}
.table-clear{animation:card-collect .36s ease-in both}
.table-feedback{position:absolute;inset:auto 12px 14px;text-align:center;font-size:11px;font-weight:600;color:var(--gold);pointer-events:none;animation:table-word .6s ease both;z-index:4}
.table-feedback.take{color:#edd9ac}.table-feedback.discard{color:var(--good)}
.table-clear,.table-feedback{animation-delay:calc(var(--motion-elapsed,0ms) + var(--motion-stagger,0ms))}
.modal-sheet{animation:sheet-rise .3s cubic-bezier(.2,.75,.2,1) both;animation-delay:var(--sheet-elapsed,0ms)}
.outcome img{animation:result-stone .7s cubic-bezier(.16,.8,.25,1) both;animation-delay:var(--sheet-elapsed,0ms)}
@keyframes gem-arrive{0%,22%{opacity:0;transform:translateY(-55%) scale(.7) rotate(-8deg)}48%{opacity:1;transform:translateY(3%) scale(1.08) rotate(2deg)}72%{transform:translateY(-2%) scale(.98)}100%{opacity:1;transform:none}}
@keyframes gem-travel{0%{opacity:1;transform:translate(0,0)}24%{opacity:1;transform:translate(calc(var(--swap-x,0) * (100% + 3px)),calc(var(--swap-y,0) * (100% + 3px)))}45%,100%{opacity:0;transform:translate(calc(var(--swap-x,0) * (100% + 3px)),calc(var(--swap-y,0) * (100% + 3px))) scale(.8)}}
@keyframes gem-dissolve{0%,20%{opacity:0;transform:scale(.8)}25%{opacity:1;transform:scale(1)}55%,100%{opacity:0;transform:scale(1.75) rotate(14deg)}}
@keyframes gem-slide{to{transform:translate(calc(var(--swap-x,0) * (100% + 3px)),calc(var(--swap-y,0) * (100% + 3px)))}}
@keyframes sea-ripple{0%{opacity:1;transform:scale(.35)}30%{opacity:1}100%{opacity:0;transform:scale(2.1)}}
@keyframes sea-aim{0%,100%{box-shadow:0 0 0 0 #f6d17930}50%{box-shadow:0 0 0 3px #f6d1790a}}
@keyframes card-arrive{from{opacity:0;transform:translate(16px,-28px) rotate(-9deg) scale(.85)}to{opacity:1;transform:translate(0,0) rotate(var(--card-rotation,0deg)) scale(1)}}
@keyframes card-flip{0%{opacity:.25;transform:perspective(500px) rotateY(90deg)}55%{opacity:1;transform:perspective(500px) rotateY(-9deg)}100%{opacity:1;transform:perspective(500px) rotateY(0deg)}}
@keyframes card-table{from{opacity:0;transform:translateY(35px) rotate(calc(var(--card-rotation,0deg) - 12deg)) scale(.88)}to{opacity:1;transform:translateY(0) rotate(var(--card-rotation,0deg)) scale(1)}}
@keyframes score-bounce{0%{transform:scale(.85);color:var(--text)}50%{transform:scale(1.16);color:var(--gold)}100%{transform:scale(1)}}
@keyframes card-collect{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(var(--collect-x,0px),var(--collect-y,-70px)) rotate(12deg) scale(.65)}}
@keyframes table-word{0%{opacity:0;transform:translateY(6px)}20%,65%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-5px)}}
@keyframes sheet-rise{from{opacity:.3;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes result-stone{0%{opacity:0;transform:translateY(20px) scale(.65) rotate(-14deg);filter:drop-shadow(0 0 0 #f6d17900)}60%{opacity:1;transform:translateY(-4px) scale(1.07) rotate(3deg);filter:drop-shadow(0 0 35px #f6d17970)}100%{opacity:1;transform:none;filter:drop-shadow(0 0 25px #f6d17925)}}
@media(prefers-reduced-motion:reduce){.gem-swap-ghost,.gem-burst,.table-ghosts,.sea-shot-impact:after,.sea-hit-impact:after,.table-feedback{display:none}.gem-enter,.gem-pending-swap,.card-deal,.card-reveal,.table-enter,.table-clear,.score-pop,.sea-target-pulse,.modal-sheet,.outcome img{animation:none!important;transform:none!important}}
.game-active>.score-strip .score-chip.player-score{display:block;padding:8px 10px}
.player-score-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.player-score-top .player-score-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.player-score-top strong{flex-shrink:0;font-size:18px;line-height:1.2}
.score-chip .player-score-detail{display:block;margin-top:3px;font-size:9px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body:has(.game-active) .app-header{padding:9px 14px 7px}
body:has(.game-active) .brand img{width:98px}
body:has(.game-active) .header-note{margin-top:4px;font-size:9px}
.sea-actions{position:fixed;left:50%;bottom:calc(69px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(440px,calc(100% - 32px));z-index:10;padding:8px;background:#29282ef5;border:1px solid #ffffff10;border-radius:15px;backdrop-filter:blur(12px);box-shadow:0 -8px 24px #20202755}
main:has(.sea-actions){padding-bottom:178px}
@media(min-width:700px){.sea-actions{bottom:calc(93px + env(safe-area-inset-bottom))}}
.durak-hand .playing-cards{flex-wrap:nowrap;overflow-x:auto;padding:9px 2px 10px;scrollbar-width:thin;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.durak-hand .playing-card{min-width:44px;width:clamp(44px,calc((100vw - 94px) / 6),58px);scroll-snap-align:start}
.durak-meta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:12px;margin:12px 0}
.durak-meta .trump-row{gap:7px;font-size:9px;line-height:1.6}
.durak-meta .opponent-mini{margin-top:0;min-width:0}
.durak-meta .hand-label{font-size:9px;gap:5px;min-width:0;margin-bottom:6px}
.durak-meta .hand-label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.durak-meta .hand-label strong{flex-shrink:0;font-size:11px}
.durak-meta .playing-cards{flex-wrap:nowrap;gap:3px}
.durak-meta .playing-card{width:20px;height:30px;padding:2px;font-size:14px;border-radius:4px}
.game-active .button-row{position:fixed;left:50%;bottom:calc(69px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(440px,calc(100% - 32px));z-index:10;padding:8px;background:#29282ef5;border:1px solid #ffffff10;border-radius:15px;backdrop-filter:blur(12px);box-shadow:0 -8px 24px #20202755}
main:has(.game-active .button-row),main.game-active:has(.button-row){padding-bottom:178px}
@media(min-width:700px){.game-active .button-row{bottom:calc(93px + env(safe-area-inset-bottom))}}