@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/jakarta.woff2) format("woff2");font-weight:400 800;font-display:swap}
:root{--grape:#5426B2;--pink:#FF4A98;--mint:#58E9BF;--navy:#27194A;--lav:#D2C2F6;--cream:#FFF8EC;--trophy:#58E9BF;--wm:#FFF8EC;--face:#27194A;--f:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--ptop:46%;--pw:48%;--tb:56px;--cell:48px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#1e1440}
body{font-family:var(--f);color:var(--cream);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-size:16px;user-select:none;-webkit-user-select:none;touch-action:manipulation;overscroll-behavior:none}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none;font-size:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.hide{display:none!important}
#stage{position:fixed;inset:0}
#cv{display:block;width:100%;height:100%}
/* top bar */
#top{position:fixed;left:0;right:0;top:0;height:var(--tb);padding:0 12px;padding-top:env(safe-area-inset-top);display:flex;align-items:center;gap:10px;z-index:20;background:linear-gradient(180deg,rgba(30,18,70,.92),rgba(30,18,70,.55) 70%,rgba(30,18,70,0))}
.logo{display:flex;align-items:center;width:92px;min-height:44px;flex:none}
.zl{display:block;width:100%;height:auto;overflow:visible}
.ttl{flex:1;font-size:17px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;text-shadow:0 2px 6px rgba(0,0,0,.35)}
.ttl span{color:var(--pink)}
.tr{display:flex;gap:8px;flex:none}
.ib{width:44px;height:44px;border-radius:14px;background:rgba(84,38,178,.85);border:2px solid rgba(210,194,246,.45);display:grid;place-items:center;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.ib svg{width:24px;height:24px;fill:var(--cream);stroke:var(--cream)}
.ib .spk{stroke:none}.ib .mx{display:none}
html.muted .ib .w1,html.muted .ib .w2{display:none}html.muted .ib .mx{display:block;stroke:var(--pink)}
/* panel */
#panel{position:fixed;left:0;right:0;bottom:0;top:var(--ptop);z-index:10;display:flex;flex-direction:column;padding:6px 12px calc(10px + env(safe-area-inset-bottom))}
html.land #panel{left:auto;top:var(--tb);width:var(--pw);padding:4px 14px 10px 6px}
.view{display:none;flex-direction:column;align-items:center;flex:1;min-height:0;width:100%}
.view.on{display:flex}
h2{font-size:21px;font-weight:800;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.45);margin-top:4px}
.sub{font-size:14px;color:var(--lav);text-align:center;margin:2px 0 8px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.5)}
/* picker */
#pick,#games{overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-bottom:6px}
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:560px}
.pc{background:linear-gradient(180deg,#FFF8EC,#f1e7ff);border-radius:20px;padding:6px 6px 8px;color:var(--navy);display:flex;flex-direction:column;align-items:center;box-shadow:0 5px 0 rgba(39,25,74,.45),0 8px 18px rgba(0,0,0,.25);border:3px solid transparent;transition:transform .15s;min-height:44px}
.pc:active{transform:translateY(3px)}
.pc.sel{border-color:var(--pink)}
.pc .th{width:100%;aspect-ratio:1/1;border-radius:14px;background:radial-gradient(circle at 50% 35%,#ffffff,#D2C2F6 75%);display:grid;place-items:center;overflow:hidden}
.pc img{width:100%;height:100%;object-fit:cover;display:block}
.pc b{font-size:15px;font-weight:800;margin-top:5px;line-height:1.1}
.pc small{font-size:11.5px;font-weight:600;color:#6d5a9c;line-height:1.15;text-align:center;margin-top:1px}
/* games */
.diff{display:flex;background:rgba(39,25,74,.8);border-radius:16px;padding:4px;gap:4px;margin:8px 0 10px;border:2px solid rgba(210,194,246,.35)}
.diff button{min-width:84px;height:44px;border-radius:12px;font-weight:800;font-size:15px;color:var(--lav)}
.diff button.on{background:var(--mint);color:var(--navy)}
.gcards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;max-width:520px}
.gc{background:var(--cream);color:var(--navy);border-radius:20px;padding:10px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 5px 0 rgba(39,25,74,.5),0 8px 18px rgba(0,0,0,.25);min-height:44px}
.gc:active{transform:translateY(3px)}
.gc svg{width:64px;height:52px}
.gc b{font-size:16px;font-weight:800}
.gc small{font-size:12px;font-weight:600;color:#6d5a9c}
.ghost{min-height:44px;padding:0 18px;border-radius:14px;font-weight:800;font-size:15px;color:var(--cream);background:rgba(39,25,74,.75);border:2px solid rgba(210,194,246,.5);margin-top:10px}
.big{min-height:52px;padding:0 26px;border-radius:16px;font-weight:800;font-size:18px;color:#fff;background:var(--pink);box-shadow:0 5px 0 #b3236a;width:100%}
.big:active{transform:translateY(3px);box-shadow:0 2px 0 #b3236a}
/* play */
.hud{display:flex;align-items:center;gap:8px;width:100%;max-width:560px}
.pill{height:44px;display:flex;align-items:center;gap:2px;padding:0 12px 0 6px;border-radius:14px;background:rgba(39,25,74,.85);border:2px solid rgba(210,194,246,.45);font-weight:800;font-size:14px}
.pill svg{width:22px;height:22px;stroke:var(--cream)}
.score{flex:1;display:flex;justify-content:center;gap:6px}
.sc{display:flex;align-items:center;gap:6px;height:44px;padding:0 12px;border-radius:14px;background:#27194A;border:2px solid rgba(210,194,246,.3);font-weight:700;font-size:14px;transition:border-color .2s,background .2s;max-width:50%}
.sc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc b{font-size:20px;font-weight:800}
.sc .dot{width:14px;height:14px;border-radius:50%;flex:none}
.sc.you .dot{background:var(--pink)}.sc.pup .dot{background:var(--mint);border-radius:4px}
.sc.act.you{border-color:var(--pink);background:#4a1f5e}
.sc.act.pup{border-color:var(--mint);background:#1f3d4f}
#status{margin:6px 0 2px;font-weight:800;font-size:15px;padding:5px 14px;border-radius:99px;background:rgba(255,248,236,.95);color:var(--navy);box-shadow:0 3px 10px rgba(0,0,0,.25);min-height:30px}
#bwrap{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;perspective:900px;position:relative}
#board{position:relative;transform-origin:50% 60%}
#board.tilt{transform:rotateX(12deg)}
/* result */
#result{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;transform:translateZ(200px);background:rgba(30,18,70,.35)}
.rcard,.mcard{background:var(--cream);color:var(--navy);border-radius:24px;padding:18px 18px 16px;width:min(92%,360px);text-align:center;box-shadow:0 8px 0 rgba(39,25,74,.5),0 18px 40px rgba(0,0,0,.4);animation:popin .35s cubic-bezier(.3,1.6,.5,1)}
.rcard h3,.mcard h3{font-size:26px;font-weight:800;color:var(--grape)}
.rcard p{font-weight:600;color:#6d5a9c;margin:4px 0 12px}
.row2{display:flex;gap:8px}.row2 .ghost{flex:1;padding:0 8px;color:var(--navy);background:#efe6ff;border-color:var(--lav)}
.modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(20,10,50,.55)}
.mcard{display:flex;flex-direction:column;gap:0}
.mcard .big{margin-top:12px}.mcard .ghost{color:var(--navy);background:#efe6ff;border-color:var(--lav)}
@keyframes popin{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
/* speech bubble */
.bubble{position:fixed;left:0;top:0;z-index:15;max-width:190px;padding:8px 13px;border-radius:18px;background:#fff;color:var(--navy);font-weight:800;font-size:15px;line-height:1.2;box-shadow:0 4px 0 rgba(39,25,74,.35),0 6px 16px rgba(0,0,0,.25);opacity:0;transform:translate(-9999px,0);transition:opacity .2s;pointer-events:none}
.bubble.on{opacity:1}
.bubble:after{content:"";position:absolute;left:-9px;bottom:10px;border:8px solid transparent;border-right:12px solid #fff;border-left:0}
.bubble.dots span{letter-spacing:3px}
.bubble .dd{display:inline-block;animation:dd 1s infinite}.bubble .dd:nth-child(2){animation-delay:.15s}.bubble .dd:nth-child(3){animation-delay:.3s}
@keyframes dd{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
/* loading */
#load{position:fixed;inset:0;z-index:60;background:#27194A;display:grid;place-items:center;transition:opacity .5s}
#load.gone{opacity:0;pointer-events:none}
.ld{font-weight:800;font-size:18px;color:var(--lav)}
/* ===== games ===== */
/* four in a row */
.c4{--p:calc(var(--cell)*.16);position:relative;padding:var(--p);background:linear-gradient(180deg,#6a36d6,#5426B2);border-radius:calc(var(--cell)*.4);box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),0 8px 0 #3a1a80,0 14px 24px rgba(0,0,0,.35);display:grid;grid-template-columns:repeat(7,var(--cell));grid-template-rows:repeat(6,var(--cell));cursor:pointer}
.c4 .h{margin:calc(var(--cell)*.09);border-radius:50%;background:#2a1a5a;box-shadow:inset 0 4px 6px rgba(0,0,0,.5)}
.c4 .disc{position:absolute;width:calc(var(--cell)*.82);height:calc(var(--cell)*.82);border-radius:50%;z-index:2;pointer-events:none}
.disc.y{background:radial-gradient(circle at 50% 50%,#ff7ab6 0 38%,#FF4A98 40% 60%,#ff6eae 62%);box-shadow:inset 0 -4px 0 #c42a72}
.disc.p{background:radial-gradient(circle at 50% 50%,#8ff3d6 0 38%,#58E9BF 40% 60%,#7af0cd 62%);box-shadow:inset 0 -4px 0 #2bb38c}
.disc.win{animation:wpulse .7s infinite alternate;box-shadow:0 0 0 4px #fff,inset 0 -4px 0 rgba(0,0,0,.2)}
@keyframes wpulse{to{transform:scale(1.12)}}
.c4 .ghostd{position:absolute;top:calc(var(--cell)*-.95);width:calc(var(--cell)*.7);height:calc(var(--cell)*.7);border-radius:50%;background:var(--pink);opacity:.75;transition:left .12s;pointer-events:none}
.c4 .feet{position:absolute;left:-10px;right:-10px;bottom:calc(var(--cell)*-.3);height:calc(var(--cell)*.3);display:flex;justify-content:space-between;pointer-events:none}
.c4 .feet i{width:calc(var(--cell)*1.1);height:100%;background:#3a1a80;border-radius:0 0 10px 10px}
/* tic tac toe */
.ttt{display:grid;grid-template-columns:repeat(3,var(--cell));grid-template-rows:repeat(3,var(--cell));gap:calc(var(--cell)*.07);background:var(--grape);padding:calc(var(--cell)*.09);border-radius:calc(var(--cell)*.22);box-shadow:0 8px 0 #3a1a80,0 14px 24px rgba(0,0,0,.35)}
.ttt button{background:var(--cream);border-radius:calc(var(--cell)*.14);display:grid;place-items:center;position:relative}
.ttt button svg{width:72%;height:72%;animation:popin .3s cubic-bezier(.3,1.6,.5,1)}
.ttt button.win{background:#fff0f7;box-shadow:inset 0 0 0 4px var(--pink)}
.ttt button.winp{background:#e9fff8;box-shadow:inset 0 0 0 4px var(--mint)}
/* dots */
.dots{background:var(--cream);border-radius:22px;padding:calc(var(--cell)*.2);box-shadow:0 8px 0 #3a1a80,0 14px 24px rgba(0,0,0,.35)}
.dots svg{display:block}
.dots .hit{stroke:transparent;stroke-linecap:round;cursor:pointer}
.dots .ln{stroke:#e2d8f5;stroke-linecap:round;transition:stroke .2s}
.dots .ln.y{stroke:var(--pink)}.dots .ln.p{stroke:#2fc99c}
.dots .ln.hov{stroke:#c8b5ee}
.dots .bx{transform-box:fill-box;transform-origin:center;animation:popin .35s cubic-bezier(.3,1.6,.5,1)}
/* memory */
.mem{display:grid;grid-template-columns:repeat(4,var(--cell));grid-auto-rows:calc(var(--cell)*1.12);gap:calc(var(--cell)*.1)}
.mc{perspective:600px;position:relative}
.mc .in{position:absolute;inset:0;transition:transform .35s;transform-style:preserve-3d}
.mc.open .in{transform:rotateY(180deg)}
.mc .fa,.mc .ba{position:absolute;inset:0;border-radius:calc(var(--cell)*.18);backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center}
.mc .ba{background:radial-gradient(circle at 30% 30%,#7a4ae6,#5426B2 70%);box-shadow:0 4px 0 #3a1a80;border:3px solid #D2C2F6}
.mc .ba i{width:42%;height:42%;border-radius:50%;background:radial-gradient(circle,#FF4A98 0 30%,transparent 32%),radial-gradient(circle,#58E9BF 0 55%,#4ad6ad 56%);opacity:.95}
.mc .fa{background:var(--cream);transform:rotateY(180deg);font-size:calc(var(--cell)*.58);box-shadow:0 4px 0 #b9a6e0;border:3px solid #fff}
.mc.got .fa{box-shadow:0 4px 0 #b9a6e0,inset 0 0 0 4px var(--pink)}
.mc.gotp .fa{box-shadow:0 4px 0 #b9a6e0,inset 0 0 0 4px var(--mint)}
.mc.got,.mc.gotp{animation:pulse1 .45s}
@keyframes pulse1{50%{transform:scale(1.1)}}
.lock #board{pointer-events:none}
/* responsive */
html.land .ttl{text-align:left}
html.land h2{font-size:19px}
html.land .pcards{grid-template-columns:repeat(3,1fr);max-width:400px}
html.short .sub{display:none}
@media (min-width:1100px) and (min-height:600px){
 :root{--tb:76px}
 #top{padding:0 26px}
 .logo{width:132px}
 .ttl{font-size:28px}
 .ib{width:54px;height:54px;border-radius:16px}.ib svg{width:28px;height:28px}
 h2{font-size:28px}.sub{font-size:16px}
 html.land .pcards{grid-template-columns:repeat(3,1fr);max-width:560px;gap:14px}
 .pc b{font-size:18px}.pc small{font-size:13px}
 .diff button{min-width:120px;height:52px;font-size:17px}
 .gc svg{width:84px;height:66px}.gc b{font-size:19px}
 .pill,.sc{height:52px;font-size:16px}.sc b{font-size:24px}
 #status{font-size:18px;padding:7px 18px}
 .bubble{font-size:19px;max-width:260px;padding:10px 16px}
 html.land #panel{padding-right:30px}
}
.bubble.l:after{left:auto;right:-9px;border-right:0;border-left:12px solid #fff}
@media (max-width:520px){.ttl span{display:none}}
h2{text-shadow:0 2px 8px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.5)}
html.land.short .gcards{grid-template-columns:repeat(4,1fr);gap:8px}html.land.short .gc{padding:8px 4px 10px}html.land.short .gc svg{width:48px;height:40px}html.land.short .gc small{display:none}html.land.short .gc b{font-size:14px;text-align:center;line-height:1.15}html.land.short .diff{margin:6px 0 8px}
html.port #panel{padding-top:3px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}html.port #status{margin:4px 0 1px}