:root{--vh:100vh;
  --bg:#101820; --bg2:#1a2733; --panel:#17222d; --ink:#f3efe6; --mut:#94a3b0;
  --lamp:#ffc857; --lamp-ink:#2a1d00; --bad:#ff6b81; --ok:#5fd6a4;
  font-family:ui-rounded,"Nunito","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:radial-gradient(900px 600px at 15% -10%,#24384a,var(--bg));color:var(--ink);font-size:15px;line-height:1.4;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
input{font:inherit}

/* Giriş */
#login{display:grid;place-items:center;height:100%;padding:16px}
.card{width:min(380px,100%);background:var(--panel);padding:28px;border-radius:20px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px #0008}
.card h1{margin:0;font-size:26px}
.card p{margin:0;color:var(--mut)}
.card input{padding:13px 14px;border-radius:12px;border:2px solid #2c3d4c;background:#0f1923;color:var(--ink);outline:none}
.card input:focus{border-color:var(--lamp)}
.primary{padding:13px;border:0;border-radius:12px;background:var(--lamp);color:var(--lamp-ink);font-weight:700}
.err{color:var(--bad)!important;min-height:1.2em}

/* Oda */
#room{position:fixed;top:0;right:0;bottom:0;left:0}
#stage{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-wrap:wrap;gap:10px;padding:10px 10px 96px;align-content:center;justify-content:center;overflow:auto}
.tile::before{content:"";display:block;padding-top:75%}
.tile.fs::before{display:none}
.tile{position:relative;flex:1 1 360px;max-width:min(100%,calc((var(--vh) - 120px) * 1.3333));aspect-ratio:4/3;background:#05080c;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px #0006}
.tile video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;display:block}
.tile.mirror video{transform:scaleX(-1)}
.camoff{position:absolute;top:0;right:0;bottom:0;left:0;display:none;place-items:center;background:linear-gradient(135deg,#243444,#131c26)}
.camoff span{width:20vmin;height:20vmin;border-radius:50%;background:var(--lamp);color:var(--lamp-ink);display:grid;place-items:center;font-size:clamp(26px,7vw,64px);font-weight:800}
.tile.nocam .camoff,.tile.vhide .camoff{display:grid}
.tile.vhide video{visibility:hidden}
.label{position:absolute;left:8px;bottom:8px;display:flex;gap:6px;align-items:center;background:#000a;padding:3px 11px;border-radius:99px;font-size:13px;max-width:80%}
.label b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tools{position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .2s}
.tile:hover .tools,.tile:focus-within .tools{opacity:1}
@media (hover:none){.tools{opacity:.9}}
.tools button{width:34px;height:34px;border-radius:10px;border:0;background:#000b;font-size:16px}
.tools button:hover{background:#000}
.tile.fs{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;max-width:none;aspect-ratio:auto;border-radius:0}
.ink{position:absolute;top:0;right:0;bottom:0;left:0;display:none;touch-action:none;cursor:crosshair}
.tile.penning .ink{display:block}
.tile.penning{outline:3px solid var(--lamp);outline-offset:-3px}
.tile.shake{animation:shake .75s}
@keyframes shake{
  0%,100%{transform:translate(0)}
  10%{transform:translate(-14px,6px) rotate(-2deg)}20%{transform:translate(12px,-8px) rotate(2deg)}
  30%{transform:translate(-12px,-6px) rotate(-1.5deg)}40%{transform:translate(14px,8px) rotate(1.5deg)}
  50%{transform:translate(-10px,4px)}60%{transform:translate(10px,-4px)}
  70%{transform:translate(-6px,2px)}80%{transform:translate(6px,-2px)}
}
@media (prefers-reduced-motion:reduce){.tile.shake{animation:none;outline:3px solid var(--bad)}}

/* Saydam küçük liste */
#mini{position:absolute;left:10px;top:10px;width:150px;max-height:calc(100% - 110px);overflow:auto;display:flex;flex-direction:column;gap:8px;padding:8px;background:#0a121b99;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:14px;z-index:20}
#mini .tile{flex:none;width:100%;max-width:none;cursor:pointer;border-radius:10px}
#mini .tools,#mini .st{display:none}
#mini .label{font-size:11px;padding:2px 8px}

/* Kalem */
.fab{position:absolute;top:10px;right:10px;z-index:30;width:46px;height:46px;border-radius:50%;border:0;background:#0a121bcc;font-size:20px;backdrop-filter:blur(6px)}
.fab.on{background:var(--lamp)}
#penPal{position:absolute;top:64px;right:10px;z-index:30;display:flex;flex-direction:column;gap:8px;padding:8px;background:#0a121bcc;border-radius:14px;backdrop-filter:blur(6px)}
#penPal button{width:28px;height:28px;border-radius:50%;border:2px solid #fff4;padding:0}
#penPal button.sel{border-color:#fff;transform:scale(1.15)}
#penPal .clr{border-radius:8px;width:auto;border:0;background:#fff2;font-size:15px}

/* Alt çubuk */
#bar{position:absolute;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:40;display:flex;gap:6px;padding:8px;background:#0a121bdd;border-radius:22px;backdrop-filter:blur(10px);max-width:calc(100% - 16px);overflow-x:auto}
#bar button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:58px;padding:7px 8px;border:0;border-radius:14px;background:#ffffff12;font-size:11px}
#bar button i{font-style:normal;font-size:20px}
#bar button:hover{background:#ffffff22}
#bar button.off{background:var(--bad);color:#2b0008}
#bar button.on{background:var(--lamp);color:var(--lamp-ink)}
#bar button.danger{background:#ffffff12}
#bar button.danger:hover{background:var(--bad)}
#chatBadge{position:absolute;top:2px;right:6px;background:var(--bad);color:#fff;border-radius:99px;font-style:normal;font-size:10px;padding:0 6px}

/* Sohbet */
#chat{position:absolute;right:0;top:0;bottom:0;width:min(340px,100%);z-index:50;background:#101a24ee;backdrop-filter:blur(10px);display:flex;flex-direction:column;border-left:1px solid #fff1}
#chat header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px}
#chat header button{border:0;background:none;font-size:18px}
#msgs{flex:1;overflow:auto;padding:0 12px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:88%;background:#223242;padding:7px 11px;border-radius:14px 14px 14px 4px;word-break:break-word}
.msg.me{align-self:flex-end;background:#4a3a12;border-radius:14px 14px 4px 14px}
.msg small{display:block;color:var(--mut);font-size:11px}
.msg img{display:block;max-width:100%;border-radius:8px;margin-top:4px}
#picker{max-height:230px;overflow:auto;padding:8px;background:#0a121b;border-top:1px solid #fff1}
#emojiGrid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
#emojiGrid button{border:0;background:none;font-size:22px;padding:4px;border-radius:8px}
#emojiGrid button:hover{background:#fff2}
#gifQ{width:100%;padding:8px 10px;border-radius:10px;border:0;background:#223242;color:var(--ink);margin-bottom:6px}
#gifGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;color:var(--mut);font-size:13px}
#gifGrid img{width:100%;border-radius:8px;cursor:pointer;display:block}
#chatForm{display:flex;gap:6px;padding:10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
#chatForm input{flex:1;min-width:0;padding:10px 12px;border-radius:12px;border:0;background:#223242;color:var(--ink);outline:none}
#chatForm button{border:0;border-radius:12px;background:#223242;padding:0 10px;font-size:15px}
#chatForm .send{background:var(--lamp);color:var(--lamp-ink)}

/* Efekt paneli */
#fx{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);z-index:45;width:min(560px,calc(100% - 16px));max-height:calc(var(--vh) * 0.55);overflow:auto;padding:14px;background:#0a121bee;border-radius:18px;backdrop-filter:blur(10px)}
#fx h4{margin:10px 0 6px;font-size:13px;color:var(--mut);font-weight:600}
#fx h4:first-child{margin-top:0}
#fx .chips{display:flex;flex-wrap:wrap;gap:6px}
#fx .chip{border:0;border-radius:99px;padding:6px 13px;background:#ffffff14;font-size:13px}
#fx .chip.on{background:var(--lamp);color:var(--lamp-ink);font-weight:700}
#fx p{margin:8px 0 0;font-size:12px;color:var(--mut)}

/* Bildirimler */
#toasts{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
#toasts div{background:#000d;padding:7px 14px;border-radius:99px;font-size:13px}
#banner{position:absolute;top:60px;left:50%;transform:translateX(-50%);z-index:65;display:flex;flex-direction:column;gap:4px;align-items:center;pointer-events:none}
#banner div{background:var(--bad);color:#2b0008;padding:5px 14px;border-radius:99px;font-size:13px;font-weight:700}

#camVideo{position:fixed;width:2px;height:2px;opacity:.01;pointer-events:none;left:0;top:0}

@media (max-width:600px){
  #bar button{min-width:50px;padding:6px}
  #mini{width:108px}
}

/* ===== 2. sürüm eklemeleri ===== */
.chk{display:flex;gap:8px;align-items:center;color:var(--ink);cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--lamp)}
.who{background:#0f1923;border-radius:12px;padding:10px 12px;font-size:14px}
.who b{display:block;color:var(--mut);font-size:12px;font-weight:600;margin-bottom:4px}
.who ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;max-height:150px;overflow:auto}
.who li small{color:var(--mut)}
.small{color:var(--mut);font-size:12px;text-align:center}
#nameLine{color:var(--mut)} #nameLine b{color:var(--ink)} #nameLine a{color:var(--lamp)}

.tools{flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 12px);z-index:3}
.tools button{width:32px;height:32px;font-size:15px}
.label{z-index:3}
.inkc{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}
#room.pen-on .tile .inkc{pointer-events:auto;cursor:crosshair;touch-action:none}
#room.pen-on #mini .inkc{pointer-events:none}
.tile.armed{outline:3px solid #3ea6ff;outline-offset:-3px}
.tile.armed .tools [data-act=sensor]{background:#3ea6ff}

.sheet{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);z-index:45;width:min(580px,calc(100% - 16px));max-height:calc(var(--vh) * 0.58);overflow:auto;padding:14px;background:#0a121bee;border-radius:18px;backdrop-filter:blur(10px)}
.sheet header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sheet header>button{border:0;background:none;font-size:18px}
.tabs{display:flex;gap:6px}
.tabs button{border:0;border-radius:99px;padding:6px 14px;background:#ffffff14;font-size:13px}
.tabs button.on{background:var(--lamp);color:var(--lamp-ink);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:0;border-radius:99px;padding:6px 13px;background:#ffffff14;font-size:13px}
.chip.on{background:var(--lamp);color:var(--lamp-ink);font-weight:700}
#reactGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:12px}
#reactGrid button{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;border-radius:14px;padding:8px 4px;background:#ffffff12;font-size:11px}
#reactGrid button i{font-style:normal;font-size:28px}
#reactGrid button:active{transform:scale(.94);background:var(--lamp);color:var(--lamp-ink)}

#penPal button.tool{border-radius:8px;width:auto;min-width:28px;border:0;background:#fff2;font-size:14px;color:#fff}
#penPal button.tool.sel{background:var(--lamp);color:var(--lamp-ink);transform:none}

#barShow{position:absolute;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:40;border:0;border-radius:99px;padding:4px 22px;background:#0a121bcc;font-size:16px}
#nameDlg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:80;display:grid;place-items:center;background:#000a;padding:16px}
#nameDlg .row{display:flex;gap:8px}
#nameDlg .row button{flex:1;padding:12px;border:0;border-radius:12px;background:#ffffff18}
#nameDlg .row .primary{background:var(--lamp);color:var(--lamp-ink)}

#fly{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:130;overflow:hidden}
#fly span{position:absolute;animation:rise var(--d,3s) ease-out var(--dl,0s) forwards;font-size:var(--s,36px);opacity:0}
@keyframes rise{0%{transform:translate(0,0) scale(.5);opacity:0}12%{opacity:1}100%{transform:translate(var(--dx,0),var(--dy,-100vh)) scale(1.2);opacity:0}}

#dark{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#000;display:grid;place-items:end center;padding-bottom:40px;color:#555;font-size:13px;cursor:none}
#dark span{animation:fadeout 4s forwards}
@keyframes fadeout{0%,60%{opacity:1}100%{opacity:0}}

/* ===== 3. sürüm eklemeleri ===== */
#msgs::before{content:'';margin-top:auto}           /* mesajlar aşağıdan yukarı birikir (WhatsApp gibi) */
#msgs{padding-bottom:6px}
.label .cn{font-style:normal;font-size:11px;color:#ffd98a}
.tg{display:flex;flex-direction:column;gap:6px;background:#0f1923;border-radius:12px;padding:10px 12px;text-align:left}
.tg small{color:var(--mut);font-size:11px}
.tg .row{display:flex;gap:6px}
.tg input{flex:1;min-width:0;padding:9px 10px;border-radius:10px;border:2px solid #2c3d4c;background:#0a121b;color:var(--ink)}
.tg button{border:0;border-radius:10px;padding:0 12px;background:#ffffff18}
.tgMsg{margin:0;font-size:12px;color:var(--lamp)}
#invite textarea{width:100%;padding:10px;border-radius:12px;border:2px solid #2c3d4c;background:#0f1923;color:var(--ink);font:inherit;resize:vertical;margin-bottom:10px}
#invite .chips{margin-bottom:8px}
#invite .primary{width:100%}

/* ===== 4. sürüm eklemeleri ===== */
/* Konuşan büyük, diğerleri küçük */
#stage.spk>.tile{flex:0 0 150px;max-width:150px}
#stage.spk>.tile.big{order:-1;flex:1 1 100%;max-width:min(100%,calc((var(--vh) - 250px) * 1.3333))}
#stage.spk>.tile:not(.big) .tools{display:none}
.tile.talk{box-shadow:0 0 0 3px var(--ok),0 8px 24px #0006}
.fab2{right:64px}
.label .cn{cursor:pointer}
#nameDlg .card{max-height:calc(var(--vh) * 0.92);overflow:auto;width:min(420px,100%)}

/* Oyunlar */
#games{position:absolute;top:0;right:0;bottom:0;left:0;z-index:55;display:grid;place-items:center;background:#0008;padding:10px}
.gcard{width:min(520px,100%);max-height:calc(var(--vh) - 20px);overflow:auto;background:#17222df2;border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:10px}
.gcard header{display:flex;justify-content:space-between;align-items:center}
.gcard header button{border:0;background:none;font-size:18px}
.gmsg{margin:0;color:var(--mut);font-size:13px;text-align:center}
.gmsg.warn{color:var(--lamp)}
.gstat{margin:0;text-align:center;font-weight:700}
.gbig{margin:0;text-align:center;font-size:40px}
.gmenu{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gtile{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;border-radius:16px;padding:18px 8px;background:#ffffff14;font-size:14px}
.gtile i{font-style:normal;font-size:34px}
.glist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;text-align:center}
.gfoot,.grow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.gbtn{border:0;border-radius:12px;padding:10px 16px;background:#ffffff18}
.gbtn.pri{background:var(--lamp);color:var(--lamp-ink);font-weight:700}
.gbtn:disabled{opacity:.4}
.ttt{display:grid;grid-template-columns:repeat(3,84px);gap:6px;justify-content:center}
.cell{height:84px;border:0;border-radius:14px;background:#ffffff14;font-size:38px}
.cell.win{background:var(--ok)}
.rpsb{width:84px;height:84px;border:0;border-radius:20px;background:#ffffff14;font-size:40px}
.rpsb.sel{background:var(--lamp)}
.rpsb:disabled{opacity:.5}
.mem{display:grid;grid-template-columns:repeat(4,64px);gap:8px;justify-content:center}
.mcard{height:64px;border:0;border-radius:12px;background:#2c3f55;font-size:30px}
.mcard.up{background:#fff2}
.mcard.o0{background:#2f6fd0}.mcard.o1{background:#2e9b63}.mcard.o2{background:#d98324}.mcard.o3{background:#8a4fd1}
.mcard:disabled{opacity:1}
.uplayers{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.upl{padding:4px 12px;border-radius:99px;background:#ffffff14;font-size:13px}
.upl.turn{background:var(--lamp);color:var(--lamp-ink);font-weight:700}
.umid{display:flex;gap:16px;justify-content:center;align-items:center}
.uinfo{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mut)}
.ucolor{padding:3px 10px;border-radius:99px;color:#fff;font-weight:700;text-align:center}
.uhand{display:flex;gap:6px;overflow-x:auto;padding:8px 2px;justify-content:flex-start}
.ucard{flex:none;width:52px;height:78px;border:3px solid #fff;border-radius:10px;font-size:20px;font-weight:800;color:#fff;text-shadow:0 1px 2px #0008;opacity:.45}
.ucard.ok{opacity:1;transform:translateY(-6px)}
.ucard.big{width:70px;height:104px;font-size:28px;opacity:1}
.ucard:disabled{cursor:default}
.uR{background:#d93a3a}.uY{background:#e6b422;color:#2a1d00}.uG{background:#2e9b4f}.uB{background:#2f6fd0}.uW{background:linear-gradient(135deg,#d93a3a,#e6b422,#2e9b4f,#2f6fd0)}
.ucolor.uY{color:#2a1d00}

/* ===== 5. sürüm eklemeleri ===== */
/* Ayarlar menüsü */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.sgrid button{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;border-radius:14px;padding:10px 6px;background:#ffffff14;font-size:12px}
.sgrid button i{font-style:normal;font-size:24px}
.sgrid button.off{background:var(--bad);color:#2b0008}
.sgrid button.on{background:var(--lamp);color:var(--lamp-ink)}

/* Oyun: oyuncu kameraları + ortak parçalar */
.gcard.wide{width:min(760px,100%)}
.gh{margin:10px 0 4px;color:var(--mut);font-size:13px}
.gscores{margin:0;padding-left:22px;font-size:14px}
.gstat.warn{color:var(--lamp)}
.pbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pchip{display:flex;align-items:center;gap:8px;background:#ffffff12;border-radius:14px;padding:4px 12px 4px 4px}
.pchip.turn{background:var(--lamp);color:var(--lamp-ink)}
.pav{width:42px;height:42px;border-radius:50%;overflow:hidden;background:#243444;display:grid;place-items:center;font-weight:800;flex:none;font-size:20px}
.pcam{width:100%;height:100%;object-fit:cover;display:block}
.ptxt{display:flex;flex-direction:column;line-height:1.15}
.ptxt small{font-size:11px;opacity:.85}
#gameInvite{position:absolute;top:70px;left:50%;transform:translateX(-50%);z-index:85;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;background:#17222df5;padding:10px 14px;border-radius:14px;box-shadow:0 8px 30px #000a;max-width:calc(100% - 16px)}

/* UNO masası */
.utable{background:radial-gradient(ellipse at center,#1f7a52,#0e3b29);border-radius:22px;padding:10px;display:flex;flex-direction:column;gap:8px}
.uopps{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.uopp{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px;border-radius:14px}
.uopp.turn{box-shadow:0 0 0 2px var(--lamp)}
.ufan{display:flex;padding-left:14px;min-height:40px}
.umore{align-self:center;margin-left:6px;font-size:12px;color:#fff}
.umid2{display:flex;gap:22px;justify-content:center;align-items:center}
.udeck{position:relative;width:64px;height:96px;border:0;background:none;padding:0}
.udeck .ucard{position:absolute;top:0;left:0;margin:0}
.udeck .st1{top:-3px;left:3px}.udeck .st2{top:-6px;left:6px}
.udeck em{position:absolute;left:0;right:0;bottom:-20px;text-align:center;font-style:normal;font-size:12px;color:#fff}
.udeck:not(:disabled){cursor:pointer;animation:deckglow 1.2s infinite}
.udeck:disabled{opacity:.7}
@keyframes deckglow{0%,100%{filter:drop-shadow(0 0 0 #ffc857)}50%{filter:drop-shadow(0 0 8px #ffc857)}}
.upend{background:var(--bad);color:#fff;border-radius:99px;padding:2px 10px;font-weight:800}
.ucard.back{background:#161616;border-color:#fff;opacity:1;display:grid;place-items:center}
.ucard.back span{color:#e63946;font-style:italic;font-weight:900;font-size:13px;transform:rotate(-20deg)}
.ucard.mini{width:26px;height:38px;margin-left:-14px;border-width:2px;border-radius:5px}
.ucard.mini span{font-size:7px}
.ucard.deal{animation:dealIn .45s ease-out}
@keyframes dealIn{from{transform:translate(-140px,-110px) scale(.5) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}

/* Domino */
.dt{display:inline-flex;flex:none;background:#f8f5ea;border:2px solid #333;border-radius:8px;overflow:hidden;padding:0}
.half{width:34px;height:34px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:4px}
.half i{border-radius:50%}
.half i.on{background:#111}
.sep{width:2px;background:#333}
.dt.back{background:#2f6fd0;width:22px;height:38px;border-color:#fff}
.dt.ok{box-shadow:0 0 0 3px var(--lamp);transform:translateY(-4px);cursor:pointer}
.dt.sel{outline:3px solid var(--ok)}
.dt:disabled{opacity:.6;cursor:default}
.dchain{display:flex;overflow-x:auto;padding:10px;background:#0e3b29;border-radius:12px;min-height:62px;align-items:center;justify-content:flex-start}
.dchain .dt{margin-right:2px}
.dhand{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:8px 0}
.dopps{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.dbacks{display:flex;gap:3px}

/* Tombala */
.tball-row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.tball{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:#222;font-weight:800;font-size:12px}
.tball.big{width:74px;height:74px;font-size:32px;background:var(--lamp);color:var(--lamp-ink);box-shadow:0 0 18px #ffc85799}
.tdrawn{display:flex;gap:4px;flex-wrap:wrap;max-width:300px}
.tcard{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;background:#2b2b5a;padding:6px;border-radius:12px}
.tcell{height:36px;border:0;border-radius:6px;background:#fff;color:#111;font-weight:800;font-size:14px;padding:0}
.tcell.empty{background:#3b3b7a}
.tcell.dr{background:var(--lamp);animation:glow 1s infinite}
.tcell.mk{background:#e63946;color:#fff}
.tcell:disabled{opacity:1}
@keyframes glow{50%{box-shadow:0 0 10px var(--lamp)}}

/* Evcil hayvan */
#pet{position:absolute;top:0;right:0;bottom:0;left:0;z-index:56;display:grid;place-items:center;background:#000a;padding:8px}
.pcard{width:min(560px,100%);max-height:calc(var(--vh) - 16px);overflow:auto;background:#17222df5;border-radius:20px;padding:12px}
.pcard header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pcard header button{border:0;background:none;font-size:18px}
.pwrap{position:relative}
#petCv{width:100%;display:block;border-radius:14px;background:#6cf}
#petBadge{position:absolute;top:10px;right:-6px;background:#e63946;color:#fff;padding:5px 16px 5px 12px;font-weight:800;border-radius:6px 0 0 6px;box-shadow:0 2px 6px #0006}
#petBadge::after{content:'';position:absolute;right:0;bottom:-8px;border-style:solid;border-width:0 8px 8px 0;border-color:transparent #9b1c28 transparent transparent}
#petBubble{position:absolute;top:10px;left:10px;max-width:62%;background:#fff;color:#222;padding:8px 12px;border-radius:14px 14px 14px 2px;font-size:13px;box-shadow:0 2px 8px #0005}
.pbarx span{font-size:12px}
.pbarx div{height:10px;background:#ffffff1a;border-radius:6px;overflow:hidden}
.pbarx b{display:block;height:100%;background:var(--ok);transition:width .4s}
.pbarx b.low{background:var(--bad)}
#petStatus{text-align:center;font-size:13px;color:var(--lamp)}
#petLog{font-size:12px;color:var(--mut);margin-top:8px;display:flex;flex-direction:column;gap:2px}
#petBody input{flex:1;min-width:0;padding:10px;border-radius:10px;border:2px solid #2c3d4c;background:#0f1923;color:var(--ink)}

/* LG TV / eski TV tarayıcıları */
html.tv body{font-size:22px}
html.tv #bar button{min-width:96px;padding:12px;font-size:16px}
html.tv #bar button i{font-size:30px}
html.tv .tools{opacity:1}
html.tv .tools button{width:44px;height:44px;font-size:20px}

/* ===== v10: büyük kameralar, 3D masa, animasyonlar ===== */
.pav{width:92px;height:68px;border-radius:14px;box-shadow:0 4px 10px #0007;font-size:26px}
.pchip{padding:5px 14px 5px 5px;border-radius:18px;box-shadow:0 3px 8px #0005}
.ptxt b{font-size:15px}
@media (max-width:600px){.pav{width:72px;height:54px}}
html.tv .pav{width:120px;height:90px}

.utable{perspective:1000px;box-shadow:inset 0 0 40px #0008,0 10px 30px #0008}
.umid2{transform:rotateX(16deg);transform-style:preserve-3d;margin:6px 0}
.upile{transform:translateZ(8px)}
.upile.land{animation:landPop .35s ease-out}
@keyframes landPop{0%{transform:translateZ(8px) scale(1.25)}100%{transform:translateZ(8px) scale(1)}}
.ucard{position:relative;box-shadow:0 6px 12px #0007,0 1px 0 #fff6 inset;transition:transform .18s ease,box-shadow .18s ease}
.ucard::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,#ffffff55,#ffffff00 45%,#00000045)}
.uhand{perspective:700px}
.uhand .ucard{transform:rotate(var(--r,0deg))}
.uhand .ucard.ok{transform:translateY(-10px) rotate(var(--r,0deg))}
.uhand .ucard.ok:hover{transform:translateY(-22px) rotate(0deg) scale(1.12);box-shadow:0 14px 22px #000a;z-index:5}
.udeck .ucard{box-shadow:0 2px 0 #000a,0 8px 12px #0008}
.fly3d{position:fixed;z-index:300;pointer-events:none;width:52px;height:78px;perspective:600px;filter:drop-shadow(0 10px 8px #0008)}
.fly3d.ucard.big{width:52px;height:78px}
.fly3d.dt{width:auto;height:auto}

.dt{background:linear-gradient(160deg,#fffdf4,#e9e3cf);box-shadow:0 3px 0 #b9b196,0 7px 9px #0008}
.dt.back{background:linear-gradient(160deg,#4a8be8,#1f4fa0)}
.dt.drop{animation:dropIn .4s ease-out}
@keyframes dropIn{0%{transform:translateY(-14px) scale(1.2);box-shadow:0 18px 14px #0009}100%{transform:none}}
.dchain{perspective:700px;background:radial-gradient(ellipse at center,#1f7a52,#0e3b29);box-shadow:inset 0 0 24px #000a}

.tball{background:radial-gradient(circle at 32% 28%,#fff 0,#eee 35%,#9a9a9a 100%);box-shadow:0 3px 6px #0006}
.tball.big{background:radial-gradient(circle at 32% 28%,#fff6c8 0,#ffc857 40%,#b97e00 100%);box-shadow:0 10px 18px #0008,0 0 22px #ffc85766}
.tball.big.roll{animation:ballIn .9s cubic-bezier(.3,.9,.4,1)}
@keyframes ballIn{0%{transform:translate(-120px,-90px) rotate(-540deg) scale(.4);opacity:0}55%{transform:translate(0,0) rotate(0) scale(1.25);opacity:1}72%{transform:translateY(-14px)}86%{transform:translateY(0)}93%{transform:translateY(-5px)}100%{transform:none}}
.tcell{box-shadow:0 3px 0 #bbb,0 4px 6px #0005;transition:transform .15s}
.tcell.mk{box-shadow:0 3px 0 #9d1d28,0 4px 6px #0005;transform:scale(.97);animation:markPop .3s ease-out}
@keyframes markPop{0%{transform:scale(1.35)}100%{transform:scale(.97)}}
.tcard{perspective:700px}

/* ===== v11: oyun menüsü + lobi ===== */
.gmenu{grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:640px){.gmenu{grid-template-columns:repeat(3,1fr)}}
.gtile{position:relative;overflow:hidden;color:#fff;padding:14px 10px 12px;gap:3px;box-shadow:0 6px 14px #0006,inset 0 1px 0 #ffffff40;transition:transform .15s}
.gtile:hover{transform:translateY(-3px) scale(1.02)}
.gtile:active{transform:scale(.97)}
.gtile .glogo{width:62px;height:62px;filter:drop-shadow(0 4px 4px #0006)}
.gtile .glogo svg{width:100%;height:100%;display:block}
.gtile b{font-size:15px}
.gtile small{font-size:11px;opacity:.9;background:#0004;border-radius:99px;padding:1px 8px}
.gtile em{font-style:normal;font-size:11px;opacity:.85;text-align:center;line-height:1.2}
.g-uno{background:linear-gradient(145deg,#e63946,#a4161a)}
.g-domino{background:linear-gradient(145deg,#2a9d8f,#17605a)}
.g-tombala{background:linear-gradient(145deg,#f4a261,#c4661f)}
.g-ttt{background:linear-gradient(145deg,#3a86ff,#1b4aa8)}
.g-memory{background:linear-gradient(145deg,#8e5cff,#4b2a9c)}
.g-rps{background:linear-gradient(145deg,#ff6bb5,#b3307a)}
.g-math{background:linear-gradient(145deg,#ff8cc6,#c2368a)}
.g-pet{background:linear-gradient(145deg,#52b788,#2d6a4f)}
.lhero{display:flex;align-items:center;gap:14px;border-radius:18px;padding:12px 16px;color:#fff;box-shadow:0 6px 14px #0006}
.lhero .glogo{width:64px;height:64px;flex:none;filter:drop-shadow(0 4px 4px #0006)}
.lhero .glogo svg{width:100%;height:100%}
.lhero .ltxt{display:flex;flex-direction:column;gap:2px}
.lhero .ltxt b{font-size:22px}
.lhero .ltxt small{opacity:.9}
.lplayers{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pchip.big{flex-direction:column;width:132px;padding:8px;text-align:center;gap:6px}
.pchip.big .pav{width:116px;height:87px}
.pchip.big .ptxt{align-items:center}
.pchip.empty{background:none;border:2px dashed #ffffff40;box-shadow:none;opacity:.7}
.pchip.empty .pav{background:none;font-size:34px;color:#ffffff80}
.linv{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.invcard{display:flex;flex-direction:column;align-items:center;gap:6px;background:#ffffff12;border-radius:14px;padding:10px;min-width:100px}
.invcard .pav{width:56px;height:56px;border-radius:50%}
.gbtn.wide{min-width:200px}
.gbtn.big{padding:14px 28px;font-size:17px;border-radius:14px}
.lfoot{margin-top:6px;align-items:center}

/* ===== v12: ekrana tam oturma, tek menü düğmesi, sürüklenen kameralar ===== */
html,body{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}
#room{height:var(--vh);bottom:auto}
#stage{overflow:hidden;padding:8px 8px 84px}
#stage:not(.spk)>.tile{flex:none;width:var(--tw,320px);height:calc(var(--tw,320px) * .75);max-width:none;aspect-ratio:auto}
#stage:not(.spk)>.tile::before{display:none}
#stage>.tile.gfocus{display:none}
.tile.float{position:absolute;z-index:45;width:150px;height:113px;max-width:none;flex:none;aspect-ratio:auto;cursor:grab;touch-action:none;box-shadow:0 10px 26px #000a;border:2px solid #ffffff55}
.tile.float::before{display:none}
.tile.float .tools,.tile.float .st{display:none}
.tile.float.dragging{cursor:grabbing;transform:scale(1.06);box-shadow:0 18px 36px #000c}
#mini .tile{touch-action:pan-y}
#room.pen-on .tile.float .inkc{pointer-events:none}
.tools{opacity:1!important}
.tools .tmore{width:auto;height:34px;padding:0 10px;display:flex;align-items:center;gap:5px;border-radius:10px;border:0;background:#000b;font-size:13px}
.tools .tmore i{font-style:normal;font-size:18px;line-height:1}
.tpanel{position:fixed;z-index:400;width:264px;max-height:calc(var(--vh) - 20px);overflow:auto;display:flex;flex-direction:column;gap:2px;padding:6px;background:#0c141cf2;border:1px solid #ffffff22;border-radius:14px;box-shadow:0 14px 34px #000b}
.tools .tpanel button{width:100%;height:auto;min-height:38px;display:flex;align-items:center;gap:10px;padding:6px 10px;background:none;border-radius:10px;text-align:left;font-size:14px}
.tools .tpanel button:hover,.tools .tpanel button:active{background:#ffffff1c}
.tools .tpanel button i{font-style:normal;font-size:19px;width:26px;text-align:center;flex:none}
.tile.armed .tools [data-act=sensor]{background:#3ea6ff55}
html.tv .tools .tpanel button{min-height:54px;font-size:20px}

/* ===== v12: masa düzeni, oyuncu penceresi, XOX ===== */
.tile.gfocus{display:none!important}
.useats{position:relative;display:block;height:clamp(300px,44vh,430px)}
.useats .uopp{position:absolute;transform:translate(-50%,-50%);width:auto;max-width:44%}
.useats .umid2{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%) rotateX(16deg)}
.dseats .dchain{position:absolute;left:50%;top:60%;width:60%;max-width:90%;transform:translate(-50%,-50%);min-height:72px}
.dseats .dbacks{justify-content:center}
.pchip.clickable{cursor:pointer}
.pchip.clickable:hover{filter:brightness(1.15)}
#gpop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:120;background:#0009;display:grid;place-items:center;padding:10px}
.gpopc{width:min(340px,100%);max-height:calc(var(--vh) - 20px);overflow:auto;background:#17222d;border-radius:20px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 20px 50px #000c;animation:popGrow .28s ease-out}
@keyframes popGrow{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.gpopcam{width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#243444,#131c26);display:grid;place-items:center;font-size:64px;font-weight:800;color:var(--lamp)}
.gpopcam video{width:100%;height:100%;object-fit:cover;display:block}
.gpopn{font-size:18px}
.gifts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%}
.gift{border:0;border-radius:12px;background:#ffffff14;padding:8px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px}
.gift i{font-style:normal;font-size:28px}
.gift:active{background:var(--lamp);color:var(--lamp-ink);transform:scale(.95)}
.gopen{display:flex;flex-direction:column;gap:8px}
.gopen-row{display:flex;align-items:center;gap:10px;border-radius:14px;padding:8px 10px;color:#fff;box-shadow:0 4px 10px #0005}
.gopen-row .glogo{width:42px;height:42px;flex:none}
.gopen-row .glogo svg{width:100%;height:100%}
.gotxt{display:flex;flex-direction:column;flex:1;min-width:0}
.gotxt small{opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goact{display:flex;gap:6px;flex:none}
.goact .gbtn{padding:7px 12px;font-size:13px}
.tttwrap{position:relative;width:300px;margin:0 auto}
.ttt{grid-template-columns:repeat(3,96px)!important;gap:6px!important;justify-content:center}
.ttt .cell{width:96px;height:96px;padding:0;border:0;border-radius:14px;background:linear-gradient(145deg,#2a3a4b,#1b2733);box-shadow:0 5px 0 #0e161e,0 8px 12px #0006;display:grid;place-items:center}
.ttt .cell:not(:disabled):hover{background:linear-gradient(145deg,#37506a,#233447)}
.ttt .cell:disabled{opacity:1}
.mk{width:80%;height:80%;fill:none;stroke-width:12;stroke-linecap:round}
.mk line{stroke:#ff5a6e;stroke-dasharray:74;stroke-dashoffset:0}
.mk circle{stroke:#5ac8fa;stroke-dasharray:176;stroke-dashoffset:0}
.mk.draw .xl0{animation:drawS .28s ease-out both}
.mk.draw .xl1{animation:drawS .28s ease-out .22s both}
.mk.draw .oc{animation:drawC .45s ease-out both;transform-origin:50% 50%}
@keyframes drawS{from{stroke-dashoffset:74}to{stroke-dashoffset:0}}
@keyframes drawC{from{stroke-dashoffset:176;transform:rotate(-90deg)}to{stroke-dashoffset:0;transform:rotate(-90deg)}}
.wline{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wline line{stroke:#ffc857;stroke-width:9;stroke-linecap:round;filter:drop-shadow(0 0 8px #ffc857);stroke-dasharray:420;stroke-dashoffset:0}
.wline line.draw{animation:drawW .6s ease-out .15s both}
@keyframes drawW{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
.tttban{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;text-align:center;background:#000c;border:2px solid var(--lamp);border-radius:16px;padding:10px 18px;font-size:20px;white-space:nowrap;box-shadow:0 0 30px #ffc85799}
.tttban.pop{animation:banPop .7s cubic-bezier(.2,1.4,.4,1) .55s both}
.tttban.draw{border-color:#ffffff55;box-shadow:none}
@keyframes banPop{from{transform:translate(-50%,-50%) scale(0) rotate(-12deg);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.conf{position:absolute;left:50%;top:50%;width:9px;height:14px;border-radius:2px;pointer-events:none}

/* ===== v13: domino ölçekleme, hafıza/TKM animasyonları, Okey ===== */
.dchain{display:block!important;overflow:hidden!important;padding:8px!important}
.dchain-in{display:inline-flex;flex-wrap:nowrap;align-items:center;width:max-content;transform-origin:0 0;gap:2px}
.dchain-in .dt{margin:2px}
.dseats .dchain{width:64%;max-width:92%}
.g-okey{background:linear-gradient(145deg,#c9a227,#7a5c00)}

/* Hafıza: 3D çevrilen kartlar */
.mem{grid-template-columns:repeat(4,70px)!important;gap:10px!important;perspective:800px}
.mcard{position:relative;height:70px!important;padding:0;background:none!important;transform-style:preserve-3d}
.mc-in{position:absolute;top:0;left:0;right:0;bottom:0;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,.8,.3,1)}
.mcard.up .mc-in{transform:rotateY(180deg)}
.mf{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-items:center;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 4px 0 #0c141b,0 7px 10px #0006}
.mf-f{background:linear-gradient(145deg,#4a6785,#2c3f55);font-size:28px;color:#ffffffa0}
.mf-b{background:linear-gradient(145deg,#fff,#dfe6ee);transform:rotateY(180deg);font-size:34px}
.mcard.o0 .mf-b{background:linear-gradient(145deg,#8db4ff,#2f6fd0)}.mcard.o1 .mf-b{background:linear-gradient(145deg,#8be0b4,#2e9b63)}.mcard.o2 .mf-b{background:linear-gradient(145deg,#ffd08a,#d98324)}.mcard.o3 .mf-b{background:linear-gradient(145deg,#cfa8ff,#8a4fd1)}
.mcard:not(:disabled):hover .mc-in{transform:translateY(-4px) rotateX(10deg)}
.mcard.up:not(:disabled):hover .mc-in{transform:rotateY(180deg)}
.mcard.deal{animation:memDeal .5s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes memDeal{from{transform:translateY(-60px) scale(.3) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}
.mcard.shake{animation:memShake .5s}
@keyframes memShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px) rotate(-4deg)}40%{transform:translateX(7px) rotate(4deg)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.mcard.match{animation:memMatch .7s ease-out}
@keyframes memMatch{0%{transform:scale(1)}35%{transform:scale(1.25);filter:drop-shadow(0 0 14px #ffc857)}100%{transform:scale(1)}}
.memwrap{width:auto;min-width:320px}

/* Taş-Kâğıt-Makas */
.rpsarena{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:150px;margin:6px 0}
.rhand{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:96px;transition:transform .4s,opacity .4s}
.rhand b{font-size:13px}
.rh-e{font-size:64px;line-height:1;filter:drop-shadow(0 6px 6px #0008)}
.rhand.left .rh-e{transform:scaleX(-1)}
.rh-e.shake{animation:rpsShake .32s ease-in-out 3}
.rhand.left .rh-e.shake{animation-name:rpsShakeL}
@keyframes rpsShake{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-26px) rotate(-14deg)}}
@keyframes rpsShakeL{0%,100%{transform:scaleX(-1) translateY(0) rotate(0)}50%{transform:scaleX(-1) translateY(-26px) rotate(-14deg)}}
.rh-e.reveal{animation:rpsReveal .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes rpsReveal{from{transform:scale(.2) rotate(40deg);opacity:0}to{opacity:1}}
.rhand.left .rh-e.reveal{animation-name:rpsRevealL}
@keyframes rpsRevealL{from{transform:scaleX(-1) scale(.2) rotate(40deg);opacity:0}to{transform:scaleX(-1);opacity:1}}
.rhand.winner{transform:scale(1.18)}
.rhand.winner .rh-e{filter:drop-shadow(0 0 16px #ffc857)}
.rhand.loser{opacity:.45;transform:scale(.86)}
.rmid{font-weight:800;min-width:96px;text-align:center;color:var(--lamp)}
.rmid.pop{animation:banPop2 .5s ease-out}
@keyframes banPop2{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.rpsb{box-shadow:0 5px 0 #0e161e,0 8px 12px #0006;transition:transform .15s}
.rpsb:not(:disabled):hover{transform:translateY(-4px) scale(1.08)}
.rpsb.sel{animation:selPulse 1s infinite}
@keyframes selPulse{0%,100%{box-shadow:0 0 0 0 #ffc85799}50%{box-shadow:0 0 0 10px #ffc85700}}

/* Okey */
.otile{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:40px;height:58px;flex:none;border:0;border-radius:7px;padding:0;background:linear-gradient(160deg,#fffdf4,#e8e1c9);box-shadow:0 3px 0 #b0a687,0 6px 8px #0007;position:relative;color:#111}
.otile .on{font-size:25px;font-weight:800;line-height:1}
.otile .od{display:block;width:9px;height:9px;border-radius:50%}
.otile.fake .on{color:#2a9d8f;font-size:26px}
.otile.joker{box-shadow:0 3px 0 #b0a687,0 6px 8px #0007,0 0 0 2px #ffc857}
.otile.back{background:linear-gradient(160deg,#4a8be8,#1f4fa0);box-shadow:0 3px 0 #123a7a,0 5px 6px #0007}
.otile.empty{background:none;border:2px dashed #ffffff40;box-shadow:none;opacity:.6}
.otile.sel{transform:translateY(-14px);box-shadow:0 8px 0 #b0a687,0 14px 14px #000a,0 0 0 3px var(--lamp)}
.otile.newt{animation:dealIn .5s ease-out}
.oseats{height:clamp(330px,50vh,460px)}
.omid{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;width:94%}
.omid>:first-child{display:flex}
.odeck{position:relative;border:0;background:none;display:inline-block;width:46px;height:64px;padding:0}
.odeck .otile.back{position:absolute;top:0;left:0}
.odeck .otile.back:nth-child(2){top:-3px;left:3px}.odeck .otile.back:nth-child(3){top:-6px;left:6px}
.odeck em{position:absolute;left:-10px;right:-10px;bottom:-20px;text-align:center;font-style:normal;font-size:11px;color:#fff}
.odeck:not(:disabled){cursor:pointer;animation:deckglow 1.2s infinite}
.oind{display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;font-size:10px;margin-left:24px}
.oind small{opacity:.85}.oind .okk{color:var(--lamp)}
.omid{flex-direction:row!important;flex-wrap:wrap;justify-content:center;gap:14px 22px!important}
.opiles{display:flex;gap:12px;justify-content:center;width:100%}
.opile{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:#0003;border-radius:10px;padding:5px 7px;color:#fff;font-size:10px}
.opile .otile{width:34px;height:48px}.opile .otile .on{font-size:20px}
.opile.can{background:#ffc85766;box-shadow:0 0 0 2px var(--lamp);cursor:pointer;animation:deckglow 1.2s infinite}
.okb{max-width:150px;flex-wrap:wrap;justify-content:center;gap:1px!important}
.okb .otile{width:14px;height:20px;border-radius:3px;box-shadow:0 1px 0 #123a7a}
.orack{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:14px 10px 10px;background:linear-gradient(180deg,#7a4b1f,#5a3512);border-radius:14px;box-shadow:inset 0 4px 10px #0008,0 4px 10px #0006;min-height:96px}
@media (max-width:600px){.otile{width:34px;height:50px}.otile .on{font-size:21px}}
.dseats{background:radial-gradient(ellipse at center,#1f7a52,#0e3b29);border-radius:22px;box-shadow:inset 0 0 40px #0008,0 10px 30px #0008}
.dseats .dchain{width:84%!important;max-width:94%!important;background:#0006!important}

/* ===== v14 ===== */
.tile.gbehind{display:none!important}
#room.ingame #mini{display:none!important}
.gpopc{position:relative}
.gpopx{position:absolute;top:8px;right:8px;z-index:3;width:36px;height:36px;border-radius:50%;border:0;background:#000b;color:#fff;font-size:18px;display:grid;place-items:center;box-shadow:0 2px 8px #0008}
.gpopx:hover{background:#000}
.gift i svg,.gift i{width:38px;height:38px;display:grid;place-items:center}
.gift i svg{display:block}
.pgifts{display:flex;gap:2px;align-items:center;margin-left:4px}
.pchip.big .pgifts{position:absolute;top:2px;right:2px;margin:0;flex-direction:column}
.pchip{position:relative}
.pgift{width:40px;height:40px;display:grid;place-items:center;font-size:24px;line-height:1;filter:drop-shadow(0 2px 3px #0008);animation:giftBob 2.2s ease-in-out infinite}
.pgift svg{width:100%;height:100%;display:block}
@keyframes giftBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(4deg)}}
#fly span svg{width:1em;height:1em;display:block}

/* ===== v15: sanal hayvan arayüzü ===== */
.pcard{background:linear-gradient(180deg,#1b2a3a,#131c27);border:1px solid #ffffff14;box-shadow:0 20px 60px #000a}
#petCv{touch-action:none;box-shadow:0 6px 22px #0006;user-select:none;-webkit-user-select:none}
#petHint{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);background:#000a;color:#fff;padding:5px 12px;border-radius:99px;font-size:11px;pointer-events:none;white-space:nowrap;animation:phint 7s forwards}
@keyframes phint{0%,80%{opacity:1}100%{opacity:0}}
#petStatus{margin:8px 0 2px;padding:6px 10px;background:#ffffff0d;border-radius:10px;font-size:12px}
#petBars{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.pbarx{background:#ffffff0d;border-radius:12px;padding:6px 8px}
.pbarx span{display:flex;align-items:center;gap:4px;font-size:11px;color:#cdd8e3;margin-bottom:4px}
.pbarx span i{font-style:normal;font-size:14px}
.pbarx span em{margin-left:auto;font-style:normal;font-weight:700;color:#fff}
.pbarx div{height:7px;background:#ffffff1c;border-radius:6px}
.pbarx b{background:linear-gradient(90deg,#3fc58c,#7be0b0);border-radius:6px}
.pbarx b.mid{background:linear-gradient(90deg,#f0a93b,#ffd270)}
.pbarx b.low{background:linear-gradient(90deg,#e5484d,#ff8a8f)}
#petBtns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
#petBtns[hidden],#petMenu[hidden]{display:none}
.pbtn,.pit{border:1px solid #ffffff1a;background:linear-gradient(180deg,#ffffff1c,#ffffff0a);color:#fff;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 4px;font-size:11px;font-weight:600;line-height:1.15;text-align:center;transition:transform .12s,background .15s,box-shadow .15s}
.pbtn i,.pit i{font-style:normal;font-size:24px;line-height:1.1;filter:drop-shadow(0 2px 3px #0005)}
.pbtn:hover,.pit:hover{background:linear-gradient(180deg,#ffffff2c,#ffffff12)}
.pbtn:active,.pit:active{transform:scale(.93);background:var(--lamp);color:var(--lamp-ink)}
#petMenu{margin-top:8px;animation:pup .18s ease-out}
@keyframes pup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pmh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pmh b{font-size:14px}
.pmx{width:32px;height:32px;border-radius:50%;border:0;background:#ffffff1f;color:#fff;font-size:15px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;max-height:min(40vh,260px);overflow:auto;padding:2px}
.pit{padding:10px 4px}
.pit small{font-size:10px;font-weight:500;color:#aebdcb}
.pit.like{border-color:#5fd6a4aa;background:linear-gradient(180deg,#5fd6a433,#5fd6a40d)}
.pit.dis{opacity:.55}
.pit.danger{background:#7a1f2b;grid-column:1/-1;flex-direction:row;gap:8px;padding:12px}
.pit.danger i{font-size:20px}
@media(max-width:420px){#petBars{grid-template-columns:repeat(2,1fr)}.pbtn i{font-size:22px}}

/* ===== v16 ===== */
.uhand{justify-content:center;overflow:visible;padding:18px 8px 8px;background:linear-gradient(180deg,#0000,#0003);border-radius:14px;min-height:112px}
.uhand .ucard{margin-left:var(--ov,4px);transform-origin:50% 120%}
.uhand .ucard:first-child{margin-left:0}
.uhand .ucard:not(.ok){opacity:.7;filter:saturate(.8)}
.tools .tmore{width:34px;padding:0;justify-content:center}
.tools .tmore span{display:none}
.tools .tmore i{font-size:22px;font-weight:900;letter-spacing:-1px}

/* v16 pet tam ekran */
#pet{padding:0;place-items:stretch;background:#0b121a;z-index:60}
.pcard{width:100%;max-width:980px;height:100%;max-height:none;margin:0 auto;border-radius:0;border:0;display:flex;flex-direction:column;padding:8px 10px;overflow:hidden}
.pcard header{margin-bottom:6px}
.phb{display:flex;gap:6px}
.pcard header button{width:36px;height:36px;border-radius:50%;background:#ffffff14;color:#fff}
#petBody{flex:1;min-height:0;display:flex;flex-direction:column}
.pwrap{flex:1;min-height:150px;border-radius:16px;overflow:hidden;background:#0b121a}
#petCv{width:100%;height:100%;object-fit:contain;border-radius:0;background:none;box-shadow:none}
#petDock{flex:none;max-height:52%;overflow:auto;padding-top:2px}
#petStatus{margin:6px 0 4px;padding:4px 10px;font-size:11.5px}
#petBars{grid-template-columns:repeat(6,1fr);gap:5px;margin:4px 0}
.pbarx{padding:4px 6px}.pbarx span{font-size:10px;margin-bottom:3px;gap:3px}.pbarx span i{font-size:12px}.pbarx div{height:6px}
@media(max-width:620px){#petBars{grid-template-columns:repeat(3,1fr)}}
.pcrow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.pch{display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid #ffffff1a;background:#ffffff0f;color:#fff;border-radius:12px;padding:9px 4px;font-size:12px;font-weight:700}
.pch i{font-style:normal;font-size:16px}.pch b{font-size:10px;opacity:.7}
.pch.on{background:var(--lamp);color:var(--lamp-ink);border-color:var(--lamp)}
.pcb{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px;margin-top:8px;animation:pup .18s ease-out}
#petCats[hidden]{display:none}
.pbtn.on{border-color:var(--lamp)}
#petLog{margin-top:6px}#petLog div:nth-child(n+3){display:none}
#petDock{max-height:44%}
.pgrid{max-height:none;overflow:visible}
.uhand{gap:0}

/* ===== v17: Satranç / Dama ===== */
.g-chess{background:linear-gradient(145deg,#7a5230,#33210f)}
.g-dama{background:linear-gradient(145deg,#2e7d5b,#124634)}
.cwrap{position:relative;width:min(100%,min(560px,calc(var(--vh) - 300px)));min-width:260px;margin:6px auto}
.cboard{position:relative;width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;box-shadow:0 12px 30px #000a,0 0 0 6px #3b2614,0 0 0 8px #00000055;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.csqs{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}
.chess .csq.lt{background:linear-gradient(135deg,#f3e0bd,#e6cd9f)}.chess .csq.dk{background:linear-gradient(135deg,#b88660,#a2704a)}
.dama .csq.lt,.dama .csq.dk{background:linear-gradient(135deg,#d9b484,#c79c68)}
.dama .csq.dk{filter:brightness(.93)}
.dama .csqs{box-shadow:inset 0 0 0 1px #0004}
.dama .csq{box-shadow:inset 0 0 0 .5px #00000030}
.cpl,.chl{position:absolute;inset:0;pointer-events:none}
.cpc,.dpc,.cmk{position:absolute;width:12.5%;height:12.5%;display:grid;place-items:center}
.cpc .csvg,.dpc .dsvg{width:92%;height:92%;filter:drop-shadow(0 2px 2px #0007);overflow:visible}
.csvg path,.csvg circle,.csvg rect,.csvg ellipse{stroke-width:1.4;stroke-linejoin:round}
.csvg.pw path,.csvg.pw circle,.csvg.pw rect,.csvg.pw ellipse{fill:#f8f3e8;stroke:#2e261c}
.csvg.pb path,.csvg.pb circle,.csvg.pb rect,.csvg.pb ellipse{fill:#3b3a45;stroke:#0a0a0e}
.csvg .line{fill:none!important;stroke-linecap:round}
.csvg.pw .line{stroke:#2e261c}.csvg.pb .line{stroke:#d9d6e4}
.csvg .line.thick{stroke-width:2.6}
.csvg.pw .eye{fill:#2e261c}.csvg.pb .eye{fill:#f1eef9;stroke:none}
.cmk.last{background:#ffe16644}
.cmk.sel{background:#7cdb7c88;box-shadow:inset 0 0 0 3px #3fae3f}
.cmk.check{background:radial-gradient(circle,#ff2d2dcc 0,#ff2d2d66 55%,#0000 75%)}
.cmk.dot::after{content:'';width:30%;height:30%;border-radius:50%;background:#2a7a2aaa;box-shadow:0 0 0 2px #fff6}
.cmk.cap{box-shadow:inset 0 0 0 4px #e5484dcc;border-radius:50%}
.cmk.path{background:#ffd23f88}
.clab{position:absolute;font-size:10px;font-weight:700;color:#00000066;pointer-events:none;line-height:1}
.clab.f{bottom:2px;transform:translateX(150%)}.clab.r{left:3px;padding-top:2px}
.cghost{pointer-events:none;z-index:6}
.cpromo{position:absolute;inset:0;z-index:20;background:#000a;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;animation:pup .2s}
.cprow{display:flex;gap:8px}.cpb{width:64px;height:64px;border-radius:12px;border:2px solid #fff4;background:#c9a77a;padding:4px}.cpb:hover{background:#ffd27a}
.cban{z-index:15}
/* dama taşları */
.dsvg .dsh{fill:#0007}
.dw .dbody{fill:#f6f0e4;stroke:#a89c88;stroke-width:1.2}.dw .dring{stroke:#d3c8b4;stroke-width:1.6;fill:none}.dw .dglint{fill:#fff;opacity:.75}
.db .dbody{fill:#2b2b31;stroke:#000;stroke-width:1.2}.db .dring{stroke:#505059;stroke-width:1.6;fill:none}.db .dglint{fill:#fff;opacity:.2}
.dcrown{fill:#f2b705;stroke:#8a6200;stroke-width:1}
.dpc.can .dsvg{animation:dcan 1.1s ease-in-out infinite}
@keyframes dcan{50%{transform:translateY(-6%) scale(1.06)}}
.tile .gbadge{position:absolute;left:6px;top:6px;z-index:6;display:flex;align-items:center;gap:6px;padding:3px 4px 3px 3px;border-radius:14px;background:#000c;color:#fff;font-size:11px;font-weight:700;box-shadow:0 2px 8px #0008;max-width:80%}
.tile .gbadge .glogo{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:none;overflow:hidden;background:var(--lamp)}
.tile .gbadge .glogo svg{width:20px;height:20px}
.tile .gbadge b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .gbadge.g-uno .glogo{background:#e63946}.tile .gbadge.g-domino .glogo{background:#222}.tile .gbadge.g-tombala .glogo{background:#c9811a}.tile .gbadge.g-ttt .glogo{background:#3a86ff}.tile .gbadge.g-memory .glogo{background:#7c5cff}.tile .gbadge.g-rps .glogo{background:#e0a31a}.tile .gbadge.g-okey .glogo{background:#8a6a00}.tile .gbadge.g-chess .glogo{background:#7a5230}.tile .gbadge.g-dama .glogo{background:#2e7d5b}
.tile .gbwatch{border:0;border-radius:10px;padding:4px 9px;background:var(--lamp);color:var(--lamp-ink);font-size:11px;font-weight:800;white-space:nowrap}
.tile .gbadge::before{content:'';width:7px;height:7px;border-radius:50%;background:#2ee66b;box-shadow:0 0 0 0 #2ee66b99;animation:glive 1.6s infinite;margin-left:3px}
@keyframes glive{70%{box-shadow:0 0 0 7px #2ee66b00}100%{box-shadow:0 0 0 0 #2ee66b00}}
.tile.min .gbadge b,.mini .tile .gbadge b{display:none}

/* ================= v18: ana ekran + not panosu ================= */
#home{position:fixed;left:0;right:0;top:0;height:var(--vh);display:flex;flex-direction:column;gap:8px;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));z-index:5}
#homeTop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:2px 4px}
.htitle{display:flex;align-items:center;gap:8px;font-size:19px}
#homeName{border:0;background:#ffffff14;border-radius:99px;padding:4px 12px;font-size:13px;color:var(--ink)}
#homeName::after{content:" ✎";opacity:.6}
#homeWho{font-size:13px;color:var(--mut);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#homeWhoList{display:flex;gap:6px;flex-wrap:wrap}
#homeWhoList .who1{background:#5fd6a422;color:var(--ok);border-radius:99px;padding:3px 10px;font-weight:700;font-size:12px}
#homeWhoList .nobody{opacity:.7}
#board{position:relative;flex:1;min-height:0;border-radius:18px;overflow:hidden;border:10px solid #8a5a2b;border-image:none;box-shadow:inset 0 0 40px #0006,0 10px 30px #0006;
  background:radial-gradient(circle at 20% 30%,#d9ae7a 0 2px,#0000 3px),radial-gradient(circle at 70% 60%,#b98a58 0 2px,#0000 3px),radial-gradient(circle at 45% 80%,#e0b782 0 1.5px,#0000 3px),linear-gradient(135deg,#c99a68,#b98652 55%,#c9a070);background-size:23px 23px,31px 31px,17px 17px,100% 100%;perspective:1100px}
#boardInner{position:absolute;inset:0}
#boardEmpty{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:#5b3a18aa;font-weight:800;font-size:20px;text-align:center;padding:20px}
.note{position:absolute;z-index:3;width:150px;min-height:132px;padding:22px 11px 12px;border-radius:2px 2px 20px 2px;color:#2b2412;font-family:"Segoe Print","Bradley Hand","Comic Sans MS",ui-rounded,cursive;font-size:13.5px;line-height:1.3;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  background:linear-gradient(165deg,var(--n1),var(--n2));transform:rotate(var(--rot,0deg)) rotateX(3deg);transform-origin:50% 0;
  box-shadow:0 1px 1px #0004,0 6px 8px -3px #0006,0 16px 22px -10px #0007;transition:box-shadow .15s,transform .15s}
.note::before{content:"";position:absolute;top:-9px;left:50%;width:56px;height:18px;margin-left:-28px;background:#ffffffb0;border-radius:2px;transform:rotate(-2deg);box-shadow:0 1px 3px #0003}
.note::after{content:"";position:absolute;right:0;bottom:0;width:30px;height:30px;border-bottom-right-radius:20px;background:linear-gradient(135deg,#0000 50%,#0003 50%,#fff6 100%)}
.note.c-yellow{--n1:#fff9a6;--n2:#ffe94f}.note.c-pink{--n1:#ffd1e1;--n2:#ff9fc0}.note.c-blue{--n1:#c6ecff;--n2:#7fcdf5}.note.c-green{--n1:#d3f4cf;--n2:#97da92}.note.c-orange{--n1:#ffe3bd;--n2:#ffb866}.note.c-purple{--n1:#ecd0f5;--n2:#c58ee0}
.note.drag{transform:rotate(0deg) scale(1.09) translateY(-5px);box-shadow:0 2px 2px #0004,0 14px 16px -4px #0007,0 30px 40px -12px #0008;z-index:60;cursor:grabbing;transition:none}
.note .nby{position:absolute;top:6px;left:11px;right:11px;font-size:10.5px;font-weight:800;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.2px}
.note .ntx{white-space:pre-wrap;word-break:break-word;max-height:150px;overflow:auto}
.note .nrep{margin-top:8px;border-top:1px dashed #0003;padding-top:5px;display:flex;flex-direction:column;gap:3px;max-height:92px;overflow:auto}
.note .nrep div{font-size:12px;background:#ffffff66;border-radius:8px;padding:3px 7px}
.note .nrep b{font-size:10.5px;opacity:.75;display:block}
.note .nact{display:flex;gap:6px;margin-top:6px}
.note .nact button{border:0;background:#0000001a;border-radius:99px;padding:2px 9px;font-size:12px;color:#2b2412}
.note .nrf{display:flex;gap:4px;margin-top:6px}
.note .nrf input{flex:1;min-width:0;border:0;border-radius:8px;padding:5px 7px;font-size:12px;background:#fffc;color:#222;outline:none}
.note .nrf button{border:0;border-radius:8px;background:#0002;padding:0 8px}
#riddleNote{position:absolute;left:12px;top:12px;width:min(270px,calc(100% - 100px));z-index:1;padding:20px 12px 12px;border-radius:3px 3px 22px 3px;color:#2a1c00;
  background:linear-gradient(165deg,#fff4b0,#ffd23c);box-shadow:0 1px 1px #0004,0 8px 10px -4px #0006,0 20px 28px -12px #0007;transform:rotate(-1.5deg);font-family:"Segoe Print","Bradley Hand","Comic Sans MS",ui-rounded,cursive;font-size:13px;line-height:1.35}
#riddleNote::before{content:"";position:absolute;top:-10px;left:50%;width:60px;height:20px;margin-left:-30px;background:#ff6b8199;border-radius:2px;transform:rotate(2deg)}
#riddleNote h4{margin:0 0 4px;font-size:14px}
#riddleNote .rq{font-weight:700}
#riddleNote .rh{font-size:12px;opacity:.8;margin-top:3px}
#riddleNote form{display:flex;gap:5px;margin-top:7px}
#riddleNote input{flex:1;min-width:0;border:2px solid #0002;border-radius:9px;padding:6px 8px;background:#fffd;color:#222;outline:none;font:inherit;font-size:13px}
#riddleNote button{border:0;border-radius:9px;background:#2a1c00;color:#ffe27a;padding:0 11px;font-weight:800}
#riddleNote .rres{margin-top:5px;font-weight:800;font-size:13px}
#riddleNote .rwho{margin-top:6px;font-size:12px;border-top:1px dashed #0003;padding-top:5px}
#riddleNote .rwho b{color:#2e7d32}
#trash{position:absolute;right:10px;bottom:10px;width:64px;height:72px;border:0;background:none;padding:0;z-index:400;transition:transform .15s;filter:drop-shadow(0 4px 5px #0006)}
#trash svg{width:100%;height:100%;overflow:visible}
#trash .lid{transform-origin:12px 22px;transition:transform .2s}
#trash.over{transform:scale(1.18)}#trash.over .lid{transform:rotate(-28deg) translateY(-3px)}
#trash.empty .paper{display:none}
.dlgback{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:90;padding:14px}
.ndlg{max-height:calc(var(--vh) * .92);overflow:auto;width:min(440px,100%)}
.ndlg textarea{padding:12px;border-radius:12px;border:2px solid #2c3d4c;background:#0f1923;color:var(--ink);outline:none;font:inherit;resize:none}
.ndlg textarea:focus{border-color:var(--lamp)}
.ndlg .row{display:flex;gap:8px;justify-content:flex-end}
.ndlg .row button{padding:10px 16px;border-radius:12px;border:0;background:#ffffff18;font-weight:700}
.ndlg .row .primary,.primary{background:var(--lamp)!important;color:var(--lamp-ink)!important}
#noteEmo{display:flex;flex-wrap:wrap;gap:4px;max-height:96px;overflow:auto}
#noteEmo button{border:0;background:#ffffff10;border-radius:9px;font-size:21px;padding:3px 6px}
#noteCols{display:flex;gap:8px}
#noteCols button{width:34px;height:34px;border-radius:50%;border:3px solid #fff3;background:var(--c)}
#noteCols button.sel{border-color:#fff;transform:scale(1.12)}
#trashList{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto}
#trashList .titem{display:flex;gap:8px;align-items:center;background:#ffffff0f;border-radius:12px;padding:8px 10px}
#trashList .titem span{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#trashList .titem b{color:var(--lamp);font-size:12px}
#trashList .titem button{border:0;border-radius:9px;background:var(--ok);color:#06281a;padding:5px 10px;font-weight:800}
#homeBar{display:flex;gap:8px;justify-content:center}
.hbtn{flex:1;max-width:210px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border:0;border-radius:18px;background:#ffffff16;font-size:12.5px;font-weight:700;box-shadow:0 4px 12px #0004}
.hbtn i{font-style:normal;font-size:26px}
.hbtn.call{background:linear-gradient(160deg,#ffd76a,#ffb627);color:var(--lamp-ink)}
.hbtn.math{background:linear-gradient(160deg,#ffb3d9,#ff5fa2);color:#3b0a24}
.hbtn.add{background:linear-gradient(160deg,#9be7c4,#4fc99a);color:#06281a}
.hbtn:active{transform:scale(.96)}
@media (max-width:520px){.hbtn{font-size:11px;padding:8px 2px}.hbtn i{font-size:23px}.note{width:136px}}

/* ================= v18: altyazı, klavye, kamera yerleşimi ================= */
.capline{position:absolute;left:6px;right:6px;bottom:38px;z-index:5;text-align:center;font-weight:700;font-size:clamp(13px,2.6vmin,20px);line-height:1.25;color:#fff;background:#000b;padding:5px 10px;border-radius:10px;pointer-events:none;text-shadow:0 1px 2px #000;max-height:46%;overflow:hidden}
.tile.capon .st::after{content:" 💬"}
.tpanel button.on{background:var(--lamp);color:var(--lamp-ink)}
.kbbar{position:absolute;left:6px;right:6px;bottom:6px;z-index:7;display:flex;gap:5px;background:#000c;border-radius:14px;padding:5px}
.kbbar input{flex:1;min-width:0;border:0;border-radius:10px;padding:7px 9px;background:#fff;color:#111;outline:none;font-size:14px}
.kbbar button{border:0;border-radius:10px;background:#ffffff22;color:#fff;padding:0 10px;font-size:16px}
.kbbar .kbs{background:var(--lamp);color:var(--lamp-ink);font-weight:900}
.tile:has(.kbbar:not([hidden])) .label{display:none}
.tile:has(.kbbar:not([hidden])) .capline{bottom:52px}
#stage:not(.spk)>.tile{width:calc(var(--tw,320px) * var(--m,1));height:calc(var(--tw,320px) * var(--m,1) * .75);touch-action:none}
#stage.hasm{overflow:auto;align-content:flex-start}
.tile.pinching{outline:3px solid var(--lamp);outline-offset:-3px}
.tile.reord{opacity:.3}
.tghost{position:fixed;z-index:200;border-radius:16px;background:#ffc85766;border:3px dashed var(--lamp);display:grid;place-items:center;font-weight:800;font-size:18px;pointer-events:none;box-shadow:0 18px 40px #000a;backdrop-filter:blur(2px)}

/* ================= v18: sohbet ================= */
#chat header .chb{display:flex;gap:4px}
.msg .mdel{float:right;border:0;background:none;color:var(--mut);font-size:11px;padding:0 0 0 8px;opacity:.5}
.msg:hover .mdel{opacity:1}
.msg.pet{background:#2c3f2a;border:1px solid #5fd6a455}
.msg.pet small{color:#9de6b5}
.msg img.mphoto{max-height:240px;cursor:zoom-in}
#imgBtn{border:0;background:none;font-size:18px}
#imgView{position:fixed;inset:0;z-index:300;background:#000d;display:grid;place-items:center;cursor:zoom-out}
#imgView img{max-width:96vw;max-height:94vh;border-radius:10px}

/* ================= v18: oyun balonları + bilgi yarışması ================= */
.pchip{position:relative}
.sbub{position:absolute;left:30px;top:calc(100% + 8px);z-index:30;max-width:min(260px,70vw);background:#fff;color:#1b2430;font-size:13px;font-weight:700;line-height:1.3;padding:7px 11px;border-radius:4px 14px 14px 14px;box-shadow:0 6px 16px #0007;animation:sbin .25s ease-out;pointer-events:none;white-space:normal;text-align:left}
.sbub::after{content:"";position:absolute;left:14px;top:-7px;border:7px solid transparent;border-bottom-color:#fff;border-top:0;border-left-width:2px}
.pchip.big .sbub{left:50%;transform:translateX(-50%);border-radius:14px}
@keyframes sbin{from{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:none}}
.pbar,.lplayers{overflow:visible}
.agegrid{display:flex;flex-direction:column;gap:8px}
.agegrid .gbtn{text-align:left;font-size:16px;padding:12px 14px}
.qhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0}
.qcat{background:#7c5cff;color:#fff;border-radius:99px;padding:2px 12px;font-size:12px;font-weight:800}
.qtime{height:10px;background:#ffffff1c;border-radius:99px;overflow:hidden;margin:4px 0 12px}
.qtime i{display:block;height:100%;background:linear-gradient(90deg,#5fd6a4,#ffc857 60%,#ff6b81);border-radius:99px}
.qq{font-size:clamp(18px,3.6vmin,26px);font-weight:800;line-height:1.3;margin:6px 0 14px;text-align:center}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.qopts{grid-template-columns:1fr}}
.qo{display:flex;align-items:center;gap:10px;text-align:left;border:2px solid #ffffff22;background:#ffffff10;border-radius:16px;padding:12px;font-size:16px;font-weight:700;transition:transform .12s,background .2s}
.qo i{font-style:normal;width:30px;height:30px;border-radius:10px;background:#ffffff1f;display:grid;place-items:center;font-weight:900;flex:none}
.qo:not(:disabled):hover{background:#ffffff1c;transform:translateY(-2px)}
.qo.pick{border-color:var(--lamp);background:#ffc85730}
.qo.good{border-color:var(--ok);background:#5fd6a42e;animation:qgood .5s}
.qo.bad{border-color:var(--bad);background:#ff6b8130}
.qo.dim{opacity:.45}
@keyframes qgood{40%{transform:scale(1.04)}}
.qres{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;justify-content:center}
.qres span{border-radius:99px;padding:4px 12px;font-weight:800;font-size:13px;background:#ffffff14}
.qres .ok{background:#5fd6a42e;color:var(--ok)}.qres .no{background:#ff6b8126;color:var(--bad)}
.qrank{font-size:17px;font-weight:700;display:flex;flex-direction:column;gap:6px;padding-left:0;list-style:none}
.g-quiz .glogo{background:#7c5cff}
.gbanner{text-align:center;font-size:22px;font-weight:900;margin:10px 0;padding:12px;border-radius:16px;background:linear-gradient(135deg,#ffd76a33,#5fd6a433)}

/* ================= v18: hayvan zihni, arama, istek ================= */
#petMenu .pgrid{max-height:calc(var(--vh) * .3);overflow:auto}
.ptool{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.pq{width:100%;padding:9px 12px;border-radius:12px;border:1px solid #ffffff2a;background:#0f1923;color:var(--ink);outline:none;font-size:14px}
.pq:focus{border-color:var(--lamp)}
.pchips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.pchip2{flex:none;border:1px solid #ffffff22;background:#ffffff10;border-radius:99px;padding:5px 11px;font-size:12px;font-weight:700;color:#fff;white-space:nowrap}
.pchip2.on{background:var(--lamp);color:var(--lamp-ink);border-color:var(--lamp)}
.pit.wish{border-color:var(--lamp);box-shadow:0 0 0 2px #ffc85766;background:linear-gradient(180deg,#ffc8574d,#ffc8570d)}
.pit.wide{grid-column:1/-1;flex-direction:row;gap:10px;padding:12px;font-size:14px}
.gmsg.wide{grid-column:1/-1}
#petWish{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 0;padding:7px 10px;border-radius:14px;background:linear-gradient(135deg,#ffc85733,#ff9fc033);border:1px solid #ffc85788;font-size:13px;font-weight:700;animation:pup .25s ease-out}
#petWish .gbtn{padding:5px 14px}