:root{--bg: #0b0d1c;--bg2: #141833;--panel: #1a1f40;--line: #2c3364;--ink: #f2f0e6;--muted: #a6a9c8;--amber: #ffb000;--pink: #ff4fd8;--cyan: #5fe3ff;--green: #9bdc3c;--danger: #ff5c5c;--radius: 14px;--font: "Noto Kufi Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;--mono: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", monospace;--bar-h: 66px;color-scheme:dark}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;min-height:100dvh;background:radial-gradient(1200px 600px at 80% -10%,#2a1747 0%,transparent 60%),radial-gradient(900px 500px at 0% 110%,#0f2f4a 0%,transparent 60%),var(--bg);color:var(--ink);font-family:var(--font);line-height:1.6;overflow-x:hidden}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.11) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;z-index:50}#app{max-width:1080px;margin:0 auto;padding:calc(var(--bar-h) + env(safe-area-inset-top) + 14px) max(16px,env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}a{color:inherit}.muted{color:var(--muted)}.btn,.icon-btn,.chip,.seg button{font:inherit;color:var(--ink);background:var(--panel);border:2px solid var(--line);border-radius:10px;cursor:pointer;touch-action:manipulation}.btn{padding:8px 18px;font-weight:700;text-decoration:none;display:inline-block}.btn:hover,.icon-btn:hover,.chip:hover{border-color:var(--amber)}.btn.primary{background:var(--amber);color:#1b1300;border-color:var(--amber)}.btn.danger{border-color:var(--danger);color:var(--danger);background:transparent}.icon-btn{width:44px;height:44px;font-size:20px;line-height:1;display:grid;place-items:center}.chip{min-height:44px;padding:6px 12px;font-size:14px;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}.seg{display:inline-flex;gap:4px;background:var(--bg2);padding:4px;border-radius:12px;border:1px solid var(--line);flex-wrap:wrap}.seg button{border:0;padding:6px 12px;font-size:14px;background:transparent}.seg button.on{background:var(--accent, var(--amber));color:#111;font-weight:800}.game-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:8px 16px;font-weight:800;font-size:15px;text-decoration:none;white-space:nowrap;color:var(--ink);background:var(--panel);border:2px solid var(--line);border-radius:12px;box-shadow:0 3px #05060f;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:border-color .15s ease,color .15s ease,transform .08s ease}.nav-btn svg{flex:none}.nav-btn:hover{border-color:var(--amber);color:var(--amber)}.nav-btn:active{transform:translateY(2px);box-shadow:0 1px #05060f}.nav-section{border-color:color-mix(in srgb,var(--accent, var(--amber)) 55%,var(--line))}.nav-section svg{color:var(--accent, var(--amber))}.nav-hub{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 50%,var(--line))}.topbar{position:fixed;top:0;left:0;right:0;z-index:45;padding:calc(env(safe-area-inset-top) + 9px) max(16px,env(safe-area-inset-right)) 9px max(16px,env(safe-area-inset-left));background:#0b0d1ced;border-bottom:2px solid var(--line);box-shadow:0 8px 22px #00000059;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.topbar-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:10px}.topbar .spacer{flex:1}.topbar .nav-btn{min-height:46px}.hero{text-align:center;padding:28px 0 26px}.hero h1{font-size:clamp(42px,10vw,84px);margin:6px 0 8px;line-height:1.15;font-weight:900;color:var(--amber);text-shadow:0 0 18px rgba(255,176,0,.45),4px 4px 0 #6b2a00}.hero h1 span{color:var(--pink);text-shadow:0 0 18px rgba(255,79,216,.5),4px 4px 0 #4a0a40}.lead{color:var(--muted);max-width:560px;margin:0 auto;font-size:17px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}.card{--accent: var(--amber);position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 14px 16px;text-decoration:none;background:linear-gradient(180deg,var(--panel),var(--bg2));border:2px solid var(--line);border-radius:var(--radius);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;animation:rise .45s ease both;animation-delay:calc(var(--i) * 50ms)}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}.card:hover,.card:focus-visible{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 8px 0 -2px color-mix(in srgb,var(--accent) 35%,transparent)}.thumb{display:block;border-radius:10px;overflow:hidden;border:2px solid #000;aspect-ratio:14 / 10;margin-bottom:6px}.thumb svg{display:block;width:100%;height:100%}.era{font-size:12px;color:var(--accent);font-weight:700}.card .title{font-size:22px;font-weight:900}.tag{color:var(--muted);font-size:14px;flex:1}.best{font-size:12.5px;color:var(--ink);opacity:.85;margin-top:6px;font-family:var(--font)}.game-head h1{font-size:clamp(20px,5vw,28px);margin:0;color:var(--accent);flex:1;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-head .tools{display:flex;gap:6px;align-items:center}.game-host{margin:12px auto 0;display:flex;flex-direction:column;align-items:center;gap:10px}.loading{color:var(--muted);padding:60px 0}.help{max-width:640px;margin:18px auto 0;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:8px 14px;color:var(--muted);font-size:15px}.help summary{cursor:pointer;color:var(--ink);font-weight:700}.help ul{margin:8px 0 4px;padding-inline-start:20px}.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;width:100%}.hud{display:flex;gap:6px 16px;justify-content:center;font-size:15px;flex-wrap:wrap;color:var(--muted)}.hud b{color:var(--accent, var(--amber));font-family:var(--mono);font-size:17px}.screen{position:relative;width:100%;border-radius:12px;border:3px solid #000;box-shadow:0 0 0 3px var(--line),0 18px 40px #00000073;overflow:hidden;background:#000;touch-action:none;user-select:none;-webkit-user-select:none}.screen canvas{display:block;width:100%;height:auto}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#050610b8;text-align:center;padding:16px}.overlay[hidden]{display:none}.overlay h2{margin:0;font-size:clamp(22px,6vw,34px);color:var(--accent, var(--amber))}.overlay p{margin:0;color:var(--ink)}.pad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,56px);gap:6px;direction:ltr}.pad button{font-size:24px;border-radius:12px;background:var(--panel);border:2px solid var(--line);color:var(--ink);touch-action:manipulation}.pad button:active{background:var(--accent);color:#111}.pad .up{grid-column:2;grid-row:1}.pad .left{grid-column:1;grid-row:2}.pad .down{grid-column:2;grid-row:2}.pad .right{grid-column:3;grid-row:2}.status{min-height:1.6em;font-weight:800;text-align:center;color:var(--accent)}.xo-board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;width:min(100%,360px);aspect-ratio:1}.xo-board button{min-height:0;padding:0;font:900 clamp(40px,15vw,72px)/1 var(--mono);background:var(--bg2);border:3px solid var(--line);border-radius:14px;color:var(--ink);cursor:pointer}.xo-board button.X{color:var(--pink);text-shadow:0 0 12px rgba(255,79,216,.6)}.xo-board button.O{color:var(--cyan);text-shadow:0 0 12px rgba(95,227,255,.6)}.xo-board button.win{border-color:var(--amber);background:#2b2210}.scores{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;font-size:14px}.scores span{background:var(--bg2);border:1px solid var(--line);padding:4px 10px;border-radius:999px}.four-board{direction:ltr;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:10px;width:min(100%,520px);background:#2348c8;border-radius:16px;border:3px solid #0d1d66;box-shadow:inset 0 -6px #16308f}.four-col{display:flex;flex-direction:column-reverse;gap:6px;cursor:pointer;border-radius:10px;padding:2px;background:none;border:0}.four-col:hover,.four-col:focus-visible{background:#ffffff1f}.four-cell{aspect-ratio:1;border-radius:50%;background:#0b0d1c;box-shadow:inset 0 3px 6px #0009}.four-cell.p1{background:radial-gradient(circle at 35% 35%,#ffe680,#ffc400 60%,#c79200)}.four-cell.p2{background:radial-gradient(circle at 35% 35%,#ff9a9a,#ff3b3b 60%,#b31212)}.four-cell.drop{animation:drop .32s cubic-bezier(.5,0,.75,0) both}@keyframes drop{0%{transform:translateY(calc(var(--fall) * -112%))}}.four-cell.win{outline:4px solid #fff;outline-offset:-4px}.mines-wrap{max-width:100%;overflow:auto;padding:4px}.mines-board{direction:ltr;display:grid;gap:2px;background:#59616e;padding:6px;border:4px outset #c0c7d1;user-select:none;-webkit-user-select:none;touch-action:manipulation}.mines-board button{width:var(--cell);height:var(--cell);padding:0;border:0;font:900 calc(var(--cell) * .58)/1 var(--mono);background:#c0c7d1;box-shadow:inset 2px 2px #fff,inset -2px -2px #7a8290;color:#111;cursor:pointer}.mines-board button.open{background:#e2e5ea;box-shadow:none;cursor:default}.mines-board button.boom{background:var(--danger)}.n1{color:#1c46d6!important}.n2{color:#1f8a2c!important}.n3{color:#d01f1f!important}.n4{color:#12206e!important}.n5{color:#7a1010!important}.n6{color:#0f7f80!important}.n7{color:#000!important}.n8{color:#555!important}.face{font-size:26px;width:48px;height:44px}.mem-board{display:grid;gap:8px;width:min(100%,560px);perspective:900px}.mem-card{position:relative;aspect-ratio:3 / 4;border:0;padding:0;background:none;cursor:pointer}.mem-card .in{position:absolute;top:0;right:0;bottom:0;left:0;transition:transform .35s ease;transform-style:preserve-3d}.mem-card.up .in,.mem-card.matched .in{transform:rotateY(180deg)}.mem-card .face-b,.mem-card .face-f{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px;display:grid;place-items:center;backface-visibility:hidden;border:3px solid var(--line)}.mem-card .face-b{background:repeating-linear-gradient(45deg,#2a1b4a 0 8px,#34215c 8px 16px)}.mem-card .face-b:after{content:"\61f";font-size:clamp(22px,6vw,36px);color:#c58cff;font-weight:900}.mem-card .face-f{background:#f6f1df;transform:rotateY(180deg);font-size:clamp(26px,8vw,46px)}.mem-card.matched .face-f{border-color:var(--green);background:#e9f7d4}.dlg{border:3px solid var(--amber);border-radius:16px;background:var(--bg2);color:var(--ink);padding:0;width:min(92vw,420px)}.dlg::backdrop{background:#0009}.dlg-body{padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px;max-height:80vh;overflow:auto}.dlg h2{margin:0;color:var(--amber);font-size:22px}.dlg h3{margin:8px 0 0;font-size:15px;color:var(--cyan)}.dlg p{margin:0;font-size:14px}.dlg input{font:inherit;padding:10px 12px;border-radius:10px;border:2px solid var(--line);background:var(--bg);color:var(--ink)}.dlg-actions{display:flex;gap:8px;justify-content:flex-start;flex-wrap:wrap;margin-top:8px}.records{margin:0;padding-inline-start:26px;font-size:14px}.records li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding:2px 0}.records li.empty{display:list-item;border:0}.records .rv{font-family:var(--mono);color:var(--amber)}@media (orientation: landscape) and (max-height: 520px){:root{--bar-h: 58px}.topbar{padding-top:calc(env(safe-area-inset-top) + 6px);padding-bottom:6px}.topbar .nav-btn{min-height:44px;padding:6px 12px;font-size:14px}.hero{padding:12px 0}.screen{max-width:min(100%,calc((100dvh - var(--bar-h) - 24px) * var(--ar, 1)))!important;min-width:0!important}}@media (max-width: 420px){.topbar .wide-only{display:none}.topbar .nav-btn{padding:8px 12px;font-size:14.5px;gap:6px}}@media (max-width: 520px){.grid{grid-template-columns:1fr 1fr;gap:10px}.card{padding:10px}.card .title{font-size:18px}.tag{font-size:12.5px}.chip{max-width:30vw}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}