:root{
  --bg1:#1b1035;--bg2:#3a1460;--sheet:#2a1452;--card:rgba(255,255,255,.08);--card2:rgba(255,255,255,.14);--line:rgba(255,255,255,.15);
  --txt:#fff;--mut:rgba(255,255,255,.66);--pink:#ff4f9a;--yel:#ffd23f;--cyan:#3ee6d6;--green:#4ade80;--red:#ff6b6b;--purple:#a78bfa;
  --gap:clamp(6px,1.3vh,12px);--btnpad:clamp(9px,1.7vh,15px);--fs:clamp(14px,1.9vh + 4px,17px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg1);color:var(--txt);overscroll-behavior:none;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
body{background:radial-gradient(120% 80% at 50% 0%,var(--bg2),var(--bg1) 70%)}
input,textarea{-webkit-user-select:text;user-select:text}
#app{height:100vh;height:100dvh;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 12px) calc(env(safe-area-inset-bottom) + 10px) calc(env(safe-area-inset-left) + 12px)}
header{flex:0 0 auto;display:flex;align-items:center;gap:8px;height:42px;margin-bottom:8px}
header .title{flex:1;min-width:0;font-weight:900;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo b{color:var(--pink)}
.iconbtn{flex:0 0 auto;background:var(--card);border:1px solid var(--line);color:var(--txt);border-radius:12px;width:40px;height:40px;font-size:18px;cursor:pointer;padding:0}
.iconbtn[hidden]{display:none}
#scores{flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;margin-bottom:8px;scrollbar-width:none}
#scores::-webkit-scrollbar{display:none}
#scores:empty{display:none}
.chip{flex:0 0 auto;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:14px;white-space:nowrap;color:var(--txt)}
.chip b{color:var(--yel);margin-left:6px}
.chip.on{border-color:var(--pink);background:rgba(255,79,154,.2)}
button.chip{cursor:pointer;font:inherit;font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
#view{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}

/* ---------- layout: everything fits, portrait stacks, landscape splits ---------- */
.stage{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--gap);animation:in .22s ease}
.side{min-height:0;min-width:0;display:flex;flex-direction:column;gap:var(--gap)}
.grow{flex:1 1 auto}
.fit{flex:0 0 auto}
.mid{justify-content:center}
.cc{align-items:center;justify-content:center;text-align:center}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (orientation:landscape) and (min-aspect-ratio:5/4){
  .stage.split{flex-direction:row;gap:16px}
  .stage.split>.side{flex:1 1 0;justify-content:center}
  .stage.split>.side.wide{flex:1.6 1 0}
  header{height:36px;margin-bottom:6px}
  .iconbtn{width:36px;height:36px}
}
@media (max-height:620px){ .hide-short{display:none!important} }
@media (max-height:460px){ .hide-xshort{display:none!important} }

.step{font-size:12px;text-transform:uppercase;letter-spacing:1.4px;color:var(--cyan);font-weight:800}
h1{font-size:clamp(20px,2.6vh + 8px,30px);line-height:1.15;margin:0}
h1 em,h2 em{font-style:normal;color:var(--yel)}
h2{font-size:clamp(17px,1.6vh + 8px,22px);margin:0}
p.sub{color:var(--mut);margin:0;font-size:var(--fs);line-height:1.4}
.small{font-size:13px;color:var(--mut)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(10px,1.8vh,16px)}
label{display:block;font-size:13px;color:var(--mut);margin-bottom:5px}
input[type=text],input[type=password],input[type=url]{width:100%;background:rgba(0,0,0,.25);border:1px solid var(--line);color:var(--txt);
  border-radius:13px;padding:clamp(9px,1.5vh,13px) 13px;font-size:16px;outline:none;font-family:inherit}
input:focus{border-color:var(--pink)}
.row{display:flex;gap:8px;align-items:stretch}
.row>*{flex:1 1 0;min-width:0}
.btn{appearance:none;border:0;border-radius:15px;padding:var(--btnpad) 14px;font-size:var(--fs);font-weight:800;color:#1b1035;
  background:var(--yel);width:100%;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;font-family:inherit;text-decoration:none;line-height:1.15;text-align:center}
.btn:active{transform:scale(.97)}
.btn.pink{background:var(--pink);color:#fff}
.btn.cyan{background:var(--cyan)}
.btn.green{background:var(--green)}
.btn.red{background:var(--red);color:#fff}
.btn.ghost{background:var(--card);color:var(--txt);border:1px solid var(--line)}
.btn.small{padding:clamp(7px,1.3vh,11px) 10px;font-size:15px;border-radius:12px}
.btn.big{font-size:clamp(18px,2.4vh + 6px,26px);padding:clamp(12px,2.4vh,22px)}
.btn:disabled{opacity:.4}
.turn{font-size:clamp(16px,1.8vh + 8px,22px);font-weight:800}
.turn b{color:var(--yel)}
.bigemoji{font-size:clamp(44px,9vh,86px);line-height:1}
.tag{display:inline-block;font-size:12px;padding:3px 9px;border-radius:999px;background:rgba(62,230,214,.15);color:var(--cyan);font-weight:800}
.tag.pink{background:rgba(255,79,154,.15);color:var(--pink)}
.tag.yel{background:rgba(255,210,63,.15);color:var(--yel)}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 22px);transform:translateX(-50%);
  background:#000d;padding:10px 16px;border-radius:12px;font-size:14px;z-index:50;max-width:90%;text-align:center;pointer-events:none}
.help ol,.help ul{padding-left:20px;margin:8px 0 14px}
.help li{margin-bottom:7px;color:var(--mut);line-height:1.4}
.help b{color:var(--txt)}
.bigword{font-weight:900;text-align:center;line-height:1.1;word-break:break-word;font-size:clamp(28px,5.5vmin + 10px,64px)}
.answer{color:var(--yel)}
.fill{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--gap)}
.pop{animation:pop .3s ease}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.shake{animation:shake .5s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.timer{font-variant-numeric:tabular-nums;font-weight:900}
.spdrow{display:flex;justify-content:center}
.spd{background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:999px;padding:6px 13px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit}
.spd.on{background:rgba(62,230,214,.18);border-color:var(--cyan);color:var(--cyan)}

/* modal (its own content may scroll; the page never does) */
.modal{position:fixed;inset:0;background:rgba(5,2,15,.7);display:flex;align-items:center;justify-content:center;z-index:30;
  padding:calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px);animation:in .18s}
.sheet{background:var(--sheet);border:1px solid var(--line);border-radius:20px;padding:16px;width:min(480px,100%);max-height:100%;overflow:auto;
  display:flex;flex-direction:column;gap:10px}
.sheet.video{width:min(420px,100%);height:100%;padding:10px}
.sheet.video iframe{flex:1;min-height:0;width:100%;border:0;border-radius:12px;background:#fff}
.sheet.editor{height:100%;width:min(640px,100%)}
.sel{width:100%;flex:0 0 auto;background:rgba(0,0,0,.3);border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:10px;font-size:15px;font-family:inherit}
.sel option{background:#2a1452}
/* ---------- new games ---------- */
.netview{flex:1;min-height:0;display:flex;flex-direction:column}
.rmbar{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:6px}
.rmbar .btn{width:auto;min-width:220px}
.netcfg{display:flex;flex-direction:column;gap:6px;padding:8px 10px}
.netcfg label{margin:0}
.yr{font-size:1.1em;color:#fff;background:rgba(0,0,0,.3);border-radius:8px;padding:2px 10px;display:inline-block;margin-top:6px}
.simon{position:relative;width:min(100%,46vh,420px);aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;gap:4%;padding:4%;border-radius:50%;background:#111827;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.spad{border:0;cursor:default;background:var(--c);opacity:.38;transition:opacity .1s,filter .1s}
.spad.p0{border-radius:100% 0 0 0}.spad.p1{border-radius:0 100% 0 0}.spad.p2{border-radius:0 0 0 100%}.spad.p3{border-radius:0 0 100% 0}
.spad.lit{opacity:1;filter:brightness(1.35) drop-shadow(0 0 18px var(--c))}
.simon.live .spad{cursor:pointer;opacity:.7}
.simon.live .spad:active{opacity:1}
.simon .score{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:28%;aspect-ratio:1;border-radius:50%;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:clamp(16px,3vh,26px);pointer-events:none}
.chip.dead{opacity:.4;text-decoration:line-through}
.ab{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));width:min(100%,40vh,420px);aspect-ratio:1;border-radius:10px;overflow:hidden;
  background:linear-gradient(135deg,#1e3a8a,#312e81);box-shadow:0 0 0 3px #6366f1,0 8px 20px rgba(0,0,0,.4)}
.ab.own{width:min(100%,21vh,260px);background:linear-gradient(135deg,#047857,#065f46);box-shadow:0 0 0 3px #34d399,0 8px 20px rgba(0,0,0,.4)}
.ab.own.placing{width:min(100%,46vh,420px)}
@media (orientation:landscape) and (min-aspect-ratio:5/4){ .ab{width:min(100%,78vh,420px)}.ab.own{width:min(100%,40vh,260px)}.ab.own.placing{width:min(100%,80vh,420px)} }
.ab .ac{border:0;border-radius:0;background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff;font-size:clamp(9px,1.8vh,16px);padding:0;font-weight:900;position:relative;z-index:2;
  min-width:0;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;line-height:0;font-family:inherit}
.ab.live .ac[data-f]{cursor:crosshair}
.ab.live .ac[data-f]:hover{background:rgba(250,204,21,.45)}
.ab.placing .ac{cursor:pointer;z-index:0}
.ac.pv{background:rgba(74,222,128,.45)}.ac.pvbad{background:rgba(239,68,68,.45)}
.ac.hit{background:rgba(249,115,22,.75)}.ac.sunk{background:rgba(127,29,29,.55)}.ac.miss{background:rgba(255,255,255,.08);color:#bfdbfe}
.ac.last{outline:3px solid var(--yel);outline-offset:-3px}
.shiplayer{position:absolute;inset:0;pointer-events:none;z-index:1}
.ab.placing .shiplayer{z-index:1}
.shipbox{position:absolute;padding:3%}
.shipbox .ship{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))}
.ship .hull{fill:#94a3b8;stroke:#334155;stroke-width:2}
.ship .deck{stroke:#cbd5e1;stroke-width:2;stroke-dasharray:4 3}
.ship .top{fill:#475569;stroke:#1e293b;stroke-width:1.5}
.ship.dead .hull{fill:#7f1d1d;stroke:#450a0a}.ship.dead .top{fill:#3f0d0d}.ship.dead{opacity:.85}
.ship.ghost .hull{fill:#64748b}
.ship.enemy .hull{fill:#a5b4fc;stroke:#3730a3}.ship.enemy .top{fill:#4f46e5}
.abpair{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.abpair .ab,.abpair .ab.own{width:min(44vw,34vh,300px)}
.dock{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.dockship{display:flex;align-items:center;gap:6px;border:2px solid var(--line);background:var(--card);border-radius:12px;padding:6px 10px;color:var(--txt);cursor:pointer;font-family:inherit}
.dockship svg{height:22px;width:auto}
.dockship.on{border-color:var(--yel);background:rgba(255,210,63,.18)}
.fleetleft{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fl{display:flex;align-items:center;gap:4px;background:var(--card);border-radius:10px;padding:3px 8px;font-size:12px}
.fl .flship svg{height:14px;width:auto;display:block}
.fl.down{opacity:.5;text-decoration:line-through}
.captain{display:flex;flex-direction:column;align-items:center;text-align:center;background:linear-gradient(135deg,rgba(255,79,154,.3),rgba(255,210,63,.25));border:2px solid var(--yel);border-radius:14px;padding:6px 10px}
.captain b{font-size:clamp(18px,3vh,24px)}
.captain span{min-height:1.3em;font-weight:700;color:var(--yel)}
.stage-in{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--gap)}
/* ai mi gercek mi */
.aihead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto}
.pair.aimi{gap:8px}
.aipic{position:relative;flex:1 1 0;min-height:0;min-width:0;border:0;padding:0;border-radius:16px;overflow:hidden;background:#000;cursor:pointer;outline:3px solid transparent;outline-offset:-3px;transition:outline-color .15s,transform .15s}
.aipic img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none}
.aipic:hover{outline-color:rgba(255,255,255,.5)}
.aipic.picked{outline:5px solid var(--yel);outline-offset:-5px}
.aipic.isai{outline:6px solid var(--pink);outline-offset:-6px}
.aipic.isreal{opacity:.75}
.aipic.isai.picked{outline-color:var(--green)}
.ainum,.aitag{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.65);color:#fff;font-weight:900;border-radius:10px;padding:3px 10px}
.aitag{left:50%;top:auto;bottom:10px;transform:translateX(-50%);white-space:nowrap}
.isai .aitag{background:var(--pink)}
.aisc{justify-content:center;flex:0 0 auto}
.aisc small{color:var(--green);font-weight:900}
/* bomba imha */
.bombsvg{width:100%;max-width:420px;max-height:25vh;flex:0 1 auto;min-height:0;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))}
@media (orientation:landscape) and (min-aspect-ratio:5/4){ .bombsvg{max-height:52vh} }
.lcdt{font:700 26px/1 ui-monospace,Consolas,monospace;fill:#ef4444;color:#ef4444;letter-spacing:2px}
.lcdt.hot{fill:#ff2d2d;animation:blinkt .5s infinite}
@keyframes blinkt{50%{opacity:.45}}
.bled{fill:#3f0d0d}.bled.on{fill:#ef4444}
.lcdbox{background:#0b0f0c;border:3px solid #6b7280;border-radius:8px;padding:6px 16px}
.lcdbox .lcdt{font-size:clamp(26px,5vh,40px)}
.spark{animation:spark .25s infinite alternate}
@keyframes spark{to{r:11;fill:#f97316}}
.binfo{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.serial{background:#f8fafc;color:#111;border-radius:6px;padding:3px 9px;font:700 13px ui-monospace,Consolas,monospace}
.serial b{font-size:16px;letter-spacing:2px}
.chip.ind i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#444;margin-right:5px}
.chip.ind.lit i{background:#facc15;box-shadow:0 0 8px #facc15}
.bstr{display:inline-flex;gap:5px}
.bstr i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.3)}
.bstr i.on{background:#ef4444;border-color:#fca5a5;box-shadow:0 0 8px #ef4444}
.bhead{justify-content:space-between;align-items:center;flex:0 0 auto}
.bdots{display:flex;gap:5px;justify-content:center;flex:0 0 auto}
.bdots button{width:clamp(26px,4.4vh,36px);aspect-ratio:1;border-radius:50%;border:2px solid var(--line);background:var(--card);color:var(--txt);font-weight:900;font-family:inherit;cursor:pointer;padding:0}
.bdots .done{background:rgba(74,222,128,.35);border-color:var(--green)}
.bdots .cur{border-color:var(--yel);color:var(--yel)}
.bdots .tabsel{outline:3px solid var(--pink);outline-offset:1px}
.bombop .bdots button{cursor:default}
.bmodhead{text-align:center;flex:0 0 auto}
.bmod{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;transition:opacity .3s}
.bmod.solved{opacity:.35;pointer-events:none}
.manualbox{flex:1 1 auto;min-height:0;overflow:auto;background:#f5f0e1;color:#1f2937;border-radius:12px;padding:10px 14px;font-size:clamp(13px,1.8vh,15px);line-height:1.4;box-shadow:inset 0 0 0 2px #d6cfb8}
.manualbox h3{margin:0 0 6px;font-size:1.1em}
.manualbox b{color:#991b1b}
.manualbox .mt{border-collapse:collapse;width:100%;margin:6px 0;font-size:.95em}
.manualbox .mt th,.manualbox .mt td{border:1px solid #c8bfa5;padding:3px 6px;text-align:left;vertical-align:top}
.manualbox .mt th.sym{font-size:1.4em;text-align:center}
.manualbox .mono{font-family:ui-monospace,Consolas,monospace;font-weight:700;letter-spacing:2px}
.manualbox .ml{margin:4px 0;padding-left:20px}
.symcols{display:flex;gap:8px;justify-content:center;margin-top:6px}
.symcols div{display:flex;flex-direction:column;align-items:center;background:#e9e2cc;border-radius:8px;padding:4px 8px;font-size:1.3em;line-height:1.35}
.symcols div b{font-size:.6em;color:#555}
.bombop.hurt{animation:hurt .5s}
@keyframes hurt{20%,60%{transform:translateX(-8px);background:rgba(239,68,68,.35)}40%,80%{transform:translateX(8px)}}
.boomed{animation:boomsh .8s}
@keyframes boomsh{0%{background:#fff}20%{background:#f97316;transform:scale(1.04)}40%{transform:translate(-10px,6px)}60%{transform:translate(10px,-6px)}100%{background:transparent}}
.btn.radio{flex:0 0 auto;align-self:center;width:auto;min-width:200px}
.btn.radio.live{animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,79,154,.25)}}
/* bomb modules */
.mplate{position:relative;background:linear-gradient(160deg,#4b5563,#1f2937);border:3px solid #111827;border-radius:14px;padding:12px;box-shadow:inset 0 2px 0 rgba(255,255,255,.15),0 8px 20px rgba(0,0,0,.4);width:min(100%,400px)}
.mplate .btn{width:auto}
.lid{aspect-ratio:4/3;max-height:30vh;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;place-items:center;background:repeating-linear-gradient(45deg,#4b5563 0 12px,#475569 12px 24px)}
.lid .q0{grid-area:1/1}.lid .q1{grid-area:1/2}.lid .q2{grid-area:2/2}.lid .q3{grid-area:2/1}
.lidtxt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;color:rgba(255,255,255,.25);letter-spacing:6px;pointer-events:none}
.latch{width:clamp(54px,9vh,76px);aspect-ratio:1.4;border-radius:10px;border:3px solid #111;background:var(--c);color:#111;font-size:22px;font-weight:900;cursor:pointer;box-shadow:inset 0 -6px 0 rgba(0,0,0,.25);transition:transform .25s}
.latch span{background:rgba(255,255,255,.8);border-radius:6px;padding:0 6px}
.latch.open{transform:rotate(90deg) scale(.85);opacity:.55}
.lid.opened{animation:lidup .6s forwards}
@keyframes lidup{to{transform:perspective(500px) rotateX(55deg);opacity:.4}}
.screws{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.screw{background:none;border:0;color:#e5e7eb;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:inherit;padding:0}
.screw svg{width:100%;max-width:70px;transition:transform .25s}
.screw small{font-size:11px}
.screw.out{opacity:.25;transform:translateY(-10px);transition:.4s}
.wires{display:flex;flex-direction:column;gap:2px;padding:8px 6px}
.wire{background:none;border:0;padding:0;cursor:pointer;display:flex;align-items:center;gap:6px;color:#cbd5e1;font-family:inherit}
.wire svg{flex:1;height:clamp(20px,3.4vh,30px)}
.wire small{width:52px;font-size:11px;text-align:left}
.wire.cut .w{stroke-dasharray:130 40 200;opacity:.7}
.wire.cut small{text-decoration:line-through}
.btnmod{display:flex;align-items:center;justify-content:center;gap:18px;min-height:clamp(150px,26vh,230px)}
.bigbtn{width:clamp(110px,20vh,170px);aspect-ratio:1;border-radius:50%;border:6px solid #111;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.45),var(--c) 45%);color:var(--t);font-family:inherit;font-weight:900;font-size:clamp(16px,2.8vh,22px);cursor:pointer;box-shadow:0 8px 0 #111;touch-action:none;user-select:none;-webkit-user-select:none}
.bigbtn:active{transform:translateY(5px);box-shadow:0 3px 0 #111}
.strip{width:18px;height:clamp(110px,20vh,170px);border-radius:9px;background:#111;border:2px solid #000}
.strip.on{box-shadow:0 0 18px rgba(255,255,255,.6)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:280px}
.keypad button{border:0;border-radius:8px;background:#e5e7eb;color:#111;font-family:inherit;font-weight:800;font-size:clamp(16px,2.6vh,22px);padding:clamp(4px,1vh,10px) 0;cursor:pointer;box-shadow:0 3px 0 #6b7280}
.keypad button:active{transform:translateY(2px);box-shadow:0 1px 0 #6b7280}
.kdisp{grid-column:1/-1;background:#0b0f0c;color:#4ade80;font:700 clamp(22px,4vh,32px) ui-monospace,Consolas,monospace;letter-spacing:10px;text-align:center;border-radius:8px;padding:4px}
.swmod{display:flex;flex-direction:column;align-items:center;gap:10px}
.swsym{position:absolute;top:6px;left:10px;font-size:26px;color:#facc15}
.swrow{display:flex;gap:10px;margin-top:20px}
.tog{width:clamp(34px,6vh,46px);height:clamp(64px,11vh,90px);border-radius:10px;border:3px solid #111;background:#111827;position:relative;cursor:pointer;padding:0}
.tog i{position:absolute;left:4px;right:4px;height:44%;bottom:4px;border-radius:6px;background:linear-gradient(#e5e7eb,#9ca3af);transition:.15s}
.tog.up i{bottom:52%}
.dial{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px}
.leds{display:flex;gap:16px}
.leds i{width:16px;height:16px;border-radius:50%;border:2px solid #111}
.dialsvg{width:clamp(90px,18vh,160px)}
.dialn{font-size:24px;min-width:30px;text-align:center}
.dial .row{align-items:center;flex:0 0 auto}
.syms{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:260px}
.syms button{aspect-ratio:1.5;border-radius:10px;border:3px solid #111;background:#f5f0e1;color:#111;font-size:clamp(30px,6vh,46px);cursor:pointer;box-shadow:0 5px 0 #111}
.syms button.down{transform:translateY(4px);box-shadow:0 1px 0 #111;background:#bbf7d0}
.seals{display:flex;gap:14px;justify-content:center;padding:20px 10px}
.seal{width:clamp(64px,11vh,90px);aspect-ratio:1;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#f87171,#991b1b 70%);box-shadow:0 0 0 6px rgba(153,27,27,.5),0 6px 10px rgba(0,0,0,.5);color:#fde68a;font-family:serif;font-weight:900;font-size:28px;cursor:pointer}
.seal.cut{clip-path:polygon(0 0,100% 0,100% 40%,0 60%);opacity:.6}
.leds span{display:flex;flex-direction:column;align-items:center;gap:2px}.leds small{font-size:10px;color:#e5e7eb}
.morse{display:flex;flex-direction:column;align-items:center;gap:8px}
.mlamp{width:clamp(44px,8vh,64px);aspect-ratio:1;border-radius:50%;background:#3f3f0d;border:4px solid #111;transition:background .05s}
.mlamp.on{background:#fde047;box-shadow:0 0 24px #fde047}
.morse .row{flex:0 0 auto;align-items:center}
.mtwo{display:flex;gap:8px;align-items:flex-start}.mtwo .mt{font-size:.85em}
.fuses{display:flex;flex-direction:column;align-items:center;gap:10px}
.fuserow{display:flex;gap:8px}
.fuse{width:clamp(42px,7vh,56px);height:clamp(80px,14vh,110px);border-radius:10px;border:3px solid #111;background:linear-gradient(90deg,#d1d5db,#f8fafc 40%,#9ca3af);position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:inherit;padding:0;transition:transform .2s}
.fuse span{background:var(--c);color:#fff;font-weight:900;font-size:18px;border-radius:6px;padding:0 7px;text-shadow:0 1px 2px #000}
.fuse small{font-size:9px;color:#111}
.fuse.out{transform:translateY(-22px) rotate(-8deg);opacity:.55}
.maze{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.mzgrid{display:grid;grid-template-columns:repeat(6,1fr);width:clamp(140px,26vh,200px);aspect-ratio:1;background:#111827;border-radius:8px;padding:4px;gap:2px}
.mzgrid i{background:#1f2937;border-radius:3px;display:flex;align-items:center;justify-content:center}
.mzgrid i.mk{box-shadow:inset 0 0 0 3px #22c55e;border-radius:50%}
.mzgrid .me{width:55%;height:55%;border-radius:50%;background:#fff}
.mzgrid .goal{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:14px solid #ef4444}
.mzpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,40px);gap:4px}
.mzpad button{border:0;border-radius:8px;background:#e5e7eb;font-size:18px;cursor:pointer}
.mzpad [data-d="n"]{grid-area:1/2}.mzpad [data-d="w"]{grid-area:2/1}.mzpad [data-d="e"]{grid-area:2/3}.mzpad [data-d="s"]{grid-area:3/2}
.mazes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0}
.mazes div{background:#e9e2cc;border-radius:8px;padding:4px;text-align:center}
.mazesvg{width:100%;max-width:150px}
.simon4{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:260px}
.simon4 button{aspect-ratio:1.4;border-radius:12px;border:3px solid #111;background:var(--c);opacity:.45;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:4px}
.simon4 button small{font-size:10px;color:#fff;text-shadow:0 1px 2px #000}
.simon4 button.lit{opacity:1;box-shadow:0 0 22px var(--c)}
.simon4 .small{grid-column:1/-1;text-align:center;color:#e5e7eb}
.wheels{display:flex;flex-direction:column;align-items:center;gap:10px}
.wrow{display:flex;gap:6px}
.wheel{display:flex;flex-direction:column;align-items:center;background:#111827;border-radius:10px;padding:4px}
.wheel b{font:900 clamp(22px,4vh,30px) ui-monospace,Consolas,monospace;color:#fde68a;width:1.4em;text-align:center}
.wheel button{border:0;background:#374151;color:#fff;border-radius:6px;width:34px;cursor:pointer}
.wordlist{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.wordlist span{background:#e9e2cc;border-radius:6px;padding:2px 8px;font-family:ui-monospace,Consolas,monospace;font-weight:700}
.isletter{font-size:clamp(70px,16vh,150px);font-weight:900;line-height:1;color:var(--yel);text-shadow:0 6px 24px rgba(0,0,0,.4)}
.isletter.sm{font-size:clamp(34px,6vh,56px)}
.cdwrap{font-weight:800}.cdwrap .cd{font-size:28px}
.isin{display:flex;align-items:center;gap:8px}
.isin label{flex:0 0 64px;margin:0;font-weight:800;color:var(--txt)}
.isin input{padding:9px 12px}
.iswrap{flex:1;min-height:0;overflow:auto}
.istable{display:grid;gap:4px;min-width:520px}
.ish,.isr{display:grid;grid-template-columns:90px repeat(6,1fr) 50px;gap:4px;align-items:center}
.ish b{font-size:12px;color:var(--mut);text-align:center}
.isr>b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.isc{border:1px solid var(--line);border-radius:8px;padding:5px 4px;font:inherit;font-size:12.5px;color:var(--txt);background:var(--card);text-align:center;position:relative;min-height:34px;word-break:break-word}
.isc.ok{border-color:rgba(74,222,128,.5)}.isc.bad{background:rgba(255,107,107,.25);border-color:var(--red);text-decoration:line-through}.isc.empty{opacity:.5}
.isc[data-mark]{cursor:pointer}
.isc i{display:block;font-style:normal;font-weight:900;font-size:11px;color:var(--yel)}
.isr .pos{color:var(--green);text-align:center}.isr .neg{color:var(--red);text-align:center}
@media (max-width:560px){ .istable{min-width:0}.ish,.isr{grid-template-columns:46px repeat(6,minmax(0,1fr)) 30px;gap:3px}.isc{font-size:11px;padding:4px 2px;min-height:30px}.isr>b{font-size:11.5px}.ish b{font-size:10.5px} }
.ordlist{flex:1;min-height:120px;overflow:auto;display:flex;flex-direction:column;gap:4px;touch-action:none;padding-right:2px}
.orditem{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 8px;cursor:grab;font-size:14px}
.orditem.dragging{border-color:var(--pink);background:rgba(255,79,154,.22);transform:scale(1.02)}
.orditem .grip{color:var(--mut);font-size:18px}
.orditem b{min-width:22px;color:var(--yel)}
.orditem .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orditem button{background:var(--card2);border:0;color:var(--txt);border-radius:8px;width:30px;height:28px;cursor:pointer}
.orditem button:disabled{opacity:.3}
.ordpage{text-align:center;font-size:12px;color:var(--cyan);margin:2px 0}
.tabuadd{display:flex;flex-direction:column;gap:6px;padding:8px;flex:0 0 auto}
.tbx{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px}
.tbx input{padding:8px 10px;font-size:14px}
.ta{flex:1 1 auto;min-height:140px;width:100%;resize:none;background:rgba(0,0,0,.3);border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:10px;
  font-size:15px;line-height:1.5;font-family:inherit;outline:none;white-space:pre;overflow:auto}
.ta:focus{border-color:var(--pink)}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--txt);margin:4px 0;cursor:pointer}
.chk input{width:20px;height:20px;accent-color:var(--pink)}
[hidden]{display:none!important}
.admodal{position:fixed;inset:0;z-index:60;background:#000e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px)}
.adbox{flex:1;min-height:0;width:min(560px,100%);display:flex;align-items:center;justify-content:center}
.adbox a{display:contents}
.adbox img,.adbox video{max-width:100%;max-height:100%;border-radius:14px;object-fit:contain}
.adbar{display:flex;align-items:center;justify-content:space-between;gap:10px;width:min(560px,100%)}
.adbar .btn{width:auto}
.list{display:flex;flex-direction:column;gap:6px}
.li{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:7px 10px;font-size:14px}
.li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li button{flex:0 0 auto;background:none;border:0;color:var(--txt);font-size:17px;cursor:pointer;padding:4px}

/* ---------- home ---------- */
.shead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto}
.pager{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mut)}
.pager button{background:var(--card);border:1px solid var(--line);color:var(--txt);width:32px;height:30px;border-radius:9px;font-size:16px;cursor:pointer}
.pager button:disabled{opacity:.3}
.gside{flex:1 1 auto}
.pagebar{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.pbtn{flex:0 0 auto;border:1px solid var(--line);background:var(--card2);color:var(--txt);border-radius:12px;padding:clamp(7px,1.2vh,10px) 14px;font:inherit;font-weight:800;font-size:15px;cursor:pointer}
.pbtn.next{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 0 0 0 rgba(255,79,154,.6);animation:nudge 1.8s ease-in-out infinite}
.pbtn:disabled{opacity:.3;animation:none;background:var(--card);border-color:var(--line);color:var(--txt)}
@keyframes nudge{0%,100%{transform:translateX(0);box-shadow:0 0 0 0 rgba(255,79,154,.5)}50%{transform:translateX(4px);box-shadow:0 0 0 6px rgba(255,79,154,0)}}
.dots{flex:1;display:flex;justify-content:center;gap:6px}
.dot{width:clamp(30px,4.2vh,38px);height:clamp(30px,4.2vh,38px);border-radius:50%;border:2px solid var(--line);background:transparent;color:var(--mut);font:inherit;font-weight:900;font-size:14px;cursor:pointer;padding:0}
.dot.on{background:#fff;border-color:#fff;color:#1b1035}
.ggrid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,1fr);gap:clamp(6px,1.1vh,10px)}
.gcard{border:0;border-radius:16px;display:flex;align-items:center;gap:10px;padding:6px 12px;min-height:0;overflow:hidden;cursor:pointer;
  background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;text-align:left;font-family:inherit;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.gcard .em{font-size:clamp(22px,3.6vh,36px);flex:0 0 auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.gcard .tx{min-width:0;display:flex;flex-direction:column}
.gcard .nm{font-weight:900;font-size:clamp(13px,1.5vh + 5px,18px);line-height:1.1;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.gcard .ds{font-size:12px;opacity:.85;line-height:1.2;margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gcard:active{transform:scale(.97)}
.gcard.ph{visibility:hidden}
@media (max-height:700px){ .gcard .ds{display:none} }
.vside{flex:0 0 clamp(112px,23vh,210px)}
.vrow{flex:1;min-height:0;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.vrow::-webkit-scrollbar{display:none}
.vcard{flex:0 0 auto;height:100%;aspect-ratio:9/14;border-radius:14px;border:1px solid var(--line);cursor:pointer;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#833ab4,#fd1d1d 60%,#fcb045);color:#fff;font-family:inherit;padding:8px;display:flex;flex-direction:column;justify-content:flex-end;text-align:left}
.vcard .pl{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);font-size:clamp(22px,4vh,38px);opacity:.95}
.vcard .vt{font-size:12px;font-weight:800;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.vempty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;border:1px dashed var(--line);border-radius:14px;color:var(--mut);font-size:14px;padding:10px}
@media (orientation:landscape) and (min-aspect-ratio:5/4){
  .stage.split.home>.gside{flex:2.2 1 0}
  .stage.split.home>.vside{flex:1 1 0}
  .ggrid{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr)}
  .gcard{flex-direction:column;justify-content:center;text-align:center;gap:4px}
  .gcard .ds{display:none}
  .vrow{flex-wrap:wrap;overflow-x:hidden;overflow-y:auto;align-content:flex-start}
  .vcard{height:auto;width:calc(50% - 4px)}
}

/* ---------- desktop / mouse devices: compact cards, no stretched controls ---------- */
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .ggrid{flex:0 0 auto;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:clamp(130px,22vh,190px);align-content:start}
  .stage.split.home>.gside{justify-content:flex-start}
  .pagebar{margin-top:6px}
  .gcard{flex-direction:column;justify-content:center;text-align:center;gap:6px;padding:12px;transition:transform .15s,box-shadow .15s}
  .gcard .tx{align-items:center}
  .gcard .ds{display:-webkit-box!important;font-size:12.5px}
  .gcard:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.35)}
  .stage.split.home>.gside{flex:2.8 1 0}
  .stage.split.home>.vside{flex:1 1 0;max-width:340px}
  .stage{align-items:stretch;justify-content:center}
  .stage.split:not(.home)>.side:not(.wide){max-width:500px}
  .stage>.btn,.fill>.btn,.cc>.btn{max-width:440px;align-self:center}
  .hu .btn{height:auto}
  .pbtn:hover,.dot:hover{filter:brightness(1.15)}
}

/* setup */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pgrid .pi{position:relative}
.pgrid .pi input{padding-right:30px}
.pgrid .pi button{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--mut);font-size:17px;cursor:pointer}

/* ---------- tersten ---------- */
.micwrap{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:0}
.mic{position:relative;width:clamp(86px,17vh,140px);height:clamp(86px,17vh,140px);border-radius:50%;border:0;background:linear-gradient(145deg,#ff6fb0,#e0287a);
  color:#fff;font-size:clamp(34px,6vh,54px);box-shadow:0 10px 34px rgba(255,79,154,.45);cursor:pointer}
.mic.rec{background:linear-gradient(145deg,#ff6b6b,#d61f3c);animation:pulse 1s infinite}
.mic .ring{position:absolute;inset:-9px;border-radius:50%;border:4px solid rgba(255,255,255,.35);transform:scale(var(--lv,1));transition:transform .06s}
@keyframes pulse{50%{box-shadow:0 0 0 14px rgba(255,107,107,.15)}}
.mictxt{margin-top:10px;font-weight:800;font-size:16px;text-align:center}
.mtimer{color:var(--mut);font-variant-numeric:tabular-nums;font-size:14px;min-height:18px}
canvas.wave{width:100%;height:clamp(40px,8vh,70px);display:block;border-radius:12px;background:rgba(0,0,0,.2);flex:0 0 auto}
.guess{font-size:clamp(17px,2.2vh + 6px,22px);font-weight:800;text-align:center;word-break:break-word}
.reveal{font-size:clamp(22px,3vh + 8px,32px);font-weight:900;color:var(--yel);text-align:center;word-break:break-word}
.vs{color:var(--mut);text-align:center;font-size:13px}

/* ---------- mayın ---------- */
.sqwrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;container-type:size}
.mgrid{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(9,1fr);gap:clamp(2px,.5vmin,5px)}
@supports (width:1cqw){ .mgrid{width:min(100cqw,100cqh);height:min(100cqw,100cqh)} }
.cell{border:0;border-radius:clamp(4px,1vmin,9px);background:linear-gradient(145deg,#5b3aa0,#3d2475);cursor:pointer;padding:0;font-size:clamp(10px,3vmin,24px);color:#fff;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.mgrid .cell{font-size:clamp(16px,var(--cf,3vmin),64px);border-radius:clamp(8px,2vmin,18px)}
.cell.safe{background:rgba(74,222,128,.22);box-shadow:none}
.cell.boom{background:var(--red);animation:pop .3s}
.cell:active{transform:scale(.92)}

/* ---------- duel (split screen 2 players) ---------- */
.duel{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--gap)}
.half{flex:1 1 0;min-height:0;border-radius:20px;border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,1vh,10px);padding:10px;position:relative;text-align:center}
.half.flip{transform:rotate(180deg)}
.half .pn{font-weight:900;font-size:clamp(16px,2vh + 6px,24px)}
.half .role{font-size:13px;color:var(--mut)}
.half .letter{font-size:clamp(54px,14vmin,150px);font-weight:900;line-height:1;color:var(--yel)}
.scorebar{display:flex;align-items:center;gap:12px}
.scorebar b{font-size:clamp(24px,4vh,38px);min-width:48px;text-align:center}
.scorebar button{width:clamp(40px,6.5vh,56px);height:clamp(40px,6.5vh,56px);border-radius:50%;border:1px solid var(--line);background:var(--card2);color:#fff;font-size:24px;font-weight:900;cursor:pointer}
.duelmid{flex:0 0 auto;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.duelmid .btn{width:auto;flex:1 1 auto}
.hint{font-weight:900;font-size:clamp(18px,2.4vh + 6px,26px);letter-spacing:4px;color:var(--cyan);text-align:center}
@media (orientation:landscape) and (min-aspect-ratio:5/4){
  .duel{flex-direction:row}
  .half.flip{transform:none}
  .duelmid{flex-direction:column;flex:0 0 clamp(130px,24vw,220px);flex-wrap:nowrap}
  .duelmid .btn{width:100%;flex:0 0 auto}
}
/* Harf Düellosu: both players upright, side by side in every orientation */
.duel.lr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto;grid-template-areas:"a b" "m m"}
.duel.lr .h0{grid-area:a}.duel.lr .h1{grid-area:b}
.duel.lr .duelmid{grid-area:m;flex-direction:row;flex-wrap:wrap}
.duel.lr .half .letter{font-size:clamp(54px,min(22vw,16vh),170px)}
@media (orientation:landscape) and (min-aspect-ratio:5/4){
  .duel.lr{grid-template-columns:minmax(0,1fr) clamp(150px,24vw,240px) minmax(0,1fr);grid-template-rows:1fr;grid-template-areas:"a m b"}
  .duel.lr .duelmid{flex-direction:column}
}
.half.red{background:#b91c1c;border-color:#ef4444}
.half.green{background:#15803d;border-color:var(--green)}
.half .big{font-size:clamp(30px,6vmin + 6px,64px);font-weight:900}

/* ---------- heads up ---------- */
.hu{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;gap:var(--gap)}
.hu .hutop{grid-column:1/3;display:flex;justify-content:space-between;align-items:center;font-weight:800}
.hu .huword{grid-column:1/3;display:flex;align-items:center;justify-content:center;border-radius:22px;background:var(--card);border:1px solid var(--line);padding:10px;min-height:0}
.hu .btn{height:clamp(56px,11vh,110px);font-size:clamp(20px,2.6vh + 6px,30px)}
@media (orientation:landscape) and (min-aspect-ratio:5/4){
  .hu{grid-template-columns:clamp(110px,20vw,200px) 1fr clamp(110px,20vw,200px);grid-template-rows:auto 1fr}
  .hu .hutop{grid-column:1/4}
  .hu .huword{grid-column:2;grid-row:2}
  .hu .pas{grid-column:1;grid-row:2;height:auto}
  .hu .ok{grid-column:3;grid-row:2;height:auto}
}
.count3{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(80px,26vmin,220px);font-weight:900;color:var(--yel);background:rgba(27,16,53,.92);z-index:5;border-radius:20px}

/* ---------- kes ---------- */
.cvwrap{flex:1;min-height:0;position:relative;border-radius:20px;background:radial-gradient(circle at 50% 45%,#3c2470,#24123f);border:1px solid var(--line);overflow:hidden}
.cvwrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.res{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- renk ---------- */
.balls{display:flex;justify-content:center;gap:clamp(6px,2vmin,16px)}
.ball{width:clamp(44px,min(15vw,11vh),92px);aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;position:relative;
  box-shadow:inset -6px -8px 14px rgba(0,0,0,.3),inset 5px 6px 10px rgba(255,255,255,.35),0 6px 14px rgba(0,0,0,.35);transition:transform .15s}
.ball.sel{transform:translateY(-10px) scale(1.06);outline:4px solid #fff;outline-offset:3px}
.dragzone{touch-action:none}
.ball.lift{transition:none;z-index:2;box-shadow:inset -6px -8px 14px rgba(0,0,0,.3),inset 5px 6px 10px rgba(255,255,255,.35),0 14px 26px rgba(0,0,0,.5)}
.ball.hidden{background:linear-gradient(145deg,#5b3aa0,#3d2475)!important;color:#fff;font-size:clamp(18px,3vh,30px);font-weight:900}
.marks{display:flex;justify-content:center;gap:clamp(6px,2vmin,16px)}
.marks span{width:clamp(44px,min(15vw,11vh),92px);text-align:center;font-size:clamp(18px,3vh,30px);font-weight:900}
.mini{display:inline-flex;gap:3px;vertical-align:middle}
.mini i{width:12px;height:12px;border-radius:50%;display:inline-block;position:relative}
.mini i.ok::after{content:"";position:absolute;inset:-3px;border:2px solid var(--green);border-radius:50%}

/* ---------- ring timer ---------- */
.ring{width:clamp(120px,26vh,230px);aspect-ratio:1;position:relative;flex:0 0 auto}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(40px,9vh,90px);font-weight:900}

.okres{font-weight:900;font-size:clamp(28px,6vmin,56px);min-height:1.2em;color:var(--yel)}

/* ---------- zarlı mayın / pringles ---------- */
.die{width:clamp(56px,10vh,90px);height:clamp(56px,10vh,90px);filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));transition:transform .07s}
.dierow{display:flex;align-items:center;gap:14px}
.dierow>div:last-child{flex:1}
.plate{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4%;padding:7%;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,#f8fafc 0 55%,#cbd5e1 70%,#94a3b8 72%);box-shadow:0 14px 30px rgba(0,0,0,.4)}
@supports (width:1cqw){ .plate{width:min(100cqw,100cqh);height:min(100cqw,100cqh)} }
.chipbtn{border:0;background:none;padding:0;cursor:pointer;position:relative;transition:transform .15s,opacity .3s}
.chipbtn svg{width:100%;height:100%;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
.chipbtn:active{transform:scale(.9)}
.chipbtn.armed::after{content:"💣";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(18px,5vmin,40px)}
.chipbtn.armed svg{filter:hue-rotate(-25deg) saturate(1.6) drop-shadow(0 0 6px #ef4444)}
.chipbtn.eaten{opacity:.12;pointer-events:none;transform:scale(.7)}
.chipbtn.boom{animation:pop .4s}
.chipbtn.boom::after{content:"💥";position:absolute;inset:-20%;display:flex;align-items:center;justify-content:center;font-size:clamp(40px,12vmin,90px)}
.chipbtn.boomed{pointer-events:none;opacity:.55}
.chipbtn.boomed::after{content:"💥";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(20px,6vmin,46px)}

/* ---------- açık artırma ---------- */
.chips.tight{gap:4px}
.chips.tight .chip{font-size:12.5px;padding:4px 9px}
.bidder{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 10px;display:flex;flex-direction:column;gap:6px;min-height:0}
.bidder.on{border-color:var(--pink);background:rgba(255,79,154,.12)}
.bidder .row>*{flex:0 1 auto}
.money{margin-left:auto;font-weight:900;color:var(--green);font-size:18px}
.owned{max-height:clamp(30px,8vh,80px);overflow:hidden}
.owned .chip{font-size:12px;padding:3px 8px}
.stepper{display:flex;align-items:center;justify-content:center;gap:6px}
.stepper b{min-width:72px;text-align:center;font-size:clamp(24px,4vh,34px)}
.stepper button{border:1px solid var(--line);background:var(--card2);color:var(--txt);border-radius:12px;font:inherit;font-weight:900;font-size:16px;padding:8px 12px;cursor:pointer}

/* ---------- vampir köylü ---------- */
.vk{gap:8px}
.vkhead{flex:0 0 auto;display:flex;gap:6px;flex-wrap:wrap}
.vkhead .chip{font-size:13px;padding:4px 10px}
.split2{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--gap)}
@media (orientation:landscape) and (min-aspect-ratio:5/4){ .split2{flex-direction:row}.split2>.side{flex:1 1 0;justify-content:center} }
.vk.ph-night{background:radial-gradient(circle at 50% 0%,#1e1b4b,#05030f 80%);border-radius:20px;padding:8px}
.vk.ghost{filter:grayscale(.85) brightness(.8)}
.qrbox{background:#fff;padding:8px;border-radius:14px;width:clamp(100px,18vh,240px);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.qrbox img,.qrbox canvas{width:100%!important;height:100%!important}
.vkcode{font-size:clamp(24px,4.4vh,54px);font-weight:900;letter-spacing:8px;color:var(--yel);line-height:1}
.vkplayers{gap:4px}
.vkplayers .chip{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;padding:3px 8px}
.vkplayers .x{background:none;border:0;color:var(--red);font-size:13px;cursor:pointer;padding:0 2px}
.vkcfg{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 10px}
.vkcfg>span:first-child{font-weight:800}
.vkcfg .stepper button{padding:4px 10px}
.vkcfg .stepper b{min-width:30px;font-size:20px}
.vkcfg .chk{margin:0}
.vkcard{width:clamp(130px,min(42vw,34vh),240px);aspect-ratio:240/340;perspective:900px;cursor:pointer}
.vkflip{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.vkcard.open .vkflip{transform:rotateY(180deg)}
.vkflip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.vkflip .front{transform:rotateY(180deg)}
.vkcard.open:not(:has(.backface)) .vkflip{transform:none}
.vkcard.open:not(:has(.backface)) .front{transform:none}
.vcardsvg{width:100%;height:100%;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}
.face .hint{position:absolute;left:0;right:0;bottom:12%;text-align:center;font-weight:800;font-size:13px}
.vkroleinfo{text-align:center;max-width:420px}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px}
.pick{border:1px solid var(--line);background:var(--card2);color:var(--txt);border-radius:12px;padding:clamp(7px,1.3vh,12px) 8px;font:inherit;font-weight:800;font-size:15px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.pick small{font-size:11px;font-weight:700;color:var(--yel)}
.pick.on{background:var(--red);border-color:#fff}
.pick.off{opacity:.5}
.pick:disabled{opacity:.35}
.vklist{display:flex;flex-wrap:wrap;gap:5px}
.vklist .chip{font-size:13px}
.vklist .chip.dead{opacity:.45;text-decoration:line-through}
.vkevent{text-align:center;font-weight:800;font-size:clamp(16px,2.2vh + 6px,22px)}
.cd{color:var(--yel);font-variant-numeric:tabular-nums}
.cd.hot{color:var(--red)}
.cd.big{font-size:clamp(40px,8vh,80px);font-weight:900}
.btn.night{background:linear-gradient(135deg,#312e81,#1e1b4b);color:#fff;border:1px solid #6366f1}
details.card summary{cursor:pointer;font-weight:800}
details.card .pickgrid{margin-top:8px}
.vkbanner{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,3,15,.82);animation:in .25s}
.vkb-in{text-align:center;max-width:520px;display:flex;flex-direction:column;gap:10px;align-items:center}
.vkb-ic{font-size:clamp(70px,16vh,130px);animation:pop .4s}
.vkb-tx{font-size:clamp(22px,3.4vh + 8px,38px);font-weight:900;line-height:1.2}
.vkbanner.night{background:radial-gradient(circle at 50% 30%,#1e1b4bee,#000e)}
.vkbanner.hands{background:#7f1d1dee;animation:in .2s,shake .5s 3}
.vkbanner.shot{background:#000e}
.vkbanner.end{background:radial-gradient(circle,#4c1d95ee,#000e)}
.tabubar{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tteam{flex:1 1 30%;min-width:0;gap:6px;display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px 12px;font-weight:800}
.tteam.on{border-color:var(--pink);background:rgba(255,79,154,.18)}
.tteam b{font-size:20px;color:var(--yel)}
.tabucard{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,1vh,8px);background:#fff;color:#1b1035;border-radius:20px;padding:clamp(10px,2vh,18px);border:6px solid #7c3aed;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.tabucard .tw{font-size:clamp(26px,4.4vh + 6px,46px);font-weight:900;text-align:center;color:#7c3aed;padding-bottom:6px;border-bottom:3px dashed #e9d5ff;word-break:break-word}
.tabucard .tf{text-align:center;font-weight:800;font-size:clamp(16px,2.4vh + 4px,24px);color:#dc2626}
.impword{height:150px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font:900 30px/1.1 system-ui,sans-serif;word-break:break-word}
.cluebox{flex:1;min-height:60px;overflow:auto}
.cluebox .li span{white-space:normal}
.vkset{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 10px;font-size:15px}
.vkset .chk{grid-column:1/-1;margin:0}
details.card{padding:8px 10px}
.vkset .stepper{justify-content:flex-end}
.vkset .stepper button{padding:4px 10px}
.vkset .stepper b{min-width:54px;font-size:16px}
.vkcount.dawn{background:radial-gradient(circle at 50% 100%,#7c2d12ee,#05030fee 70%)}
.vkcount.dawn .n{color:var(--yel)}
.vkbanner.sunrise{padding:0;background:none}
.sunsky{position:absolute;inset:0;overflow:hidden;background:linear-gradient(#0b1026,#1e1b4b);animation:sky 5s ease-in forwards}
.sun{position:absolute;left:50%;bottom:-30vmin;width:42vmin;height:42vmin;margin-left:-21vmin;border-radius:50%;background:radial-gradient(circle,#fff7ae,#fbbf24 55%,#f97316);
  box-shadow:0 0 80px 30px rgba(251,191,36,.55);animation:rise 5s cubic-bezier(.2,.7,.3,1) forwards}
.hills{position:absolute;left:-10%;right:-10%;bottom:-6vh;height:30vh;border-radius:50% 50% 0 0;background:#14532d;box-shadow:0 -10px 40px rgba(0,0,0,.4)}
.sunt{position:absolute;top:18%;left:0;right:0;text-align:center;color:#fff;text-shadow:0 2px 12px #000;opacity:0;animation:in 1s 1s forwards}
@keyframes rise{to{bottom:34vh}}
@keyframes sky{50%{background:linear-gradient(#7c2d12,#f97316)}100%{background:linear-gradient(#38bdf8,#fde68a)}}
.vkcount{position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none}
.vkcount .n{font-size:clamp(120px,34vh,280px);font-weight:900;line-height:1;color:var(--red);text-shadow:0 0 40px rgba(255,0,0,.5)}
.vkcount .n.beat{animation:beat .5s ease-out}
@keyframes beat{0%{transform:scale(1.35)}100%{transform:scale(1)}}
.vkblood{position:fixed;inset:0;z-index:75;background:rgba(40,0,0,.7);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.vkblood i{position:absolute;top:0;width:7%;background:linear-gradient(#7f0000,#b91c1c);border-radius:0 0 50% 50%;animation:drip 1.8s ease-in forwards;transform-origin:top;transform:scaleY(0)}
.vkblood .vkb-tx{position:relative;color:#fff;text-shadow:0 2px 10px #000}
@keyframes drip{to{transform:scaleY(1)}}

/* ---------- adam asmaca ---------- */
.hangwrap{flex:1;min-height:90px;position:relative}
.hang{position:absolute;inset:0;width:100%;height:100%}
.hang.dead .fig{transform-origin:138px 28px;animation:sway 1.6s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(6deg)}}
.slots{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px}
.sw{display:flex;gap:4px;max-width:100%;min-width:0}
.sl{width:clamp(14px,6vw,36px);flex:0 1 auto;min-width:12px;height:clamp(28px,5vh,44px);border-bottom:3px solid var(--txt);display:flex;align-items:flex-end;justify-content:center;font-weight:900;font-size:clamp(18px,3vh,28px)}
.kbd{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.key{border:0;border-radius:9px;background:var(--card2);color:var(--txt);font:inherit;font-weight:800;font-size:clamp(14px,2.2vh,18px);padding:clamp(6px,1.2vh,11px) 0;cursor:pointer}
.key.wide{grid-column:span 3;font-size:13px;background:var(--pink)}
.key.ok{background:rgba(74,222,128,.35)}
.key.no{background:rgba(255,107,107,.25);opacity:.5}
.key:active{transform:scale(.92)}

/* ---------- su bardağı ---------- */
.suwrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;border-radius:20px;background:radial-gradient(circle at 50% 40%,#3c2470,#24123f);border:1px solid var(--line)}
.susvg{width:100%;height:100%;max-height:100%}
.tap{cursor:pointer;touch-action:none}
.tap:active #handle{filter:brightness(1.1)}
.stream{stroke-dasharray:16 6;animation:flow .35s linear infinite}
@keyframes flow{to{stroke-dashoffset:-22}}

/* ---------- bomb ---------- */
.bomb{font-size:clamp(90px,24vmin,220px);line-height:1;cursor:pointer}
.bomb.tick{animation:tickp .5s infinite}
@keyframes tickp{50%{transform:scale(1.08) rotate(-4deg)}}
.flash{animation:flash .6s 2}
@keyframes flash{50%{background:#ef4444}}

/* ---------- bu mu o mu ---------- */
.opt{flex:1 1 0;min-height:0;border-radius:22px;border:0;color:#fff;font-weight:900;font-size:clamp(20px,3vh + 6px,34px);padding:12px;cursor:pointer;font-family:inherit;transition:transform .2s,opacity .2s}
.opt.a{background:linear-gradient(135deg,#ff4f9a,#ff8a5b)}
.opt.b{background:linear-gradient(135deg,#3b82f6,#3ee6d6)}
.opt.picked{outline:5px solid #fff;outline-offset:-5px}
.opt.dim{opacity:.35}
.vsdot{flex:0 0 auto;align-self:center;font-weight:900;color:var(--mut)}
.pair{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--gap)}
@media (orientation:landscape) and (min-aspect-ratio:5/4){ .pair{flex-direction:row} }

/* hiç yapmadım: two hands */
.hands{width:min(100%,46vh,340px);flex:0 1 auto;min-height:0}
.hands .palm{fill:#f3c79c;stroke:#c08a5c;stroke-width:2}
.hands .fg{fill:#f3c79c;stroke:#c08a5c;stroke-width:2;transform-box:fill-box;transform-origin:50% 100%;transition:transform .5s cubic-bezier(.5,1.6,.5,1),fill .5s}
.hands .fg.dn{transform:scaleY(.3);fill:#b98a64}
.hands .fg.anim{animation:fold .6s}
@keyframes fold{0%{transform:scaleY(1)}100%{transform:scaleY(.3)}}
.hicplayers{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;flex:0 0 auto}
.kbd.off{opacity:.45}
.duelnet{display:flex;align-items:center;gap:12px}
.duelnet div{display:flex;flex-direction:column;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:6px 18px}
.duelnet small{font-size:11px;color:var(--mut);font-weight:800}
.duelnet b{font-size:clamp(44px,9vh,80px);line-height:1;color:var(--yel)}
.duelnet span{font-size:30px;color:var(--mut)}
/* imposter room chat */
.stage.vk{position:relative}
.chatdock{position:absolute;left:0;right:0;bottom:0;z-index:30;max-height:72%;display:flex;flex-direction:column;gap:6px;background:var(--sheet);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:10px;box-shadow:0 -10px 30px rgba(0,0,0,.45)}
.chatdock[hidden]{display:none}
.chathead{display:flex;justify-content:space-between;align-items:center}
.chatlist{flex:1 1 auto;min-height:60px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.cm{background:var(--card);border-radius:12px;padding:5px 10px;align-self:flex-start;max-width:85%;font-size:14px}
.cm.me{align-self:flex-end;background:rgba(255,79,154,.25)}
.cm b{color:var(--cyan);margin-right:4px}
.chatvoice{display:flex;flex-direction:column;align-items:center;gap:2px}
.chatbtn b{color:var(--yel)}
.aicats{gap:5px}.aicats .chip{font-size:12px;padding:4px 8px}
.aithumbs{flex:1 1 auto;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;align-content:start}
.aithumbs div{position:relative}.aithumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block}
.aithumbs button{position:absolute;top:4px;right:4px;border:0;border-radius:50%;width:24px;height:24px;background:rgba(0,0,0,.7);color:#fff;cursor:pointer}
.vcard .vpf{position:absolute;top:6px;left:6px;font-size:14px;background:rgba(0,0,0,.45);border-radius:8px;padding:1px 5px}
.vcard.pf-tt{background:linear-gradient(160deg,#111,#25f4ee 55%,#fe2c55)}
.vcard.pf-yt{background:linear-gradient(160deg,#ff0000,#7f1d1d)}

/* protection: no text selection outside form fields; ad blocker wall; rights line */
html.guarded body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.guarded input,html.guarded textarea,html.guarded [contenteditable="true"]{-webkit-user-select:text;user-select:text}
html.guarded img{-webkit-user-drag:none;user-drag:none}
.abwall{position:fixed;inset:0;z-index:9999;background:rgba(15,8,32,.97);display:flex;align-items:center;justify-content:center;padding:20px}
.abbox{max-width:420px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.abbox p{color:var(--mut);margin:0}
.rights{flex:0 0 auto;font-size:11px;color:var(--mut);text-align:center;padding-top:4px}
.chip.voted{border-color:var(--green);background:rgba(74,222,128,.15)}
.aithumbs img{cursor:zoom-in}.aiup{position:absolute;left:4px;bottom:4px;font-size:10px;background:var(--pink);color:#fff;border-radius:6px;padding:0 5px}
.aicats small{font-size:10px;color:var(--mut)}

/* amiral: dragging ships while placing */
.ab.placing .shiplayer{pointer-events:auto}
.ab.placing .shipbox{cursor:grab;touch-action:none;transition:left .12s,top .12s}
.ab.placing .shipbox.sel .ship{filter:drop-shadow(0 0 6px var(--yel)) drop-shadow(0 0 2px #fff)}
.ab.placing .shipbox.holding .ship{animation:hold 2s linear}
@keyframes hold{to{filter:drop-shadow(0 0 10px var(--pink))}}
.ab.placing .shipbox.lifted{z-index:5;transition:none}.ab.placing .shipbox.lifted .ship{transform:scale(1.08);filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}
.shipbox.shake{animation:hurt .4s}
.ab.placing .ac{pointer-events:none}
.tools{position:absolute;inset:0;pointer-events:none;z-index:6}
.stool{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border:0;border-radius:50%;width:clamp(24px,4.2vh,34px);aspect-ratio:1;font-size:clamp(12px,2vh,16px);font-weight:900;cursor:pointer;padding:0;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.stool.arr{background:rgba(255,255,255,.92);color:#111}
.stool.rot{background:var(--yel);color:#111;font-size:clamp(15px,2.6vh,20px)}
.captain.hurt{background:linear-gradient(135deg,rgba(239,68,68,.35),rgba(127,29,29,.35));border-color:var(--red)}
.captain.hurt b{color:#fecaca}
.ab.placing{overflow:visible}
/* pringles online: two square plates side by side */
.plates{flex:1 1 auto;min-height:0;display:flex;gap:10px;align-items:stretch}
.pcol{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:4px;align-items:center}
.pcol label{margin:0;text-align:center;font-size:12px}.pcol label small{display:block;color:var(--mut);font-weight:600}
.platebox{width:min(100%,46vh);aspect-ratio:1}
.plate.sq{border-radius:16px;background:linear-gradient(160deg,#f8fafc,#cbd5e1);padding:5%;gap:5%;width:min(100%,38vh);height:auto;aspect-ratio:1}
.platebox .plate.sq{width:100%}
.plate.sq.active{box-shadow:0 0 0 4px var(--yel),0 14px 30px rgba(0,0,0,.4)}
.plate.wait{pointer-events:none;opacity:.8}
.plate.sq .chipbtn{min-width:0;min-height:0;border-radius:12px}
.chipbtn.safe{pointer-events:none;background:rgba(74,222,128,.35);border-radius:12px}
.chipbtn.safe svg{opacity:.35}
.chipbtn.safe::after{content:"✅";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(16px,4.5vmin,34px)}
.plate.sq .chipbtn.boomed{opacity:1;background:rgba(239,68,68,.45);border-radius:12px}
.plate.sq .chipbtn.boomed svg{opacity:.3}
.chipbtn.lastbite{outline:4px solid var(--pink);outline-offset:-2px;border-radius:12px}
.pringhead{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.bite{font-weight:800;border-radius:12px;padding:4px 12px}.bite.good{background:rgba(74,222,128,.2);color:var(--green)}.bite.bad{background:rgba(239,68,68,.25);color:#fca5a5}
.plegend{text-align:center;flex:0 0 auto}
@media (orientation:landscape) and (min-aspect-ratio:5/4){ .plate.sq{width:min(100%,62vh)} }
.vcardimg{object-fit:cover;border-radius:18px;display:block;background:#000}
/* avatars + reactions */
.avsvg{width:100%;height:100%;display:block;border-radius:50%}
.avpick{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x mandatory;flex:0 0 auto}
.avbtn{flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:3px solid transparent;padding:0;background:none;cursor:pointer;scroll-snap-align:center}
.avbtn.on{border-color:var(--yel);transform:scale(1.08)}
.avbar{flex:0 0 auto;display:flex;gap:8px;overflow-x:auto;align-items:flex-start;padding:4px 2px 2px}
.avp{position:relative;flex:0 0 auto;width:clamp(48px,8.5vh,64px);display:flex;flex-direction:column;align-items:center;gap:2px}
.avp>svg{width:clamp(44px,7.5vh,58px);height:clamp(44px,7.5vh,58px);border:3px solid rgba(255,255,255,.25);border-radius:50%}
.avp.turn>svg{border-color:var(--yel);box-shadow:0 0 12px var(--yel)}
.avp.dead{opacity:.4;filter:grayscale(1)}
.avp b{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avdone{position:absolute;top:-2px;right:0;background:var(--green);color:#052e16;border-radius:50%;width:18px;height:18px;font-size:12px;font-style:normal;font-weight:900;display:flex;align-items:center;justify-content:center}
.avre{position:absolute;top:58%;left:50%;transform:translate(-50%,0);font-size:clamp(26px,4.6vh,36px);pointer-events:none;animation:reup 3.5s ease-out forwards;z-index:3}
.avre.still{animation:none;opacity:1}
@keyframes reup{0%{transform:translate(-50%,10px) scale(.3);opacity:0}12%{transform:translate(-50%,0) scale(1.35);opacity:1}24%{transform:translate(-50%,0) scale(1) rotate(-12deg)}36%{transform:translate(-50%,0) rotate(12deg)}48%{transform:translate(-50%,0) rotate(0)}80%{opacity:1}100%{transform:translate(-50%,14px);opacity:0}}
.avreact{flex:0 0 auto;align-self:center;width:42px;height:42px;border-radius:50%;border:2px dashed var(--line);background:var(--card);font-size:22px;cursor:pointer}
.avpal{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:60;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;background:var(--sheet);border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.avpal button{border:0;background:var(--card);border-radius:12px;font-size:28px;width:48px;height:48px;cursor:pointer}
.avpal button:active{transform:scale(1.2)}
.avbar{scrollbar-width:none}.avbar::-webkit-scrollbar{display:none}
.avre{top:26%}
/* kim daha: tilt mode */
.kimbar{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:8px}
.kimp{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:14px;padding:6px 12px;font-weight:800}
.kimp i{font-style:normal;font-size:24px;color:var(--yel)}.kimp.win{background:rgba(74,222,128,.25)}
.tiltmeter{flex:0 0 auto;position:relative;height:18px;border-radius:9px;background:linear-gradient(90deg,rgba(62,230,214,.4),rgba(255,255,255,.08) 40%,rgba(255,255,255,.08) 60%,rgba(255,79,154,.4))}
.tiltmeter i{position:absolute;top:-4px;left:50%;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;transition:left .08s}
.kimbtns .btn{flex:1}
/* zar */
.zwrap{flex:1 1 auto;min-height:0;display:flex;gap:10px}
.zside{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:10px}
.zside.win{border-color:var(--yel);box-shadow:0 0 18px rgba(255,210,63,.35)}
.zname{font-weight:900}.zname b{color:var(--yel);margin-left:6px}
.zdice{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;width:min(100%,30vh)}
.zdie{width:100%;filter:drop-shadow(0 5px 8px rgba(0,0,0,.35));transition:transform .07s}
.ztotal{font-size:clamp(28px,6vh,48px);font-weight:900;color:var(--yel)}
.zside .btn{width:100%}
/* wordle */
.wwrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:space-between}
.wgrid{display:grid;grid-template-rows:repeat(var(--rows),1fr);gap:5px;width:min(100%,calc((100dvh - 300px) / var(--rows) * 5 + 20px),380px)}
.wrow{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.wt{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:2px solid #3f3f46;border-radius:6px;font-weight:900;font-size:clamp(16px,3.4vh,30px);color:#fff;text-transform:uppercase;background:#0a0a0a}
.wt.typed{border-color:#a1a1aa;animation:pop .12s}
.wt.g,.wt.y,.wt.b{border-color:transparent;animation:flip .5s var(--d) both}
.wt.g{background:#3a8f3e}.wt.y{background:#d4a50e}.wt.b{background:#3a3a3c}
@keyframes flip{0%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.wrow.who0 .wt:first-child{box-shadow:-4px 0 0 var(--pink)}.wrow.who1 .wt:first-child{box-shadow:-4px 0 0 var(--cyan)}
.who0t{color:var(--pink)}.who1t{color:var(--cyan)}
.wkbd{flex:0 0 auto;width:min(100%,520px);display:flex;flex-direction:column;gap:6px}
.wkr{display:flex;gap:4px;justify-content:center}
.wk{flex:1 1 0;min-width:0;height:clamp(40px,7vh,56px);border:0;border-radius:6px;background:#818384;color:#fff;font-weight:800;font-size:clamp(12px,2vh,18px);cursor:pointer;padding:0;font-family:inherit}
.wk.wide{flex:1.6 1 0;font-size:11px}.wk.g{background:#3a8f3e}.wk.y{background:#d4a50e}.wk.b{background:#3a3a3c}
.wduo{display:flex;gap:10px;width:100%;justify-content:center}.wduo>div{flex:1 1 0;min-width:0;max-width:300px;display:flex;flex-direction:column;align-items:center}
.wduo .wgrid{width:100%}.wop .wt{font-size:10px}
@media (orientation:landscape){
.wwrap{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;align-items:center;justify-items:center;column-gap:16px}
.wwrap>.small{grid-column:1/-1}
.wwrap>.wgrid,.wwrap>.wduo{grid-row:2/4;grid-column:1}
.wwrap>.wgrid{width:min(calc((100dvh - 130px) / var(--rows) * 5),46vw)}
.wwrap>.wduo{width:min(calc((100dvh - 150px) / 4 * 10),52vw)}
.wwrap>.wkbd{grid-column:2;grid-row:2}
.wwrap>.row{grid-column:2;grid-row:3}
.wk{height:clamp(34px,11vh,54px)}
}
/* hiç yapmadım online */
.hiclist{display:flex;flex-direction:column;gap:4px;width:100%;overflow:auto;min-height:0}
.hicrow{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:12px;padding:4px 10px;font-size:14px}
.hicrow i{font-style:normal;font-weight:900;color:var(--yel)}.hicrow span:last-child{margin-left:auto}
.hicrow.did{background:rgba(255,79,154,.25);animation:pop .3s}.hicrow.dead{opacity:.45}
.hicf{font-size:12px;letter-spacing:-2px}
/* MUCA */
.gcard.big{grid-column:span 2;grid-row:span 2;flex-direction:column;justify-content:center;text-align:center;gap:6px;background:radial-gradient(circle at 50% 30%,#2a2a2a,#0b0b0b)!important;border:2px solid #fec909}
.gcard.big .tx{align-items:center}.gcard.big .nm{font-size:clamp(20px,3vh + 8px,34px);letter-spacing:2px;color:#fec909}
.bigfan{position:relative;height:clamp(60px,16vh,130px);width:100%;display:block}
.bigfan img{position:absolute;left:50%;bottom:0;height:100%;border-radius:8%;box-shadow:0 4px 12px rgba(0,0,0,.5);transform-origin:50% 120%;transform:translateX(-50%) rotate(calc(var(--i) * 13deg))}
.gcard.big:hover .bigfan img{transform:translateX(-50%) rotate(calc(var(--i) * 18deg))}
.bigfan img{transition:transform .25s}
.mtable{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:4px;position:relative}
.mseats{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;flex:0 0 auto}
.mseat{display:flex;align-items:center;gap:5px;background:var(--card);border:2px solid transparent;border-radius:12px;padding:2px 8px;font-size:12px}
.mseat.on{border-color:var(--yel);box-shadow:0 0 10px rgba(255,210,63,.4)}.mseat.me b{color:var(--cyan)}.mseat.out{opacity:.4}
.mcnt{font-weight:800}.mtag{font-style:normal;background:#e83c3c;color:#fff;border-radius:6px;padding:0 4px;font-size:10px;font-weight:900}.mtag.dead{background:#52525b}
.mmid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr auto 1.4fr;gap:10px;align-items:center}
.mdeck{justify-self:end;position:relative;height:min(100%,24vh);aspect-ratio:2/3;cursor:pointer}
.mdeck img{height:100%;border-radius:8%;box-shadow:3px 3px 0 #333,6px 6px 0 #222,0 8px 18px rgba(0,0,0,.5)}
.mdeck span{position:absolute;right:-6px;top:-6px;background:#000;color:#fff;border-radius:10px;font-size:11px;padding:1px 6px;font-weight:800}
.mdeck[data-m]{animation:pulse 1.4s infinite}
.mpile{position:relative;height:min(100%,26vh);aspect-ratio:2/3;border-radius:10%;box-shadow:0 0 0 4px var(--mc),0 0 22px var(--mc)}
.mpile img{position:absolute;inset:0;height:100%;width:100%;border-radius:8%;object-fit:cover}
.mpile .under{transform:rotate(var(--r));opacity:.75}
.mcol{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);background:var(--mc);color:#fff;border-radius:8px;padding:0 8px;font-size:11px;font-weight:900;white-space:nowrap;text-shadow:0 1px 2px #000}
.mdir{position:absolute;left:-26px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--yel)}
.mpend{position:absolute;right:-14px;top:-12px;background:#e83c3c;color:#fff;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-weight:900;animation:pop .4s}
.mlog{align-self:stretch;overflow:hidden;font-size:11.5px;display:flex;flex-direction:column;gap:2px;justify-content:center;min-width:0}
.mlog div{background:rgba(0,0,0,.25);border-radius:8px;padding:2px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mlog div:first-child,.mlog .mrev+div{background:rgba(255,210,63,.18)}
.mrev img{height:34px;border-radius:3px;margin-left:2px;vertical-align:middle}
.mturn{flex:0 0 auto;text-align:center;font-size:13px;padding:2px}.mturn.me{color:var(--yel);font-weight:800}
.mhandrow{flex:0 0 auto;display:flex;gap:8px;align-items:flex-end}
.mhand{flex:1 1 auto;min-width:0;display:flex;justify-content:center;padding-top:14px}
.mcard{flex:0 0 auto;height:clamp(64px,21vh,150px);aspect-ratio:2/3;padding:0;border:0;background:none;cursor:pointer;transition:transform .15s;position:relative}
.mcard img{height:100%;width:100%;border-radius:8%;box-shadow:-2px 0 6px rgba(0,0,0,.45);display:block}
.mcard.ok{transform:translateY(-10px)}.mcard.ok img{box-shadow:0 0 0 2px var(--yel),0 4px 10px rgba(0,0,0,.5)}
.mcard.ok:hover,.mcard.ok:focus{transform:translateY(-16px) scale(1.05);z-index:3}
.mcard.no img{filter:brightness(.55)}
.mcard.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.mbtns{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;width:clamp(90px,16vw,150px)}
.mbtns .btn{width:100%}
.mucab{background:radial-gradient(circle,#ff5b5b,#b91c1c);color:#fff;font-weight:900;font-size:20px;letter-spacing:2px;border:3px solid #fec909;animation:pulse 1s infinite}
.mpick{position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.mpick .card{max-width:440px;width:92%;display:flex;flex-direction:column;gap:8px}
.mcolors{display:flex;gap:6px}.mcolors button{flex:1;border:0;border-radius:12px;padding:14px 4px;color:#fff;font-weight:900;cursor:pointer;text-shadow:0 1px 2px #000;font-family:inherit}
.mres{width:100%;border-collapse:collapse;font-size:14px}.mres td,.mres th{padding:4px 6px;border-bottom:1px solid var(--line);text-align:left}
.stage.vk:has(.mtable) #avb{display:none}
.mmid{flex:1 1 0;min-height:70px}
.mdeck,.mpile{height:min(100%,30vh)}
.mmid{grid-template-rows:minmax(0,1fr)}.mlog{min-height:0;max-height:100%}
/* playing cards (kagit.js, batak.js) */
.pc{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;height:clamp(58px,19vh,130px);aspect-ratio:5/7;background:linear-gradient(160deg,#fff,#f1f1f1);color:#111;border-radius:9%;box-shadow:0 2px 6px rgba(0,0,0,.45);font-family:Georgia,'Times New Roman',serif;line-height:1;user-select:none;flex:0 0 auto}
.pc.red{color:#c81e1e}
.pc b{font-size:clamp(16px,5.5vh,38px);font-weight:900}
.pc i{font-style:normal;font-size:clamp(16px,5.5vh,38px)}
.pc u{position:absolute;left:6%;top:5%;text-decoration:none;font-size:clamp(9px,2.4vh,15px);font-weight:900;font-family:inherit}
.pc.back{background:repeating-linear-gradient(45deg,#7f1d1d 0 6px,#991b1b 6px 12px);border:3px solid #fff}
.pc.king{box-shadow:0 0 0 3px #f59e0b,0 2px 6px rgba(0,0,0,.45)}
.ktable{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:4px;position:relative}
.kmid{flex:1 1 0;min-height:60px;display:grid;grid-template-columns:1fr auto 1.3fr;grid-template-rows:minmax(0,1fr);gap:12px;align-items:center}
.kmid.one{display:flex;flex-direction:column;justify-content:center;gap:6px}
.kmid .klog{align-self:stretch}
.klog{overflow:hidden;font-size:11.5px;display:flex;flex-direction:column;gap:2px;justify-content:center;min-width:0;min-height:0}
.klog div{background:rgba(0,0,0,.25);border-radius:8px;padding:2px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.klog div:first-child{background:rgba(255,210,63,.18)}
.kscore{justify-self:end;display:flex;flex-direction:column;gap:3px;font-size:13px;text-align:right}
.kpile,.kdeck{position:relative;display:flex;align-items:center;justify-content:center;min-width:70px}
.kdeck{justify-self:end;cursor:pointer}.kdeck span{position:absolute;right:-6px;top:-6px;background:#000;color:#fff;border-radius:10px;font-size:11px;padding:1px 6px;font-weight:800}
.kdeck[data-m] .pc{animation:pulse 1.4s infinite}
.kpile .pc{position:absolute}.kpile .pc.topc{position:relative}.kpile .under{transform:rotate(-12deg) translateX(-14px);opacity:.85}
.kpn{position:absolute;right:-8px;top:-8px;background:var(--yel);color:#000;border-radius:10px;font-size:11px;padding:1px 6px;font-weight:900;z-index:2}
.kcol{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);background:#18181b;color:#fff;border-radius:8px;padding:0 8px;font-size:11px;font-weight:900;white-space:nowrap}.kcol.red{background:#c81e1e}
.khand{flex:0 0 auto;min-width:0;display:flex;justify-content:center;padding-top:12px;flex:1 1 auto}
.ktable>.khand{flex:0 0 auto}
.kc{flex:0 0 auto;padding:0;border:0;background:none;cursor:default;transition:transform .15s;position:relative;display:block}
.kc.ok{cursor:pointer;transform:translateY(-10px)}.kc.ok .pc{box-shadow:0 0 0 2px var(--yel),0 4px 10px rgba(0,0,0,.5)}
.kc.ok:hover{transform:translateY(-16px)}.kc.no .pc{filter:brightness(.6)}
.kc.sel{transform:translateY(-18px)}.kc.sel .pc{box-shadow:0 0 0 3px #e83c3c}
.kpickrow{display:flex;justify-content:center;padding:4px 10px}
.pickb{cursor:pointer;transform:rotate(var(--r))}.pickb:hover{transform:rotate(var(--r)) translateY(-10px)}.pickb.picked{transform:translateY(-24px)}
/* trick table */
.ttable{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:3px;position:relative}
.tring{flex:1 1 0;min-height:90px;position:relative}
.tseat{position:absolute;display:flex;flex-direction:column;align-items:center;background:var(--card);border:2px solid transparent;border-radius:12px;padding:2px 8px;font-size:11.5px;max-width:30%}
.tseat b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.tseat span{opacity:.85;white-space:nowrap}
.tseat.on{border-color:var(--yel);box-shadow:0 0 10px rgba(255,210,63,.4)}
.tseat.t{top:0;left:50%;transform:translateX(-50%)}.tseat.l{left:0;top:50%;transform:translateY(-50%)}.tseat.r{right:0;top:50%;transform:translateY(-50%)}
.tcenter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(46%,300px);height:100%;display:flex;align-items:center;justify-content:center}
.tcard{position:absolute;transition:transform .2s}.tcard .pc{height:clamp(50px,16vh,105px)}
.tcard.b{bottom:0;left:50%;transform:translateX(-50%)}.tcard.t{top:0;left:50%;transform:translateX(-50%)}.tcard.l{left:0;top:50%;transform:translateY(-50%)}.tcard.r{right:0;top:50%;transform:translateY(-50%)}
.tcard.win .pc{box-shadow:0 0 0 3px var(--yel),0 0 18px var(--yel)}
.tinfo{flex:0 0 auto;text-align:center;font-size:12.5px}.redt{color:#ef4444}
.tpanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;background:var(--sheet);border:1px solid var(--line);border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;align-items:center;max-width:94%;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.tpanel .chips{justify-content:center}
.stage.vk:has(.ttable) #avb{display:none}
.ttable>.khand{flex:0 0 auto}
.tcenter{top:calc(50% + 6px);height:calc(100% - 44px)}
.tcard.t{top:10px}
/* okey */
.ot{display:inline-flex;align-items:center;justify-content:center;height:clamp(34px,10.5vh,64px);aspect-ratio:3/4.2;background:linear-gradient(170deg,#fffdf5,#efe6cf);border-radius:14%;box-shadow:0 2px 0 #c9b98f,0 3px 6px rgba(0,0,0,.4);font-weight:900;font-size:clamp(16px,5vh,30px);font-family:Georgia,serif;flex:0 0 auto;position:relative}
.ot.sm{height:clamp(22px,6.5vh,36px);font-size:clamp(11px,3vh,18px)}
.ot.c-r{color:#dc2626}.ot.c-y{color:#d97706}.ot.c-b{color:#1d4ed8}.ot.c-k{color:#111}
.ot.fake{color:#16a34a}.ot.jk::after{content:'★';position:absolute;right:6%;bottom:3%;font-size:40%;color:#16a34a}
.ot.empty{background:rgba(255,255,255,.08);box-shadow:none}
.ot.grab{cursor:pointer;animation:pulse 1.4s infinite}
.okt{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:3px}
.otop{display:flex;justify-content:center;flex:0 0 auto}
.omid{flex:1 1 0;min-height:60px;display:flex;gap:8px;align-items:center}
.ocenter{flex:1 1 auto;min-width:0;height:100%;display:flex;flex-direction:column;gap:4px;min-height:0}
.oinfo{display:flex;gap:12px;justify-content:center;align-items:center;font-size:12px;flex:0 0 auto}.oinfo span{display:flex;gap:4px;align-items:center}
.otable{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start;justify-content:center}
.omeld{display:flex;gap:1px;background:rgba(0,0,0,.25);border-radius:6px;padding:2px;border:2px solid transparent}.omeld.can{border-color:var(--yel);cursor:pointer;animation:pulse 1.2s infinite}
.oseat{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--card);border:2px solid transparent;border-radius:12px;padding:3px 8px;font-size:11.5px;flex:0 0 auto;max-width:150px}
.oseat b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.oseat.on{border-color:var(--yel);box-shadow:0 0 10px rgba(255,210,63,.4)}
.oseat.t{flex-direction:row;gap:8px}.odisc{min-height:24px}
.otips{flex:0 0 auto;text-align:center;font-size:12.5px;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}.otips .klog div{background:none}
.orackrow{flex:0 0 auto;display:flex;gap:8px;align-items:center}
.ostack{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 auto}
.orack{flex:1 1 auto;min-width:0;background:linear-gradient(#8b5a2b,#5c3a1a);border-radius:10px;padding:4px;display:flex;flex-direction:column;gap:3px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35)}
.orow{display:flex;gap:2px;justify-content:center;min-height:clamp(34px,10.5vh,64px)}
.otb{padding:0;border:0;background:none;cursor:pointer;transition:transform .12s;flex:0 1 auto;min-width:0}
.otb.sel{transform:translateY(-7px)}.otb.sel .ot{box-shadow:0 0 0 3px var(--yel),0 3px 6px rgba(0,0,0,.4)}.otb.new .ot{outline:2px dashed #16a34a}
.obtns{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;width:clamp(96px,17vw,160px)}.obtns .btn{width:100%;padding:5px 6px}
/* shared game table (table.js) */
@property --p{syntax:'<percentage>';inherits:false;initial-value:100%}
.gtable{flex:1 1 auto;min-height:0;position:relative;border-radius:22px;background:radial-gradient(ellipse at 50% 45%,#1f7a4d 0%,#13573a 55%,#0b3a27 100%);box-shadow:inset 0 0 0 6px #5b3a1e,inset 0 0 0 9px #3b2412,inset 0 0 40px rgba(0,0,0,.5);overflow:hidden}
.gtable.blue{background:radial-gradient(ellipse at 50% 45%,#1d4f7a 0%,#123a5c 60%,#0a2540 100%)}
.seat2{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1px;z-index:4;pointer-events:none;max-width:110px;text-align:center}
.sav{position:relative;width:clamp(38px,9vmin,64px);aspect-ratio:1;border-radius:50%;padding:3px;background:rgba(0,0,0,.35);transition:transform .25s}
.sav .avsvg{width:100%;height:100%;display:block;border-radius:50%}
.seat2.turn .sav{transform:scale(1.12);box-shadow:0 0 0 3px #ffd23f,0 0 24px 6px rgba(255,210,63,.7);animation:seatglow 1.2s ease-in-out infinite}
@keyframes seatglow{50%{box-shadow:0 0 0 3px #ffd23f,0 0 34px 12px rgba(255,210,63,.9)}}
.sring{position:absolute;inset:-5px;border-radius:50%;--p:100%;background:conic-gradient(#ffd23f var(--p),rgba(255,255,255,.15) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));animation:ringdown linear forwards}
@keyframes ringdown{from{--p:100%}to{--p:0%}}
.sbadge{position:absolute;right:-6px;bottom:-4px;background:#111;color:#fff;border:2px solid #fff;border-radius:10px;font-size:11px;font-weight:900;padding:0 5px;min-width:20px}
.sre{position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%);font-size:26px;animation:rebub 3.2s forwards}
@keyframes rebub{0%{transform:translate(-50%,-60%) scale(.3);opacity:0}12%{transform:translate(-50%,-100%) scale(1.25);opacity:1}80%{opacity:1}100%{transform:translate(-50%,-160%);opacity:0}}
.snm{background:rgba(0,0,0,.55);border-radius:8px;padding:1px 7px;font-size:11.5px;max-width:110px;display:flex;gap:4px;align-items:center}
.snm b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat2.turn .snm{background:#ffd23f;color:#111}
.stag{font-style:normal;background:#e83c3c;color:#fff;border-radius:6px;padding:0 4px;font-size:9.5px;font-weight:900}
.sinfo{font-size:10.5px;background:rgba(0,0,0,.35);border-radius:6px;padding:0 5px;white-space:nowrap}
.seat2.out{opacity:.45;filter:grayscale(1)}
.flyer{position:fixed;z-index:9999;pointer-events:none;display:flex;align-items:center;justify-content:center}
.flyer>*{width:100%;height:100%}.flyer img{width:100%;height:100%;border-radius:8%;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.flyer .pc{height:100%;width:100%}
.turnbanner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:30;pointer-events:none;background:linear-gradient(135deg,#ffd23f,#ff8a00);color:#111;font-weight:900;font-size:clamp(22px,6vmin,42px);padding:8px 26px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:tbanner 1.5s forwards}
@keyframes tbanner{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}15%{transform:translate(-50%,-50%) scale(1.15);opacity:1}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{transform:translate(-50%,-70%);opacity:0}}
.treact{position:absolute;left:8px;bottom:8px;z-index:6;width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(0,0,0,.4);font-size:20px;cursor:pointer}
.tpal{position:absolute;left:8px;bottom:52px;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--sheet);padding:6px;border-radius:14px;border:1px solid var(--line)}
.tpal button{border:0;background:none;font-size:24px;cursor:pointer;padding:2px}
.shake{animation:shake .35s}
/* MUCA on the shared table */
.mwrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:4px;position:relative}
.stage.vk:has(.mwrap) #avb,.stage.vk:has(.btab) #avb,.stage.vk:has(.okw) #avb{display:none}
.mtab{min-height:150px}
.mcenter{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);display:flex;gap:clamp(14px,4vw,36px);align-items:center;z-index:2}
.mtab .mdeck,.mtab .mpile{height:clamp(80px,22vmin,170px)}
.mtab .mdeck img{height:100%}
.mdir{left:auto;right:-30px;top:-14px;transform:none;font-size:24px;animation:spin 3s linear infinite}.mdir.ccw{animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.mlog2{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;gap:2px;align-items:center;font-size:11px;max-width:70%;pointer-events:none}
.mlog2 div{background:rgba(0,0,0,.45);border-radius:8px;padding:1px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mlog2 div:first-child{background:rgba(0,0,0,.65);color:#ffd23f}
.mybar{flex:0 0 auto;display:flex;align-items:center;gap:8px;justify-content:center}
.seat2.inline{position:relative;transform:none;flex-direction:row;gap:6px;left:auto;top:auto;max-width:none}
.seat2.inline .sav{width:clamp(30px,7vmin,44px)}
.mhint{font-size:13px;text-align:center}.mhint.me{color:var(--yel);font-weight:800}
.mcard.tsel{transform:translateY(-26px) scale(1.06)!important;z-index:5}.mcard.tsel img{box-shadow:0 0 0 3px #fff,0 0 18px 4px #ffd23f!important}
@media (orientation:portrait){
  .mtab{min-height:46vh}
  .mcard{height:clamp(70px,15vh,140px)}
  .mhandrow{flex-direction:column;align-items:stretch}.mbtns{flex-direction:row;width:auto}.mbtns .btn{flex:1}
}
.snm b{color:inherit!important}
/* card tables (cardview.js) */
.kwrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:4px;position:relative}
.kwrap .gtable{min-height:150px}
.tcenter2{position:absolute;inset:0;z-index:2;pointer-events:none}
.tc2{position:absolute;transform:translate(-50%,-50%) rotate(var(--r));transition:none}
.tc2 .pc{height:clamp(56px,17vmin,110px)}
.tc2.win .pc{box-shadow:0 0 0 3px #ffd23f,0 0 22px 6px rgba(255,210,63,.8)}
.tcorner{position:absolute;right:10px;bottom:8px;z-index:3;background:rgba(0,0,0,.4);border-radius:12px;padding:4px 10px;font-size:11.5px;text-align:center;display:flex;flex-direction:column;align-items:center}
.trumpbig{font-size:30px;line-height:1;color:#fff}.trumpbig.red{color:#ef4444}
.tmid{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;width:78%}
.tpanel{z-index:8}.tpanel.low{top:auto;bottom:8px;transform:translateX(-50%)}
.pmid{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);display:flex;gap:clamp(18px,5vw,40px);align-items:center;z-index:2}
.pdeck{position:relative;cursor:pointer}.pdeck b{position:absolute;right:-8px;top:-8px;background:#000;color:#fff;border-radius:10px;font-size:11px;padding:1px 6px}
.pdeck .pc{box-shadow:3px 3px 0 #7f1d1d,6px 6px 0 #5b1414,0 6px 16px rgba(0,0,0,.5)}
.pdeck[data-m] .pc{animation:pulse 1.4s infinite}
.ppile{position:relative;display:flex;align-items:center;justify-content:center;min-width:70px;min-height:90px}
.pstack{position:absolute;transform:rotate(var(--r,-10deg))}.ptop{position:relative;z-index:2}
.kc.tsel{transform:translateY(-24px) scale(1.06)!important;z-index:5}.kc.tsel .pc{box-shadow:0 0 0 3px #fff,0 0 18px 4px #ffd23f!important}
.khand.myhandzone{flex:0 0 auto;padding-top:26px}
@media (orientation:portrait){ .kwrap .gtable{min-height:44vh} .kwrap .mhandrow{flex-direction:column;align-items:stretch} .kwrap .mbtns{flex-direction:row;width:auto} .kwrap .mbtns .btn{flex:1} }
.snm{max-width:96px}
@media (orientation:portrait){ .khand.myhandzone .pc{height:clamp(60px,12.5vh,120px)} .khand.myhandzone{padding-top:20px} }
/* okey table (okeyview.js) */
.okw{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:3px;position:relative;user-select:none;-webkit-user-select:none}
.okarea{flex:1 1 auto;min-height:150px;position:relative;border-radius:18px;background:#0f2f55 radial-gradient(ellipse at 50% 40%,#1c4f86,#0f2f55 70%);overflow:hidden;box-shadow:inset 0 0 30px rgba(0,0,0,.45)}
.okw .seat2 .sav{width:clamp(34px,7.5vmin,56px)}
.ocorner{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;gap:1px}
.ocorner .ot{height:clamp(34px,9.5vh,58px);font-size:clamp(15px,4.4vh,28px)}
.ocorner i{position:absolute;right:-8px;top:-6px;background:#000;color:#fff;font-style:normal;font-size:10px;border-radius:8px;padding:0 4px}
.ocorner b{font-size:10px;background:rgba(0,0,0,.55);border-radius:6px;padding:0 5px;white-space:nowrap}
.ocorner.tl{left:2%;top:4%}.ocorner.tr{right:2%;top:4%}.ocorner.bl{left:2%;bottom:4%}.ocorner.br{right:2%;bottom:4%}
.ocorner.mine{border-radius:10px;padding:2px}.ocorner.mine:has(b){outline:2px dashed rgba(255,210,63,.7)}
.ocorner.take{cursor:grab;touch-action:none}.ocorner.take .ot{animation:pulse 1.3s infinite;box-shadow:0 0 0 3px #ffd23f,0 3px 6px rgba(0,0,0,.4)}
.otablebox{position:absolute;left:12%;right:27%;top:20%;bottom:5%;z-index:2;border-radius:12px;background:rgba(6,26,48,.55) repeating-linear-gradient(0deg,transparent 0 23px,rgba(255,255,255,.05) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(255,255,255,.05) 23px 24px);padding:6px;overflow:hidden;display:flex;flex-direction:column;gap:4px;align-content:flex-start}
.oown{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.oownn{font-size:10px;background:rgba(0,0,0,.45);border-radius:6px;padding:0 6px}
.oown.staged{border:2px dashed #ffd23f;border-radius:10px;padding:3px}.oown.staged .oownn{background:#ffd23f;color:#111;font-weight:900}
.omeld{display:flex;gap:1px;border-radius:5px;padding:1px;border:2px solid transparent;position:relative}
.omeld .ot.sm{height:clamp(24px,6.8vh,40px);font-size:clamp(12px,3.2vh,20px)}
.omeld.new{animation:pop .45s}.omeld.can{border-color:#ffd23f;cursor:pointer;animation:pulse 1.2s infinite}.omeld.drophere,.otablebox.drophere{box-shadow:0 0 0 3px #4ade80}
.ox{position:absolute;right:-7px;top:-7px;width:18px;height:18px;border-radius:50%;border:0;background:#e83c3c;color:#fff;font-size:10px;cursor:pointer;padding:0}
.otempty{margin:auto;font-size:12px;opacity:.7;text-align:center;padding:10px}
.ofin{margin:auto;text-align:center;border:2px dashed rgba(255,255,255,.3);border-radius:14px;padding:14px 18px;font-size:13px}.ofin.on{border-color:#ffd23f;color:#ffd23f}.ofin.drophere{background:rgba(74,222,128,.2)}
.oside{position:absolute;right:13%;width:13%;top:20%;bottom:5%;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:space-around;gap:4px}
.oopts{display:flex;flex-direction:column;gap:2px;width:100%}.oopts span{background:#0a2240;border:1px solid #2b5a8c;border-radius:6px;font-size:10.5px;text-align:center;padding:1px 2px}
.oind,.ookey{display:flex;flex-direction:column;align-items:center;font-size:10px}.oind .ot{height:clamp(36px,10vh,62px);font-size:clamp(16px,4.6vh,30px)}
.odeck{position:relative;cursor:pointer;touch-action:none}.odeck .ot{height:clamp(34px,9vh,56px)}.odeck b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:#333}
.odeck.take .ot{animation:pulse 1.3s infinite;box-shadow:0 0 0 3px #ffd23f,3px 3px 0 #c9b98f,6px 6px 0 #b8a77b}
.ot.back{background:linear-gradient(170deg,#fffdf5,#e9dfc4);box-shadow:2px 2px 0 #c9b98f,4px 4px 0 #b8a77b,0 3px 6px rgba(0,0,0,.4)}
.omybar{flex:0 0 auto;display:flex;align-items:center;gap:8px;justify-content:center}
.osum{background:#1d4ed8;color:#fff;border:2px solid #93c5fd;border-radius:12px;padding:0 10px;font-weight:900;font-size:14px}
.okrackrow{flex:0 0 auto;display:flex;gap:6px;align-items:stretch}
.okrack{flex:1 1 auto;min-width:0;background:linear-gradient(#e3a43b,#b8741f);border-radius:8px;padding:4px 6px;display:flex;flex-direction:column;gap:4px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),0 4px 10px rgba(0,0,0,.4);touch-action:none}
.orow2{display:flex;gap:2px}
.oslot{flex:1 1 0;min-width:0;aspect-ratio:3/4.1;border-radius:5px;background:rgba(0,0,0,.08);display:flex}
.oslot.drophere{background:rgba(74,222,128,.45)}
.otile{display:flex;width:100%;cursor:grab;transition:transform .12s;touch-action:none}
.otile .ot{width:100%;height:auto;aspect-ratio:3/4.1;font-size:min(3.1vw,5.4vh)}
.otile.tsel{transform:translateY(-8px)}.otile.tsel .ot{box-shadow:0 0 0 3px #1d4ed8,0 3px 6px rgba(0,0,0,.4)}
.otile.lift .ot{box-shadow:0 0 0 3px #16a34a,0 6px 12px rgba(0,0,0,.4);transform:translateY(-6px)}
.otile.ghosted{opacity:.25}.otile.new .ot{outline:2px dashed #16a34a}
.oghost{position:fixed;z-index:9999;pointer-events:none;display:flex;gap:2px;transform:translate(-50%,-60%) scale(1.08);filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.oghost .ot{height:54px;font-size:26px}
.okbtns{flex:0 0 auto;display:flex;flex-direction:column;gap:3px;width:clamp(92px,15vw,150px);justify-content:center}.okbtns .btn{width:100%;padding:4px 6px;font-size:12px}
.oportrait{display:none}
@media (orientation:portrait){
  .oportrait{display:block;text-align:center;font-size:11px;opacity:.75}
  .okarea{min-height:52vh}
  .okrackrow{flex-direction:column}.okbtns{flex-direction:row;flex-wrap:wrap;width:auto}.okbtns .btn{flex:1 1 30%}
  .otablebox{left:4%;right:4%;top:17%;bottom:30%}.oside{left:20%;right:20%;width:auto;top:auto;bottom:5%;height:22%;flex-direction:row}
  .oopts{width:auto}
  .otile .ot{font-size:3.6vw}
}
/* compact room bar + rack sized by the screen height on game tables */
.stage.vk:has(.okw) .vkhead,.stage.vk:has(.kwrap) .vkhead,.stage.vk:has(.mwrap) .vkhead{gap:4px;margin:0}
.stage.vk:has(.okw) .vkhead .chip,.stage.vk:has(.kwrap) .vkhead .chip,.stage.vk:has(.mwrap) .vkhead .chip{padding:2px 9px;font-size:12px;min-height:0}
.okrack{height:clamp(84px,30vh,150px)}
.orow2{flex:1 1 0;min-height:0}
.oslot{aspect-ratio:auto;height:100%;justify-content:center}
.otile{width:auto;height:100%;justify-content:center}
.otile .ot{height:100%;width:auto;max-width:100%;aspect-ratio:3/4.1;font-size:min(3.1vw,6.5vh)}
.omybar .seat2.inline .sav{width:30px}
.omybar{min-height:0}
@media (max-height:520px){ .oopts{flex-direction:row;gap:3px}.oopts span{font-size:9px} .oside{justify-content:space-between} .oind .ot,.odeck .ot{height:clamp(26px,8.5vh,44px);font-size:clamp(13px,4vh,22px)} .ookey{display:none} }
/* wordle online, one shared board */
.wtop{display:flex;flex-direction:column;align-items:center;gap:3px;grid-column:1/-1}
.wpls{display:flex;gap:10px}
.wpl{display:flex;align-items:center;gap:5px;background:var(--card);border:2px solid transparent;border-radius:999px;padding:2px 10px 2px 2px;font-size:13px}
.wpl .avsvg{width:28px;height:28px;border-radius:50%}
.wpl.on{border-color:currentColor;box-shadow:0 0 12px currentColor}
.wpl.who0t{color:var(--pink)}.wpl.who1t{color:var(--cyan)}.wpl b{color:#fff}
.wshared .wrow.who0 .wt{box-shadow:inset 0 -3px 0 var(--pink)}.wshared .wrow.who1 .wt{box-shadow:inset 0 -3px 0 var(--cyan)}
@media (orientation:landscape){ .wshared>.wtop{grid-column:1/-1;grid-row:1} }
.stage.vk:has(.wshared) #avb{display:none}
.wshared>.wgrid{align-self:center}
@media (orientation:landscape){ .wshared>.wgrid{width:min(calc((100dvh - 170px) / var(--rows) * 5),46vw)} }
@media (orientation:portrait){
  .okrack{height:auto}
  .orow2{flex:0 0 auto}
  .oslot{aspect-ratio:3/4.2;height:auto}
  .otile,.otile .ot{width:100%;height:100%}
  .otile .ot{font-size:4.2vw}
  .okarea{min-height:48vh}
}
/* 101 table: runs left, pairs right, small tiles that shrink to fit */
.otablebox.oseri{left:12%;right:37%;top:20%;bottom:5%}
.otablebox.ocift{left:auto;right:12%;width:11%;top:20%;bottom:5%}
.okw.renk .otablebox.oseri{right:27%}
.oside{right:25.5%;width:10.5%}.okw.renk .oside{right:13%;width:13%}
.otiles{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-wrap:wrap;gap:calc(5px * var(--ts,1)) calc(7px * var(--ts,1));align-content:flex-start;--ts:1}
.ocift .otiles{flex-direction:column;flex-wrap:wrap;align-items:center}
.ot.tt{height:calc(clamp(20px,5.6vh,34px) * var(--ts,1));font-size:calc(clamp(10px,2.7vh,17px) * var(--ts,1));border-radius:12%;box-shadow:0 1px 0 #c9b98f,0 2px 3px rgba(0,0,0,.35)}
.otiles .omeld{padding:0;border-width:1px;gap:0;border-radius:3px}
.omeld.own0{box-shadow:0 2px 0 -1px #ff4f9a}.omeld.own1{box-shadow:0 2px 0 -1px #22d3ee}.omeld.own2{box-shadow:0 2px 0 -1px #ffd23f}.omeld.own3{box-shadow:0 2px 0 -1px #4ade80}
.ostage{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:4px;align-items:center;border:2px dashed #ffd23f;border-radius:8px;padding:3px}
.ostage .oownn{background:#ffd23f;color:#111;font-weight:900}
.otempty{font-size:11px;opacity:.55;margin:auto;text-align:center}
@media (orientation:portrait){
  .otablebox.oseri{left:4%;right:30%;top:17%;bottom:30%}
  .otablebox.ocift{right:4%;width:24%;top:17%;bottom:30%}
  .oside{left:20%;right:20%;width:auto}
}
.otablebox.oseri,.otablebox.ocift,.oside{top:25%}
/* MUCA colour / player picker */
.gpick{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(8,4,20,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:gpfade .2s ease-out}
@keyframes gpfade{from{opacity:0}}
.gpbox{position:relative;width:min(92%,420px);background:linear-gradient(160deg,rgba(60,30,110,.95),rgba(25,12,50,.97));border:1px solid rgba(255,255,255,.18);border-radius:24px;padding:16px 16px 18px;box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.15);animation:gppop .32s cubic-bezier(.2,1.4,.4,1)}
@keyframes gppop{from{transform:scale(.7) translateY(30px);opacity:0}}
.gpx{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:16px;cursor:pointer}
.gphead{display:flex;gap:14px;align-items:center;margin-bottom:14px;padding-right:36px}
.gpcard{height:92px;border-radius:9px;box-shadow:0 10px 24px rgba(0,0,0,.55);transform:rotate(-8deg);animation:gpcard 2.4s ease-in-out infinite}
@keyframes gpcard{50%{transform:rotate(-3deg) translateY(-4px)}}
.gpname{font-weight:900;font-size:18px;line-height:1.15}
.gpq{color:#ffd23f;font-weight:800;font-size:14px;margin-top:4px}
.gpstep{display:flex;gap:5px;margin-top:6px}.gpstep i{width:22px;height:5px;border-radius:3px;background:rgba(255,255,255,.2)}.gpstep i.on{background:#ffd23f}.gpstep i.done{background:#4ade80}
.gpcolors{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:10px}
.gpcol{border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font-family:inherit;animation:gppop .35s calc(var(--i) * 50ms) both cubic-bezier(.2,1.4,.4,1)}
.gpcol span{width:100%;max-width:74px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.75),transparent 34%),var(--c);box-shadow:0 0 0 3px rgba(255,255,255,.25),0 8px 22px color-mix(in srgb,var(--c) 60%,transparent),inset 0 -6px 12px rgba(0,0,0,.25);transition:transform .15s,box-shadow .15s}
.gpcol:hover span,.gpcol:active span{transform:scale(1.1);box-shadow:0 0 0 4px #fff,0 0 30px var(--c)}
.gpcol b{font-size:13px}
.gpplayers{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;max-height:46vh;overflow:auto}
.gpp{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);border-radius:16px;padding:10px 6px;cursor:pointer;color:#fff;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:inherit;animation:gppop .35s calc(var(--i) * 50ms) both cubic-bezier(.2,1.4,.4,1);transition:transform .15s,background .15s}
.gpp:hover,.gpp:active{transform:translateY(-3px);background:rgba(255,210,63,.18);border-color:#ffd23f}
.gpav{position:relative;width:56px;height:56px}.gpav .avsvg{width:100%;height:100%;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.gpav em{position:absolute;right:-6px;bottom:-4px;font-style:normal;background:#111;border:2px solid #fff;border-radius:10px;font-size:11px;font-weight:900;padding:0 6px}
.gpp b{font-size:12.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ===== okey v2 (okeyview.js): always sideways, grid layout, nothing overlaps ===== */
:root{--W:100vw;--H:100vh}
@supports (height:100dvh){:root{--W:100dvw;--H:100dvh}}
html.land{--W:100dvh;--H:100dvw}
html.land,html.land body{overflow:hidden}
html.land #app{position:fixed;top:0;left:0;width:var(--W);height:var(--H);max-width:none;margin:0;transform-origin:0 0;transform:rotate(90deg) translateY(-100%);
  padding:5px calc(env(safe-area-inset-bottom) + 8px) 5px calc(env(safe-area-inset-top) + 8px)}
html.land header{height:32px;margin-bottom:3px}
.stage.vk:has(.k2) #avb{display:none}
.stage.vk:has(.k2) .vkhead{gap:4px;margin:0}.stage.vk:has(.k2) .vkhead .chip{padding:2px 9px;font-size:12px}
.k2{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:3px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;position:relative}
.k2-area{flex:1 1 auto;min-height:0;display:flex;gap:4px;padding:4px;border-radius:14px;position:relative;background:#0f2f55 radial-gradient(ellipse at 50% 40%,#1c4f86,#0f2f55 70%);box-shadow:inset 0 0 30px rgba(0,0,0,.45)}
.k2-col{flex:0 0 calc(var(--H) * .16);min-height:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:2px}
.k2-mid{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;gap:3px}
.k2-top{flex:0 0 auto;display:flex;justify-content:center}
.k2-board{flex:1 1 auto;min-height:0;display:flex;gap:4px}
.k2-box{position:relative;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:3px;border-radius:10px;padding:4px;
  background:rgba(6,26,48,.6) repeating-linear-gradient(0deg,transparent 0 17px,rgba(255,255,255,.05) 17px 18px),repeating-linear-gradient(90deg,transparent 0 17px,rgba(255,255,255,.05) 17px 18px)}
.k2-seri{flex:1 1 auto}.k2-cift{flex:0 0 23%}
.k2-side{flex:0 0 calc(var(--H) * .15);min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:2px}
.k2-opt{font-size:9.5px;background:#0a2240;border:1px solid #2b5a8c;border-radius:6px;padding:1px 4px;text-align:center;white-space:nowrap}
.k2-ind{display:flex;flex-direction:column;align-items:center;font-size:9px}
.k2-deck{position:relative;cursor:pointer;touch-action:none}.k2-deck b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#333}
.k2-deck.take .ot{box-shadow:0 0 0 3px #ffd23f,2px 2px 0 #c9b98f,4px 4px 0 #b8a77b;animation:pulse 1.3s infinite}
.k2-tiles{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-wrap:wrap;align-content:flex-start;gap:calc(4px * var(--ts,1)) calc(6px * var(--ts,1));--ts:1}
.k2-cift .k2-tiles{flex-direction:column;align-items:flex-start}
.k2-meld{flex:0 0 auto;display:flex;border:1px solid transparent;border-radius:3px;position:relative}
.k2-meld.new{animation:pop .45s}.k2-meld.can{border-color:#ffd23f;cursor:pointer;animation:pulse 1.2s infinite}
.k2-meld.own0{box-shadow:0 2px 0 -1px #ff4f9a}.k2-meld.own1{box-shadow:0 2px 0 -1px #22d3ee}.k2-meld.own2{box-shadow:0 2px 0 -1px #ffd23f}.k2-meld.own3{box-shadow:0 2px 0 -1px #4ade80}
.k2-stage{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:4px;align-items:center;border:2px dashed #ffd23f;border-radius:8px;padding:3px}
.k2-stage>span{font-size:10px;background:#ffd23f;color:#111;font-weight:900;border-radius:6px;padding:0 6px}
.k2-x{position:absolute;right:-7px;top:-7px;width:17px;height:17px;border-radius:50%;border:0;background:#e83c3c;color:#fff;font-size:9px;cursor:pointer;padding:0;z-index:2}
.k2-empty{margin:auto;font-size:10.5px;opacity:.55;text-align:center}
.k2-fin{margin:auto;text-align:center;border:2px dashed rgba(255,255,255,.3);border-radius:12px;padding:10px 14px;font-size:12px;display:flex;flex-direction:column;gap:3px}.k2-fin small{opacity:.7;font-size:10px}.k2-fin.on{border-color:#ffd23f;color:#ffd23f}
.k2-box.drophere,.k2-meld.drophere,.k2-fin.drophere{box-shadow:0 0 0 3px #4ade80}
.k2 .ot{height:calc(var(--H) * .095);width:auto;aspect-ratio:3/4.1;font-size:calc(var(--H) * .05);border-radius:12%}
.k2 .ot.tt{height:calc(var(--H) * .072 * var(--ts,1));font-size:calc(var(--H) * .037 * var(--ts,1));box-shadow:0 1px 0 #c9b98f,0 2px 3px rgba(0,0,0,.35)}
.k2-corner{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px}
.k2-corner i{position:absolute;right:-7px;top:-6px;background:#000;color:#fff;font-style:normal;font-size:9px;border-radius:8px;padding:0 4px}
.k2-corner b{font-size:9.5px;background:rgba(0,0,0,.55);border-radius:6px;padding:0 5px}
.k2-corner.mine{border-radius:8px;outline:2px dashed rgba(255,210,63,.45);outline-offset:2px}.k2-corner.mine.drophere{outline-color:#4ade80}
.k2-corner.take{cursor:grab;touch-action:none}.k2-corner.take .ot{box-shadow:0 0 0 3px #ffd23f;animation:pulse 1.3s infinite}
.k2 .seat2.k2seat{flex-direction:column;gap:1px}
.k2 .seat2.k2seat.t{flex-direction:row;gap:5px}
.k2 .k2seat .sav{width:calc(var(--H) * .085);min-width:26px}
.k2 .k2seat .snm{font-size:9.5px;max-width:calc(var(--H) * .16)}
.k2 .k2seat .sinfo{display:none}
.k2 .treact{left:auto;right:calc(var(--H) * .17);top:4px;bottom:auto;width:28px;height:28px;font-size:15px}
.k2 .tpal{left:auto;right:calc(var(--H) * .17);top:36px;bottom:auto}
.k2-me{flex:0 0 auto;display:flex;align-items:center;gap:6px;justify-content:center;min-height:0}
.k2-me .seat2.inline .sav{width:26px}
.k2-hint{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.k2-hint.me{color:#ffd23f;font-weight:800}
.k2-sum{background:#1d4ed8;color:#fff;border:2px solid #93c5fd;border-radius:12px;padding:0 9px;font-weight:900;font-size:13px}
.k2-bottom{flex:0 0 auto;display:flex;gap:5px;align-items:stretch}
.k2-rack{flex:1 1 auto;min-width:0;height:calc(var(--H) * .25);display:flex;flex-direction:column;gap:3px;padding:4px 6px;border-radius:8px;background:linear-gradient(#e3a43b,#b8741f);box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),0 4px 10px rgba(0,0,0,.4);touch-action:none}
.k2-row{flex:1 1 0;min-height:0;display:flex;gap:2px}
.k2-slot{flex:1 1 0;min-width:0;height:100%;display:flex;justify-content:center;align-items:flex-end;border-radius:4px;background:rgba(0,0,0,.09)}
.k2-slot.drophere{background:rgba(74,222,128,.5)}
.k2-tile{height:100%;max-width:100%;display:flex;cursor:grab;touch-action:none;transition:transform .12s}
.k2-tile .ot{height:100%;max-width:100%;font-size:calc(var(--H) * .052)}
.k2-tile.tsel{transform:translateY(-6px)}.k2-tile.tsel .ot{box-shadow:0 0 0 3px #1d4ed8,0 3px 6px rgba(0,0,0,.4)}
.k2-tile.lift .ot{box-shadow:0 0 0 3px #16a34a,0 6px 12px rgba(0,0,0,.4);transform:translateY(-5px)}
.k2-tile.ghosted{opacity:.25}.k2-tile.new .ot{outline:2px dashed #16a34a}
.k2-ghost{position:fixed;z-index:9999;pointer-events:none;display:flex;gap:2px;transform:translate(-50%,-60%) scale(1.1);filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.k2-ghost .ot{height:var(--gh,44px);font-size:calc(var(--gh,44px) * .5)}
.k2-btns{flex:0 0 calc(var(--W) * .15);display:grid;grid-template-columns:1fr 1fr;gap:3px;align-content:center}
.k2-btn{border:1px solid rgba(255,255,255,.15);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-weight:800;font-size:11px;padding:6px 2px;font-family:inherit;cursor:pointer;white-space:nowrap}
.k2-btn.hot{background:linear-gradient(135deg,#ff4f9a,#ff8a00);border:0}.k2-btn.cool{background:linear-gradient(135deg,#0ea5e9,#22d3ee);border:0;color:#04263a}
.k2-btn:disabled{opacity:.4}
/* game result card (okey, wordle) */
.gres{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px}
.gres-box{width:min(100%,440px);background:linear-gradient(160deg,rgba(60,30,110,.95),rgba(25,12,50,.97));border:1px solid rgba(255,255,255,.18);border-radius:24px;padding:16px;box-shadow:0 24px 60px rgba(0,0,0,.55);display:flex;flex-direction:column;align-items:center;gap:8px;animation:gppop .4s cubic-bezier(.2,1.4,.4,1)}
.gres-crown{font-size:44px;animation:gpcard 2s ease-in-out infinite}
.gres-title{font-weight:900;font-size:22px;text-align:center}
.gres-sub{font-size:12.5px;opacity:.75;text-align:center}
.gres-list{width:100%;display:flex;flex-direction:column;gap:5px}
.gres-row{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border-radius:12px;padding:5px 10px}
.gres-row.top{background:linear-gradient(90deg,rgba(255,210,63,.3),rgba(255,210,63,.08));box-shadow:0 0 0 1px rgba(255,210,63,.5)}
.gres-row .avsvg{width:30px;height:30px;border-radius:50%}
.gres-rank{width:18px;font-weight:900;opacity:.7}.gres-row b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gres-row em{font-style:normal;font-size:12px;opacity:.75}.gres-row strong{font-size:17px;min-width:44px;text-align:right}
.gres-btns{display:flex;gap:8px;width:100%}
.gres-btn{flex:1;border:0;border-radius:14px;padding:11px;font-weight:900;font-size:15px;color:#fff;background:linear-gradient(135deg,#ff4f9a,#ff8a00);cursor:pointer;font-family:inherit;box-shadow:0 8px 20px rgba(255,79,154,.35)}
.gres-btn.ghost{background:rgba(255,255,255,.1);box-shadow:none}
.k2 .k2seat .snm{flex-direction:column;gap:0;padding:1px 5px}.k2 .k2seat .stag{font-size:8.5px}
/* wordle: compact head, fits the screen, result card */
.whead{font-size:12.5px;text-align:center;opacity:.9;flex:0 0 auto}
.wpl i{font-style:normal;background:rgba(255,255,255,.15);border-radius:8px;padding:0 6px;font-weight:900;color:#fff;margin-left:2px}
.wwrap{position:relative}
.stage:has(.wwrap){position:relative}
.wres{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(8,4,20,.6);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:gpfade .25s}
.wword{display:flex;gap:5px;margin:2px 0 4px}.wword .wt{width:38px;height:38px;font-size:20px;aspect-ratio:auto}
.stage.vk:has(.wshared) #rmbar{display:none}
@media (orientation:portrait){
  .wgrid{width:min(100%,calc(((100dvh - 300px) / var(--rows) - 5px) * 5 + 20px),360px)}
  .wk{height:clamp(36px,6.2vh,52px)}
}
/* Amiral: placing by drag and drop */
.pl2{flex:1 1 auto;min-height:0;display:flex;gap:12px;align-items:center;justify-content:center}
.pl2-board{flex:0 1 auto;height:100%;max-height:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;min-width:0}
.pl2-board .ab{width:100%;max-height:100%}
.pl2-side{flex:0 1 320px;min-width:0;display:flex;flex-direction:column;gap:8px}
.pl2-title{font-weight:900;font-size:20px}
.pl2-help{font-size:12.5px;opacity:.85;line-height:1.35}
.pl2-dock{display:flex;flex-wrap:wrap;gap:8px;min-height:44px;align-items:center}
.dship{--cs:30px;width:calc(var(--len) * var(--cs));height:calc(var(--cs) + 16px);border:2px dashed rgba(255,255,255,.3);border-radius:10px;background:rgba(255,255,255,.06);padding:2px;cursor:grab;touch-action:none;display:flex;flex-direction:column;align-items:center;color:#fff;font-family:inherit}
.dship .ship{width:100%;height:var(--cs)}.dship b{font-size:10px}
.dship:active{border-color:#ffd23f}
.pl2-btns{display:flex;gap:6px}.pl2-btns .btn{flex:1}
.ab.placing{touch-action:none}
.ab.placing .shipbox{cursor:grab;touch-action:none;pointer-events:auto}
.ab.placing .shipbox.pend .ship{filter:drop-shadow(0 0 6px #fff)}
.ab.placing .shipbox.pend.bad .ship .hull{fill:#ef4444}
.ab.placing .shipbox.pend.good .ship .hull{fill:#22c55e}
.ab .ac.pv{background:rgba(34,197,94,.55)!important;box-shadow:inset 0 0 0 2px #22c55e}
.ab .ac.pvbad{background:rgba(239,68,68,.55)!important;box-shadow:inset 0 0 0 2px #ef4444}
.ptools{position:absolute;z-index:6;transform:translate(-50%,-50%);display:flex;gap:6px;pointer-events:auto}
.pt{width:34px;height:34px;border-radius:50%;border:2px solid #fff;color:#fff;font-size:17px;font-weight:900;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:0;font-family:inherit}
.pt.rot{background:#2563eb}.pt.yes{background:#16a34a}.pt.no{background:#dc2626}
.pt:disabled{background:#4b5563;opacity:.7}
.pghost{position:fixed;z-index:9999;pointer-events:none;transform:translate(-50%,-50%);opacity:.85;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.pghost .ship{width:100%;height:100%}
@media (orientation:portrait){
  .pl2{flex-direction:column;gap:8px;justify-content:flex-start}
  .pl2-board{height:auto;width:100%;max-width:min(100%,58vh)}
  .pl2-side{flex:0 0 auto;width:100%}
  .pl2-title{font-size:17px}
}
/* wordle: who plays each row */
.wgrid.tagged .wrow{grid-template-columns:var(--lw,46px) repeat(5,1fr)}
.wgrid.tagged{--lw:clamp(36px,12vw,52px);width:min(100%,calc(((100dvh - 300px) / var(--rows) - 5px) * 5 + 20px + var(--lw)),420px)}
.wlab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0}
.wlab .avsvg{width:calc(var(--lw) * .62);height:calc(var(--lw) * .62);border-radius:50%}
.wlab b{width:calc(var(--lw) * .62);height:calc(var(--lw) * .62);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;background:rgba(255,255,255,.08);border:2px solid currentColor}
.wlab i{font-style:normal;font-size:9.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}
.wrow.who0 .wlab{color:var(--pink)}.wrow.who1 .wlab{color:var(--cyan)}
@media (orientation:landscape){ .wwrap>.wgrid.tagged{width:min(calc((100dvh - 170px) / var(--rows) * 5 + var(--lw)),50vw)} }
/* ===== okey v3 (okeyview.js): upright layout from Murat's sketch ===== */
.stage.vk:has(.k3) #avb,.stage.vk:has(.k3) #rmbar{display:none}
.stage.vk:has(.k3) .vkhead{gap:4px;margin:0}.stage.vk:has(.k3) .vkhead .chip{padding:2px 9px;font-size:12px}
.k3{--tw:min(calc((min(100vw, 560px) - 66px) / 13), calc((100dvh - 150px) / 15.5));--th:calc(var(--tw) * 1.36);
  flex:1 1 auto;min-height:0;width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:4px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* one tile look everywhere: ivory face, coloured number */
.k3 .ot{width:var(--tw);height:var(--th);aspect-ratio:auto;font-size:calc(var(--tw) * .64);border-radius:16%;flex:0 0 auto;
  background:linear-gradient(170deg,#fffef8,#efe5c8);box-shadow:0 2px 0 #c2b086,0 3px 5px rgba(0,0,0,.35);font-family:Georgia,serif;font-weight:900;display:flex;align-items:center;justify-content:center;line-height:1}
.k3 .ot b{font:inherit;background:none;padding:0;color:inherit}
.k3 .ot.empty{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.k3 .ot.back{background:linear-gradient(170deg,#fffef8,#e7dcbd);box-shadow:2px 2px 0 #c2b086,4px 4px 0 #ab9a70,0 4px 8px rgba(0,0,0,.4)}
/* the okey (joker) in my rack turns to its golden OKEY face */
.k3 .k3-tile .ot.jk{background:linear-gradient(160deg,#fde68a,#f59e0b);box-shadow:0 2px 0 #b45309,0 0 10px rgba(251,191,36,.7);flex-direction:column;gap:0}
.k3 .k3-tile .ot.jk b{display:none}
.k3 .k3-tile .ot.jk::before{content:'★';color:#7c2d12;font-size:calc(var(--tw) * .62);line-height:1}
.k3 .k3-tile .ot.jk::after{content:'OKEY';position:static;color:#7c2d12;font-family:inherit;font-size:calc(var(--tw) * .24);letter-spacing:.5px}
.k3-top,.k3-bot{flex:0 0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;padding:0 2px}
.k3-top .seat2,.k3-me{justify-self:center}
.k3-corner{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px 4px;border-radius:10px;background:rgba(255,255,255,.05);min-width:calc(var(--tw) + 12px)}
.k3-corner i{position:absolute;right:-5px;top:-5px;background:#111;color:#fff;font-style:normal;font-size:9px;border-radius:8px;padding:0 4px;border:1px solid #fff}
.k3-corner em{font-style:normal;font-size:9.5px;opacity:.8;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k3-corner.mine{outline:2px dashed rgba(255,255,255,.25)}
.k3-corner.mine.open{outline-color:#ffd23f;background:rgba(255,210,63,.12)}.k3-corner.mine.open em{color:#ffd23f;opacity:1;font-weight:800}
.k3-corner.take{cursor:grab;touch-action:none;background:rgba(74,222,128,.15);outline:2px solid #4ade80}.k3-corner.take em{color:#4ade80;opacity:1;font-weight:900}
.k3-corner.take .ot{animation:pulse 1.3s infinite}
.k3-corner.drophere{outline:3px solid #4ade80!important}
.k3 .seat2.k3seat{flex-direction:column;gap:1px}
.k3 .seat2.k3seat.t{flex-direction:row;gap:6px}
.k3 .k3seat .sav{width:clamp(30px,9vw,44px)}
.k3 .k3seat .snm{flex-direction:column;gap:0;padding:1px 6px;font-size:10px;max-width:84px}
.k3 .k3seat .stag{font-size:8.5px}
.k3 .k3seat .sinfo{display:none}
.k3-mid{flex:1 1 auto;min-height:0;display:flex;gap:3px;align-items:stretch}
.k3-side{flex:0 0 clamp(40px,11vw,56px);display:flex;align-items:center;justify-content:center;padding-top:30%}
.k3-table{flex:1 1 auto;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;border-radius:14px;padding:3px;
  background:radial-gradient(ellipse at 50% 40%,#1f7a4d,#0f4d30 75%);box-shadow:inset 0 0 0 3px #5b3a1e,inset 0 0 22px rgba(0,0,0,.45)}
.k3-fit{--cw:16px;display:flex;gap:6px;align-items:flex-start;justify-content:center}
.k3-grid{display:grid;gap:1px;grid-auto-rows:calc(var(--cw) * 1.32)}
.k3-grid.seri{grid-template-columns:repeat(13,var(--cw))}
.k3-grid.pair{grid-template-columns:repeat(2,var(--cw));padding-left:4px;border-left:1px dashed rgba(255,255,255,.2)}
.k3-cell{border-radius:2px;background:rgba(255,255,255,.055);display:flex}
.k3-cell .ot{width:100%;height:100%;font-size:calc(var(--cw) * .66);border-radius:14%;box-shadow:0 1px 0 #c2b086,0 1px 2px rgba(0,0,0,.35)}
.k3-cell .ot.jk::after{right:4%;bottom:2%;font-size:45%}
.k3-cell.own0 .ot{box-shadow:inset 0 -2px 0 #ff4f9a,0 1px 2px rgba(0,0,0,.35)}.k3-cell.own1 .ot{box-shadow:inset 0 -2px 0 #22d3ee,0 1px 2px rgba(0,0,0,.35)}
.k3-cell.own2 .ot{box-shadow:inset 0 -2px 0 #ffd23f,0 1px 2px rgba(0,0,0,.35)}.k3-cell.own3 .ot{box-shadow:inset 0 -2px 0 #4ade80,0 1px 2px rgba(0,0,0,.35)}
.k3-cell.staged .ot{outline:2px dashed #ffd23f;outline-offset:-1px;cursor:pointer}
.k3-cell.fresh .ot{animation:pop .4s}
.k3-cell.can .ot{box-shadow:0 0 0 2px #ffd23f;cursor:pointer;animation:pulse 1.2s infinite}
.k3-cell.drophere .ot{box-shadow:0 0 0 2px #4ade80}
.k3-grid.drophere{box-shadow:0 0 0 2px #4ade80;border-radius:4px}
.k3-fin{margin:auto;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:2px dashed rgba(255,255,255,.3);border-radius:16px;padding:18px 16px;font-size:26px;width:80%}
.k3-fin b{font-size:13px}.k3-fin small{font-size:10.5px;opacity:.7}.k3-fin.on{border-color:#ffd23f;color:#ffd23f}.k3-fin.drophere{background:rgba(74,222,128,.2)}
.k3-center{flex:0 0 auto;position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:calc(var(--th) + 16px)}
.k3-box{display:flex;flex-direction:column;align-items:center;gap:1px;position:relative}
.k3-box small{font-size:9px;opacity:.75}
.k3-box.deck{cursor:pointer;touch-action:none}.k3-box.deck b{position:absolute;left:0;right:0;bottom:calc(var(--th) * .3);text-align:center;font-size:calc(var(--tw) * .5);color:#5b4a28;font-weight:900}
.k3-box.deck.take .ot{box-shadow:0 0 0 3px #4ade80,2px 2px 0 #c2b086,4px 4px 0 #ab9a70;animation:pulse 1.3s infinite}
.k3-info{display:flex;flex-direction:column;gap:2px;font-size:9.5px}
.k3-info span{background:rgba(0,0,0,.3);border-radius:6px;padding:1px 6px;text-align:center;white-space:nowrap}
.k3-sum{background:#1d4ed8!important;color:#fff;font-weight:900}
.k3-open{border:0;border-radius:14px;padding:6px 12px;font-family:inherit;font-weight:900;color:#fff;background:rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;font-size:13px;line-height:1.15;cursor:pointer}
.k3-open b{font-size:11px;opacity:.85}
.k3-open.ready{background:linear-gradient(135deg,#ff4f9a,#ff8a00);box-shadow:0 6px 18px rgba(255,79,154,.5);animation:pulse 1.4s infinite}
.k3-open:disabled{opacity:.6}
.k3-mini{border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(14,165,233,.25);color:#fff;font-weight:800;font-size:12px;padding:6px 10px;font-family:inherit;cursor:pointer}
.k3-center .treact{left:auto;right:2px;top:50%;bottom:auto;transform:translateY(-50%);width:32px;height:32px;font-size:17px}
.k3-center .tpal{left:auto;right:0;bottom:44px}
.k3-me{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.k3-me .seat2.inline .sav{width:clamp(30px,9vw,42px)}
.k3-hint{font-size:11.5px;text-align:center;opacity:.85;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.k3-hint.me{color:#ffd23f;font-weight:800;opacity:1}
.k3-rack{flex:0 0 auto;display:flex;flex-direction:column;gap:3px;padding:5px 6px 7px;border-radius:12px;background:linear-gradient(180deg,#e9b04a,#b8741f);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -5px 0 rgba(0,0,0,.25),0 6px 14px rgba(0,0,0,.45);touch-action:none}
.k3-row{display:flex;gap:2px;justify-content:center;padding-bottom:2px;border-bottom:2px solid rgba(110,60,10,.45)}
.k3-row:last-child{border-bottom:0}
.k3-slot{width:var(--tw);height:var(--th);flex:0 0 auto;border-radius:4px;background:rgba(0,0,0,.08);display:flex}
.k3-slot.drophere{background:rgba(74,222,128,.55)}
.k3-tile{display:flex;cursor:grab;touch-action:none;transition:transform .12s}
.k3-tile.tsel{transform:translateY(-7px)}.k3-tile.tsel .ot{box-shadow:0 0 0 3px #1d4ed8,0 4px 8px rgba(0,0,0,.4)}
.k3-tile.lift .ot{box-shadow:0 0 0 3px #16a34a,0 6px 12px rgba(0,0,0,.4);transform:translateY(-5px)}
.k3-tile.ghosted{opacity:.25}.k3-tile.new .ot{box-shadow:0 0 0 2px #4ade80,0 2px 0 #c2b086}
.k3-ghost{position:fixed;z-index:9999;pointer-events:none;display:flex;gap:2px;transform:translate(-50%,-70%) scale(1.12);filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.k3-ghost .ot{height:var(--gh,40px);width:calc(var(--gh,40px) / 1.36);font-size:calc(var(--gh,40px) * .47);border-radius:16%;background:linear-gradient(170deg,#fffef8,#efe5c8);display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-weight:900}
.k3-btns{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.k3-btn{border:0;border-radius:16px;padding:7px 4px;font-family:inherit;font-weight:900;font-size:12.5px;color:#fff;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 5px 0 rgba(0,0,0,.28),0 8px 16px rgba(0,0,0,.3);transition:transform .1s}
.k3-btn i{font-style:normal;font-size:18px;line-height:1}
.k3-btn:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 rgba(0,0,0,.28)}
.k3-btn.seri{background:linear-gradient(180deg,#a855f7,#6d28d9)}.k3-btn.cift{background:linear-gradient(180deg,#22d3ee,#0e7490)}.k3-btn.back{background:linear-gradient(180deg,#fbbf24,#d97706);color:#3b2004}
.k3-btn:disabled{filter:grayscale(.8);opacity:.5}
/* okey v3: room bar on one line, slimmer rows around the table */
.stage.vk:has(.k3) .vkhead{flex-wrap:nowrap;overflow:hidden}
.stage.vk:has(.k3) .vkhead .chip{font-size:11px;padding:2px 7px;white-space:nowrap}
.k3-corner{padding:2px 3px;gap:1px}
.k3-corner .ot{width:calc(var(--tw) * .9);height:calc(var(--th) * .9);font-size:calc(var(--tw) * .58)}
.k3 .k3seat .sav,.k3-me .seat2.inline .sav{width:clamp(28px,8vw,38px)}
.k3-center{min-height:calc(var(--th) + 10px);gap:8px}
.k3-box small{line-height:1}
.rights a{color:inherit;text-decoration:underline}
.seo{padding:16px;font-size:14px;color:var(--mut)}