:root{--blue:#3271ee;--red:#e25873;--ink:#242c45;--muted:#8b93aa;--line:#dce1ef;--paper:#f1f3fa;--shadow:0 12px 35px #3e4c7910}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:linear-gradient(160deg,#f4f1f7b0,#edf2fbb0),linear-gradient(#d9dfec60 1px,transparent 1px),linear-gradient(90deg,#d9dfec60 1px,transparent 1px);background-size:auto,52px 52px,52px 52px;min-height:100dvh;-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;border:0;color:inherit;transition:transform .16s,box-shadow .2s,background .2s}button:active:not(:disabled){transform:scale(.97)}button:focus-visible,input:focus-visible{outline:3px solid #7ba5ff;outline-offset:4px}button:disabled{cursor:default}button svg{pointer-events:none}#app{max-width:660px;margin:auto;padding:28px 24px max(16px,env(safe-area-inset-bottom))}header{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:20px}.brand{display:flex;align-items:center;gap:10px;padding:0;background:none;font-size:27px;font-weight:850;letter-spacing:-1.2px}.brand img{width:42px;height:42px;filter:drop-shadow(0 5px 8px #3271ee20)}.brand-dot{color:var(--blue)}.icon-btn{background:#ffffffd9;width:42px;height:42px;border-radius:14px;font-size:22px;box-shadow:0 3px 14px #3d4b7410}.small{padding:12px 17px;font-size:13px;font-weight:750;border-radius:15px}.white{background:white}.hidden{display:none!important}.hero{text-align:center;padding:30px 0 0}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2.1px;color:#8a93ac;display:block}h1{font-size:39px;line-height:1.18;letter-spacing:-1.7px;margin:18px 0 15px;font-weight:800}.hero h1 span{color:var(--blue)}p{line-height:1.6}.hero p{color:#7e879e;font-size:14px;margin:0}.hero-board{width:285px;margin:18px auto 28px;position:relative}.hero-board svg{width:100%;display:block}.mini-badge{display:block;font-size:10px;text-align:center;color:#8b94ad;margin-top:8px}.mode-card{position:relative;text-align:left;border-radius:23px;padding:25px;box-shadow:var(--shadow)}.primary{display:flex;align-items:center;gap:18px;background:var(--blue);color:white;width:100%;min-height:112px;box-shadow:0 10px 24px #3271ee24}.mode-icon{font-size:27px;width:54px;height:54px;display:grid;place-items:center;background:#ffffff27;border-radius:17px;flex-shrink:0}.mode-card strong{display:block;font-size:19px;letter-spacing:-.5px}.mode-card small{display:block;font-size:12px;margin-top:7px;opacity:.75;font-weight:450}.arrow{font-size:25px;margin-left:auto;font-weight:300}.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:15px 0}.bot-card,.soon-card{min-height:183px;display:flex;align-items:flex-start;flex-direction:column;gap:0;background:#fff}.bot-card .mode-icon{background:#eaf0ff;margin-bottom:15px}.bot-card .arrow{position:absolute;right:20px;top:24px;color:#a0a9c0}.soon-card{background:#ffffff89;box-shadow:none;border:1px solid #fff}.soon-card .mode-icon{background:#edf0f7;margin-bottom:15px;filter:grayscale(.45)}.soon-card strong{color:#7e89a1}.pill{font-size:8px;letter-spacing:1px;font-weight:800;padding:5px 8px;background:#e6eaf3;color:#8a94ad;border-radius:7px;margin-top:13px}.home-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:25px;font-size:10px;color:#9ba3b7}.text-btn{background:none;padding:8px 0;font-weight:650;font-size:12px;color:#69758f}.home-bottom .text-btn{font-size:12px}footer{text-align:center;margin-top:40px;color:#9ca5ba;font-size:10px}.footer-dot{display:inline-block;width:5px;height:5px;background:#7ea0e4;border-radius:50%;margin-right:5px}.resume{display:block;background:#e5edff;color:#396dc6;width:100%;border-radius:15px;padding:12px 16px;text-align:left;margin-bottom:14px;font-size:13px;font-weight:750}.resume span{font-size:10px;display:block;margin:4px 0 0 18px;font-weight:450}.back{display:block;margin-bottom:20px}.sub{color:var(--muted);font-size:14px;margin:0 0 25px}.panel{background:#ffffffdf;border:1px solid #fff;border-radius:25px;box-shadow:var(--shadow);padding:25px}.setup-panel label{display:block;font-size:12px;font-weight:750;margin:20px 0 10px}.setup-panel>label:first-child{margin-top:0}input{width:100%;padding:14px;border-radius:13px;border:1px solid #e0e5f0;background:#f8f9fc;color:var(--ink);outline:none}.sizes{display:flex;gap:10px}.sizes button{flex:1;border-radius:15px;background:#f4f6fb;border:2px solid transparent;display:flex;flex-direction:column;align-items:center;padding:14px 4px;gap:7px}.sizes button.selected{background:#edf3ff;border-color:var(--blue);color:#2c68d8}.sizes strong{font-size:12px}.sizes small{font-size:10px;color:#8994ad}.size-preview{width:37px;height:37px;background-image:radial-gradient(circle,#96a5c3 1.2px,transparent 1.6px),linear-gradient(#cfd8eb80 1px,transparent 1px),linear-gradient(90deg,#cfd8eb80 1px,transparent 1px);background-size:9px 9px;background-position:0 0}.s2{background-size:6px 6px}.s3{background-size:4px 4px}.segmented,.input-switch{display:flex;gap:5px;background:#f0f3f9;padding:5px;border-radius:13px}.segmented button{flex:1;background:none;border-radius:9px;padding:11px;font-size:12px;font-weight:650}.segmented .selected,.input-switch .selected{background:white;color:var(--blue);box-shadow:0 2px 8px #34477712}.tiny{font-size:11px;color:var(--muted);text-align:center;margin:10px 0}.setup-note{text-align:center;font-size:10px;color:#8b94a9;margin:24px 0 18px}.setup-note span{padding:0 6px}.action{display:flex;justify-content:space-between;align-items:center;width:100%;padding:17px 20px;background:var(--blue);color:#fff;font-weight:750;font-size:14px;border-radius:14px;box-shadow:0 7px 16px #3271ee22}.players{display:grid;grid-template-columns:1fr 30px 1fr;gap:9px;align-items:center;padding:6px 0}.player{position:relative;display:flex;align-items:center;gap:9px;padding:15px 12px;background:white;border-radius:19px;min-width:0;border:2px solid transparent;transition:box-shadow .3s,border-color .3s}.player.blue{background:#e7efff}.player.red{background:#fce9ed}.player.active{border-color:var(--blue);box-shadow:0 0 0 4px #ffffffd9,0 7px 22px #3271ee18}.player.red.active{border-color:var(--red);box-shadow:0 0 0 4px #fff,0 7px 22px #e2587318}.avatar{display:grid;place-items:center;border-radius:50%;width:36px;height:36px;flex-shrink:0;background:var(--blue);color:#fff;font-size:23px}.red .avatar{background:var(--red)}.player-info{min-width:0;flex:1}.player-info strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-info small{font-size:10px;color:#7785a2;display:block;margin-top:4px}.player-score{font-size:24px;font-weight:800;color:var(--blue)}.red .player-score{color:var(--red)}.vs{font-size:10px;color:#9ca5ba;text-align:center;font-weight:850}.score-area{margin:27px 0 25px}.score-caption{display:flex;justify-content:space-between;font-size:10px;font-weight:650;color:var(--blue);margin-bottom:9px}.score-caption span:last-child{color:var(--red)}#matchLabel{color:#9da6ba;font-size:9px;letter-spacing:1px}.score-track{height:9px;border-radius:10px;background:var(--red);position:relative;overflow:hidden}#blueShare{height:100%;width:50%;background:var(--blue);transition:width .5s cubic-bezier(.2,.7,.2,1)}.score-divider{position:absolute;left:50%;top:0;height:100%;width:3px;background:white;transform:translateX(-50%);transition:left .5s cubic-bezier(.2,.7,.2,1)}.board-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:11px;color:#8590a9}.zoom-controls{display:flex;gap:3px}.zoom-controls button{background:#fff9;padding:6px 9px;border-radius:7px;color:#7d89a3;font-size:11px;min-width:28px}.board-shell{position:relative;border:1px solid #d8dfed;border-radius:24px;background:#ffffffc9;box-shadow:0 12px 35px #3244750a,inset 0 0 0 6px #ffffff70;padding:9px;overflow:hidden}#boardViewport{width:100%;aspect-ratio:1;overflow:hidden;position:relative;touch-action:none;border-radius:17px}#board{width:100%;height:100%;display:block;transform-origin:0 0;will-change:transform;touch-action:none;user-select:none}.guide{stroke:#c9d1e2;stroke-width:1.4;opacity:.64}.wall{stroke-width:11;stroke-linecap:round;fill:none}.wall.p0{stroke:var(--blue)}.wall.p1{stroke:var(--red)}.wall.new{animation:draw .23s ease-out}.wall.last{filter:drop-shadow(0 0 3px #a9bcf5)}.dot{fill:#8796b2;pointer-events:none}.dot.pulse{animation:dotPulse .3s}.box{rx:4}.box.p0{fill:#3271ee;fill-opacity:.14}.box.p1{fill:#e25873;fill-opacity:.14}.box.new{animation:boxIn .35s ease-out}.mark{font-size:13px;font-weight:750;text-anchor:middle;dominant-baseline:central;opacity:.5;pointer-events:none}.mark.p0{fill:var(--blue)}.mark.p1{fill:var(--red)}.ghost{stroke:var(--blue);stroke-width:11;stroke-linecap:round;opacity:.5;pointer-events:none}.below-board{display:flex;justify-content:space-between;font-size:9px;color:#99a3b9;margin:12px 5px 20px}.controls-panel{display:flex;align-items:center;flex-direction:column;gap:10px;margin-bottom:20px}.input-switch{width:170px;padding:4px}.input-switch button{flex:1;padding:8px 10px;background:none;border-radius:9px;font-size:11px;font-weight:700}#controlHint{font-size:10px;color:#9aa3b7;margin:0}#wallTray{display:flex;gap:15px}.wall-piece{width:86px;height:49px;border-radius:14px;background:white;box-shadow:0 5px 15px #33416c12;display:grid;place-items:center;touch-action:none}.wall-piece i{display:block;width:44px;height:9px;background:var(--blue);border-radius:9px;box-shadow:0 4px 7px #3271ee25;pointer-events:none}.wall-piece.vertical i{width:9px;height:30px}.wall-piece.invalid{animation:shake .25s}.game-bottom{display:flex;gap:10px;align-items:center}.turn-status{display:flex;align-items:center;gap:9px;background:var(--ink);color:white;border-radius:16px;padding:15px 14px;flex:1;min-width:0;transition:background .2s}.turn-status strong{font-size:12px;flex:1;white-space:nowrap}.turn-dot{width:6px;height:6px;border-radius:50%;background:#79a8ff}.turn-status.red-turn .turn-dot{background:#ff90a5}#timer{font-weight:800;font-size:18px;font-variant-numeric:tabular-nums}#timer span{font-size:9px;opacity:.6;margin-left:2px}.urgent{background:#b9563b!important;animation:warning 1s infinite}.emojis{display:flex;gap:5px}.emojis button{border-radius:13px;background:white;width:36px;height:45px;font-size:22px;padding:0}.emojis.cooldown button{opacity:.45}.game-foot{text-align:center;font-size:9px;color:#a2abc0;margin-top:20px}.reaction{position:absolute;left:50%;top:0;font-size:38px;pointer-events:none;opacity:0;z-index:5}.reaction.show{animation:reaction 1.8s ease-in-out}.float-score{position:absolute;top:43%;left:45%;font-size:34px;font-weight:850;pointer-events:none;opacity:0;color:var(--blue);text-shadow:0 2px 10px white}.float-score.show{animation:scoreFloat .8s ease-out}.modal-backdrop{position:fixed;inset:0;background:#20294355;backdrop-filter:blur(7px);z-index:20;display:flex;align-items:center;justify-content:center;padding:20px}.modal{position:relative;width:100%;max-width:430px;background:#fafbff;border-radius:26px;padding:30px;box-shadow:0 25px 90px #17264130;max-height:88dvh;overflow:auto;animation:modalIn .2s}.modal-close{position:absolute;right:15px;top:15px;background:#eef1f8;box-shadow:none;width:32px;height:32px;font-size:23px}.modal h2{font-size:25px;letter-spacing:-.8px;margin:7px 0 14px}.modal p{font-size:13px;color:#8590a7}.modal .action{margin-top:20px}.modal .secondary{width:100%;padding:14px;background:#edf1fa;border-radius:13px;margin-top:10px;font-weight:650;font-size:13px}.modal .danger{background:#dd5370}.modal-symbol{font-size:38px;display:block;margin-bottom:13px}.setting-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid #e8ecf5;font-size:13px}.switch{width:42px;height:25px;border-radius:20px;background:#dce2ee;position:relative}.switch:after{content:'';position:absolute;left:3px;top:3px;width:19px;height:19px;border-radius:50%;background:white;box-shadow:0 2px 5px #25325616;transition:transform .2s}.switch.on{background:var(--blue)}.switch.on:after{transform:translateX(17px)}.modal .segmented{margin-top:10px}.rule{display:flex;gap:14px;margin:18px 0;align-items:flex-start;font-size:13px;line-height:1.6;color:#78849c}.rule b{display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;background:#e7efff;color:var(--blue);border-radius:8px;font-size:11px}.friend-choice{display:flex;align-items:center;gap:13px;width:100%;background:#eaf0ff;padding:18px;border-radius:16px;margin-top:14px;text-align:left}.friend-choice strong{display:block;font-size:14px}.friend-choice small{font-size:11px;color:#8a96ad;display:block;margin-top:5px}.friend-choice.unavailable{background:#f0f2f8;cursor:default}.friend-choice .mode-icon{background:#fff;font-size:24px}.result{text-align:center}.result .modal-symbol{font-size:60px;margin:10px 0}.final-scores{display:flex;justify-content:center;gap:22px;align-items:center;margin:25px 0}.final-scores div{background:#e9f0ff;border-radius:17px;padding:20px;min-width:105px}.final-scores div:last-child{background:#fce9ed}.final-scores strong{font-size:40px;color:var(--blue);display:block}.final-scores div:last-child strong{color:var(--red)}.final-scores small{font-size:11px;display:block;max-width:110px;overflow:hidden;text-overflow:ellipsis}.toast{position:fixed;bottom:35px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:white;padding:13px 22px;border-radius:14px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:30;box-shadow:var(--shadow);max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes draw{from{stroke-dasharray:800;stroke-dashoffset:800}to{stroke-dasharray:800;stroke-dashoffset:0}}@keyframes boxIn{from{fill-opacity:0;transform:scale(.98)}to{fill-opacity:.14;transform:scale(1)}}@keyframes dotPulse{50%{r:6}}@keyframes scoreFloat{0%{opacity:0;transform:translateY(15px) scale(.8)}25%{opacity:1}100%{opacity:0;transform:translateY(-45px) scale(1.1)}}@keyframes reaction{0%{opacity:0;transform:translate(-50%,5px) scale(.5)}20%,70%{opacity:1;transform:translate(-50%,-45px) scale(1)}100%{opacity:0;transform:translate(-50%,-70px)}}@keyframes modalIn{from{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:none}}@keyframes shake{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}@keyframes warning{50%{box-shadow:0 0 0 3px #d87d5140}}@media(min-width:700px){#app{padding-top:35px}.hero{padding-top:25px}.hero h1{font-size:45px}#game{max-width:570px;margin:auto}.players{margin-top:25px}.mode-card:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 15px 30px #3e4c7920}#setup{max-width:510px;margin:0 auto}}@media(max-width:430px){#app{padding:20px 16px}.brand{font-size:25px}.brand img{width:37px;height:37px}.hero{padding-top:22px}.hero h1{font-size:33px}.hero-board{width:240px;margin-top:15px;margin-bottom:23px}.mode-card{padding:20px;border-radius:21px}.mode-card strong{font-size:17px}.mode-card small{font-size:11px}.primary{min-height:100px;gap:13px}.bot-card,.soon-card{min-height:174px}.home-bottom>span{font-size:8px}.player{padding:12px 9px;gap:7px}.avatar{width:28px;height:28px;font-size:19px}.player-info strong{font-size:11px}.player-info small{font-size:9px}.player-score{font-size:21px}.score-area{margin:23px 0 18px}.game-bottom{flex-wrap:wrap;gap:12px}.turn-status{min-width:150px}.emojis{gap:4px}.emojis button{width:30px;height:42px;font-size:19px}.game-foot{margin-top:15px}footer{margin-top:26px}.board-top{font-size:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reaction.show,.float-score.show{opacity:1}}
/* Khamsat room edition — sage, cream, and coral */
:root{--blue:#277d79;--red:#d57b69;--ink:#283d44;--muted:#8b9c9e;--paper:#f3f5f2}body{background:linear-gradient(160deg,#f6f3edb8,#edf3f0c7),linear-gradient(#cad9d040 1px,transparent 1px),linear-gradient(90deg,#cad9d040 1px,transparent 1px);background-size:auto,48px 48px,48px 48px}.hero{padding:22px 0 25px}.hero h1{font-size:48px;margin:12px 0 7px;color:var(--ink);letter-spacing:-2px}.hero p{font-size:13px;letter-spacing:2px;color:#879995}.home-stats{display:flex;justify-content:center;gap:9px;margin-bottom:25px}.home-stats>span{background:#ffffffc9;border:1px solid #fff;padding:11px 16px;border-radius:25px;font-size:11px;color:#8a9998;white-space:nowrap}.home-stats b{font-size:15px;color:#3e5d5c;margin-right:4px}.room-feature{background:var(--blue);color:white;border-radius:27px;padding:27px;box-shadow:0 12px 28px #277d7922;position:relative;overflow:hidden}.room-feature:after{content:'';position:absolute;right:-30px;top:80px;width:140px;height:140px;border:24px solid #ffffff08;border-radius:35px;transform:rotate(20deg);pointer-events:none}.feature-top{display:flex;justify-content:space-between;align-items:center}.feature-top .pill{background:#ffffff18;color:#d3eeea;font-size:8px;margin:0}.feature-top .mode-icon{background:#ffffff20;width:43px;height:43px;font-size:23px}.room-feature h2{font-size:29px;letter-spacing:-1px;line-height:1.18;margin:22px 0 10px}.room-feature p{font-size:12px;color:#d1e5e1;line-height:1.7}.room-actions{display:flex;gap:10px;margin-top:24px;position:relative;z-index:1}.room-actions button{padding:14px 16px;border-radius:12px;font-size:12px;font-weight:750;background:#fff;color:var(--blue);flex:1;text-align:left}.room-actions button:first-child{flex:1.2}.room-actions button:first-child span{float:right}.room-actions button:last-child{background:#ffffff13;color:white;border:1px solid #ffffff40;text-align:center}.bot-row,.friend-row{width:100%;display:flex;align-items:center;gap:15px;margin-top:15px;background:#ffffffd9;border:1px solid #fff;padding:20px;border-radius:21px}.bot-row .mode-icon{background:#e5eeeb}.friend-row .mode-icon{background:#f6e9df}.bot-row strong,.friend-row strong{font-size:16px}.bot-row small,.friend-row small{color:#899d9a;font-size:11px}.coming-row{margin-top:20px;padding:16px 18px;border:1px dashed #cddbd5;border-radius:16px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#91a09d}.coming-row .pill{margin:0;background:#e6ece8;color:#869992}.home-links{display:flex;justify-content:center;gap:23px;margin:27px 0}.home-links button{background:none;color:#83968f;font-size:11px;padding:8px 0}.about-game{border-top:1px solid #dce5df;padding:28px 3px 0}.about-game .eyebrow{font-size:8px;letter-spacing:1.5px;color:#97a59e}.about-game h2{font-size:21px;line-height:1.35;letter-spacing:-.5px;margin:13px 0}.about-game p{font-size:12px;color:#8c9c97;line-height:1.9}.info-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:23px 0}.info-columns strong{font-size:12px;color:#607b71}.info-columns p{font-size:11px;margin-top:7px}.fair-note{font-size:10px;color:#8b9e94;background:#e8eeea;padding:15px;border-radius:13px;line-height:1.6}.player.blue{background:#e1efeb}.player.red{background:#f7e7e1}.resume{background:#deeee8;color:#447d6a}.sizes button.selected{background:#e5f0eb;color:var(--blue)}.segmented .selected,.input-switch .selected{color:var(--blue)}.box.p0{fill:var(--blue)}.box.p1{fill:var(--red)}.turn-dot{background:#8fcdc2}.turn-status.red-turn .turn-dot{background:#edb39f}.final-scores div{background:#e1efeb}.final-scores div:last-child{background:#f7e7e1}.avatar{box-shadow:inset 0 2px 4px #ffffff22}.room-form label{display:block;font-size:12px;font-weight:700;margin:18px 0 9px}.room-form input{text-transform:none}.room-form .code-input{text-transform:uppercase;letter-spacing:4px;font-weight:800;text-align:center;font-size:22px}.qr-box{background:#fff;width:195px;height:195px;padding:7px;margin:18px auto;border:1px solid #e1e9e4;border-radius:15px}.qr-box svg{width:100%;height:100%;display:block}.room-code{text-align:center;font-size:27px;letter-spacing:5px;font-weight:850;color:var(--blue);padding:14px;background:#e5efeb;border-radius:14px}.room-wait{text-align:center;font-size:12px;color:#879f91}.room-wait:before{content:'';display:inline-block;width:7px;height:7px;background:#55a78d;border-radius:50%;margin-right:7px;animation:warning 1.5s infinite}.copy-row{display:flex;gap:9px}.copy-row button{flex:1}.room-info{font-size:11px!important;line-height:1.8}.room-bar{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#82968e;padding:0 3px 15px}.room-bar button{background:#fff;border-radius:8px;padding:6px 9px;font-size:10px;color:var(--blue)}.room-live{color:#398b72}.room-offline{color:#b7795d}.modal .room-form .sizes{margin-bottom:15px}.room-error{color:#bb604b!important;font-size:12px!important}.waiting-players{display:flex;gap:10px;margin:15px 0}.waiting-players span{flex:1;min-width:0;padding:12px;border-radius:12px;background:#e8efeb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.waiting-players span:last-child{background:#f5e9e2}@media(max-width:430px){.hero h1{font-size:44px}.home-stats>span{padding:10px 13px;font-size:10px}.room-feature{padding:24px}.room-feature h2{font-size:27px}.room-actions button{padding:13px 12px;font-size:11px}.home-links{gap:20px}.info-columns{gap:18px}}
/* Match view fits the visual viewport: board gets the remaining space. */
body.is-game{height:var(--app-height,100dvh);min-height:0;overflow:hidden;overscroll-behavior:none}
.is-game #app{height:100%;max-width:660px;display:flex;flex-direction:column;overflow:hidden;padding:10px 14px max(8px,env(safe-area-inset-bottom));gap:8px}
.is-game header{margin:0;min-height:38px;flex-shrink:0;gap:8px}
.is-game .brand{font-size:23px;gap:8px}.is-game .brand img{width:32px;height:32px}.is-game .small{padding:10px 13px;font-size:11px;border-radius:12px}
.is-game #game{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:none;gap:8px;margin:0}
.is-game .room-bar{margin:0;padding:0 2px;height:21px;min-height:21px;flex-shrink:0;font-size:9px}
.is-game .room-bar button{padding:4px 8px;font-size:9px}
.is-game .players{padding:0;margin:0;gap:8px;flex-shrink:0;grid-template-columns:1fr 23px 1fr}
.is-game .player{padding:10px;border-radius:16px;gap:8px;min-height:53px}
.is-game .avatar{width:29px;height:29px;font-size:20px}
.is-game .player-info strong{font-size:12px}.is-game .player-info small{display:none}.is-game .player-score{font-size:23px}
.is-game .player.active{box-shadow:0 0 0 2px #ffffffdf}.is-game .vs{font-size:9px}
.is-game .score-area{margin:3px 0 0;flex-shrink:0}.is-game .score-caption{margin-bottom:5px;font-size:9px}.is-game #matchLabel{font-size:8px}.is-game .score-track{height:6px}
.is-game .board-top{margin:0;min-height:26px;flex-shrink:0;justify-content:flex-end}.is-game #boardNote{display:none}
.is-game .zoom-controls{gap:4px}.is-game .zoom-controls button{padding:5px 9px;min-width:30px;min-height:27px}
.is-game .board-shell{flex:1;min-height:0;width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.is-game #boardViewport{flex-shrink:0;aspect-ratio:1;max-width:100%;max-height:100%;background:#ffffffd9;border:1px solid #d8e3dc;border-radius:20px;box-shadow:inset 0 0 0 6px #fff8}
.is-game #board{width:100%;height:100%}
.is-game .below-board,.is-game #controlHint,.is-game .game-foot{display:none}
.is-game .controls-panel{margin:0;gap:10px;flex-direction:row;justify-content:center;flex-shrink:0;min-height:38px}
.is-game .input-switch{width:150px;padding:3px}.is-game .input-switch button{padding:8px;font-size:10px}
.is-game #wallTray{gap:8px}.is-game .wall-piece{width:56px;height:36px;border-radius:10px}.is-game .wall-piece i{width:33px;height:10px;background:var(--blue)}.is-game .wall-piece.vertical i{height:23px;width:10px}
.is-game .game-bottom{flex-wrap:nowrap;margin:0;gap:8px;flex-shrink:0;min-height:45px}
.is-game .turn-status{min-width:0;padding:12px 10px;border-radius:14px;gap:7px}
.is-game .turn-status strong{font-size:11px;overflow:hidden;text-overflow:ellipsis}.is-game #timer{font-size:18px}.is-game .turn-dot{flex-shrink:0}
.is-game .emojis{gap:4px}.is-game .emojis button{width:30px;height:41px;font-size:20px;border-radius:11px}
@media(max-height:620px){.is-game #app{gap:5px;padding-top:6px}.is-game #game{gap:5px}.is-game header{min-height:30px}.is-game .brand{font-size:20px}.is-game .brand img{width:27px;height:27px}.is-game .player{min-height:43px;padding:6px 9px}.is-game .board-top{min-height:22px}.is-game .zoom-controls button{min-height:23px;padding:3px 8px}.is-game .game-bottom{min-height:39px}.is-game .turn-status{padding:9px 10px}.is-game .controls-panel{min-height:33px}.is-game .input-switch button{padding:6px}.is-game .emojis button{height:35px}}
@media(max-width:355px){.is-game .emojis{gap:3px}.is-game .emojis button{width:25px;font-size:17px}.is-game .turn-status strong{font-size:10px}.is-game .avatar{width:23px;height:23px}.is-game .player-info strong{font-size:10px}}
@media(orientation:landscape) and (max-height:500px){.is-game #app{max-width:950px}.is-game #game{position:relative;padding-left:190px;padding-right:175px}.is-game .players{position:absolute;left:0;top:0;width:180px;display:flex;flex-direction:column;align-items:stretch;gap:8px}.is-game .players .vs{display:none}.is-game .score-area{position:absolute;left:0;top:126px;width:180px}.is-game .room-bar{position:absolute;left:0;bottom:0;width:180px}.is-game .game-bottom{position:absolute;right:0;top:0;width:165px;flex-direction:column;align-items:stretch}.is-game .emojis{justify-content:center;flex-wrap:wrap}.is-game .controls-panel{position:absolute;right:0;top:120px;width:165px;flex-direction:column}.is-game .board-top{position:absolute;right:0;bottom:0}.is-game .board-shell{height:100%}}
/* Final score: winner, names, and two clear actions. */
.modal:has(.result-v2){background:#fff;max-width:480px;border-radius:32px;padding:36px 27px 27px;overflow:visible}
.modal:has(.result-v2) .modal-close{display:none}
.result-v2{padding:0}.result-trophy{display:block;font-size:65px;line-height:1.2;margin:3px auto 21px;animation:trophyIn .5s cubic-bezier(.2,.8,.2,1)}
.modal .result-v2 h2{font-size:31px;line-height:1.2;font-weight:850;color:var(--ink);letter-spacing:-1px;margin:0 0 29px;overflow-wrap:anywhere}
.result-scoreboard{display:grid;grid-template-columns:minmax(0,1fr) 37px minmax(0,1fr);gap:12px;align-items:center;padding:6px}
.result-card{min-width:0;border-radius:22px;min-height:123px;padding:21px 12px 17px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;position:relative}
.result-card-0{background:var(--blue)}.result-card-1{background:var(--red)}
.result-card strong{display:block;font-size:47px;line-height:1.1;font-weight:850;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.result-card span{display:block;width:100%;font-size:15px;font-weight:750;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-card.winner:after{content:'';position:absolute;inset:-7px;border:4px solid #efbd43;border-radius:28px;box-shadow:0 0 0 2px #fff inset;pointer-events:none;animation:winnerIn .45s ease-out}
.result-vs{display:grid;place-items:center;width:37px;height:44px;border-radius:15px;background:#fff;box-shadow:0 5px 18px #293d4410;font-size:13px;font-weight:850;color:#6e7e84;z-index:1}
.modal .result-v2 .result-meta{font-size:12px;color:#99a1ab;margin:21px 0 0;text-transform:none}
.modal .result-v2 .rematch-status{font-size:11px;color:#8a9b95;min-height:17px;line-height:1.5;margin:9px 0 10px}
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:5px}
.result-actions button{border-radius:18px;min-height:58px;padding:16px 10px;font-size:17px;font-weight:800}
.result-home{background:#eff2f8;color:#3b5966}.result-rematch{background:var(--blue);color:#fff;box-shadow:0 9px 20px #277d7926}
.result-rematch:disabled{opacity:.65}.result-home:hover{background:#e7edf3}
@keyframes trophyIn{from{opacity:0;transform:translateY(10px) scale(.65) rotate(-10deg)}to{opacity:1;transform:none}}
@keyframes winnerIn{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
@media(max-width:360px){.modal:has(.result-v2){padding:27px 18px 20px;border-radius:26px}.result-scoreboard{gap:8px;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)}.result-card{min-height:102px;border-radius:17px;padding:17px 8px}.result-card strong{font-size:39px}.result-card span{font-size:12px}.result-vs{width:30px;font-size:11px}.modal .result-v2 h2{font-size:26px}.result-actions button{font-size:15px;min-height:50px}.result-card.winner:after{border-radius:23px}.result-trophy{font-size:54px}}
@media(max-height:500px){.modal:has(.result-v2){padding:18px 24px;overflow:auto;max-height:94dvh}.result-trophy{font-size:37px;margin:0 0 9px}.modal .result-v2 h2{font-size:23px;margin-bottom:17px}.result-card{min-height:85px;padding:10px}.result-card strong{font-size:34px}.result-card span{font-size:12px}.modal .result-v2 .result-meta{margin-top:13px}.result-actions button{min-height:45px;padding:10px;font-size:15px}.modal .result-v2 .rematch-status{margin:5px 0}}
/* Result actions stay reachable on short phone screens. */
.result-actions{grid-template-columns:1fr;gap:8px}.result-actions button{min-height:48px;padding:12px}.result-replay{color:var(--blue);background:white;border:1.5px solid #d7e3df}.modal:has(.result-v2){max-height:calc(100dvh - 28px);overflow:auto}.result-trophy{font-size:52px;margin-bottom:14px}.modal .result-v2 h2{margin-bottom:23px}
.replay h2{text-align:center;margin-bottom:14px}.replay-scores{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:750}.replay-scores span{max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.replay-scores span:first-child{color:var(--blue)}.replay-scores span:last-child{color:var(--red)}#replayBoard{display:block;width:100%;max-height:53dvh;aspect-ratio:1;background:#f9fbfa;border:1px solid #e0e8e4;border-radius:20px;margin:14px 0 8px}#replaySeek{width:100%;accent-color:var(--blue)}#replayStep{text-align:center;font-size:12px;margin:5px 0}.replay-controls{display:grid;grid-template-columns:1fr 2fr 1fr;gap:8px;margin:12px 0}.replay-controls button{min-height:44px;border-radius:12px;background:#edf3f1;color:var(--ink);font-weight:750}.replay-controls button:disabled{opacity:.35}.replay .secondary{width:100%}
.report-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.report-tools .secondary{font-size:12px;padding:10px;min-height:44px}.analysis-rows{max-height:180px;overflow:auto;margin:10px 0}.analysis-row{display:block;width:100%;padding:10px;text-align:left;font-size:11px;line-height:1.6;background:#eef4f1;border-radius:9px;margin:5px 0;color:var(--ink)}.analysis-row.mistake{background:#fff0e8;border-left:3px solid var(--red)}#analysisStatus{font-size:11px;line-height:1.6}.modal:has(.replay){max-height:calc(100dvh - 28px);overflow:auto}
/* Quiet brand header with account access. */
header .brand{margin-right:auto}.account-button{margin-right:9px;flex-shrink:0}.account-button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.account-button.signed-in{background:#dfefea;color:var(--blue);box-shadow:0 0 0 2px #bfd9d0}.brand-tagline{font-size:10px;letter-spacing:.7px;color:#879b94;margin:-14px 0 29px 51px}.is-game .account-button{display:none}#resumeBtn{display:none!important}.home-links{flex-wrap:wrap;row-gap:4px}.modal:has(.account-panel){max-height:calc(100dvh - 28px);overflow:auto}.account-panel{padding:5px 0}.account-panel h2{overflow-wrap:anywhere}.account-panel label{display:block;margin:18px 0 9px;font-size:13px;font-weight:700}.account-emblem{display:block;font-size:45px;color:var(--blue);margin:12px 0}.account-welcome{text-align:center}.auth-link{text-decoration:none;display:flex;justify-content:space-between;align-items:center;font-size:14px;gap:15px}.account-welcome .secondary{width:100%}.profile-heading{display:flex;align-items:center;gap:14px;margin-bottom:24px}.profile-heading h2{font-size:24px;margin:0}.profile-heading .text-btn{font-size:11px;padding:7px 0}.profile-avatar{width:56px;height:56px;flex-shrink:0;display:grid;place-items:center;background:#e0eeea;color:var(--blue);font-size:25px;border-radius:19px;font-weight:800}.rank-card{display:flex;align-items:center;gap:18px;padding:22px;background:#edf3ef;border-radius:20px}.rank-icon{font-size:39px}.rank-card small{font-size:9px;letter-spacing:1.5px;color:#84988e}.rank-card strong{display:block;font-size:24px;margin:4px 0}.rank-card div>span{font-size:12px;color:#7c9186}.rank-progress{height:6px;margin:13px 0 5px;border-radius:5px;background:#e6eeea;overflow:hidden}.rank-progress i{display:block;height:100%;background:var(--blue);transition:width .4s}.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}.profile-stats div{background:#f6f8f6;padding:15px 5px;border-radius:14px;text-align:center}.profile-stats strong{display:block;font-size:25px;color:var(--ink)}.profile-stats span{font-size:9px;color:#85968c}.rank-rules{font-size:11px;color:#819289;line-height:1.7;margin:16px 0}.rank-rules summary{cursor:pointer;color:var(--blue);font-weight:650}.rank-rules p{font-size:11px}.history-heading{display:flex;justify-content:space-between;align-items:center;margin-top:22px}.history-heading h3{font-size:16px}.history-heading span{font-size:10px;color:#8c9b92}.history-tabs{display:flex;gap:7px;margin-bottom:12px}.history-tabs button{padding:8px 14px;background:#f0f4f1;color:#8b9b93;border-radius:20px;font-size:11px}.history-tabs .selected{background:var(--blue);color:white}.history-entry{display:flex;align-items:center;gap:10px;border-bottom:1px solid #edf1ed;padding:13px 0}.history-entry>div{min-width:0;flex:1}.history-entry strong{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:13px}.history-entry small{display:block;margin-top:5px;font-size:10px;color:#8c9b94}.history-entry>b{font-size:18px}.history-badge{display:grid;place-items:center;width:33px;height:33px;border-radius:11px;font-size:12px;font-weight:800;background:#f0f3f1}.history-entry.win .history-badge{background:#e0eee6;color:#3c8a65}.history-entry.loss .history-badge{background:#f8e9e2;color:#c27f65}.history-empty{font-size:12px!important;line-height:1.7;text-align:center;padding:24px 10px}.profile-footer{display:flex;justify-content:space-between;align-items:center;margin-top:24px}.profile-footer a{font-size:12px;color:#a08174}.profile-footer .secondary{font-size:12px;padding:10px 18px}
@media(max-width:380px){header .brand{font-size:25px;gap:8px}header .brand img{width:37px;height:37px}header .icon-btn{width:40px;height:40px}.brand-tagline{font-size:8px;margin-left:45px}.profile-stats span{font-size:8px}}
.brand-copy{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.brand-name{line-height:1.05}.brand-copy small{font-size:8px;line-height:1.3;font-weight:400;letter-spacing:.2px;color:#899b93;white-space:nowrap}.is-game .brand-copy small{display:none}#footer{display:none!important}.account-replays{margin-top:23px;border-top:1px solid #e2eae5;padding-top:15px;display:flex;gap:8px;flex-wrap:wrap}.account-replays h3{width:100%;font-size:15px;margin:0 0 6px}.account-replays .secondary{flex:1;font-size:12px;padding:11px 8px}.auth-tabs{display:flex;gap:6px;padding:5px;background:#eef3ef;border-radius:13px;margin:20px 0}.auth-tabs button{flex:1;padding:11px 5px;background:transparent;border-radius:10px;font-size:12px;color:#83958b}.auth-tabs .selected{background:white;color:var(--blue);box-shadow:0 3px 10px #293e3210}#authForm input{width:100%}#authForm .tiny{display:block;font-size:10px;margin:6px 0 12px}#authSubmit{width:100%;margin-top:15px}.profile-footer #signOut{color:#a08174;font-size:12px}
@media(max-width:380px){.brand-copy small{font-size:6.8px}}
/* Language choice and logical direction. Keep the board's geometry stable. */
header{direction:ltr;gap:8px}.brand{min-width:0}.brand-name{font-size:clamp(22px,6vw,30px)}.brand-copy small{font-size:7px}.account-button{margin-right:0}.language-button{font-size:12px;font-weight:750;flex-shrink:0}header .icon-btn{width:40px;height:40px;min-width:40px;border-radius:14px}header .brand img{width:39px;height:39px}header .brand{gap:8px}.language-picker h2{font-size:24px}.language-choice{display:flex;justify-content:space-between;align-items:center;width:100%;padding:18px 20px;background:#f1f5f2;border:1.5px solid transparent;border-radius:14px;font-size:17px;margin:12px 0;color:var(--ink)}.language-choice span{font-size:11px;color:#90a096}.language-choice.selected{border-color:var(--blue);background:#e5f0eb}.is-game .language-button{width:34px;height:34px;min-width:34px;border-radius:10px}.is-game .brand-name{font-size:23px}
[dir=rtl] body{font-family:Tahoma,"Segoe UI",Arial,sans-serif}[dir=rtl] .eyebrow,[dir=rtl] .pill{letter-spacing:0}[dir=rtl] .room-actions button{text-align:right}[dir=rtl] .room-actions button:first-child span{float:left}[dir=rtl] .room-actions button:last-child{text-align:center}[dir=rtl] .arrow{transform:scaleX(-1)}[dir=rtl] .profile-heading,[dir=rtl] .history-entry,[dir=rtl] .rank-card{direction:rtl;text-align:right}[dir=rtl] .analysis-row{text-align:right}[dir=rtl] .analysis-row.mistake{border-left:0;border-right:3px solid var(--red)}[dir=rtl] .setup-note{letter-spacing:0}[dir=rtl] .modal h2{letter-spacing:0}[dir=rtl] .brand-copy{direction:ltr}[dir=rtl] .rule{text-align:right}[dir=rtl] .room-code,[dir=rtl] .code-input,[dir=rtl] #roomCodeDisplay,[dir=rtl] #authEmail,[dir=rtl] #authUsername,[dir=rtl] #authIdentifier,[dir=rtl] #authPassword,[dir=rtl] .score-track,[dir=rtl] .score-caption,[dir=rtl] .players,[dir=rtl] .result-scoreboard,[dir=rtl] #boardViewport,[dir=rtl] #replayBoard{direction:ltr}[dir=rtl] .player-info{direction:rtl;text-align:right}[dir=rtl] .room-feature h2{font-size:29px;line-height:1.5;letter-spacing:0}[dir=rtl] .room-feature p{line-height:1.9}[dir=rtl] .rank-progress{direction:ltr}[dir=rtl] .replay-controls{direction:ltr}
@media(max-width:350px){header{gap:5px}header .icon-btn{width:33px;height:36px;min-width:33px}header .brand img{width:32px;height:32px}.brand-name{font-size:22px}.brand-copy small{font-size:6px}.account-button svg{width:20px}.is-game .brand-name{font-size:21px}}
/* Embedded, consistent typography: no dependency on the phone's Arabic fallback. */
@font-face{font-family:KhamsatArabic;src:url('tajawal-regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:KhamsatArabic;src:url('tajawal-medium.woff') format('woff');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:KhamsatArabic;src:url('tajawal-bold.woff') format('woff');font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:KhamsatLatin;src:url('manrope-variable.woff') format('woff');font-weight:200 800;font-style:normal;font-display:swap}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{font-family:KhamsatLatin,KhamsatArabic,Arial,sans-serif;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}[dir=rtl] body{font-family:KhamsatArabic,KhamsatLatin,Arial,sans-serif;font-size:15px;line-height:1.65}button,input,select,textarea{font-family:inherit}button{line-height:1.4}h1,h2,h3,strong,b{font-weight:700}[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] strong{letter-spacing:0}header{margin-bottom:22px}.brand-name{font-family:KhamsatLatin,Arial,sans-serif;font-weight:800;letter-spacing:-1.15px;font-size:clamp(23px,6.4vw,29px);line-height:1.12}.brand-copy{gap:3px}.brand-copy small{font-size:8px;font-weight:400;line-height:1.3;letter-spacing:0;color:#7c8f87}[dir=rtl] .brand-copy small{font-family:KhamsatArabic,Arial,sans-serif;font-size:10px;line-height:1.2;direction:rtl;text-align:left}.brand-dot{font-weight:800}
.room-feature{padding:24px;border-radius:25px}.feature-top .pill{font-size:9px;font-weight:600;line-height:1.4;padding:7px 10px;letter-spacing:.8px}.feature-top .mode-icon{width:43px;height:43px;border-radius:14px}.room-feature h2,[dir=rtl] .room-feature h2{font-size:25px;font-weight:700;line-height:1.3;letter-spacing:-.6px;margin:19px 0 10px;text-wrap:balance}.room-feature p,[dir=rtl] .room-feature p{font-size:13px;font-weight:400;line-height:1.8;color:#e0eeea;margin:0;max-width:37ch}.room-actions{gap:10px;margin-top:23px}.room-actions button,.room-actions button:first-child{display:flex;align-items:center;justify-content:center;gap:10px;flex:1;min-width:0;min-height:46px;padding:12px 9px;font-size:12px;font-weight:700;text-align:center}.room-actions button:first-child span,[dir=rtl] .room-actions button:first-child span{float:none}[dir=rtl] .room-actions button{text-align:center}[dir=rtl] .room-feature h2{font-size:26px;line-height:1.4;letter-spacing:0}[dir=rtl] .room-feature p{font-size:15px;line-height:1.75}[dir=rtl] .feature-top .pill{font-size:11px;letter-spacing:0;font-weight:500}[dir=rtl] .room-actions button{font-size:14px;font-weight:700}
.bot-row,.friend-row{padding:18px;gap:13px;border-radius:22px;min-height:96px}.mode-card>span:nth-child(2){flex:1;min-width:0;text-align:start}.mode-card .mode-icon{flex-shrink:0;width:47px;height:47px;border-radius:16px;font-size:27px}.mode-card .arrow{flex-shrink:0;margin-inline-start:auto;font-size:24px;line-height:1}.bot-row strong,.friend-row strong{font-size:15px;line-height:1.45;letter-spacing:-.35px;font-weight:700}.bot-row small,.friend-row small{font-size:11px;line-height:1.6;letter-spacing:0;font-weight:400;color:#7a8e84;opacity:1;margin-top:4px}[dir=rtl] .bot-row strong,[dir=rtl] .friend-row strong{font-size:18px;line-height:1.5;letter-spacing:0}[dir=rtl] .bot-row small,[dir=rtl] .friend-row small{font-size:13px;line-height:1.5}.coming-row{gap:12px;font-size:12px;line-height:1.5;padding:16px}.coming-row>span:first-child{min-width:0}.coming-row .pill{flex-shrink:0;font-size:8px;line-height:1.4;letter-spacing:.7px;padding:6px 8px}[dir=rtl] .coming-row{font-size:14px}[dir=rtl] .coming-row .pill{font-size:11px;letter-spacing:0}
.home-links{gap:20px;margin:24px 0}.home-links button{font-size:11px;font-weight:500;line-height:1.6;color:#7b8d84}[dir=rtl] .home-links button{font-size:13px}.about-game h2{font-size:21px;line-height:1.4}.about-game p{font-size:12px;line-height:1.85;color:#7d8d84}[dir=rtl] .about-game h2{font-size:23px;line-height:1.5}[dir=rtl] .about-game p{font-size:14px;line-height:1.85}[dir=rtl] .info-columns strong{font-size:15px}[dir=rtl] .about-game .eyebrow{font-size:11px;line-height:1.6}.fair-note{line-height:1.8}[dir=rtl] .fair-note{font-size:12px}.modal h2{font-size:24px;line-height:1.3;font-weight:700}.modal p{line-height:1.75}[dir=rtl] .modal h2{font-size:25px;line-height:1.5}[dir=rtl] .modal p{font-size:14px;line-height:1.8}[dir=rtl] .setting-row{font-size:15px}[dir=rtl] .segmented button{font-size:14px}[dir=rtl] .tiny{font-size:12px}input{font-size:16px;line-height:1.5}.player-score,.result-card strong,.profile-stats strong{font-variant-numeric:tabular-nums}.score-caption,.replay-scores{font-variant-numeric:tabular-nums}.is-game .brand-name{font-size:22px}.is-game .player-info strong{font-size:12px;line-height:1.4}.is-game .turn-status strong{line-height:1.3}[dir=rtl] .is-game .turn-status strong{font-size:14px}[dir=rtl] .profile-heading h2{font-size:23px}[dir=rtl] .rank-card strong{font-size:26px}[dir=rtl] .history-entry strong{font-size:15px}[dir=rtl] .history-entry small{font-size:11px}[dir=rtl] .profile-stats span{font-size:11px}[dir=rtl] .analysis-row{font-size:12px;line-height:1.8}
@media(max-width:350px){.brand-name{font-size:22px}.brand-copy small{font-size:6.6px}[dir=rtl] .brand-copy small{font-size:9px}.room-feature{padding:20px}.room-feature h2,[dir=rtl] .room-feature h2{font-size:23px}.bot-row,.friend-row{padding:15px;gap:10px}.bot-row strong,.friend-row strong{font-size:14px}[dir=rtl] .bot-row strong,[dir=rtl] .friend-row strong{font-size:16px}.mode-card .mode-icon{width:42px;height:42px;font-size:24px}.mode-card .arrow{font-size:21px}.room-actions button{font-size:11px}[dir=rtl] .room-actions button{font-size:13px}}
:root{--muted:#687d72}.bot-row small,.friend-row small,.home-links button,.about-game p{color:#60766a}.room-feature p,[dir=rtl] .room-feature p{color:#f1f8f4}.brand-copy small{color:#687d72}.sub,.tiny{color:var(--muted)}.history-entry small,.rank-card small,.rank-card div>span,.profile-stats span,.room-wait{color:#687e72}
/* Matching vector icons replace platform-dependent glyphs. */
#accountBtn,#settingsBtn,#gameSettings{display:inline-flex;align-items:center;justify-content:center;color:#34524b}#accountBtn .header-glyph,#settingsBtn .header-glyph,#gameSettings .header-glyph{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}#accountBtn,#settingsBtn{border:1px solid #e3ebe5;background:#ffffffdf;box-shadow:0 4px 12px #243e3205;border-radius:13px;transition:background .15s,transform .15s}#accountBtn:active,#settingsBtn:active{transform:scale(.95);background:#e7f0eb}#accountBtn.signed-in{background:#e0eee7;border-color:#bdd4c7;color:#277d79}#accountBtn:focus-visible,#settingsBtn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}#settingsBtn.hidden{display:none}.is-game #accountBtn{display:none}#gameSettings .header-glyph{width:17px;height:17px}
/* Atelier: calm, tactile cosmetic-store preview. */
.shop-home{background:#ffffffd9;border:1px solid #fff}.shop-home .mode-icon{background:#eee5d1;color:#927345}.shop-basket-icon{width:25px;height:25px;display:block;flex-shrink:0}.modal:has(.shop-shell){width:min(820px,96vw);max-width:820px;padding:28px;max-height:92dvh;overflow:auto;text-align:start}.shop-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline-end:26px}.shop-heading h2{font-size:26px;margin:5px 0 14px}.shop-eyebrow{font-size:9px;letter-spacing:2px;color:#8a7856;font-weight:700}.shop-balance{display:flex;align-items:center;gap:7px;background:#efe7d5;color:#6e542e;border:1px solid #e7d7b4;border-radius:13px;padding:10px 12px;font-weight:700;white-space:nowrap}.shop-balance span{font-size:23px}.shop-balance small{font-size:9px}.shop-balance b{font-size:19px}.shop-demo{padding:8px 12px;background:#e9efeb;border-radius:8px;font-size:10px;color:#526d63}.shop-tabs{display:flex;gap:4px;background:#f0f2ee;padding:5px;border-radius:13px;margin:18px 0}.shop-tabs button{flex:1;background:none;border-radius:9px;padding:11px 5px;font-size:12px;font-weight:700;white-space:nowrap}.shop-tabs .selected{background:white;box-shadow:0 2px 7px #233a3010;color:#277d79}.shop-intro h3{font-size:20px;margin:20px 0 5px}.shop-intro p,.shop-footnote{font-size:11px!important;line-height:1.6!important;color:#71827b!important;margin:5px 0 17px}.skin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.skin-card{padding:7px;border:1px solid #e4e8e1;background:#fff;border-radius:17px;text-align:start;min-width:0;transition:border-color .15s,transform .15s}.skin-card.selected{border:2px solid #277d79;padding:6px;background:#f5faf7}.skin-art{display:block;background:#f2f2eb;border-radius:12px;overflow:hidden}.skin-art svg{width:100%;display:block}.skin-caption{display:grid;gap:5px;padding:10px 4px 6px}.skin-caption small{font-size:8px;letter-spacing:.6px;color:#8e7954}.skin-caption strong{font-size:12px;color:#2b4242}.skin-caption>span{font-size:11px;color:#277d79;font-weight:700}.skin-detail{display:grid;grid-template-columns:1fr 1fr;gap:22px;background:#f0f4f0;border:1px solid #e0e7df;border-radius:18px;padding:19px;margin-top:20px;align-items:center}.skin-live{text-align:center}.shop-board{width:100%;display:block;max-height:170px}.preview-line{stroke-width:4;stroke-linecap:round}.skin-live>span{font-size:8px;letter-spacing:1.7px;color:#74857a}.skin-info>small{font-size:10px;color:#8b7d62}.skin-info h3{margin:4px 0;font-size:19px}.skin-info p{font-size:11px!important;margin:5px 0 12px}.skin-info .action{padding:12px;font-size:12px;width:100%;margin:0;min-height:42px}.skin-info button:disabled{opacity:.55;cursor:default}.shop-feedback{color:#277d79!important;font-size:11px!important;min-height:15px;margin:8px 0 0!important}.shop-footnote{margin-top:17px!important;margin-bottom:0!important}.shop-empty{text-align:center;padding:25px 15px;color:#6f8379}.shop-empty>span{font-size:45px;color:#aa9165}.shop-empty p{font-size:12px!important}.wallet-intro{text-align:center;padding:10px}.wallet-intro>span{font-size:45px;color:#b18c4b}.wallet-intro h3{font-size:25px;margin:5px}.wallet-intro p{font-size:12px!important}.token-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}.token-packs button{display:grid;gap:10px;text-align:center;border:1px solid #e5dcc7;background:#fffdf6;border-radius:16px;padding:20px 8px}.token-packs button>span{font-size:23px;color:#ad8848}.token-packs strong{font-size:25px}.token-packs small{font-size:11px;color:#82775d}.token-packs b{font-size:10px;padding:8px 2px;border-radius:7px;background:#eee8d7;color:#715a33}.wallet-history{border-top:1px solid #e3e7df;margin-top:22px;padding-top:10px}.wallet-history h3{font-size:14px}.wallet-history>div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #e5e9e2;font-size:12px}.wallet-history p{font-size:12px!important}.shop-confirm{background:white;border-radius:12px;padding:10px}.shop-confirm p{font-size:11px!important}.shop-confirm .secondary{font-size:11px;padding:9px;margin-top:5px}.shop-shell button:focus-visible{outline:3px solid #b5965c;outline-offset:3px}.shop-shell .secondary{width:100%}@media(max-width:520px){.modal:has(.shop-shell){padding:22px 16px;max-height:94dvh}.shop-heading{gap:5px;align-items:flex-start}.shop-heading h2{font-size:22px}.shop-eyebrow{font-size:8px;letter-spacing:1px}.shop-balance{padding:7px 8px;font-size:12px;gap:4px;margin-top:12px}.shop-balance small{display:none}.shop-tabs button{font-size:10px;padding:10px 3px}.skin-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.skin-caption strong{font-size:12px}.skin-detail{gap:12px;padding:12px}.skin-info h3{font-size:15px}.skin-info .action{font-size:11px}.shop-intro h3{font-size:18px}.token-packs{gap:6px}.token-packs button{padding:15px 4px}.token-packs strong{font-size:21px}.token-packs b{font-size:9px}}
/* Shop is a normal page; only a selected product opens a dialog. */
#shop{padding-bottom:30px}#shop .shop-heading{padding-inline-end:0}#shop .shop-heading h1{font-size:29px;line-height:1.3;letter-spacing:-.7px;margin:6px 0 17px}#shop .shop-tabs{position:sticky;top:8px;z-index:2;box-shadow:0 2px 10px #f5f7f1}#shop .skin-grid{gap:14px}#shop .skin-card{transition:border-color .15s,box-shadow .15s}#shop .skin-card:hover{border-color:#99b5a7;box-shadow:0 4px 15px #244b3910}.modal:has(.skin-preview-dialog){width:min(430px,94vw);padding:30px 25px;max-height:92dvh;overflow-y:auto;text-align:center}.skin-preview-dialog h2{font-size:25px;margin:10px 0 5px;padding:0 15px}.skin-animation-stage{background:#f1f5ef;border:1px solid #e2e9df;border-radius:19px;margin:18px auto 7px;max-width:290px;padding:12px}.skin-animation-stage .shop-board{max-height:245px}.skin-preview-dialog .text-btn{font-size:11px;color:#54786d;padding:6px}.skin-preview-type{font-size:12px!important;color:#748477!important;margin:10px 0!important}.skin-price{display:grid;gap:5px;padding:12px 0 17px}.skin-price small{font-size:11px;color:#7c897d}.skin-price strong{font-size:26px;color:#866735}.skin-price strong span{font-size:12px}.skin-preview-dialog>.action{width:100%;padding:15px;margin:0;font-size:14px}.preview-payment-note{display:block;font-size:10px;color:#7b897e;line-height:1.5;margin-top:10px}.capture-wall{stroke-dasharray:1;stroke-dashoffset:1;animation:captureWall 5s infinite}.capture-wall-1{animation-name:captureWall1}.capture-wall-2{animation-name:captureWall2}.capture-wall-3{animation-name:captureWall3}.capture-reveal{opacity:0;transform-box:fill-box;transform-origin:center;animation:captureFill 5s infinite}.capture-score{opacity:0;animation:captureScore 5s infinite}@keyframes captureWall{0%,5%{stroke-dashoffset:1}15%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}@keyframes captureWall1{0%,18%{stroke-dashoffset:1}28%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}@keyframes captureWall2{0%,31%{stroke-dashoffset:1}41%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}@keyframes captureWall3{0%,44%{stroke-dashoffset:1}54%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}@keyframes captureFill{0%,54%{opacity:0;transform:scale(.95)}63%,93%{opacity:1;transform:scale(1)}100%{opacity:0}}@keyframes captureScore{0%,58%{opacity:0;transform:translateY(8px)}65%,72%{opacity:1;transform:translateY(0)}85%,100%{opacity:0;transform:translateY(-12px)}}@media(prefers-reduced-motion:reduce){.capture-wall{animation:none;stroke-dashoffset:0}.capture-reveal{animation:none;opacity:1}.capture-score{animation:none;opacity:0}}@media(max-width:520px){#shop .shop-heading h1{font-size:25px}#shop .skin-grid{gap:11px}.modal:has(.skin-preview-dialog){padding:27px 20px}.skin-preview-dialog h2{font-size:23px}.skin-animation-stage{max-width:240px;padding:8px}.skin-animation-stage .shop-board{max-height:200px}}

/* Faster automatic 3 × 3 product preview. */
.animated-skin .capture-wall,.animated-skin .capture-reveal,.animated-skin .capture-score{animation-duration:2.4s}.skin-animation-stage .shop-board{aspect-ratio:1;max-height:245px}.skin-preview-dialog .skin-preview-type{margin-top:14px!important}@media(max-width:520px){.skin-animation-stage .shop-board{max-height:220px}}
/* Ownership is independent of the cosmetic: owner border + inset endpoint rings. */
.wall-owner{stroke-width:17;stroke-linecap:round;fill:none;pointer-events:none;opacity:.95}.wall-owner.p0{stroke:var(--blue);color:var(--blue)}.wall-owner.p1{stroke:var(--red);color:var(--red)}.wall-tip{fill:#f7faf5;stroke-width:2.2;pointer-events:none}.wall-tip.p0{stroke:var(--blue)}.wall-tip.p1{stroke:var(--red)}.wall-owner.last{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}.wall.last.p0{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #277d79)}.wall.last.p1{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #d57b69)}
.token-packs.usd-packs{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.usd-packs button{padding:16px 12px;gap:7px;min-width:0;background:#fffdf6;border-color:#e1d6bc;box-shadow:0 4px 13px #71562b08;overflow:hidden}.usd-packs .pack-name{font-size:12px;color:#5f624f;font-weight:700;line-height:1.5;min-height:18px}.usd-packs strong{font-size:23px;white-space:nowrap;direction:ltr}.usd-packs strong span{font-size:17px;color:#a98343}.usd-packs .pack-art{display:block;width:100%;height:100px}.pack-art svg{height:100%;width:100%;display:block}.usd-packs .pack-price{background:#277d79;color:white;font-family:KhamsatLatin,sans-serif;font-size:18px;line-height:1.5;padding:9px;border-radius:9px}.usd-packs .pack-price small{color:#cce4d9;font-size:9px}.usd-packs .pack-demo{font-size:9px;color:#7c8d76;line-height:1.5}.usd-packs button:hover{border-color:#b69a63}@media(max-width:520px){.token-packs.usd-packs{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.usd-packs button{padding:14px 10px}.usd-packs .pack-name{font-size:12px}.usd-packs strong{font-size:24px}.usd-packs .pack-art{height:105px}.usd-packs .pack-price{font-size:19px}.usd-packs .pack-demo{font-size:10px}}
/* Explicit SVG halo survives mobile GPU/filter differences and remote snapshots. */
.latest-wall-halo{pointer-events:none}.latest-halo-line{stroke-linecap:round;fill:none}.latest-halo-line.p0{stroke:var(--blue)}.latest-halo-line.p1{stroke:var(--red)}.latest-halo-rim{stroke:#fff6cf;stroke-linecap:round;fill:none}
/* Clear, tactile return control shared by setup and shop. */
button.text-btn.back{display:inline-flex;align-items:center;justify-content:center;min-height:46px;min-width:106px;padding:11px 19px;margin:0 0 24px;background:#fff;border:1px solid #cbded5;border-radius:13px;color:#296e66;font-size:14px;line-height:1.5;font-weight:700;box-shadow:0 3px 10px #2b5d4810;touch-action:manipulation}button.text-btn.back:hover{background:#edf5ef;border-color:#91b8a6}button.text-btn.back:active{background:#dfede3;transform:scale(.98)}button.text-btn.back:focus-visible{outline:3px solid #78a797;outline-offset:3px}[dir=rtl] button.text-btn.back{font-size:16px}

/* Incoming rematch: a short shake, followed by a calm pause; no JS timers. */
.result-rematch.rematch-nudge:not(:disabled){animation:rematch-nudge 1.5s ease-in-out infinite}
@keyframes rematch-nudge{0%,24%,100%{transform:translateX(0)}4%,12%,20%{transform:translateX(-4px)}8%,16%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.result-rematch.rematch-nudge:not(:disabled){animation:none;outline:3px solid #dbb865;outline-offset:3px}}
/* Account is a full page, using the same app header and navigation. */
#account{max-width:760px;margin-inline:auto;padding-bottom:32px}#account .account-panel{width:100%;max-width:none}#account .profile-heading{padding-top:8px}#account .profile-heading h2{font-size:clamp(25px,5vw,38px);overflow-wrap:anywhere;margin:0 0 8px}.profile-edit-actions{display:flex;flex-wrap:wrap;gap:8px 15px}.profile-edit-actions .text-btn{font-size:13px;padding:4px 0}.profile-avatar{border:2px solid #d1e3db;overflow:hidden;flex-shrink:0;padding:0;width:92px;height:92px;border-radius:25px}.profile-avatar img{width:100%;height:100%;object-fit:cover;display:block}.header-avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}.account-button{position:relative;overflow:hidden}.name-policy{padding:18px;background:#e8f1eb;border-radius:18px;margin-block:20px}.name-policy strong{display:block;margin-block:5px}.rename-consent{display:flex!important;align-items:flex-start;gap:12px;font-size:14px!important;line-height:1.7}.rename-consent input{width:22px!important;min-width:22px;height:22px;margin:2px 0;accent-color:#277d79}.edit-name-page form{max-width:520px}.edit-name-page form .secondary{margin-top:12px}.avatar-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:25px 0}.avatar-option{padding:5px;border:2px solid transparent;background:#fff;border-radius:18px;overflow:hidden;min-width:0;box-shadow:0 3px 12px #214d3910}.avatar-option img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}.avatar-option span{display:block;font-size:12px;padding:8px 2px;text-transform:capitalize;line-height:1.5}.avatar-option.selected{border-color:#277d79;background:#e6f0e9}.avatar-option:focus-visible{outline:3px solid #dbb865;outline-offset:2px}.avatar-picker-actions{position:sticky;bottom:0;padding:15px 0 calc(12px + env(safe-area-inset-bottom));background:#f5f7f2ed;display:flex;gap:12px;backdrop-filter:blur(12px)}.avatar-picker-actions button{flex:1;min-width:0}.avatar-picker-page h1,.edit-name-page h1{font-size:clamp(25px,5vw,36px)}@media(max-width:520px){.avatar-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.profile-avatar{width:76px;height:76px;border-radius:20px}#account .profile-heading{gap:16px}#account .profile-stats{gap:8px}#account .profile-stats>div{padding:17px 8px}.avatar-option span{font-size:12px}.profile-edit-actions{gap:8px 12px}}
.player .avatar{overflow:hidden}.player .avatar img{width:100%;height:100%;object-fit:cover;display:block}
#account .profile-heading>div{min-width:0}
.demographic-fields select{width:100%;min-height:48px;padding:12px 14px;border:1px solid #d9e2dc;border-radius:14px;background:#fff;color:var(--ink);font:inherit;margin-top:10px}.demographic-fields select:focus{outline:2px solid #277d79;outline-offset:2px}.demographic-fields input[type=search]{margin-bottom:0}.demographic-fields input[type=number]{max-width:180px}.profile-country,.match-country{display:flex;align-items:center;gap:7px;line-height:1.5;color:#627d72;font-size:13px}.profile-country{margin:4px 0 10px}.country-flag{display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1;width:25px;flex-shrink:0}.country-flag svg{display:block;width:23px;height:16px;border-radius:2px;box-shadow:0 0 0 1px #172e2820}.match-country{font-size:10px;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.match-country .country-flag{font-size:15px;width:19px}.match-country .country-flag svg{width:18px;height:12px}#detailsForm .secondary{margin-top:12px}.profile-country.hidden,.match-country.hidden{display:none}
/* One profile editor and one searchable nationality field. */
.profile-name-line{display:flex;align-items:center;gap:11px;min-width:0;margin-bottom:10px}.profile-name-line h2{margin:0!important;min-width:0}.profile-name-line .profile-country{margin:0;flex-shrink:0}.profile-name-line .country-flag{font-size:25px;width:30px}.profile-name-line .country-flag svg{width:29px;height:20px}.edit-profile-button{display:inline-flex;align-items:center;justify-content:center;padding:9px 15px;min-height:40px;border-radius:11px;background:#e7efea;border:1px solid #cdded5;color:#2d6d62;font-size:13px;font-weight:700}.profile-editor{max-width:610px!important}.profile-editor h1{font-size:clamp(26px,5vw,36px)}.edit-avatar-heading>.profile-avatar{margin:18px 0 12px}.avatar-select>summary{display:inline-flex;align-items:center;padding:9px 15px;min-height:40px;background:#e7efea;border-radius:11px;cursor:pointer;color:#2d6d62;font-weight:700;font-size:13px}.avatar-select .avatar-grid{grid-template-columns:repeat(6,minmax(0,1fr));margin:15px 0 20px;gap:9px}.avatar-select .avatar-option{padding:3px;border-radius:14px}.avatar-select .avatar-option img{border-radius:9px}.profile-save-actions{display:flex;gap:12px;margin-top:22px}.profile-save-actions button{flex:1;min-width:0}.profile-editor .name-policy{margin:12px 0}.country-picker{position:relative}.country-trigger{width:100%;min-height:50px;padding:12px 15px;border:1px solid #d4dfd7;border-radius:14px;background:#fff;display:flex;align-items:center;gap:10px;color:var(--ink);font:inherit;text-align:start}.country-trigger>span:not(.country-flag):not(.country-chevron){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.country-chevron{margin-inline-start:auto;color:#6b8277}.country-trigger:focus-visible{outline:2px solid #277d79;outline-offset:2px}.country-popup{position:absolute;z-index:60;inset-inline:0;top:calc(100% + 6px);padding:9px;background:#fff;border:1px solid #cdded4;border-radius:16px;box-shadow:0 12px 32px #203b2926}.country-popup input[type=search]{margin:0!important;background:#f4f7f3;padding:11px 12px;border-radius:10px;min-height:44px;font-size:14px}.country-options{max-height:min(260px,38dvh);overflow:auto;overscroll-behavior:contain;margin-top:7px;scrollbar-width:thin}.country-option{display:flex;align-items:center;gap:10px;width:100%;min-height:45px;padding:10px;border-radius:9px;background:#fff;color:var(--ink);font:inherit;font-size:14px;text-align:start}.country-option[aria-selected=true]{background:#e5f0e8;color:#216b5e;font-weight:700}.country-option:hover,.country-option:focus-visible{background:#edf4ef;outline:2px solid #a2c7b3;outline-offset:-2px}.country-options>p{padding:12px;font-size:13px}@media(max-width:520px){.avatar-select .avatar-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.profile-save-actions{flex-direction:column}.profile-name-line{gap:8px}.profile-name-line h2{font-size:clamp(22px,6vw,30px)!important}}
.player-name-line{display:flex;align-items:center;gap:6px;min-width:0}.player-name-line strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-name-line .match-country{flex-shrink:0}
.profile-friends-button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:14px 18px;margin:0 0 24px;border:1px solid #cdded5;border-radius:15px;background:#fff;color:#2d6d62;font-size:15px;font-weight:700}.friends-page{max-width:690px}.friends-page h1{font-size:32px;margin-bottom:12px}.friends-page h3{font-size:17px;margin:27px 0 12px}.friends-page h3 span,.outgoing-friends summary span{font-size:12px;background:#dfede4;border-radius:12px;padding:2px 7px;margin-inline-start:5px}.friends-page h3 span:empty,.outgoing-friends summary span:empty{display:none}.friends-self{font-size:13px;color:#788c80}.friends-self strong{color:#286f63;unicode-bidi:isolate}.friend-search{margin-top:24px}.friend-search label{display:block;font-weight:700;font-size:14px;margin-bottom:10px}.friend-search>div{display:flex;gap:9px}.friend-search input{min-width:0;flex:1;margin:0}.friend-search button{width:auto!important;min-width:80px;flex-shrink:0}.friend-row-item{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid #e0e9e2}.friend-avatar{width:49px;height:49px;flex-shrink:0;overflow:hidden;display:grid;place-items:center;border-radius:15px;background:#dfede5;font-size:21px;color:#277d79;font-weight:700}.friend-avatar img{width:100%;height:100%;object-fit:cover}.friend-person{flex:1;min-width:0}.friend-name{display:flex;align-items:center;gap:6px;min-width:0}.friend-name strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-person small{display:block;font-size:11px;color:#839487;direction:ltr;unicode-bidi:isolate;margin-top:4px}.friend-name .country-flag{font-size:17px;width:21px}.friend-name svg{width:20px;height:14px}.friend-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:43%}.friend-actions button{min-height:38px;padding:8px 11px;border-radius:10px;font-size:11px;line-height:1.4;font-weight:700}.friend-primary{background:#277d79;color:#fff}.friend-secondary{background:#e9efea;color:#526e5d}.friends-empty{padding:16px;background:#edf3ee;border-radius:13px;color:#7b8f81;font-size:13px;line-height:1.7}.outgoing-friends{margin:26px 0}.outgoing-friends summary{cursor:pointer;font-size:15px;font-weight:700;color:#597464}@media(max-width:390px){.friend-search>div{gap:6px}.friend-search input{font-size:13px;padding:12px}.friend-row-item{gap:8px}.friend-avatar{width:42px;height:42px}.friend-actions button{padding:8px}.friend-name strong{font-size:13px}}
.profile-social-actions{display:flex;gap:10px;margin:0 0 22px}.profile-social-actions .profile-friends-button{width:auto;min-width:110px;min-height:42px;margin:0;padding:10px 16px;justify-content:center;font-size:13px}.profile-social-actions .profile-friends-button:last-child{background:#e5efe9}.friend-profile-link{cursor:pointer}.friend-profile-link:focus-visible{outline:2px solid #277d79;border-radius:8px}.public-player{max-width:610px}.public-player h3{margin-top:28px;font-size:17px}.public-recent{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 28px}.result-pill{min-width:55px;text-align:center;padding:11px 13px;border-radius:12px;background:#e9eeea;color:#5b6d62;font-size:13px;font-weight:700}.result-pill.win{background:#dcefe2;color:#277349}.result-pill.loss{background:#f6e3dd;color:#b36453}.notifications-button{position:relative;flex-shrink:0}.notification-count{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:1px 4px;border-radius:12px;background:#d57b69;color:white;font-size:10px;line-height:16px;font-weight:800}.notification-row{padding:17px 0;border-bottom:1px solid #dfe7e1}.notification-name{font-size:16px;font-weight:800;color:#2b7164;background:none;padding:0;text-align:start}.notification-row>p{font-size:13px;margin:7px 0 13px}.notification-row .friend-actions{max-width:none;justify-content:flex-start}.notifications-button.has-notifications{box-shadow:0 0 0 2px #e4b4a5}.notification-row .friend-actions button{min-width:72px}@media(max-width:520px){header .brand-name{font-size:22px!important}header .brand img{width:37px;height:37px}header .brand-copy small{font-size:7px!important}header .icon-btn{width:37px!important;height:39px!important;border-radius:12px!important}header .account-button{margin-right:4px}header .notifications-button{margin-inline:4px}header .language-button{margin-inline-end:4px}.friend-actions{max-width:45%}.friend-actions button{font-size:10px;padding:8px}.profile-social-actions .profile-friends-button{flex:1}}
.notifications-button .notification-bell{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:#355b51}.notifications-button{border:1px solid #d7e3da;background:#fff;box-shadow:0 3px 10px #29534008}.settings-language{margin-bottom:22px}.settings-language button{min-height:43px;font-weight:700}.settings-language-label{margin-top:23px!important;margin-bottom:10px!important;font-size:14px!important;font-weight:700;color:var(--ink)!important}
/* Keep the bell centered independently of button padding and the absolute badge. */
button.notifications-button{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}button.notifications-button .notification-bell{flex:0 0 22px;margin:0;transform:none}
.input-demo{margin:12px 0 16px;padding:9px 12px 12px;border:1px solid #dce7df;border-radius:17px;background:#f0f5f0;overflow:hidden;pointer-events:none}.input-demo svg{display:block;width:100%;height:140px;direction:ltr}.demo-guides{stroke:#cfdbd3;stroke-width:1.5;fill:none}.demo-dots{fill:#728d80}.demo-target,.demo-source,.demo-moving-wall line{stroke:#277d79;stroke-width:8;stroke-linecap:round}.demo-target{animation:demo-tap-wall 3s ease-in-out infinite}.demo-tap-hand,.demo-drag-hand{fill:#fff;stroke:#3b5b4d;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}.demo-tap-hand{animation:demo-tap-hand 3s ease-in-out infinite;transform-origin:3px 0}.demo-tap-ring{fill:none;stroke:#277d79;stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:demo-tap-ring 3s ease-out infinite}.demo-tray{fill:#fff;stroke:#d4e2d8;stroke-width:1.5}.demo-drag-route{stroke:#8caf9d;stroke-width:1.5;stroke-dasharray:3 5;fill:none;opacity:.6}.demo-source{opacity:.25}.demo-moving-wall{transform-origin:50px 100px;animation:demo-drag-wall 3.6s ease-in-out infinite}.demo-drag-hand{animation:demo-drag-hand 3.6s ease-in-out infinite}.demo-drag .demo-target{animation:demo-drop-wall 3.6s ease-in-out infinite}.input-demo .demo-caption{font-size:12px!important;line-height:1.6!important;color:#627e6b!important;margin:0!important;text-align:center}@keyframes demo-tap-hand{0%,5%{opacity:0;transform:translate(15px,17px)}18%,25%{opacity:1;transform:translate(0,0)}31%{opacity:1;transform:translate(0,3px) scale(.94)}40%,59%{opacity:1;transform:translate(0,0)}76%,100%{opacity:0;transform:translate(10px,12px)}}@keyframes demo-tap-ring{0%,25%{opacity:0;transform:scale(.5)}29%{opacity:.7;transform:scale(.6)}45%,100%{opacity:0;transform:scale(1.7)}}@keyframes demo-tap-wall{0%,28%{opacity:0}34%,72%{opacity:1}90%,100%{opacity:0}}@keyframes demo-drag-wall{0%,10%{opacity:0;transform:translate(0,0) scaleX(1)}17%,23%{opacity:1;transform:translate(0,0) scaleX(1)}54%,61%{opacity:1;transform:translate(137.5px,-28px) scaleX(1.4474)}65%,100%{opacity:0;transform:translate(137.5px,-28px) scaleX(1.4474)}}@keyframes demo-drag-hand{0%{opacity:0;transform:translate(0,10px)}14%,23%{opacity:1;transform:translate(0,0)}54%,61%{opacity:1;transform:translate(137.5px,-28px)}74%,100%{opacity:0;transform:translate(142px,-18px)}}@keyframes demo-drop-wall{0%,56%{opacity:0}62%,83%{opacity:1}96%,100%{opacity:0}}@media(prefers-reduced-motion:reduce){.input-demo *{animation:none!important}.demo-tap-ring{opacity:0}.demo-moving-wall{opacity:0}.demo-drag-hand{transform:translate(137.5px,-28px)}.demo-target{opacity:1}}@media(max-height:740px){.input-demo svg{height:112px}}

/* Sender identity in friend requests and game invitations. */
button.notification-name{display:flex;align-items:center;gap:12px;max-width:100%;padding:0;line-height:1.4;text-align:start}
.notification-name .friend-avatar{width:46px;height:46px;flex:0 0 46px;border-radius:13px}
.notification-display-name{min-width:0;overflow-wrap:anywhere}
button.notification-name:focus-visible{outline:2px solid #277d79;outline-offset:4px;border-radius:13px}

.room-share-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.room-share-methods button{min-height:52px;padding:12px;border:1px solid #d8e4dd;border-radius:14px;font-size:14px}.room-share-methods button.selected{background:#277d79;color:#fff;border-color:#277d79}#roomShareDetail{margin:18px 0}#roomShareDetail>.secondary{margin-top:10px;width:100%}.room-friend-choice{display:flex;align-items:center;gap:12px;text-align:start}.room-friend-choice img{width:42px;height:42px;border-radius:12px}.room-form input:invalid{box-shadow:none}

.privacy-page{max-width:760px;margin:28px auto 60px}.privacy-page h1{font-size:clamp(30px,5vw,44px);line-height:1.35;margin:16px 0}.privacy-date{font-size:12px;color:#74877e}.privacy-page .privacy-intro{font-size:17px;line-height:1.9;margin:24px 0 30px}.privacy-page section{padding:22px 0;border-top:1px solid #dce5de}.privacy-page h2{font-size:20px;line-height:1.5;margin:0 0 12px}.privacy-page section p{font-size:15px;line-height:1.95;color:#53675f;margin:0}.privacy-page[dir=rtl]{text-align:right}

.settings-language-open{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 18px;border:1px solid #d8e4dd;border-radius:14px;text-align:start}.language-picker h2{text-align:center}.language-options{display:flex;flex-direction:column;gap:9px;margin:20px 0}.language-options .language-choice{display:flex;align-items:center;justify-content:flex-start;gap:13px;width:100%;min-height:49px;padding:13px 17px;border-radius:15px;background:#e9edf2;color:#293c43;font-size:16px;font-weight:700;text-align:start;direction:ltr;border:2px solid transparent;margin:0}.language-options .language-choice.selected{background:#277d79;color:white;border-color:#277d79}.language-options .language-choice span:first-child{font-size:23px;line-height:1}.language-options .language-check{margin-inline-start:auto;font-size:18px}.language-close{width:100%;min-height:48px}.language-options .language-choice:focus-visible{outline:3px solid #8ab9ad;outline-offset:2px}html[lang=fa] body{font-family:Tajawal,Arial,sans-serif}html[lang=ru] body{font-family:Arial,sans-serif}@media(max-height:730px){.language-options{gap:6px;margin:12px 0}.language-options .language-choice{min-height:41px;padding:9px 15px;font-size:15px}}

.room-bar-actions{display:flex;align-items:center;gap:7px;min-width:0}.room-bar .match-friend-button{padding:7px 10px;background:#e1efe7;border:1px solid #bfd7cb;color:#246c61;border-radius:10px;font-size:11px;line-height:1.4;font-weight:700}.room-bar .match-friend-button:disabled{opacity:.7}.result-actions .result-friend{width:100%;background:#e0eee6;color:#286c61;border:1px solid #bed7ca;border-radius:16px;min-height:48px;padding:12px;font-weight:700}.result-friend:disabled{opacity:.7}@media(max-height:740px){.result-v2 .result-trophy{font-size:42px;margin-bottom:6px}.result-v2 h2{margin-top:5px}.result-v2 .result-actions{gap:8px}.result-v2 .result-actions button{min-height:43px;padding:11px}.result-v2 .result-meta{margin:14px 0}}

.guest-name-row{display:flex;align-items:stretch;gap:9px;margin-bottom:18px}.guest-name-row input{flex:1;min-width:0;margin:0}.guest-name-row .guest-name-roll{display:flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;min-width:78px;padding:10px 12px;margin:0;border:1px solid #c6dcd1;border-radius:14px;background:#e4f0e8;color:#286e63;font-size:14px;font-weight:700}.guest-name-roll:disabled{opacity:.55}.guest-name-roll:active{transform:scale(.96)}@media(max-width:360px){.guest-name-row{gap:6px}.guest-name-row .guest-name-roll{min-width:65px;padding:9px;font-size:12px}}

/* Keep the compact roll control out of full-width modal button rules. */
.room-form .guest-name-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%;max-width:100%;align-items:stretch}.room-form .guest-name-row>input{width:100%;min-width:0;max-width:100%;height:50px;padding:12px 14px;font-size:16px;box-sizing:border-box}.room-form .guest-name-row>button.guest-name-roll{width:auto!important;min-width:72px;max-width:105px;height:50px;min-height:50px;flex:none;padding:10px 12px;font-size:13px;box-sizing:border-box;white-space:normal}.guest-name-roll span{overflow-wrap:anywhere}@media(max-width:360px){.room-form .guest-name-row>button.guest-name-roll{min-width:64px;max-width:90px;padding:8px;font-size:12px}}

.setup-panel .guest-name-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%;margin-bottom:18px}.setup-panel .guest-name-row>input{width:100%;min-width:0;height:50px;padding:12px 14px;font-size:16px;box-sizing:border-box}.setup-panel .guest-name-row>.guest-name-roll{width:auto!important;min-width:72px;max-width:105px;height:50px;min-height:50px;margin:0;padding:10px 12px;font-size:13px;box-sizing:border-box}.setup-panel .guest-name-row:has(>.guest-name-roll.hidden){grid-template-columns:minmax(0,1fr)}

.account-panel .forgot-password-link{width:100%;min-height:44px;padding:12px 16px;margin-top:14px;font-size:14px;border:1px solid #d5e4db;border-radius:13px}.account-panel #forgotStatus,.account-panel #resetStatus{line-height:1.7;margin:18px 0}

/* Guided review: one clear decision at a time; detailed rows stay collapsed. */
.replay-review #analyzeMatch{width:100%;margin:8px 0;min-height:46px;text-align:center}.review-card{background:#edf4f0;border-radius:15px;padding:14px 16px;margin:12px 0}.review-card strong{font-size:14px}.review-card p{font-size:12px!important;margin:6px 0 0;line-height:1.7}.review-card.mistake{background:#fff0e9;border-inline-start:4px solid #d45252}.review-card.practice{background:#e7f4ed;border-inline-start:4px solid #299664}.review-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.review-actions [hidden],.replay [hidden]{display:none!important}.review-actions button{padding:12px 8px;font-size:12px;min-height:44px}.review-details summary{font-size:12px;color:#71877e;padding:12px;cursor:pointer}.review-best-wall,.review-wrong-wall{stroke-width:13;stroke-linecap:round;pointer-events:none}.review-best-wall{stroke:#299664;stroke-dasharray:12 7;animation:reviewBestPulse 1.1s ease-in-out infinite}.review-wrong-wall{stroke:#d45252;stroke-width:26;opacity:.45;filter:drop-shadow(0 0 6px #d4525270)}.practice-hit{stroke:transparent;stroke-width:28;cursor:pointer;pointer-events:stroke}.practice-hit:hover,.practice-hit:focus{stroke:#29966480;outline:none}.practice-board{border:2px solid #299664!important}.video-export{border:1px solid #dbe6de;background:#edf4f0;padding:14px;border-radius:16px;margin:12px 0}.video-export progress{width:100%;accent-color:#277d79}.video-export video{display:block;max-height:44dvh;width:100%;border-radius:12px;background:#f4f5ef}.video-export button{margin-top:8px}.video-export p{font-size:12px!important}@keyframes reviewBestPulse{50%{opacity:.45;stroke-width:17}}@media(prefers-reduced-motion:reduce){.review-best-wall{animation:none}}

.review-card.unknown{background:#eef0f4;border-inline-start:4px solid #9ba7b4}

.review-outcome{display:inline-block;unicode-bidi:isolate;color:#314c49;font-weight:600}

.review-outcome{display:block;margin-top:10px;text-align:start;unicode-bidi:normal}.review-outcome>strong,.review-outcome>span{display:block}.review-outcome bdi{unicode-bidi:isolate}
#replaySeek{appearance:none;-webkit-appearance:none;display:block;box-sizing:border-box;padding:0;border:0;border-radius:0;height:28px;margin:12px 0;background:transparent;cursor:pointer;direction:ltr}#replaySeek::-webkit-slider-runnable-track{height:8px;border-radius:5px;background:linear-gradient(to right,var(--blue) 0 var(--replay-progress,0%),#dfe7e3 var(--replay-progress,0%) 100%)}#replaySeek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:0;border-radius:50%;background:var(--blue);margin-top:-5px}#replaySeek::-moz-range-track{height:8px;border:0;border-radius:5px;background:#dfe7e3}#replaySeek::-moz-range-progress{height:8px;border-radius:5px;background:var(--blue)}#replaySeek::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--blue)}

.history-match-actions{display:flex;flex-direction:column;align-items:center;gap:7px;flex-shrink:0}.history-replay{padding:8px 11px;min-height:36px;border:1px solid #c8ddd3;border-radius:10px;background:#e6f1eb;color:#286e63;font-size:12px;font-weight:700;white-space:nowrap}.history-replay:disabled{opacity:.5}.history-entry>div:not(.history-match-actions){min-width:0;flex:1}.history-entry strong{overflow-wrap:anywhere}
.history-entry>.history-match-actions{flex:0 0 auto}.history-match-actions>b{font-size:18px;direction:ltr;unicode-bidi:isolate}