/* 101 Okey — eski 101'in görünümü (~/Projects/101/public/app.css, birebir; "101 eski oyunla eşleme", 28 Ekim 2026).
   Ortak app.css önce yüklenir; bu dosya yalnız 101 sayfasında: renkler (mavi masa), lobi/pencere/düğme tonları ve masanın tamamı eski oyundaki gibi.
   Masa yerleşimi CSS ile (yüzdeler + --tw/--th/--sw/--sh/--rackh, app.js sizes()); dik ekranda kendi dik masası (html.port, döndürme yok; eski 90° döndürme html.rot yalnız ?layout=rot).
   Platform ekleri (eski oyunda yoktu): ☰ menü çipi, izleyici çipi, hamle süresi çubuğu, "Masaya dön", ders kutusu, ifade baloncukları, öneri halkası. */
:root{
  --tw:30px; --th:41px; --sw:18px; --sh:25px; --rackh:100px;
  --o1red:#d3202a; --o1yel:#e09a00; --o1blu:#1663c7; --o1blk:#1b1b1b;
  --o1felt1:#3178d8; --o1felt2:#1a4aa2; --o1navy:#0c2257;
}
/* Masa örtüsü (28 Ekim 2026, "okey örtümüz standart renk olsun kart oyunları gibi"): masa ekranı (html[data-scr=game]) platformun örtüsünü
   kullanır — app.css .screen (--felt1/--felt2 radyal gradyan + ::before çapraz çizgi) ve masa/pencere/düğme tonları; burada --felt*/--navy ezilmez.
   Eski mavi yalnız lobi/oda/kayıt ekranlarında (html:not([data-scr=game])), --o1* değişkenleriyle. */
