:root{color-scheme:light;--ink:#203b32;--muted:#72857b;--page:#f3f4ef;--surface:#ffffffb8;--edge:#ffffffdc;--shadow:#294d3b20;--glass-top:#fffffff0;--glass-bottom:#e5f0e9a6;--accent:#4e8069;font-family:Inter,'Segoe UI',Arial,sans-serif;font-synthesis:none}
html[data-theme=dark]{color-scheme:dark;--ink:#e6f3eb;--muted:#a7bdb1;--page:#101c19;--surface:#20382fbd;--edge:#bdd8c047;--shadow:#020e0b88;--glass-top:#406253b9;--glass-bottom:#1b3329d9;--accent:#a3cfb0}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--page);color:var(--ink)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}a{color:inherit;text-decoration:none}
#ambient{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.78}main{position:relative;z-index:1}
.glass{position:relative;border:1px solid var(--edge);background:linear-gradient(150deg,var(--glass-top),var(--glass-bottom));box-shadow:inset 0 1px 0 #ffffff9c,inset 0 -1px 0 #50776020,0 12px 30px var(--shadow);backdrop-filter:blur(15px) saturate(140%);-webkit-backdrop-filter:blur(15px) saturate(140%)}
html[data-theme=dark] .glass{box-shadow:inset 0 1px 0 #e4ffeb26,inset 0 -1px 0 #04180c4d,0 12px 30px var(--shadow)}
.hero{height:100vh;height:100svh;min-height:540px;position:relative;overflow:hidden;isolation:isolate;background:#eaf0e8}.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;touch-action:pan-y}.hero[data-variant=word]{background:radial-gradient(ellipse at 50% 43%,#fafbf7,#e9f0e9 65%,#dbe9e1)}.hero[data-variant=sand]{background:radial-gradient(ellipse at 50% 20%,#fff9ed,#f0e5d2 70%,#e8dac5)}.hero[data-variant=pixels]{background:radial-gradient(ellipse at 50% 30%,#eef4f4,#e3ebed 60%,#d7e3e6)}.hero[data-variant=waves]{background:radial-gradient(ellipse at 50% 30%,#f3f7f5,#dce9e5 68%,#d2e2e0)}
html[data-theme=dark] .hero[data-variant=word]{background:radial-gradient(ellipse at 50% 43%,#234138,#152b24 65%,#0d1d19)}html[data-theme=dark] .hero[data-variant=sand]{background:radial-gradient(ellipse at 50% 20%,#39372f,#282a24 70%,#1b211e)}html[data-theme=dark] .hero[data-variant=pixels]{background:radial-gradient(ellipse at 50% 30%,#253d4b,#182c33 65%,#101f28)}html[data-theme=dark] .hero[data-variant=waves]{background:radial-gradient(ellipse at 50% 30%,#203b3e,#15292f 70%,#102024)}
.hero[data-variant=jelly]{background:radial-gradient(ellipse at 50% 44%,#f8f6f3,#edeae8 70%,#e2e9e2)}
.hero[data-variant=magnetic]{background:radial-gradient(ellipse at 50% 42%,#f8faf6,#e7eee8 70%,#dce8e3)}
.hero[data-variant=ink]{background:radial-gradient(ellipse at 50% 42%,#fafaf7,#eef1ed 70%,#e8eee9)}
.hero[data-variant=spiro]{background:radial-gradient(ellipse at 50% 42%,#fbfaf7,#f0eee8 70%,#e9ede6)}
.hero[data-variant=ribbons]{background:radial-gradient(ellipse at 50% 42%,#fafaf6,#edf1ed 70%,#e4eae4)}
html[data-theme=dark] .hero[data-variant=jelly]{background:radial-gradient(ellipse at 50% 44%,#363849,#222c33 70%,#172427)}
html[data-theme=dark] .hero[data-variant=magnetic]{background:radial-gradient(ellipse at 50% 42%,#213c35,#152b29 70%,#10221f)}
html[data-theme=dark] .hero[data-variant=ink]{background:radial-gradient(ellipse at 50% 42%,#2c3440,#1b2d32 70%,#122326)}
html[data-theme=dark] .hero[data-variant=spiro]{background:radial-gradient(ellipse at 50% 42%,#2b3834,#1b2c29 70%,#10221f)}
html[data-theme=dark] .hero[data-variant=ribbons]{background:radial-gradient(ellipse at 50% 42%,#2e3938,#1d2d2a 70%,#12221f)}
.variant-switcher{scroll-snap-type:x proximity;overscroll-behavior-x:contain}.variant-switcher button{scroll-snap-align:center}
.topbar{position:absolute;z-index:4;top:0;left:0;right:0;display:flex;align-items:center;gap:18px;padding:clamp(16px,2.5vw,32px) clamp(17px,5vw,74px)}.logo{font-weight:900;font-size:clamp(32px,3vw,45px);letter-spacing:-.105em;line-height:1}.logo span{color:#c78d74;font-size:.58em;vertical-align:top;letter-spacing:0}.top-actions{display:flex;align-items:center;gap:9px;margin-left:auto}.top-actions button{color:var(--ink);border-radius:999px;min-height:44px}.icon-button{width:44px;font-size:22px}.profile-button,.text-button{display:flex;align-items:center;gap:9px;padding:0 16px;font-size:13px;font-weight:650}.profile-button>span:first-child{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#6f9a8052;font-size:17px}.top-actions button:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff8,0 16px 34px var(--shadow)}
.variant-switcher{position:absolute;z-index:5;left:50%;bottom:clamp(116px,15vh,170px);transform:translateX(-50%);display:flex;gap:4px;max-width:calc(100vw - 24px);padding:6px;border-radius:999px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}.variant-switcher::-webkit-scrollbar{display:none}.variant-switcher button{flex:none;border:0;border-radius:999px;padding:13px 18px;background:none;color:var(--muted);font-size:13px;font-weight:650;transition:background .25s,color .25s,transform .25s,box-shadow .25s}.variant-switcher button:hover{color:var(--ink);transform:translateY(-1px)}.variant-switcher button[aria-pressed=true]{background:linear-gradient(150deg,#568b72,#254b3b);color:#f9fff9;box-shadow:inset 0 1px 0 #e3ffe05c,0 5px 15px #183e2b49}html[data-theme=dark] .variant-switcher button[aria-pressed=true]{background:linear-gradient(145deg,#b4d8c1,#80ae98);color:#122a1d}
.hero-scroll{position:absolute;z-index:4;right:clamp(20px,5vw,75px);bottom:clamp(118px,15vh,170px);display:grid;place-items:center;width:49px;height:49px;border-radius:50%;font-size:22px;animation:scrollFloat 4s ease-in-out infinite}
.games-section{max-width:1320px;margin:auto;padding:clamp(65px,9vw,130px) clamp(18px,5vw,70px) 60px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:32px}.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:.18em;color:var(--muted);font-weight:800}.section-head h1{margin:9px 0 0;font-size:clamp(50px,7vw,88px);letter-spacing:-.08em;line-height:.9;font-weight:750}.section-count{font-size:12px;letter-spacing:.16em;color:var(--muted)}
.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.game-card{--tint:#7ea790;position:relative;display:flex;flex-direction:column;justify-content:space-between;min-width:0;min-height:292px;overflow:hidden;text-align:left;border-radius:28px;padding:25px;color:var(--ink);cursor:pointer;isolation:isolate;transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s,border-color .32s}.game-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(380px 280px at var(--mx,65%) var(--my,25%),color-mix(in srgb,var(--tint) 34%,transparent),transparent 75%);opacity:.88;pointer-events:none}.game-card::after{content:"";position:absolute;inset:-90% auto -90% -60%;width:40%;background:linear-gradient(90deg,transparent,#ffffff8a,transparent);transform:rotate(20deg);opacity:0;transition:left .65s,opacity .4s;pointer-events:none}.game-card:hover,.game-card:focus-visible{transform:translateY(-6px);border-color:color-mix(in srgb,var(--tint) 48%,var(--edge));box-shadow:inset 0 1px 0 #fff9,0 20px 40px var(--shadow)}.game-card:hover::after{left:130%;opacity:.7}.card-top,.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px}.card-num,.card-type{font-size:11px;color:var(--muted);letter-spacing:.12em;font-weight:750;text-transform:uppercase}.card-art{display:grid;place-items:center;flex:1;min-height:142px;position:relative;pointer-events:none}.card-mark{font-size:clamp(80px,8vw,125px);font-weight:700;letter-spacing:-.11em;line-height:1;color:color-mix(in srgb,var(--tint) 64%,var(--ink));text-shadow:0 4px 0 #ffffff43;transform:rotate(-6deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}.game-card:hover .card-mark{transform:rotate(0) scale(1.08)}.game-card[data-game=snake] .card-mark{font-size:clamp(90px,11vw,150px);font-weight:450;letter-spacing:0}.game-card[data-game=sandtrix] .card-mark{font-size:clamp(84px,10vw,136px)}.game-card[data-game=2048] .card-mark{font-size:clamp(58px,7vw,105px);letter-spacing:-.08em}.game-card[data-game=fifteen] .card-mark{font-size:clamp(64px,8vw,115px)}.card-bottom strong{font-size:clamp(25px,3vw,36px);letter-spacing:-.055em;font-weight:700}.card-arrow{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--edge);border-radius:50%;background:#ffffff45;font-size:21px;transition:transform .3s}.game-card:hover .card-arrow{transform:translate(3px,-3px)}html[data-theme=dark] .card-arrow{background:#e1f9e115}
.footer{max-width:1320px;margin:auto;padding:15px clamp(18px,5vw,70px) 135px;display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.footer a:hover{color:var(--ink)}
.radio{position:fixed;z-index:80;left:clamp(10px,2vw,28px);right:clamp(10px,2vw,28px);bottom:max(10px,env(safe-area-inset-bottom));height:76px;display:grid;grid-template-columns:48px minmax(0,1fr) auto 145px;align-items:center;gap:16px;padding:9px 18px;border-radius:22px;color:var(--ink)}.radio-art{position:relative;width:48px;height:48px;border-radius:50%;background:repeating-radial-gradient(circle,#294b3c 0 4px,#7a9e8b 5px 6px,#263c36 7px 12px);box-shadow:0 2px 9px #152c2147}.radio-art i{position:absolute;inset:19px;border-radius:50%;background:#e5d9b5;box-shadow:0 0 0 4px #bfd0ba}.radio.playing .radio-art{animation:spin 6s linear infinite}.radio-info{min-width:0;display:flex;flex-direction:column;gap:2px}.radio-kicker{font-size:9px;letter-spacing:.16em;color:var(--accent);font-weight:800;text-transform:uppercase}.radio-title{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.radio-subtitle{font-size:10px;color:var(--muted)}.radio-controls{display:flex;align-items:center;gap:5px}.radio button{border:0;color:var(--ink)}.radio-prev,.radio-next{width:36px;height:38px;border-radius:12px;background:transparent;font-size:21px}.radio-prev:hover,.radio-next:hover,.volume-button:hover{background:#a9ceb43d}.radio-toggle{width:43px;height:43px;border-radius:14px;background:var(--ink);color:var(--page)!important;font-size:17px;box-shadow:0 6px 15px var(--shadow)}.volume-wrap{display:flex;align-items:center;gap:7px}.volume-button{display:none;width:36px;height:36px;border-radius:11px;background:none;font-size:16px}.radio-volume{width:100%;accent-color:var(--accent);cursor:pointer}
.modal-backdrop{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:18px;background:#0c201ac2;backdrop-filter:blur(8px)}.modal{width:min(470px,100%);max-height:min(85dvh,700px);overflow:auto;border-radius:27px;padding:32px;color:var(--ink);background-color:var(--page)}.modal h2{font-size:clamp(36px,5vw,52px);letter-spacing:-.07em;line-height:1;margin:10px 0 13px}.modal p{color:var(--muted);font-size:13px;line-height:1.5}.modal-close{position:absolute;top:18px;right:18px;width:34px;height:34px;border:0;border-radius:50%;background:#82a59040;color:var(--ink);font-size:23px}.field-label{display:block;margin:20px 0 8px;font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}#nameInput{width:100%;height:47px;padding:0 15px;border:1px solid var(--edge);border-radius:14px;background:var(--surface);color:var(--ink);outline:0}.avatar-list{display:flex;flex-wrap:wrap;gap:8px}.avatar-list button{width:44px;height:44px;border:1px solid var(--edge);border-radius:14px;background:var(--surface);font-size:22px}.avatar-list button[aria-pressed=true]{background:#99c4a4;border-color:#6aa280;box-shadow:0 0 0 3px #a9c6a058}.primary-button{width:100%;height:47px;margin-top:24px;border:0;border-radius:14px;background:#315e48;color:white;font-weight:700}.modal-status{min-height:18px;margin-bottom:0}.records-modal{width:min(600px,100%)}.record-tabs{display:flex;gap:5px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:thin}.record-tabs button{flex:none;border:1px solid var(--edge);border-radius:999px;padding:8px 11px;background:var(--surface);color:var(--ink);font-size:11px}.record-tabs button[aria-selected=true]{background:#38664e;color:white}.leaderboard{list-style:none;margin:0;padding:0;max-height:330px;overflow:auto}.leaderboard li{display:grid;grid-template-columns:26px 32px minmax(0,1fr) auto;align-items:center;gap:10px;border-bottom:1px solid var(--edge);padding:10px 0;font-size:13px}.leaderboard .rank{color:var(--muted)}.leaderboard .avatar{font-size:22px}.leaderboard .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard strong{font-size:16px}
.game-layer{position:fixed;z-index:50;inset:0;bottom:99px;display:flex;flex-direction:column;background:var(--page)}.game-top{height:54px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(14px,3vw,36px);border-radius:0;color:var(--ink)}.game-top button{border:0;background:transparent;color:var(--ink);font-weight:700;font-size:14px;padding:10px}.game-top>span{font-size:12px;color:var(--muted)}.game-layer iframe{flex:1;width:100%;min-height:0;border:0;background:var(--page)}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes scrollFloat{50%{transform:translateY(-8px)}}
@media(max-width:1050px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-scroll{display:none}}
@media(max-width:650px){.hero{min-height:500px}.topbar{padding:16px;gap:8px}.logo{font-size:33px}.top-actions{gap:6px}.top-actions button{min-height:39px}.icon-button{width:39px;font-size:19px}.profile-button{padding:0 6px;min-width:39px;justify-content:center}.profile-button #profileName{display:none}.profile-button>span:first-child{width:28px;height:28px}.text-button{padding:0 10px;font-size:11px}.variant-switcher{bottom:105px;left:12px;transform:none;max-width:calc(100vw - 24px);padding:5px;gap:0}.variant-switcher button{padding:11px 13px;font-size:11px}.games-section{padding-top:58px}.section-head{margin-bottom:22px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.game-card{min-height:220px;padding:16px;border-radius:21px}.card-art{min-height:100px}.card-mark,.game-card[data-game=snake] .card-mark,.game-card[data-game=sandtrix] .card-mark,.game-card[data-game=fifteen] .card-mark{font-size:70px}.game-card[data-game=2048] .card-mark{font-size:45px}.card-bottom strong{font-size:22px}.card-arrow{width:29px;height:29px;font-size:17px}.card-type{display:none}.radio{left:8px;right:8px;bottom:max(6px,env(safe-area-inset-bottom));height:64px;padding:7px 10px;border-radius:17px;grid-template-columns:38px minmax(0,1fr) 106px 36px;gap:8px}.radio-art{width:38px;height:38px}.radio-art i{inset:15px}.radio-kicker{font-size:8px}.radio-title{font-size:11px}.radio-subtitle{display:none}.radio-controls{gap:0}.radio-prev,.radio-next{width:29px;height:33px;font-size:17px}.radio-toggle{width:36px;height:36px;border-radius:11px;font-size:14px}.volume-wrap{position:relative}.volume-button{display:block;font-size:12px}.radio-volume{position:absolute;right:-3px;bottom:49px;width:126px;height:30px;padding:6px 9px;border:1px solid var(--edge);border-radius:999px;background:var(--page);box-shadow:0 10px 24px var(--shadow);display:none}.radio.volume-open .radio-volume{display:block}.game-layer{bottom:76px}.game-top{height:46px}.footer{padding-bottom:100px}.modal{padding:26px 20px}}
@media(max-width:430px){.game-grid{grid-template-columns:1fr}.game-card{min-height:200px}.card-art{min-height:82px}.variant-switcher button{padding:11px 10px}.section-head h1{font-size:54px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}.glass{backdrop-filter:none;-webkit-backdrop-filter:none}}
.card-info{display:flex;flex-direction:column;gap:5px;min-width:0}.card-best{font-size:11px;color:var(--muted);font-weight:550}.card-arrow{flex:none}
.card-world{font-size:11px;color:var(--accent);font-weight:650}
/* These surfaces sit over a moving canvas: retain the glass layering without costly live blur. */
.variant-switcher,.radio{backdrop-filter:none;-webkit-backdrop-filter:none}
.game-card::before{z-index:0}.game-card::after{z-index:2}.game-card>*{position:relative;z-index:1}
html[data-theme=dark] .card-mark{text-shadow:none}
.games-section{position:relative;isolation:isolate}.games-section #ambient{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:1;pointer-events:none}.games-section>.section-head,.games-section>.game-grid{position:relative;z-index:1}
#ambient{z-index:2;opacity:.58;transition:opacity .5s ease}body.game-open #ambient{opacity:0}
.card-mark{display:block;width:min(100%,175px);height:auto;transform:rotate(-3deg)}.card-mark svg{display:block;width:100%;height:auto;color:color-mix(in srgb,var(--tint) 65%,var(--ink));filter:drop-shadow(0 10px 15px var(--shadow))}.card-mark svg text{stroke:none;fill:currentColor;font:700 28px Inter,'Segoe UI',Arial,sans-serif}.game-card:hover .card-mark{transform:rotate(0) translateY(-4px) scale(1.04)}

/* Each card is a small illustration of its game, rather than a line icon. */
.card-mark{width:min(100%,220px);transform:rotate(0)}
.card-mark .game-illustration{color:color-mix(in srgb,var(--tint) 82%,var(--ink));filter:drop-shadow(0 14px 15px var(--shadow))}
.game-card:hover .card-mark,.game-card:focus-visible .card-mark{transform:translateY(-5px) scale(1.04)}
.game-illustration .path,.game-illustration .loop-tracks path{fill:none;stroke:currentColor;stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
.game-illustration .path.secondary{stroke-width:7;opacity:.55}
.game-illustration .head,.game-illustration .fruit,.game-illustration .node,.game-illustration .ball{fill:currentColor;stroke:#fff9;stroke-width:3}
.game-illustration .node.secondary{opacity:.57}
.game-illustration .eye,.game-illustration .hole{fill:var(--ink)}
.game-illustration .detail,.game-illustration .flight{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;opacity:.65}
.game-illustration .flight{stroke-dasharray:3 6;stroke-width:3}
.game-illustration .dot,.game-illustration .grain circle,.game-illustration .loop-joints circle{fill:currentColor;opacity:.72}
.game-illustration .sand{fill:currentColor;opacity:.32}
.game-illustration .blocks rect,.game-illustration .stack rect,.game-illustration .tiles rect,.game-illustration .mahjong-art rect{fill:currentColor;stroke:#fff8;stroke-width:2}
.game-illustration .blocks rect:nth-child(2n),.game-illustration .tiles rect:nth-child(3n),.game-illustration .stack rect:nth-child(2n){opacity:.64}
.game-illustration .stack rect{filter:drop-shadow(0 4px 1px #0002)}
.game-illustration .tiles rect{filter:drop-shadow(0 3px 2px #0002)}
.game-illustration .numbers text,.game-illustration .mahjong-sign text{fill:#fff;font:700 19px Inter,'Segoe UI',Arial,sans-serif;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:#0002;stroke-width:1}
.game-illustration .numbers.letters text{font-size:14px}
.game-illustration .numbers text.small{font-size:15px}
.game-illustration .mahjong-art rect{fill:color-mix(in srgb,var(--tint) 35%,#fffaf0);stroke:currentColor;stroke-opacity:.5}
.game-illustration .mahjong-sign text{fill:var(--ink);font-size:22px}
.game-illustration .flag{fill:currentColor;stroke:currentColor;stroke-width:3;stroke-linejoin:round}
html[data-theme=dark] .game-illustration .mahjong-art rect{fill:color-mix(in srgb,var(--tint) 28%,#deded1)}
@media(max-width:430px){.card-mark{width:min(100%,200px)}}
.profile-records{margin-top:24px;padding-top:18px;border-top:1px solid var(--edge)}.profile-records h3{margin:0;font-size:18px;letter-spacing:-.035em}.profile-records>p{margin:6px 0 12px}.my-records{list-style:none;margin:0;padding:0;display:grid;gap:6px}.my-records li{display:flex;justify-content:space-between;align-items:center;min-height:40px;padding:7px 12px;border:1px solid var(--edge);border-radius:12px;background:color-mix(in srgb,var(--tint) 11%,var(--surface));font-size:13px}.my-records strong{font-size:17px;color:var(--ink)}
.radio{grid-template-columns:48px minmax(0,1fr) auto 212px}.volume-wrap{gap:8px;justify-content:flex-end}.radio-volume{width:106px}.sfx-toggle{flex:none;min-width:86px;height:34px;padding:0 8px;border:1px solid var(--edge)!important;border-radius:11px;background:var(--surface);font-size:11px;font-weight:700}.sfx-toggle[aria-pressed=false]{color:var(--muted);opacity:.72}
@media(max-width:650px){.radio{grid-template-columns:38px minmax(0,1fr) 106px 36px}.volume-wrap{position:relative}.radio-volume{width:126px}.sfx-toggle{position:absolute;right:-3px;bottom:87px;display:none;min-width:92px;height:32px;border-radius:11px;background:var(--page);box-shadow:0 10px 24px var(--shadow)}.radio.volume-open .sfx-toggle{display:block}}

/* Compact game catalog: one line system of ten flat SVG marks. */
.game-grid .game-card{min-height:194px;padding:21px 23px;display:grid;grid-template-columns:69px minmax(0,1fr) 28px;grid-template-rows:auto 1fr;gap:12px 16px;border:1px solid var(--edge);border-radius:20px;background:color-mix(in srgb,var(--surface) 90%,var(--page));box-shadow:none;transition:transform .2s ease,border-color .2s ease,background-color .2s ease}
.game-grid .game-card::before{inset:18px auto 18px 0;width:3px;border-radius:0 3px 3px 0;background:var(--tint);opacity:.55}
.game-grid .game-card::after{display:none}
.game-grid .game-card:hover,.game-grid .game-card:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--tint) 55%,var(--edge));background:color-mix(in srgb,var(--surface) 78%,var(--tint) 7%);box-shadow:0 10px 22px color-mix(in srgb,var(--shadow) 55%,transparent)}
.game-grid .card-top{grid-column:1/-1;grid-row:1;align-self:start}
.game-grid .card-num,.game-grid .card-type{font-size:10px;letter-spacing:.1em}
.game-grid .card-symbol{grid-column:1;grid-row:2;align-self:center;display:grid;place-items:center;width:64px;height:64px;color:color-mix(in srgb,var(--tint) 75%,var(--ink))}
.game-grid .game-icon{display:block;width:58px;height:58px}
.game-grid .card-bottom{grid-column:2/4;grid-row:2;align-self:center;min-width:0;align-items:end;gap:8px}
.game-grid .card-info{gap:4px}
.game-grid .card-bottom strong{font-size:clamp(21px,2.1vw,29px);line-height:1.05;letter-spacing:-.04em}
.game-grid .card-caption{font-size:11px;line-height:1.3;color:var(--muted);margin:2px 0 5px}
.game-grid .card-best,.game-grid .card-world{font-size:10px;line-height:1.35;color:var(--muted);font-weight:500}
.game-grid .card-arrow{width:28px;height:28px;border:0;background:none;font-size:18px;color:var(--accent)}
.game-grid .game-card:hover .card-arrow{transform:translate(2px,-2px)}
@media(max-width:1050px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.game-grid{grid-template-columns:1fr;gap:9px}.game-grid .game-card{min-height:142px;padding:16px 18px;grid-template-columns:57px minmax(0,1fr) 24px;gap:7px 12px;border-radius:16px}.game-grid .card-symbol{width:52px;height:52px}.game-grid .game-icon{width:50px;height:50px}.game-grid .card-bottom strong{font-size:22px}.game-grid .card-type{display:inline}.game-grid .card-caption{font-size:10px;margin:0 0 2px}}

.modal-backdrop:not([hidden]){animation:veil-in .18s ease-out both}
.modal-backdrop:not([hidden]) .modal{animation:panel-in .22s cubic-bezier(.2,.8,.2,1) both}
.game-layer:not([hidden]){animation:veil-in .16s ease-out both}
.record-tabs button,.top-actions button,.primary-button,.variant-switcher button{transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.top-actions button:active,.primary-button:active,.variant-switcher button:active,.game-grid .game-card:active{transform:scale(.985)}
@keyframes veil-in{from{opacity:0}to{opacity:1}}
@keyframes panel-in{from{opacity:0;transform:translateY(7px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.modal-backdrop:not([hidden]),.modal-backdrop:not([hidden]) .modal,.game-layer:not([hidden]){animation:none}}
.leaderboard .current-result{background:color-mix(in srgb,var(--accent) 18%,var(--page));font-weight:800}