@font-face{font-family:'Lilita One';src:url('assets/fonts/LilitaOne-Regular-RU.otf?v=d28cbf5009d3') format('opentype');font-style:normal;font-weight:100 1000;font-display:swap}
:root{--body:'Lilita One',system-ui,sans-serif;--display:var(--body);--plate:url('assets/ui/menu/plate-ivory.webp?v=66a4cfafcf0a')}
body{font-size:16px}
/* Each nine-slice plate is rasterized into one image by painted-ui.js. */
.mode-button,#start-computer,.home-nav-button,.seg-indicator,.rules-dialog .btn,.is-home .invitation-actions .btn,.is-home .lobby-actions .btn{position:relative;isolation:isolate;border:0;background:transparent;box-shadow:none}
.painted{position:relative;isolation:isolate;--plate-inset:0px;--plate-edge:18;--plate-slice:58}
.painted::before{content:'';position:absolute;inset:calc(-1 * var(--plate-inset));z-index:-1;pointer-events:none;width:auto;height:auto;transform:none;border-radius:0;border:0;background:var(--plate) center/100% 100% no-repeat}
.painted-ready::before{background-image:var(--plate-raster)}
.rules-dialog .btn,.is-home .invitation-actions .btn,.is-home .lobby-actions .btn{position:relative;isolation:isolate;border:0;background:transparent;box-shadow:none}
.rules-dialog .btn,.is-home .invitation-actions .btn,.is-home .lobby-actions .btn{--plate:url('assets/ui/menu/plate-ivory.webp?v=66a4cfafcf0a');min-height:44px;color:var(--ink);font-weight:400}
.rules-dialog .btn.primary,.is-home .invitation-actions .btn.primary,.is-home .lobby-actions .btn.primary{--plate:url('assets/ui/menu/plate-gold.webp?v=38514affbd3a')}
@media(hover:hover){.rules-dialog .btn:hover:not(:disabled),.is-home .invitation-actions .btn:hover:not(:disabled),.is-home .lobby-actions .btn:hover:not(:disabled){background:transparent;filter:brightness(1.035)}}
.mode-button,#start-computer,.home-nav-button{transition:transform 110ms ease,filter 110ms ease;touch-action:manipulation;cursor:pointer}
@media(hover:hover){.mode-button:hover:not(:disabled),#start-computer:hover:not(:disabled),.home-nav-button:hover:not(:disabled){filter:brightness(1.035)}}
.mode-button:active:not(:disabled),#start-computer:active:not(:disabled),.home-nav-button:active:not(:disabled){transform:translateY(2px)}
.mode-button:disabled,.home-nav-button:disabled{opacity:.6;cursor:wait}
body:has(.layout.is-home){padding:max(0px,env(safe-area-inset-top),var(--tg-inset-top,0px)) max(0px,env(safe-area-inset-right),var(--tg-inset-right,0px)) max(0px,env(safe-area-inset-bottom),var(--tg-inset-bottom,0px)) max(0px,env(safe-area-inset-left),var(--tg-inset-left,0px));background:#f6f5ef}
body:has(.layout.is-home)::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;background:url('assets/ui/menu/background-wide.webp?v=e063271f0567') center / cover no-repeat}
body:has(.layout.is-home) .app{max-width:none}
.layout.is-home{container-type:size;display:flex;justify-content:center;align-items:stretch;padding:0;overflow:hidden}
/* The menu is as wide as the height lets its content be: the pictures and buttons grow with the width (--home-scale px of height per px of width, set per height below), the rest takes a fixed reserve. */
.is-home .panel{--home-scale:1.44;--home-attendance:0px}
.is-home .panel:has(#attendance:not([hidden])){--home-attendance:101px}
.is-home .panel{container-type:inline-size;position:relative;display:flex;flex-direction:column;justify-content:flex-start;width:min(100%,460px,calc((100cqh - 96px - var(--home-attendance)) / var(--home-scale) + 28px));min-width:min(100%,320px);height:100%;min-height:0;max-height:100%;box-sizing:border-box;margin:0 auto;padding:8px 14px 12px;gap:8px;flex:none;overflow:hidden;background:none;border:0;border-radius:0;box-shadow:none}
.is-home .panel>*{flex-shrink:0}
.is-home .home-content{flex:1 1 0;min-height:0;width:100%;display:flex;flex-direction:column;gap:7px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding:10px 2px 8px}
.home-content>*{flex-shrink:0}
.home-content::-webkit-scrollbar{display:none}
.back-button{display:inline-flex;align-items:center;flex:none;min-height:44px;padding:8px 14px;gap:9px;font-size:19px;line-height:1.15;color:var(--ink);background:transparent;--plate:url('assets/ui/menu/frame-row.webp?v=34ef885322f8');--plate-edge:13;touch-action:manipulation}
.is-home .back-button{position:absolute;top:8px;left:14px;z-index:7}
.back-button svg{width:23px;height:23px;stroke-width:2.6}
@media(hover:hover){.back-button:hover:not(:disabled){background:transparent;filter:brightness(1.035)}}
/* In a game the back button is a small plate, so the board gets the height. */
.game-header .back-button{min-height:0;height:26px;padding:0 11px 2px 9px;gap:6px;font-size:16px;--plate-edge:9}
.game-header .back-button svg{width:16px;height:16px}
.is-home .start-brand{margin:0 0 4px;display:grid;justify-items:center;gap:0;width:100%}
.is-home .start-brand h1{margin:0;width:100%;font-family:var(--display);font-weight:400;letter-spacing:-.025em;line-height:1;text-align:center}
.start-brand h1>span{display:block;font-size:8.3cqw;white-space:nowrap}
.start-brand h1>strong{display:block;font-size:11.8cqw;font-weight:400;line-height:1.06;text-transform:uppercase;letter-spacing:0}
.hero-scene{position:relative;width:76%;aspect-ratio:2.48;height:auto;display:block;overflow:visible;border:0;border-radius:0;box-shadow:none;transform:none}
.hero-platform{position:absolute;width:94%;height:auto;left:3%;bottom:1%;pointer-events:none}
.hero-piece{position:absolute;padding:0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hero-piece .hero-body{position:relative;display:block;width:100%;height:100%;transform-origin:50% 95%}
.hero-piece img{display:block;width:100%;height:auto;pointer-events:none;user-select:none}
.hero-rock{width:29%;left:7%;bottom:18%;z-index:2}
.hero-paper{width:27%;right:7%;bottom:18%;z-index:2}
.hero-scissors{width:40%;aspect-ratio:1;left:30%;bottom:3%;z-index:1}
.hero-scissors .hero-body{height:100%}
.hero-scissors .hero-scissor-half{position:absolute;inset:0;width:100%;height:100%;transform-origin:50.4% 43.8%}
.hero-scissor-back{z-index:0}
.hero-scissor-front{z-index:1}
.hero-eyes{position:absolute;left:43%;top:31%;display:flex;align-items:center;gap:6%;width:45%;height:30%;pointer-events:none}
.hero-paper .hero-eyes{left:17%;top:39%;width:49%;height:23%}
.hero-eye{position:relative;width:44%;height:100%;display:block;overflow:hidden;border-radius:50%;background:radial-gradient(ellipse at 35% 25%,#fff 45%,#f7faf5 70%,#d9e0d7);box-shadow:0 1px 1px #213a4940;transform-origin:50% 50%}
.hero-eye:nth-child(2){transform:translateY(-9%)}
.hero-pupil{position:absolute;left:28%;top:22%;width:52%;height:60%;border-radius:50%;background:#092537;transform:translate(var(--gaze-x,0px),var(--gaze-y,0px));transition:transform 80ms linear}
.hero-pupil::after{content:'';position:absolute;width:27%;height:24%;left:20%;top:14%;background:#fff;border-radius:50%}
.is-home .home-choices{display:grid;gap:7px;margin:0}
.is-home .mode-button{display:flex;align-items:center;width:100%;height:15cqw;padding:4px 11px 7px 8px;gap:9px;border:0;border-radius:15px;background:transparent;box-shadow:none;color:var(--ink);font-size:5.55cqw;font-weight:400;line-height:1.08;text-align:left}
.is-home .mode-button:not(.primary),.is-home .mode-button:not(.primary):hover:not(:disabled){background:transparent;box-shadow:none}
.is-home .mode-button.primary{--plate:url('assets/ui/menu/plate-gold.webp?v=38514affbd3a');height:17.5cqw;font-size:6.15cqw}
.is-home #play-computer{--plate:url('assets/ui/menu/plate-blue.webp?v=2a1707c33e59');font-size:5.3cqw}
.mode-button .menu-icon{width:24%;height:11.5cqw;flex:none;object-fit:contain;pointer-events:none}
.mode-button>span{flex:1}
.mode-button small{display:block;color:#536d5d;font-size:3.9cqw;font-weight:400;line-height:1.1;margin-top:2px}
.is-home #online-slot{margin:0}
.is-home .attendance{display:flex;flex-direction:column;align-items:stretch;gap:1px;min-height:94px;margin: auto 0 0;padding:6px 5px 0;color:#506b5a;border:0;background:none;box-shadow:none;isolation:auto}
.attendance::before{content:none}
.attendance.is-unavailable .attendance-chart{visibility:hidden}
.attendance-figure{display:flex;align-items:baseline;gap:8px;flex:none;margin:0;line-height:1.05}
.attendance-figure strong{font-size:23px;font-weight:400}
.attendance-figure span{font-size:13px;white-space:nowrap}
.attendance-chart{display:block;flex:none;width:100%;min-width:0;height:65px;overflow:visible;cursor:crosshair;touch-action:pan-y}
.attendance-base{stroke:#b5c3ae;stroke-width:1}
.attendance-area{fill:#789580;opacity:.23}
.attendance-line{fill:none;stroke:#718d7b;stroke-width:2.7;stroke-linejoin:round;stroke-linecap:round}
.attendance-now{fill:#466f62;stroke:#dce6d7;stroke-width:1.5}
.attendance-cursor{stroke:#718d7b;stroke-width:1;stroke-dasharray:2 2}
.home-nav{position:relative;flex:none;z-index:6;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:2px 0 0;margin:0}
.home-nav-button{--plate:url('assets/ui/menu/plate-sage.webp?v=501622a6da69');display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:15cqw;min-width:0;padding:4px 2px 7px;color:var(--ink);border-radius:10px}
.home-nav-button{--plate-edge:12}
.home-nav-button img{width:75%;height:8.4cqw;object-fit:contain;pointer-events:none}
.home-nav-label{font-size:clamp(9px,2.85cqw,12px);line-height:1;letter-spacing:-.035em;white-space:nowrap}
.home-nav .watch-count{position:absolute;right:-2px;top:-5px;min-width:25px;height:25px;display:grid;place-items:center;padding:0 6px 2px;color:#19303d;font-size:17px;font-weight:400;line-height:1;--plate:url('assets/ui/menu/plate-gold.webp?v=38514affbd3a');--plate-edge:8;filter:drop-shadow(0 1px 1px #19303d35)}
.home-nav .watch-count.is-empty{--plate:url('assets/ui/menu/plate-ivory.webp?v=66a4cfafcf0a');color:#506b5a}
.home-nav .watch-count:empty{display:none}
.home-nav .telegram-status{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:4;width:max-content;max-width:100%;padding:7px 12px;border-radius:10px;background:var(--ink);color:var(--surface);font-size:13px;transform:translateX(-50%);box-shadow:0 4px 12px #19303d30;pointer-events:none}
.is-home .ai-options .group{margin:0 1px 16px;gap:8px}
.is-home .seg{position:relative;isolation:isolate;padding:4px;gap:0;background:#dfe7da;border:1px solid #b6c5b1;border-radius:11px}
.is-home .seg label{position:relative;z-index:1;font-size:3.65cqw;font-weight:400;padding:8px 3px;line-height:1.1;color:#627465;background:transparent;box-shadow:none;white-space:normal}
.is-home .seg input:checked+label{background:transparent;box-shadow:none;color:var(--ink)}
.seg-indicator{--plate:url('assets/ui/menu/plate-green.webp?v=e0e3b3f1e8ff');position:absolute;top:3px;bottom:3px;left:0;z-index:0;pointer-events:none;transition:transform 180ms cubic-bezier(.2,.85,.25,1),top 180ms ease,width 180ms ease}
.seg-indicator{--plate-edge:12}
.seg-indicator.is-strong{--plate:url('assets/ui/menu/plate-blue.webp?v=2a1707c33e59')}
.seg-indicator.is-efim{--plate:url('assets/ui/menu/plate-lilac.webp?v=ec6b04168ed6')}
.is-home .label{font-size:14px;font-weight:400}
.is-home #variant-note{display:none}
.is-home #start-computer{--plate:url('assets/ui/menu/plate-gold.webp?v=38514affbd3a');width:100%;min-height:51px;display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 15px 12px;color:var(--ink);font-size:20px;font-weight:400;border:0;background:transparent;box-shadow:none}
.start-icon{height:29px;width:29px;object-fit:contain}
.rules-dialog{border:2px solid #94ad97;border-radius:18px;background:#f6f5eb;box-shadow:0 12px 50px #19303d30}
.rules-header,.watch-header{background:#e0e9d9;border-bottom:1px solid #b4c7b0}
.rules-header h2{font-family:var(--display);font-weight:400}
.leaderboard-dialog .leaderboard-content{padding:16px}
.leaderboard-dialog .your-rating{background:#dce9d5;border:1px solid #a7bfa1}
.leaderboard-dialog .your-rating strong{font-size:36px;font-weight:400}
.leaderboard-dialog .rating-stats b{font-size:21px;font-weight:400}
#leaderboard-table{font-size:15px}
#leaderboard-table thead th{font-size:13px}
#leaderboard-table th[scope=row],.rating-value{font-weight:400}
#leaderboard-table .is-you{background:#e3ecd8}
.leaderboard-toolbar p,.rating-note{font-size:13px}
.rank.podium{background:#f5d877;color:#574e2b;border-radius:7px}
#leaderboard-title{display:flex;align-items:center;gap:9px}

body:has(.layout.is-home) .art-tuner-toggle,body:has(.layout.is-home) .art-tuner{display:none}
.game-turn{font-size:16px;line-height:1}
@media(max-width:360px){.is-home .panel{padding:8px 14px 10px;gap:6px}.home-nav{gap:4px}}
@media(max-height:560px) and (orientation:landscape){.is-home .panel{width:360px;padding:8px 14px}}
@media(prefers-reduced-motion:reduce){.mode-button,.home-nav-button,.seg-indicator,.ai-options{transition:none!important}}

/* Full-bleed art crops instead of distorting on extreme aspect ratios. */
@media(orientation:portrait){body:has(.layout.is-home)::before{background-image:url('assets/ui/menu/background-portrait.webp?v=0807967327db')}}
.attendance-grid{stroke:#748e7a;stroke-opacity:.16;stroke-width:1}
.attendance-axis{font:10px var(--body);fill:#708372}
.attendance-line{stroke-width:2.4}
.attendance-area{opacity:.12}
.layout[data-screen=search] .home-content{gap:12px;padding-top:54px}
.layout[data-screen=search] #online-slot{flex:1;display:grid;align-items:center;padding:8px 3px 35px}
.is-home .online-lobby{width:100%;gap:22px}
.is-home .online-lobby h2{font-size:clamp(25px,7.2cqw,32px);line-height:1.15;margin:2px 0 12px}
.is-home #online-status{font-size:20px;line-height:1.3;max-width:360px;margin:auto}
.is-home .invitation-actions .btn{min-height:64px;--plate-edge:15}
.is-home .lobby-actions .btn{min-height:56px;font-size:20px}
.online-error{font-size:18px;line-height:1.3}
.is-home .is-searching .lobby-copy::before{content:none}
.search-art{display:none;position:relative;width:120px;height:120px;margin:0 auto 12px}
.is-searching .search-art{display:block;animation:search-rock 5s ease-in-out infinite}
.search-art img{position:absolute;inset:0;width:100%;height:100%;transform-origin:50.4% 43.8%}
.search-scissor-front{animation:search-cut-front 3.2s ease-in-out infinite}
.search-scissor-back{animation:search-cut-back 3.2s ease-in-out infinite}
@keyframes search-cut-front{0%,15%,100%{transform:rotate(-4deg)}45%,60%{transform:rotate(20deg)}}
@keyframes search-cut-back{0%,15%,100%{transform:rotate(4deg)}45%,60%{transform:rotate(-20deg)}}
@keyframes search-rock{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-4px)}}

/* Shared illustrated windows; all copy remains live HTML. */
.rules-dialog{--plate:url('assets/ui/menu/frame-modal.webp?v=a9c96a064450');--plate-edge:22;--plate-slice:65;width:min(460px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 32px);overflow:hidden;border:0;border-radius:18px;padding:12px;color:var(--ink);background:transparent;box-shadow:0 15px 55px #19303d24}
.rules-dialog[open]{display:flex;flex-direction:column}
.rules-dialog::backdrop{background:#0d1923d9}
.rules-header,.watch-header{position:relative;flex:none;display:flex;align-items:center;gap:10px;padding:0 0 12px;border:0;background:transparent;z-index:1}
.dialog-title{display:flex;align-items:center;gap:10px;min-width:0;flex:1;min-height:63px;padding:8px 6px 11px}
.dialog-title>img{width:42px;height:44px;object-fit:contain;flex:none}
.rules-header .dialog-title h2{font-size:clamp(20px,5.6vw,28px);line-height:1.1;letter-spacing:0}
.leaderboard-header-actions{gap:5px;margin:0}
.close-rules,.rating-help-toggle{--plate:url('assets/ui/menu/frame-square.webp?v=5d949177a465');--plate-edge:13;display:grid;place-items:center;flex:none;width:40px;height:43px;padding:0 0 3px;border:0;border-radius:10px;background:transparent;color:var(--ink);font-size:31px;line-height:1;font-weight:400;cursor:pointer}
.rating-help-toggle{width:31px;font-size:22px}
.rating-help-toggle[aria-expanded=true]{background:transparent;filter:brightness(1.035)}
@media(hover:hover){.close-rules:hover,.rating-help-toggle:hover{background:transparent;filter:brightness(1.035)}}
.comfort-content,.leaderboard-dialog .leaderboard-content,.rules-content{min-height:0;overflow-y:auto;padding:3px 3px 8px;scrollbar-width:thin}
.leaderboard-dialog{cursor:grab;user-select:none;-webkit-user-select:none}
.leaderboard-dialog.is-dragging,.leaderboard-dialog.is-dragging *{cursor:grabbing!important}
.leaderboard-dialog .leaderboard-content{overscroll-behavior:contain;scrollbar-color:#8b987d transparent}
.leaderboard-content::-webkit-scrollbar{width:6px;background:transparent}
.leaderboard-content::-webkit-scrollbar-track{background:transparent}
.leaderboard-content::-webkit-scrollbar-thumb{background:#8b987d;border-radius:999px}
.leaderboard-content::-webkit-scrollbar-thumb:hover{background:#68795f}
.leaderboard-content::-webkit-scrollbar-button{display:none;width:0;height:0}
.leaderboard-content::-webkit-scrollbar-corner{background:transparent}
@supports selector(::-webkit-scrollbar){.leaderboard-dialog .leaderboard-content{scrollbar-width:auto;scrollbar-color:auto}}
.comfort-content{display:grid;gap:13px}
.setting-row{--plate:url('assets/ui/menu/frame-row.webp?v=34ef885322f8');--plate-edge:15;display:grid;grid-template-columns:43px minmax(0,1fr) 48px;gap:10px;align-items:center;min-height:95px;padding:13px 11px 16px;font-size:21px;line-height:1.18}
.setting-row>img{width:43px;height:53px;object-fit:contain}
.setting-row small{font-size:16px;line-height:1.3;margin-top:5px}
.comfort-content>.btn{font-size:20px;min-height:56px;padding:12px 16px 15px}
.setting-row input{position:absolute;right:11px;width:48px;height:34px;opacity:0;cursor:pointer;z-index:2}
.setting-row input:disabled{cursor:default}
.setting-switch{position:relative;display:block!important;width:48px;height:29px;background:url('assets/ui/menu/switch-off.webp?v=14ab0a377f8b') center/100% 100% no-repeat}
.setting-switch::after{content:'';position:absolute;top:2px;left:2px;width:25px;height:25px;background:url('assets/ui/menu/switch-thumb.webp?v=3aa1e6948a39') center/contain no-repeat;transition:transform 220ms ease}
.setting-row input:checked+.setting-switch{background-image:url('assets/ui/menu/switch-on.webp?v=e149ffd9749a')}
.setting-row input:checked+.setting-switch::after{transform:translateX(19px)}
.setting-row input:disabled+.setting-switch{opacity:.5}
.comfort-note{padding:1px 5px;font-size:12px;line-height:1.4}
.rules-dialog .your-rating{--plate:url('assets/ui/menu/frame-row.webp?v=34ef885322f8');--plate-edge:18;display:grid;grid-template-columns:64px 1fr;align-items:center;gap:7px 14px;padding:14px 16px 18px;border:0;background:transparent;border-radius:0}
.rating-mascot{width:64px;height:74px;object-fit:contain}
.your-rating .rating-score{display:grid}
.your-rating .rating-score strong{font-size:46px;line-height:1.05;font-weight:400}
.your-rating .rating-score small{font-size:20px}
.your-rating .rating-score>span{font-size:17px;line-height:1.25}
.your-rating .rating-stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding-top:7px}
.rating-stats>span+span{border-left:1px solid #c3cbb9}
.your-rating .rating-stats b{font-size:25px}
.your-rating .rating-stats>span{font-size:17px}
.rating-stats>span:first-child b{color:#36795d}.rating-stats>span:last-child b{color:#a56b42}
.rating-summary{--plate:url('assets/ui/menu/frame-row.webp?v=34ef885322f8');--plate-edge:16;display:grid;grid-template-columns:47px minmax(0,1fr);align-items:center;gap:6px 12px;min-height:120px;padding:15px 16px 20px;border:0;background:transparent;border-radius:0}
@media(hover:hover){.rating-summary:hover{background:transparent;filter:brightness(1.035)}}
.summary-trophy{width:47px;height:56px;object-fit:contain}
.rating-summary strong{font-size:38px;line-height:1.1;font-weight:400}
.rating-summary small{font-size:19px}
.rating-summary-meta{grid-column:1/-1;margin:0;max-width:none;font-size:19px;line-height:1.3;text-align:center}
.rating-summary sup,.your-rating sup,.rating-value sup{font-size:16px}
.leaderboard-toolbar{gap:8px;margin:7px 2px 10px}
.leaderboard-toolbar p{font-size:16px;line-height:1.3}
.leaderboard-toolbar .rules-toggle{flex:none;padding:8px 2px;font-size:18px}
.rating-help h3{font-size:22px}
.rating-help .rating-note{font-size:17px;line-height:1.35}
#leaderboard-table{display:block;width:100%;border-collapse:separate}
#leaderboard-table thead,#leaderboard-table tbody{display:grid;gap:7px;width:100%}
#leaderboard-table thead tr,#leaderboard-table .ranking-row{display:grid;grid-template-columns:32px minmax(0,1fr) 53px 40px;gap:5px;align-items:center;width:100%;padding:5px 9px}
#leaderboard-table thead th{font-size:15px}
#leaderboard-table th,#leaderboard-table td{padding:4px 0;border:0;font-weight:400;min-width:0}
#leaderboard-table .ranking-row{--plate:url('assets/ui/menu/frame-row.webp?v=34ef885322f8');--plate-edge:13;min-height:60px;font-size:18px;padding-bottom:8px}
#leaderboard-table .ranking-row.is-you{--plate:url('assets/ui/menu/frame-row-blue.webp?v=faa5e34c5539');background:transparent}
#leaderboard-table th[scope=row]{font-size:18px;line-height:1.2}
#leaderboard-table .rank{width:29px;height:36px;font-size:19px;font-weight:400;line-height:1;padding-bottom:6px;color:#19303d;background:none;border-radius:0}
#leaderboard-table .rank-1{background:url('assets/ui/menu/medal-gold.webp?v=8447c9bcbd70') center/contain no-repeat}
#leaderboard-table .rank-2{background:url('assets/ui/menu/medal-silver.webp?v=86f5ed9235f7') center/contain no-repeat}
#leaderboard-table .rank-3{background:url('assets/ui/menu/medal-bronze.webp?v=c49aa8b2eb6f') center/contain no-repeat}
#leaderboard-table small{display:block;font-size:16px;margin:3px 0 0}
.rules-content{position:relative;padding-top:0}
.rules-close{position:relative;align-self:flex-end;flex:none;top:auto;right:3px;float:none;margin:1px 0 7px;z-index:2}
.rules-content>section{--plate:url('assets/ui/menu/frame-row.webp?v=34ef885322f8');--plate-edge:15;padding:14px 12px 17px;border:0;background:transparent;border-radius:0}
.rules-content>:not(.rules-close):not([hidden])~:not([hidden]){margin-top:12px}
.rules-content h3{font-size:17px;font-weight:400;line-height:1.2}
.rules-content p{font-size:13px;line-height:1.4}
.rule-movement{grid-template-columns:80px minmax(0,1fr);gap:13px}
.demo-square{min-width:0}
.demo-square .mini{width:100%;height:100%}
.rules-matchups{gap:12px}
.rule-pieces{display:grid;grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr);gap:0;width:100%;max-width:90px;margin-inline:auto}
.rule-pieces .mini{width:100%;height:auto;aspect-ratio:1}
.beats-arrow{display:block;justify-self:center;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.rule-goal{grid-template-columns:90px minmax(0,1fr);gap:12px}
.rule-matchup{padding:5px 0;background:none}
.rule-more{padding:4px 8px}.rule-more summary{min-height:32px;padding-top:4px}
.rule-extras{grid-template-columns:minmax(0,1fr);gap:16px}
.rule-colors{display:grid;gap:6px}
.rule-colors p{display:flex;align-items:baseline;gap:8px}
.rule-swatch{flex:none;width:12px;height:12px;margin:0}
.watch-live svg{display:none}.watch-live::before{content:'';width:42px;height:38px;background:url('assets/ui/menu/icon-watch.webp?v=e697521f1116') center/contain no-repeat}
.watch-header{padding:2px 2px 12px 8px}.watch-list{min-height:0;overflow-y:auto;padding:0 2px 5px;gap:10px}
.watch-game{--plate:url('assets/ui/menu/frame-row.webp?v=34ef885322f8');--plate-edge:15;background:transparent;padding:14px 12px 17px}
@media(hover:hover){.watch-game:hover{background:transparent}}.watch-game:active{transform:translateY(2px)}
.watch-status{font-size:14px;line-height:1.4;padding:10px 7px 20px}
.player-name{display:flex;align-items:baseline;gap:6px;font-size:17px;font-weight:400;line-height:1.05}
.player-primary{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.05}
.captured-pieces:has(.capture-icons:empty):not(:has(.material-advantage)){display:none}
/* Wide enough for the last seconds' 0:09.5, so the clock never jumps. */
.player-clock{height:34px;min-width:80px;padding:1px 7px}.player-clock time{font-size:24px}
@media(prefers-reduced-motion:reduce){.search-art,.search-art img{animation:none!important}.setting-switch::after{transition:none}}

.close-rules::after{content:none}
.movement-demo{width:100%;max-width:80px;aspect-ratio:1}
@media(max-width:360px){.hero-scene{width:66%}.is-home .attendance{min-height:84px}.attendance-chart{height:55px}}
.close-rules,.rating-help-toggle{width:40px;height:40px;--plate-fit:whole}
#leaderboard-table thead tr,#leaderboard-table .ranking-row{grid-template-columns:54px minmax(0,1fr) 62px 48px;gap:8px}
#leaderboard-table td:first-child{display:grid;place-items:center}
/* On lower screens the picture and the title give way to the five menu buttons. */
@container (max-height:760px){.is-home .panel{--home-scale:1.386}.hero-scene{width:66%}.start-brand h1>span{font-size:7.8cqw}.start-brand h1>strong{font-size:11cqw}}
@container (max-height:640px){.is-home .panel{--home-scale:1.354}.hero-scene{width:58%}.is-home .attendance{min-height:84px}.attendance-chart{height:55px}}
@container (max-height:570px){.is-home .panel{--home-scale:1.33}.hero-scene{width:52%}}
.home-content[data-page=welcome] .hero-scene{width:76%}
.rules-dialog.leave-dialog{max-width:400px;padding:26px 24px 28px;text-align:center;overflow-y:auto}
.leave-dialog h2{margin:0 0 14px;font-size:30px;line-height:1.1;font-weight:400}
.leave-dialog p{margin:0 0 22px;font-size:20px;line-height:1.3}
.leave-dialog form{display:grid;grid-template-columns:1fr;gap:12px}
.leave-dialog .btn{min-height:58px;padding:12px 15px 16px;font-size:22px;line-height:1.15;--plate-edge:16}
@container (max-height:640px){.is-inviting .search-art{width:56px;height:56px;margin-bottom:8px}.is-home .online-lobby.is-inviting{gap:16px}.layout[data-screen=search] #online-slot{padding-bottom:12px}}
@container (max-height:600px){.is-inviting .search-art{display:none}}

/* Home pages. The first-visit choice and the computer's options stand in the middle of the screen. */
.home-content[data-page=welcome],.home-content[data-page=computer]{justify-content:center;justify-content:safe center}
.home-content[data-page=computer]{padding-top:60px}
.home-content[data-page=welcome] .start-brand{margin-bottom:12px}
/* The computer's options have a screen of their own, so they are a little larger than in the old drop-down. */
.is-home .ai-options .seg label{font-size:4.3cqw;padding:12px 3px}
.is-home .ai-options .label{font-size:15px}
.is-home .ai-options #start-computer{min-height:58px;font-size:22px}

/* Game result: an illustrated card over the board, the title on a ribbon and the king rising from behind it; a win adds rays and confetti. Every size follows the board: --k is one pixel of a 375px board. */
.result{--k:clamp(.56px,calc(100cqw / 375),1.16px);position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:calc(var(--k)*10);overflow:hidden;border-radius:10px;background:#0e1c26b0;animation:result-fade .3s ease-out backwards}
.result:is([data-outcome=win],[data-outcome=light],[data-outcome=blue]){background:radial-gradient(circle at 50% 30%,#ffe39140,transparent 58%),#0e1c26a8}
.result[data-outcome=loss]{background:#0a1720c4}
.result-card{--plate:url('assets/ui/menu/frame-modal.webp?v=a9c96a064450');--plate-edge:20;--plate-slice:65;position:relative;isolation:isolate;display:grid;justify-items:center;gap:calc(var(--k)*9);width:min(100%,calc(var(--k)*292));margin-top:calc(var(--k)*92);padding:0 calc(var(--k)*20) calc(var(--k)*18);border-radius:calc(var(--k)*16);color:var(--ink);text-align:center;box-shadow:0 calc(var(--k)*16) calc(var(--k)*38) #040b1166;animation:result-pop .56s cubic-bezier(.25,.8,.35,1) backwards}
.result[data-outcome=loss] .result-card{animation-name:result-drop}
.result-card:not(.painted-ready){background:#fbf5e1;box-shadow:inset 0 0 0 calc(var(--k)*3) #385144,0 calc(var(--k)*16) calc(var(--k)*38) #040b1166}
.result-rays{position:absolute;z-index:-2;left:50%;top:calc(var(--k)*-54);display:none;width:calc(var(--k)*280);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:repeating-conic-gradient(#fff3b8 0deg 7deg,#fff3b800 9deg 21deg,#fff3b8 23deg 24deg);-webkit-mask:radial-gradient(closest-side,#000 15%,#0000);mask:radial-gradient(closest-side,#000 15%,#0000);opacity:.7;pointer-events:none}
.result:is([data-outcome=win],[data-outcome=light],[data-outcome=blue]) .result-rays{display:block;animation:rays-in .8s .2s ease-out backwards,rays-spin 24s linear .2s 3}
.result[data-outcome=blue] .result-rays{background:repeating-conic-gradient(#d9efff 0deg 7deg,#d9efff00 9deg 21deg,#d9efff 23deg 24deg)}
/* The kings stand behind the ribbon: the hero is cut off inside it, so they rise from behind it. */
.result-hero{position:absolute;z-index:1;left:50%;bottom:calc(100% + var(--k)*4);display:flex;justify-content:center;align-items:flex-end;width:calc(var(--k)*220);height:calc(var(--k)*130);translate:-50% 0;clip-path:inset(-60% -60% 0 -60%);pointer-events:none}
.result-king{--gaze-x:0px;--gaze-y:0px;position:relative;flex:none;width:calc(var(--k)*100);height:calc(var(--k)*100);transform-origin:50% 84%}
.result-king .piece-art{filter:drop-shadow(0 calc(var(--k)*2) calc(var(--k)*2) #1b2a1f45)}
.result-king .eyes{animation:result-blink 3.1s 1.7s 4}
.result-king.is-right .eyes{animation-delay:2.4s}
.result-king.is-winner{--gaze-y:-1.4px;animation:king-rise .8s .22s cubic-bezier(.3,.75,.35,1) backwards,king-hop 2.4s 1.3s ease-in-out 4}
.result-king.is-fallen{--gaze-y:2.2px;transform-origin:24% 84%;transform:translateY(9%) rotate(-24deg);animation:king-fall 1.5s .3s backwards}
.result-king.is-fallen .sprite-face path{transform:scaleY(-1);transform-box:fill-box;transform-origin:center}
.result-king:is(.is-left,.is-right){width:calc(var(--k)*86);height:calc(var(--k)*86);--side:1;--gaze-x:2.4px;transform:rotate(6deg);animation:king-meet .95s .26s backwards}
.result-king.is-right{--side:-1;--gaze-x:-2.4px;transform:rotate(-6deg)}
.result-spark{position:absolute;width:calc(var(--k)*15);aspect-ratio:1;background:radial-gradient(circle,#fff 0 30%,#fff1a8 65%);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;animation:spark 1.8s .7s ease-in-out 6 backwards}
.result-spark:nth-child(2){left:19%;top:30%}
.result-spark:nth-child(3){right:19%;top:13%;width:calc(var(--k)*21);animation-delay:1.05s}
.result-spark:nth-child(4){left:28%;top:63%;width:calc(var(--k)*11);animation-delay:1.4s}
.result-spark:nth-child(5){right:25%;top:56%;width:calc(var(--k)*13);animation-delay:.9s}
.result[data-outcome=draw] .result-hero{bottom:calc(100% + var(--k)*8)}
.result[data-outcome=draw] .result-hero::after{content:'';position:absolute;left:50%;top:40%;width:calc(var(--k)*24);aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,#fff 0 30%,#fff1a8 65%);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;animation:spark .6s .78s ease-out backwards}
.result-ribbon{--rb-edge:#6b3f00;--rb-shine:#fff7b0;--rb-top:#fedb55;--rb-fill:#fcc93d;--rb-low:#fbb52c;--rb-bevel:#d9880b;--rb-tail:#efa526;position:relative;z-index:2;isolation:isolate;display:grid;place-items:center;justify-self:stretch;min-height:calc(var(--k)*52);margin:calc(var(--k)*-26) calc(var(--k)*-34) 0;padding:calc(var(--k)*7) calc(var(--k)*12) calc(var(--k)*10);animation:ribbon-stamp .5s .1s cubic-bezier(.25,.8,.35,1) backwards}
.result-ribbon::before{content:'';position:absolute;inset:0;z-index:-1;border:calc(var(--k)*2.6) solid var(--rb-edge);border-radius:calc(var(--k)*13);background:linear-gradient(var(--rb-top),var(--rb-fill) 45%,var(--rb-low));box-shadow:inset 0 calc(var(--k)*2) 0 var(--rb-shine),inset 0 calc(var(--k)*-4) 0 var(--rb-bevel),0 calc(var(--k)*4) calc(var(--k)*6) #0b151c38}
.result:is([data-outcome=loss],[data-outcome=blue]) .result-ribbon{--rb-edge:#08386a;--rb-shine:#e6f9ff;--rb-top:#a3d5fd;--rb-fill:#88c3fb;--rb-low:#65aef9;--rb-bevel:#2f7ed6;--rb-tail:#5b9fea}
.result[data-outcome=draw] .result-ribbon{--rb-edge:#3b5843;--rb-shine:#f5fbf1;--rb-top:#e0ebdb;--rb-fill:#d4e2ce;--rb-low:#c4d6be;--rb-bevel:#8ba68b;--rb-tail:#b5c9af}
.result:is([data-outcome=loss],[data-outcome=draw]) .result-ribbon{animation-name:ribbon-unfurl}
.ribbon-tail{--dir:1;position:absolute;z-index:-2;left:calc(var(--k)*-20);top:calc(var(--k)*15);width:calc(var(--k)*40);height:calc(var(--k)*44);overflow:visible;animation:tail-out .4s .36s cubic-bezier(.3,.8,.4,1.3) backwards}
.ribbon-tail.is-right{--dir:-1;left:auto;right:calc(var(--k)*-20);scale:-1 1}
.tail-face{fill:var(--rb-tail);stroke:var(--rb-edge);stroke-width:2.6;stroke-linejoin:round}
.tail-fold{fill:var(--rb-edge);opacity:.5}
.result-title{--o:calc(var(--k)*2.3);margin:0;color:#fffdf4;font:400 calc(var(--k)*27)/1.05 var(--display);letter-spacing:.01em;text-wrap:balance;text-shadow:0 calc(var(--o)*1.9) 0 var(--rb-edge),var(--o) 0 0 var(--rb-edge),calc(var(--o)*-1) 0 0 var(--rb-edge),0 var(--o) 0 var(--rb-edge),0 calc(var(--o)*-1) 0 var(--rb-edge),calc(var(--o)*.72) calc(var(--o)*.72) 0 var(--rb-edge),calc(var(--o)*-.72) calc(var(--o)*.72) 0 var(--rb-edge),calc(var(--o)*.72) calc(var(--o)*-.72) 0 var(--rb-edge),calc(var(--o)*-.72) calc(var(--o)*-.72) 0 var(--rb-edge)}
.result-why{margin:0;color:#5f6d64;font-size:calc(var(--k)*16);line-height:1.22;text-wrap:balance;animation:result-rise .4s .3s ease-out backwards}
.result-why:empty{display:none}
.result-rating{display:flex;align-items:baseline;justify-content:center;gap:calc(var(--k)*7);margin:0;font-size:calc(var(--k)*24);line-height:1.1;font-variant-numeric:tabular-nums;animation:result-rise .4s .36s ease-out backwards}
.result-rating span{color:#647266;font-size:calc(var(--k)*16)}
.result-rating :is(.rating-up,.rating-down){display:inline-block;padding:calc(var(--k)*2) calc(var(--k)*8) calc(var(--k)*3);border-radius:calc(var(--k)*9);color:#fff;background:#3f9a6c;font-size:calc(var(--k)*18);box-shadow:inset 0 calc(var(--k)*-2) 0 #0002;animation:delta-pop .5s .62s cubic-bezier(.3,1.7,.5,1) backwards}
.result-rating .rating-down{background:#c25f4e}
.result-card .btn{--plate:url('assets/ui/menu/plate-ivory.webp?v=66a4cfafcf0a');--plate-edge:15;position:relative;isolation:isolate;width:100%;min-height:calc(var(--k)*50);padding:calc(var(--k)*8) calc(var(--k)*12) calc(var(--k)*11);border:0;border-radius:calc(var(--k)*12);background:transparent;color:var(--ink);font:400 calc(var(--k)*21)/1.1 var(--display);animation:result-rise .42s .38s cubic-bezier(.2,.8,.3,1.15) backwards}
.result-card .btn.primary{--plate:url('assets/ui/menu/plate-gold.webp?v=38514affbd3a')}
.result-card .btn~.btn{animation-delay:.45s}
.result-card .btn:not(.painted-ready){background:#f7efd8;box-shadow:inset 0 0 0 1px #a08c6a}
.result-card .btn.primary:not(.painted-ready){background:#fcc449;box-shadow:inset 0 0 0 1px #935000}
@media(hover:hover){.result-card .btn:hover:not(:disabled){background:transparent;filter:brightness(1.035)}}
/* A glint runs over the button that starts the next game. */
.result-card .btn.primary::after{content:'';position:absolute;inset:calc(var(--k)*3);z-index:-1;border-radius:calc(var(--k)*9);background:linear-gradient(105deg,#fff0 30%,#fffbe0c0 48%,#fff0 66%) -150% 0/60% 100% no-repeat;animation:btn-shine 3.2s 1.5s ease-in-out 3}
@container (max-width:300px){.result-card{--plate-edge:14}.result-card .btn{--plate-edge:11}}
@container (max-width:250px){.result-ribbon{margin-inline:calc(var(--k)*-26)}.ribbon-tail{display:none}}
.confetti{position:fixed;inset:0;z-index:45;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;left:0;top:0;display:block;will-change:transform}
@keyframes result-fade{from{opacity:0}}
@keyframes result-pop{0%{opacity:0;transform:translateY(calc(var(--k)*46)) scale(.62)}28%{opacity:1}55%{transform:translateY(calc(var(--k)*-5)) scale(1.035)}78%{transform:translateY(calc(var(--k)*1)) scale(.992)}100%{transform:none}}
@keyframes result-drop{0%{opacity:0;transform:translateY(calc(var(--k)*-36))}35%{opacity:1}70%{transform:translateY(calc(var(--k)*3))}100%{transform:none}}
@keyframes ribbon-stamp{0%{opacity:0;transform:scale(1.75)}50%{opacity:1;transform:scale(.94)}72%{transform:scale(1.025)}100%{transform:none}}
@keyframes ribbon-unfurl{0%{opacity:0;transform:scaleX(.35)}30%{opacity:1}65%{transform:scaleX(1.02)}100%{transform:none}}
@keyframes tail-out{from{opacity:0;translate:calc(var(--k)*18*var(--dir)) 0}}
@keyframes rays-in{from{opacity:0;scale:.35}}
@keyframes rays-spin{to{rotate:1turn}}
@keyframes king-rise{0%{transform:translateY(105%)}42%{transform:translateY(-26%) scale(.95,1.07)}64%{transform:translateY(0) scale(1.09,.91)}80%{transform:translateY(-5%) scale(.98,1.02)}100%{transform:none}}
@keyframes king-hop{0%,60%,100%{transform:none}68%{transform:scale(1.07,.93)}80%{transform:translateY(-15%) scale(.97,1.04)}90%{transform:scale(1.05,.95)}}
@keyframes king-fall{0%{transform:translateY(105%);animation-timing-function:cubic-bezier(.3,.8,.4,1)}30%{transform:none;animation-timing-function:ease-in-out}45%{transform:rotate(5deg)}58%{transform:rotate(-3deg);animation-timing-function:cubic-bezier(.55,0,.9,.5)}80%{transform:translateY(9%) rotate(-28deg);animation-timing-function:ease-out}90%{transform:translateY(8%) rotate(-21deg)}100%{transform:translateY(9%) rotate(-24deg)}}
@keyframes king-meet{0%{transform:translate(calc(var(--side)*-30%),105%)}45%{transform:translate(calc(var(--side)*-6%),-14%) rotate(calc(var(--side)*-4deg))}62%{transform:translate(calc(var(--side)*7%),0) rotate(calc(var(--side)*12deg))}78%{transform:translate(calc(var(--side)*-2%),0) rotate(calc(var(--side)*3deg))}100%{transform:rotate(calc(var(--side)*6deg))}}
@keyframes result-blink{0%,88%,94%,100%{transform:none}91%{transform:scaleY(.1)}}
@keyframes spark{0%,100%{opacity:0;scale:.2;rotate:0deg}45%{opacity:1;scale:1;rotate:45deg}}
@keyframes result-rise{from{opacity:0;translate:0 calc(var(--k)*14)}}
@keyframes delta-pop{from{opacity:0;scale:.3}}
@keyframes btn-shine{0%{background-position:-150% 0}35%,100%{background-position:250% 0}}