html:not([data-scr=game]),html:not([data-scr=game]) body{background:#0e2f73}
#gate{display:flex;align-items:center;justify-content:center}
.o1-gate{font-size:20px;font-weight:800;color:var(--gold);opacity:.8}
.o1-pv{display:none;font-size:12px;vertical-align:middle;background:var(--gold);color:#3a2600;border-radius:999px;padding:2px 8px;margin-inline-start:6px}
html.o1preview .o1-pv{display:inline-block}

/* ---------- eski renkler: ekran, düğme, panel, pencere ---------- */
html:not([data-scr=game]) .screen{background:radial-gradient(ellipse at 50% 35%,var(--o1felt1),var(--o1felt2) 75%)}
html:not([data-scr=game]) .screen::before{opacity:.12;background-image:radial-gradient(circle at 25% 25%,transparent 0 18px,#fff 19px,transparent 20px 34px,#fff 35px,transparent 36px),
  radial-gradient(circle at 75% 75%,transparent 0 18px,#fff 19px,transparent 20px 34px,#fff 35px,transparent 36px);background-size:90px 90px}
html:not([data-scr=game]) .btn{background:linear-gradient(#3a66c9,#21479e)}
html:not([data-scr=game]) .btn.green{background:linear-gradient(#63d04f,#2f9b25);border-color:#9ef08b}
html:not([data-scr=game]) .btn.red{background:linear-gradient(#e0545b,#b0222a)}
html:not([data-scr=game]) .btn.gold{background:linear-gradient(#f6d25e,#d49a16);color:#3a2600;border-color:#ffe9a8}
html:not([data-scr=game]) .card-box{background:rgba(9,25,70,.82)}
html:not([data-scr=game]) .card-box input{border-color:#3a66c9}
html:not([data-scr=game]) .panel{background:rgba(9,25,70,.72)}
html:not([data-scr=game]) .seat.bot .av{background:#9fb5e8;color:#123}
html:not([data-scr=game]) .chip{background:var(--o1navy)}
html:not([data-scr=game]) .chip.btnc{background:#20407f}
html:not([data-scr=game]) #modal{background:rgba(0,10,40,.6)}
html:not([data-scr=game]) .mbox{background:linear-gradient(#183b85,#0d2560)}
html:not([data-scr=game]) #banner{background:linear-gradient(#1f3f8f,#0d2560)}
#banner{border:2px solid #f2c23f;top:30%;padding:12px 18px;font-size:16px;line-height:1.4}
#banner .pen{color:#ff8a8a;font-weight:900;font-size:18px}
#toast{top:18%}
#watchersDlg .wl div{padding:2px 0}

/* =================================== MASA (eski #felt) =================================== */
#game #felt{position:absolute;inset:0;direction:ltr}
#game .top-strip{position:absolute;top:1%;height:14%;display:flex;align-items:center;justify-content:space-between}
#game .chips{display:flex;gap:4px;flex-wrap:wrap;max-width:40%}
#game .chip{border-radius:6px;padding:3px 7px;font-size:11px;font-weight:700;white-space:nowrap;border:1px solid rgba(255,255,255,.12);display:inline-block;overflow:visible}
#game .chip.on{background:linear-gradient(#4fc63f,#2b8f22)}
#game .chip.btnc{cursor:pointer}
#game .center-cluster{display:flex;align-items:center;gap:8px}
#game .ind-box{text-align:center}#game .ind-box .lbl{font-size:9px;opacity:.9;margin-bottom:1px}
#game .pile{position:relative;width:var(--tw);height:var(--th);margin-bottom:7px;border-radius:5px;color:#fff;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.14),transparent 60%),repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 3px,transparent 3px 7px),linear-gradient(160deg,#e9474f,#a81d25);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),inset 0 0 0 calc(var(--tw)*.1) rgba(0,0,0,.1),0 2px 0 #f3eddb,0 3px 0 #bdb59c,0 5px 0 #efe8d4,0 6px 0 #aea68c,0 8px 0 #e9e2cc,0 9px 0 #9e967c,0 10px 6px rgba(0,0,0,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:calc(var(--tw) * .5);line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.45);cursor:pointer;overflow:visible}
#game .pile small{font-size:max(8px,calc(var(--tw) * .2));font-weight:700;opacity:.85;margin-top:2px;letter-spacing:.3px}
#game .pile.go{animation:pileGo 1.1s infinite}
@keyframes pileGo{50%{filter:drop-shadow(0 0 5px rgba(255,190,190,.95)) brightness(1.12)}}
@keyframes o1pulse{50%{box-shadow:0 0 0 5px rgba(255,255,255,.35),0 3px 0 rgba(0,0,0,.35)}}

#game .side{position:absolute;top:1.5%;bottom:calc(var(--rackh) + 6px);display:flex;flex-direction:column;justify-content:space-between}
#game .disc{position:relative;width:calc(var(--tw) + 12px);height:calc(var(--th) + 12px);border:2px dashed rgba(255,255,255,.25);border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer}
#game .disc .cnt{position:absolute;top:-7px;right:-9px;background:var(--navy);border-radius:8px;font-size:9px;padding:1px 5px;border:1px solid rgba(255,255,255,.25)}
#game .disc .dl{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-size:9px;opacity:.8;white-space:nowrap}
#game .disc.take.go{border-color:#fff;border-style:solid;animation:o1pulse 1.1s infinite}
#game .disc.mine.go{border-color:#7cf06a;border-style:solid}
#game .disc.drop{background:rgba(124,240,106,.25)}

/* künyeler (app.css'teki Baloot #tag-* yerleri burada geçersiz) */
#game .tagslot{position:static;transform:none;z-index:auto}
#game #tag-top,#game #tag-left,#game #tag-right,#game #tag-me{position:relative;top:auto;left:auto;right:auto;bottom:auto;transform:none}
#game .tag{position:relative;display:flex;align-items:center;gap:6px;border:2px solid rgba(255,255,255,.12);border-radius:10px;padding:3px 9px 3px 3px;min-width:0;max-width:none;box-shadow:0 2px 4px rgba(0,0,0,.35);cursor:default}
#game .tag .av{width:28px;height:28px;border-radius:7px;background:#ffd36a;color:#5a3a00;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;font-size:14px}
#game .tag .nm{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;line-height:normal}
#game .tag .sub{font-size:10px;opacity:.8;white-space:nowrap;line-height:normal}
#game .tag .sub b{color:var(--gold)}
#game .tag.turn{background:linear-gradient(#5fd24a,#2b8f22);border-color:#c5ffb7}
#game .tag.off{opacity:.55}
#game .tagslot.vert .tag{flex-direction:column;padding:5px 4px;gap:2px;text-align:center}
#game .opn{display:inline-block;background:#f2c23f;color:#4a3000;border-radius:4px;font-size:9px;padding:0 4px;font-weight:800;margin-left:3px}
#game .tag .tbar{position:absolute;left:4px;right:4px;bottom:1px;height:3px;border-radius:2px;background:rgba(0,0,0,.35);overflow:hidden}
#game .tag .tbar i{display:block;height:100%;background:#fff}#game .tag .tbar.warn i{background:#ff6b6b}
#game .tag .tsec{position:absolute;top:-8px;right:-8px;min-width:20px;height:18px;border-radius:9px;background:var(--navy);border:1px solid rgba(255,255,255,.35);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 3px}
#game .tag .tsec.warn{background:#b0222a}

#game #board{position:absolute;top:16%;bottom:calc(var(--rackh) + 44px);background:rgba(5,30,20,.5);border-radius:8px;overflow:auto;-webkit-overflow-scrolling:touch;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:18px 18px;display:grid;gap:3px;padding:3px}
#game #board.tek{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:minmax(48%,auto)}
#game #board.esli{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(48%,auto)}
#game .sec{position:relative;border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:12px 4px 3px;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:5px 7px;min-height:0;min-width:0}
#game .sec .lab{position:absolute;top:1px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;opacity:.6;font-weight:700}
#game .sec.mineSec{background:rgba(255,255,255,.035)}
#game .per{display:flex;gap:1px;padding:1px;border-radius:4px;direction:ltr}
#game .per.can{outline:2px solid #7cf06a;background:rgba(124,240,106,.18)}
#game .per.drop{outline:2px solid #fff;background:rgba(255,255,255,.25)}
#game .lastlog{position:absolute;top:16%;height:14px;line-height:14px;font-size:10px;opacity:.85;text-align:center;pointer-events:none;padding:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* ---------- taş ---------- */
.t{position:relative;width:var(--tw);height:var(--th);border-radius:5px;background:linear-gradient(#fffdf6,#ece6d3);box-shadow:0 2px 0 #b9b19a,0 3px 3px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:calc(var(--th) * .08);flex:none;color:#222;box-sizing:border-box}
.t b{font-size:calc(var(--tw) * .72);line-height:1;font-weight:800;font-family:"Arial Rounded MT Bold","SF Pro Rounded",Arial,sans-serif}
.t i{display:block;width:calc(var(--tw) * .3);height:calc(var(--tw) * .3);border-radius:50%;margin-top:calc(var(--th) * .07);background:radial-gradient(circle at 40% 35%,#fff,#d8d2bf);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.t.c0 b{color:var(--o1red)}.t.c1 b{color:var(--o1yel)}.t.c2 b{color:var(--o1blu)}.t.c3 b{color:var(--o1blk)}
.t.fake b{color:#1f9a33;font-size:calc(var(--tw) * .8)}
.t.okey::after{content:"★";position:absolute;top:1px;right:2px;font-size:calc(var(--tw) * .32);color:#e2a400;text-shadow:0 0 2px #fff}
.t.sm{width:var(--sw);height:var(--sh);border-radius:3px;box-shadow:0 1px 0 #b9b19a,0 1px 2px rgba(0,0,0,.3);padding-top:1px}
.t.sm b{font-size:calc(var(--sw) * .66)}
.t.sm i{width:calc(var(--sw) * .26);height:calc(var(--sw) * .26);margin-top:1px}
.t.sel{transform:translateY(-9px);box-shadow:0 0 0 2px #2fd34a,0 9px 6px rgba(0,0,0,.35)}
.t.took{box-shadow:0 0 0 3px #ffcf33,0 0 12px 3px rgba(255,207,51,.9),0 2px 0 #b9b19a;animation:tookp 1.2s ease-in-out infinite;z-index:2}
.t.took::before{content:attr(data-took);position:absolute;top:calc(var(--th) * -.32);left:50%;transform:translateX(-50%);background:#ffcf33;color:#4a3000;font-size:8px;font-weight:900;padding:1px 3px;border-radius:3px;white-space:nowrap;letter-spacing:.3px}
@keyframes tookp{50%{box-shadow:0 0 0 3px #ffcf33,0 0 4px 1px rgba(255,207,51,.5),0 2px 0 #b9b19a}}
.t.staged{opacity:.28}
.t.ghost{position:fixed;z-index:50;pointer-events:none;transform:scale(1.12);box-shadow:0 10px 14px rgba(0,0,0,.45)}
.t.dragging{opacity:.3}
.t.okey:not(.sm){flex-direction:column-reverse;justify-content:flex-end;padding-top:0;padding-bottom:calc(var(--th) * .1)}
.t.okey:not(.sm) b{transform:rotate(180deg)}
.t.islek::after{content:"";position:absolute;left:50%;bottom:calc(var(--th) * .09);width:calc(var(--tw) * .17);height:calc(var(--tw) * .17);margin-left:calc(var(--tw) * -.085);border-radius:50%;background:#e0242c}
.t.drawn{box-shadow:0 0 0 3px #40ccff,0 0 12px 3px rgba(64,204,255,.85),0 2px 0 #b9b19a;z-index:2}
.t.drawn::before{content:attr(data-drawn);position:absolute;top:calc(var(--th) * -.32);left:50%;transform:translateX(-50%);background:#40ccff;color:#06324a;font-size:8px;font-weight:900;padding:1px 3px;border-radius:3px;white-space:nowrap}
.t.hint:not(.sel):not(.took):not(.drawn){box-shadow:0 0 0 2px #ff8c1a,0 0 8px 2px rgba(255,140,26,.6),0 2px 0 #b9b19a}
.t.hint:not(.took):not(.drawn)::before{content:attr(data-hint);position:absolute;top:calc(var(--th) * -.32);left:50%;transform:translateX(-50%);background:#ff8c1a;color:#3a1c00;font-size:8px;font-weight:900;padding:1px 4px;border-radius:3px}
.t.back{background:linear-gradient(135deg,#e9474f,#a81d25)!important;border:2px solid #ffd0d0}
.t.fx-hint{animation:fx-hint-pulse 1s ease-in-out var(--fx-hint-d,0ms) 3 both}
.t.fx-hint.fx-hint-still{animation:none;box-shadow:var(--fx-hint-soft)}
#acts .btn.fx-hint,.sortbtn.fx-hint{animation:fx-hint-pulse 1s ease-in-out var(--fx-hint-d,0ms) 3 both}
@media (prefers-reduced-motion:reduce){.t.fx-hint,#acts .btn.fx-hint,.sortbtn.fx-hint{animation:none;box-shadow:var(--fx-hint-soft)}}
/* taş dizileri her dilde soldan sağa */
.mbox .tiles,.mbox .o1-tiles,.stagebox .grp,#game .per{direction:ltr}

/* ---------- ıstaka ---------- */
#game .rackrow{touch-action:none;position:absolute;left:0;right:0;bottom:0;height:var(--rackh);display:flex;align-items:stretch;gap:6px;padding:0 max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}
#game .sortbtn{flex:0 1 10.5%;min-width:0;overflow:hidden;background:linear-gradient(#2f8a5e,#1b5e3f);border:2px solid rgba(255,255,255,.18);border-radius:10px;font-weight:800;font-size:12px;line-height:1.05;box-shadow:0 3px 0 rgba(0,0,0,.35);margin-bottom:2px;color:#fff;padding:0}
#game .sortbtn .mini{display:block;margin:0 auto 3px;width:fit-content;background:#fff8e8;color:#d3202a;border-radius:3px;padding:1px 4px;font-size:10px}
#game .sortbtn .sl{display:block}
#game #rack{flex:1;position:relative;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,#f7d064 0%,#e8b03a 48%,#c98a1c 50%,#f2c04e 52%,#dba030 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.2),0 3px 6px rgba(0,0,0,.35);display:grid;grid-template-rows:1fr 1fr;padding:4px 6px 6px;direction:ltr}
#game #rack::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;background:linear-gradient(#a66d0d,#e6b244);opacity:.6}
#game .rrow{display:flex;justify-content:center;align-items:flex-end;gap:2px}
#game .slot{width:calc(var(--tw) + 1px);height:var(--th);border-radius:5px;flex:none;display:flex;align-items:flex-end}
#game .slot.drop{background:rgba(255,255,255,.35)}

/* ---------- eylem çubuğu ---------- */
#game #actionbar{position:absolute;bottom:calc(var(--rackh) + 4px);height:36px;display:flex;align-items:center;gap:4px}
#game .mytag .tag{padding:2px 8px 2px 2px}#game .mytag .tag .av{width:24px;height:24px}
#game .stagebox{flex:1;display:flex;align-items:center;gap:6px;overflow-x:auto;min-width:0;height:100%}
#game .stagebox .grp{display:flex;gap:1px;background:rgba(0,0,0,.25);padding:2px;border-radius:4px;flex:none}
#game .stagebox .sum{font-size:12px;font-weight:800;white-space:nowrap}#game .stagebox .sum.okk{color:#8bff7a}
#game .stagebox .msg{font-size:12px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#game .acts{display:flex;gap:4px;flex:none}
#game .acts .btn{min-height:0;min-width:0;font-size:13px;padding:5px 10px}
#game .sortbtn,#game .chip{min-height:0;min-width:0}
#game .handstat{flex:none;display:flex;flex-direction:column;gap:1px;font-size:11px;line-height:1.15;background:rgba(5,30,20,.8);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:2px 7px;white-space:nowrap}
#game .handstat:empty{display:none}
#game .handstat b{color:#ffd36a;font-size:12px}
#game .handstat .ok{color:#8bff7a}#game .handstat .ok b{color:#8bff7a}
#game .handstat i{font-style:normal;font-weight:800;margin-left:2px}#game .handstat i.down{color:#ff7b7b}#game .handstat i.up{color:#8bff7a}
#game .handstat .kat{color:#ffd36a;font-weight:700}

/* ---------- pencereler (eski) ---------- */
.mbox .tiles{display:flex;flex-wrap:wrap;gap:2px;max-width:60vw}
.mbox .rules,.mbox .o1-rules{font-size:12px;line-height:1.45;max-width:78vw}.mbox .rules li,.mbox .o1-rules li{margin-bottom:2px}
html[dir=rtl] .o1-rules{direction:rtl}
.neg,.mbox td.neg{color:#8bff7a}.pos,.mbox td.pos{color:#ffb3b3}
.mbox table{min-width:min(100%,560px)}
.o1-rtiles{display:flex;gap:1px}
.o1-menu{display:flex;flex-direction:column;gap:6px;min-width:min(260px,70vw)}
.o1-lesmenu{display:flex;flex-direction:column;gap:6px;min-width:min(320px,80vw)}.o1-lesbtn{min-height:48px;text-align:start}

/* ---------- yerleşim düzeltmesi (eski): kenarlara yasla, masayı ortala ---------- */
:root{--sideW:clamp(74px,11vw,110px);--padL:max(4px,env(safe-area-inset-left));--padR:max(4px,env(safe-area-inset-right))}
#game .side{width:var(--sideW)}
#game .side.left{left:var(--padL);align-items:flex-start}
#game .side.right{right:var(--padR);align-items:flex-end}
#game .tagslot.vert{width:100%;display:flex}
#game .side.left .tagslot.vert{justify-content:flex-start}
#game .side.right .tagslot.vert{justify-content:flex-end}
#game .tagslot.vert .tag{width:auto;max-width:100%;min-width:0;overflow:hidden}
#game .tagslot.vert .tag .nm{max-width:calc(var(--sideW) - 12px)}
#game .top-strip{left:calc(var(--padL) + var(--sideW) + 6px);right:calc(var(--padR) + var(--sideW) + 6px);gap:6px}
#game .top-strip .tagslot{flex:0 1 auto;min-width:0;display:flex;justify-content:center}
#game .chips{flex:1 1 0;min-width:0}
#game .center-cluster{flex:none}
#game #board,#game #actionbar,#game .lastlog{left:calc(var(--padL) + var(--sideW) + 6px);right:calc(var(--padR) + var(--sideW) + 6px)}
#game #board{top:calc(16% + 14px)}

#game #felt.flash::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:6px;box-shadow:inset 0 0 0 4px #7cf06a,inset 0 0 40px rgba(124,240,106,.55);animation:flashT 1.2s ease-out forwards}
@keyframes flashT{from{opacity:1}to{opacity:0}}

/* ---------- WebGPU çizici (gpu.js) ---------- */
#gpuBg,#gpuFg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
html.gpu #felt .t{background:none!important;box-shadow:none!important;animation:none!important}
html.gpu #felt .t>*{visibility:hidden}
html.gpu #felt .t::after{display:none}
html.gpu #felt .t.sel{box-shadow:none}
html.gpu #felt #o1fx .t{background:linear-gradient(#fffdf6,#ece6d3)!important;box-shadow:0 2px 0 #b9b19a!important}
html.gpu #felt #o1fx .t>*{visibility:visible}
#gpuFg{z-index:5}

/* ---------- dik telefon: masa 90° döndürülür (eski) ---------- */
html.rot{--sideW:clamp(74px,11vh,110px);--padL:max(4px,env(safe-area-inset-top));--padR:max(4px,env(safe-area-inset-bottom))}
html.rot #game .side.left{left:var(--padL)}html.rot #game .side.right{right:var(--padR)}
html.rot #game .rackrow{padding:0 var(--padR) max(4px,env(safe-area-inset-left)) var(--padL)}
html.rot .mbox{max-width:92vh;max-height:88vw}
html.rot .mbox .tiles{max-width:60vh}
html.rot .mbox .rules,html.rot .mbox .o1-rules{max-width:78vh}
html.rot .mbox .cmsg{max-width:60vh!important}
html.rot #toast{max-width:70vh}
html.rot #banner{max-width:80vh}

/* ---------- dik ekran: gerçek dik masa (html.port, 28 Ekim 2026; döndürme yok) ----------
   Üstte çipler, karşıdaki + gösterge/deste/okey; yanlarda soldaki/sağdaki künye ve köşe atıkları (koltuk s'nin atığı s ile s+1 arasında, yatayla aynı);
   ortada per alanı (tek sütun, taşarsa kayar); altta son günlük satırı, eylem çubuğu (künyem, Seri/Çift kutusu, mesaj, düğmeler), SERİ/ÇİFT DİZ ve
   tam genişlikte 2 × 16 ıstaka. --topH / --abH app.js portFit() ölçer; --tw/--th/--sw/--dw/--rackh sizes(). */
.okinfo{display:none}
html.port{--sideW:max(58px,calc(var(--dw,28px) + 24px));--padT:max(6px,env(safe-area-inset-top))}
html.port #game .top-strip{top:var(--padT);left:var(--padL);right:var(--padR);height:auto;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px}
html.port #game .chips{flex:1 1 100%;max-width:none;justify-content:center;gap:5px}
html.port #game .chip{font-size:12px;padding:6px 9px;border-radius:8px}
html.port #game .top-strip .tagslot{flex:0 1 auto;min-width:0}
html.port #game .center-cluster{gap:8px;align-items:flex-end}
html.port #game .center-cluster{--tw:var(--dw);--th:var(--dh)}
html.port #game .ind-box .lbl,html.port #game .okinfo .lbl{font-size:10px;opacity:.9;margin-bottom:2px;text-align:center}
html.port #game .pile{width:calc(var(--dw) + 10px);height:calc(var(--dh) + 8px);margin-bottom:3px}
html.port #game .okinfo{display:flex;flex-direction:column;align-items:center}
html.port #game .okb{display:flex;align-items:center;justify-content:center;width:var(--dw);height:var(--dh);border-radius:5px;background:linear-gradient(#fffdf6,#ece6d3);box-shadow:0 0 0 2px #e2a400,0 2px 0 #b9b19a;font-weight:800;font-size:calc(var(--dw) * .66);font-family:"Arial Rounded MT Bold","SF Pro Rounded",Arial,sans-serif;position:relative;margin-bottom:3px}
html.port #game .okb::after{content:"★";position:absolute;top:0;right:2px;font-size:calc(var(--dw) * .3);color:#e2a400}
html.port #game .okb.c0{color:var(--o1red)}html.port #game .okb.c1{color:var(--o1yel)}html.port #game .okb.c2{color:var(--o1blu)}html.port #game .okb.c3{color:var(--o1blk)}

html.port #game .side{top:calc(var(--topH,150px) + 8px);bottom:calc(var(--rackh) + var(--abH,84px) + 26px);width:var(--sideW);justify-content:space-around;gap:16px}
html.port #game .side.left{left:var(--padL)}html.port #game .side.right{right:var(--padR)}
html.port #game .disc{--tw:var(--dw);--th:var(--dh)}
html.port #game .tagslot.vert .tag{max-width:var(--sideW);padding:4px 3px}
html.port #game .tagslot.vert .tag .nm{max-width:calc(var(--sideW) - 8px);font-size:11px;white-space:normal;overflow-wrap:anywhere;line-height:1.1}
html.port #game .tag .sub{font-size:10px}
html.port #game #board,html.port #game .lastlog{left:calc(var(--padL) + var(--sideW) + 4px);right:calc(var(--padR) + var(--sideW) + 4px)}
html.port #game #board{top:calc(var(--topH,150px) + 8px);bottom:calc(var(--rackh) + var(--abH,84px) + 24px)}
html.port #game #board.tek{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(24%,auto)}
html.port #game #board.esli{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(48%,auto)}
html.port #game .sec{gap:4px 6px}
html.port #game .lastlog{top:auto;left:var(--padL);right:var(--padR);bottom:calc(var(--rackh) + var(--abH,84px) + 6px);height:16px;line-height:16px;font-size:11px}

html.port #game #actionbar{left:var(--padL);right:var(--padR);bottom:calc(var(--rackh) + 4px);height:auto;flex-wrap:wrap;gap:4px 6px}
html.port #game .stagebox{flex:1 1 0;height:auto;min-height:36px;overflow-x:auto}
html.port #game .stagebox .msg{white-space:normal;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
html.port #game .acts{flex:1 1 100%;min-height:40px;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:5px}
html.port #game .acts .btn{min-height:40px;font-size:14px;padding:6px 12px}
html.port #game .handstat{padding:3px 7px}

html.port #game .rackrow{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:40px 1fr;gap:6px 8px;padding:0 var(--padR) max(4px,env(safe-area-inset-bottom)) var(--padL)}
html.port #game #sortSeri{grid-column:1;grid-row:1}html.port #game #sortCift{grid-column:2;grid-row:1}
html.port #game #rack{grid-column:1/-1;grid-row:2;padding:4px 4px 6px}
html.port #game .sortbtn{margin:0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px}
html.port #game .sortbtn .mini{margin:0}
html.port #game .sortbtn .sl{text-align:start;font-size:12px}
html.port #game.spectator .rackrow{display:none}
html.port #game .rrow{gap:1px}
html.port #game .slot{width:var(--tw)}
html.port #o1back{bottom:calc(var(--rackh) + var(--abH,84px) + 8px)}
html.port .mbox .tiles{max-width:100%}
html.port .mbox table{width:100%;min-width:0;table-layout:auto}
html.port .mbox th,html.port .mbox td{padding:4px 3px}
html.port .mbox th,html.port .mbox td:nth-child(2){white-space:normal}
html.port .o1-rtiles{direction:ltr;flex-wrap:wrap;min-width:calc(var(--sw) * 3 + 2px)}
html.port #game .tagslot.vert .tag .sub{white-space:normal;line-height:1.15}

/* ---------- el sonu: devrilen ıstaka ve saçılan taşlar ---------- */
.spill{position:absolute;inset:0;z-index:40;pointer-events:auto;overflow:hidden}
.spill-rack{position:absolute;border-radius:6px;background:linear-gradient(180deg,#f7d064 0%,#e8b03a 48%,#c98a1c 50%,#f2c04e 52%,#dba030 100%);box-shadow:0 6px 14px rgba(0,0,0,.45);transform-origin:50% 100%}
.spill-tile{position:absolute;will-change:transform}
.spill-tile .t{width:100%!important;height:100%!important;box-shadow:0 3px 6px rgba(0,0,0,.45),0 2px 0 #b9b19a}
.spill-tile .t b{font-size:calc(var(--tw) * .56)}
.spill-tile .t i{width:calc(var(--tw) * .22);height:calc(var(--tw) * .22)}
.spill-label{position:absolute;transform:translateX(-50%);background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:8px;white-space:nowrap;pointer-events:none}

/* ---------- uçan taş ---------- */
.flytile{position:absolute;z-index:45;pointer-events:none;will-change:transform}
.flytile .t{width:100%!important;height:100%!important;box-shadow:0 8px 14px rgba(0,0,0,.45),0 2px 0 #b9b19a}
.flytile .t b{font-size:calc(var(--tw) * .72)}
#felt .t.flyhide,.t.flyhide{visibility:hidden!important}

/* ---------- görünmez gerçek anahtar (iOS titreşimi) ---------- */
#game input.hap{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:.011;z-index:3;cursor:pointer;-webkit-appearance:auto;appearance:auto;visibility:visible!important}
#game label.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden}
#game label.pile{display:flex;flex-direction:column;overflow:visible}
#game label.btn.dis{opacity:.4;pointer-events:none}
.flytile input.hap,.t.ghost input.hap,.spill input.hap{display:none}
html.nohap input.hap{display:none}

/* ---------- izleyici ---------- */
#game.spectator{--rackh:0px}
#game.spectator .rackrow{display:none}
#game.spectator .handstat{display:none}

/* ---------- platform ekleri ---------- */
#o1back{position:absolute;z-index:46;left:0;right:0;bottom:calc(var(--rackh) + 44px);display:flex;justify-content:center;padding:8px}
#o1back .btn{width:min(320px,80%)}
#o1fx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:44}
#game #lessonBox{position:absolute;transform:none;right:auto;bottom:auto;margin:0;box-sizing:border-box;z-index:47;overflow:auto;font-size:13px;line-height:1.4;padding:8px 12px;border-width:2px}
#game #lessonBox .row{margin-top:6px}#game #lessonBox .stepn{font-size:12px}
.fx-baloot-it .t,.fx-kaboot .t{--tw:var(--fw,30px);--th:calc(var(--fw,30px) * 1.36);width:100%!important;height:100%!important}