/* Layout: a transit-line map. Each game is a station on the venue's colored line; the phone column never exceeds 460px. */
:root{
  --bg:#EEF1F4; --surface:#FFFFFF; --ink:#152033; --muted:#5B6678; --rule:#D5DBE3;
  --line:#0F8A7E; --line-ink:#FFFFFF; --soft:#E2F1EF;
  --good:#1E8A4C; --bad:#C2412D; --lock:#A7B0BD;
  --f-display:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --f-body:"Onest", "Segoe UI", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0F1520; --surface:#18212F; --ink:#E9EEF5; --muted:#9AA6B6; --rule:#2A3546;
  --soft:#1B2C33; --good:#4CC583; --bad:#F07A63; --lock:#4A5566; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F1520; --surface:#18212F; --ink:#E9EEF5; --muted:#9AA6B6; --rule:#2A3546;
  --soft:#1B2C33; --good:#4CC583; --bad:#F07A63; --lock:#4A5566; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--f-body);padding-inline:16px;padding-block:0 40px}
.app{max-width:460px;margin:0 auto}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,.station:focus-visible{outline:3px solid var(--line);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.01em}
.eyebrow{font:600 12px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:18px 14px}
.brand{font:800 20px/1 var(--f-display);display:flex;align-items:center;gap:8px}
.brand i{width:18px;height:40px;margin:-11px 0;flex:none;display:inline-block;background:url(/marka/maskot.webp) center/contain no-repeat;border-radius:0}
.venue{display:flex;align-items:center;gap:10px;min-width:0}
.logo{width:40px;height:40px;border-radius:50%;background:var(--line);color:var(--line-ink);display:grid;place-items:center;font:800 18px/1 var(--f-display);flex:none}
.venue b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.venue small{color:var(--muted);font-size:13px}

/* hero */
.hero{background:var(--line);color:var(--line-ink);border-radius:20px;padding:20px;display:grid;gap:10px;position:relative;overflow:hidden}
.hero h1{font-size:30px;line-height:1.05;font-weight:800}
.hero p{margin:0;opacity:.92;font-size:15px}
.cheer{display:grid;gap:10px;justify-items:center;padding:30px 20px}.cheer h2{font-size:32px}.cheer-ic{font-size:52px;line-height:1}
.hero .prize{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.16);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600;width:max-content;max-width:100%}
.hero::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border:14px solid rgba(255,255,255,.14);border-radius:50%}

/* line map */
.map{margin-top:26px}
.map h2{font-size:15px;font-family:var(--f-body);font-weight:600;color:var(--muted);margin-bottom:10px}
.stations{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stations li{display:flex;min-width:0}
.station{width:100%;min-height:128px;text-align:left;background:var(--surface);border:1.5px solid var(--rule);border-top:5px solid var(--line);border-radius:8px;padding:12px 12px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;transition:transform .15s,border-color .15s}
.station:hover{transform:translateY(-2px);border-color:var(--line)}
.station h3{font-size:18px;font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.station .meta{color:var(--muted);font-size:12.5px;line-height:1.35}
.tag{margin-top:auto;font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--soft);color:var(--ink);white-space:nowrap}
.tag.gift{background:var(--line);color:var(--line-ink)}
.locked .station{cursor:default;min-height:96px;border-style:dashed;border-top:5px solid var(--lock);opacity:.8}
.locked .station:hover{transform:none;border-color:var(--rule);border-top-color:var(--lock)}
.locked .station h3{font-size:16px}

/* demo switcher */
.demo{margin-top:28px;border-top:1px dashed var(--rule);padding-top:16px;display:grid;gap:10px}
.demo p{margin:0;color:var(--muted);font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--rule);background:var(--surface);border-radius:999px;padding:7px 12px;font-size:14px;display:flex;align-items:center;gap:7px}
.chip i{width:12px;height:12px;border-radius:50%;display:inline-block}
.chip[aria-pressed="true"]{border-color:var(--ink);font-weight:600}

/* game screens */
.screen{padding-top:6px;display:grid;gap:16px}
.back{background:none;border:0;padding:8px 0;color:var(--muted);font-weight:600;width:max-content}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:20px;display:grid;gap:14px}
.title-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.title-row h2{font-size:26px;font-weight:800}
.count{font:500 14px/1 var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.bar{height:6px;border-radius:3px;background:var(--rule);overflow:hidden}
.bar span{display:block;height:100%;background:var(--line);transition:width .3s}
.q{font:700 22px/1.25 var(--f-display)}
.opts{display:grid;gap:10px}
.opt{border:1.5px solid var(--rule);background:var(--surface);border-radius:12px;padding:13px 14px;text-align:left;font-weight:500}
.opt:hover{border-color:var(--line)}
.opt.ok{border-color:var(--good);background:color-mix(in srgb,var(--good) 14%,var(--surface))}
.opt.no{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--surface))}
.btn{background:var(--line);color:var(--line-ink);border:0;border-radius:12px;padding:14px 18px;font-weight:600;font-size:16px}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--rule)}
.btn:disabled{opacity:.5;cursor:default}
.muted{color:var(--muted);margin:0;font-size:15px}
.note{font-size:13px;color:var(--muted);background:var(--soft);border-radius:10px;padding:10px 12px;margin:0}
.big{font:800 40px/1 var(--f-display);text-align:center}
.center{text-align:center}

/* memory */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tile{aspect-ratio:3/4;max-width:100%;border-radius:10px;border:0;background:var(--line);color:transparent;font-size:30px;display:grid;place-items:center;transition:transform .2s,background .2s}
.tile.open,.tile.done{background:var(--surface);color:var(--ink);border:1.5px solid var(--rule)}
.tile.done{border-color:var(--good);color:var(--good)}
.tile.red.open,.tile.red.done{color:var(--bad)}

/* impostor */
.reveal{min-height:190px;border-radius:16px;border:2px dashed var(--rule);display:grid;place-items:center;text-align:center;padding:20px;gap:6px}
.reveal.on{border-style:solid;border-color:var(--line);background:var(--soft)}
.stepper{display:flex;align-items:center;gap:14px;justify-content:center}
.stepper button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--rule);background:var(--surface);font-size:22px}
.stepper output{font:800 34px/1 var(--f-display);min-width:40px;text-align:center}

/* rooms */
.field{width:100%;border:1.5px solid var(--rule);background:var(--bg);color:var(--ink);border-radius:12px;padding:13px 14px;font:500 17px/1.2 var(--f-body)}
.field:focus{outline:none;border-color:var(--line)}
.join-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.code-in{font:700 22px/1 var(--f-mono);letter-spacing:.3em;text-transform:uppercase;text-align:center}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--rule)}
.err{color:var(--bad);font-size:14px;margin:0}
.card h3{font-size:18px}
.people{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.people li{display:flex;align-items:center;gap:10px;font-weight:500;background:var(--bg);border-radius:10px;padding:10px 12px}
.people small{font-size:12px;color:var(--muted);font-weight:500}
.dot{width:10px;height:10px;border-radius:50%;background:var(--good);flex:none}
.reveal{color:var(--ink);background:transparent}

/* word games */
.kb{display:grid;gap:6px;margin-top:4px}
.kb-row{display:flex;justify-content:center;gap:4px}
.key{flex:1 1 0;min-width:0;max-width:40px;height:46px;border:0;border-radius:7px;background:var(--rule);color:var(--ink);font:600 15px/1 var(--f-body);padding:0}
.key.wide{max-width:60px;flex:1.6 1 0;font-size:13px}
.key.hit{background:var(--good);color:#fff}
.key.near{background:#C9A227;color:#1d1a10}
.key.absent{background:var(--lock);color:var(--surface)}
.key:disabled{cursor:default}
.wgrid{display:grid;gap:6px;justify-content:center}
.wrow{display:grid;grid-template-columns:repeat(5,min(54px,15vw));gap:6px}
.wcell{aspect-ratio:1;border:2px solid var(--rule);border-radius:6px;display:grid;place-items:center;font:800 24px/1 var(--f-display)}
.wcell.typed{border-color:var(--muted)}
.wcell.hit{background:var(--good);border-color:var(--good);color:#fff}
.wcell.near{background:#C9A227;border-color:#C9A227;color:#1d1a10}
.wcell.absent{background:var(--lock);border-color:var(--lock);color:var(--surface)}
.gallows{width:100%;max-width:220px;margin:0 auto;display:block}
.gallows line,.gallows circle{stroke-width:5;stroke-linecap:round;fill:none}
.gallows .post line{stroke:var(--muted)}
.gallows .man line,.gallows .man circle{stroke:var(--bad)}
.hword{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.hword span{width:28px;height:38px;border-bottom:3px solid var(--ink);display:grid;place-items:end center;font:800 24px/1.3 var(--f-display)}
.emoji-q{font-size:44px;line-height:1.3;text-align:center;padding-block:10px;background:var(--bg);border-radius:14px}
.letter{font:800 72px/1 var(--f-display);color:var(--line);text-align:center}
.fb-opts{display:grid;gap:10px}
.fb-opt{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:14px 16px;border-radius:16px;border:1.5px solid var(--rule);background:var(--surface);color:var(--ink);cursor:pointer}
.fb-opt span{grid-row:1/3;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--line)}.fb-opt span svg{width:24px;height:24px}
.fb-opt b{font:700 16px var(--f-body)}.fb-opt small{color:var(--muted);font-size:13.5px}
.fb-body{display:grid;gap:10px}
.fb-kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fb-kinds button{height:42px;border-radius:12px;border:1.5px solid var(--rule);background:var(--surface);color:var(--ink);font:600 14.5px var(--f-body);cursor:pointer}
.fb-kinds button.on{background:var(--line);border-color:var(--line);color:var(--line-ink)}
.fb-body textarea{resize:vertical;min-height:110px;font:500 16px/1.4 var(--f-body)}
.fb-two{display:grid;grid-template-columns:1fr 2.2fr;gap:8px}.fb-two .field{font-size:15px}
.fb-done{display:grid;gap:8px;text-align:center;padding:10px 0}.fb-done b{font:800 24px var(--f-display)}
.ata-wr{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:46vh;overflow:auto}.ata-wr li{display:grid;gap:3px;padding:10px 12px;border-radius:12px;background:var(--soft);font-size:14px}.ata-wr b{font-weight:600}.ata-wr span{color:var(--good);font-weight:700}
.mn{max-height:62vh;overflow:auto;margin:0 -4px;padding:0 4px}
.mn-c{font-size:15px;margin:16px 0 6px;color:var(--line,#0E6B61);text-transform:uppercase;letter-spacing:.04em}
.mn-l{list-style:none;margin:0;padding:0}
.mn-l li{display:flex;align-items:baseline;gap:8px;padding:7px 0;font-size:16px}
.mn-l li i{flex:1;border-bottom:1.5px dotted var(--rule,#ccc);transform:translateY(-4px)}
.mn-l li b{font-variant-numeric:tabular-nums;white-space:nowrap}
body.mys-on{--bg:#0E0B20;--surface:#1A1534;--ink:#EEE6D3;--muted:#A79FBF;--rule:#3A3060;background:#0E0B20;color-scheme:dark}
.mys{--g:#D9B66B;--g2:#F1DDA6;--mi:#EEE6D3;--mm:#A79FBF;--ml:rgba(217,182,107,.32);--serif:"Cormorant Garamond","Lora",Georgia,serif;
  position:relative;overflow:hidden;display:grid;gap:14px;padding:24px 18px 20px;border-radius:24px;color:var(--mi);border:1px solid var(--ml);color-scheme:dark;
  background:radial-gradient(130% 55% at 50% 0%,#2E2259 0,#17122F 58%,#0F0C22 100%)}
.mys::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;background:
  radial-gradient(1.2px 1.2px at 12% 18%,#fff 98%,transparent),radial-gradient(1px 1px at 78% 9%,#F1DDA6 98%,transparent),radial-gradient(1.4px 1.4px at 88% 34%,#fff 98%,transparent),
  radial-gradient(1px 1px at 30% 6%,#fff 98%,transparent),radial-gradient(1px 1px at 55% 22%,#F1DDA6 98%,transparent),radial-gradient(1.2px 1.2px at 6% 46%,#fff 98%,transparent),
  radial-gradient(1px 1px at 94% 62%,#fff 98%,transparent),radial-gradient(1px 1px at 18% 74%,#F1DDA6 98%,transparent),radial-gradient(1.2px 1.2px at 70% 88%,#fff 98%,transparent)}
.mys>*{position:relative;margin:0}
.mys h2{font:600 40px/1.05 var(--serif);color:var(--g2);letter-spacing:0}
.mys h3{font:600 28px/1.1 var(--serif);color:var(--g2);margin:2px 0 8px}
.mys p{line-height:1.55}
.mys .center{text-align:center;justify-self:center}
.mys .gold{color:var(--g2)}
.m-sub{color:var(--mm);font-size:15px}
.m-lead{font-size:16px}
.m-label{font-size:13px;font-weight:600;color:var(--g);letter-spacing:.02em}
.m-label span{color:var(--mm);font-weight:400}
.m-hint{color:var(--mm);font-size:14px;text-align:center}
.m-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.m-count{font:600 14px var(--f-body);color:var(--g);border:1px solid var(--ml);border-radius:999px;padding:4px 12px;white-space:nowrap}
.mnote{font-size:12px;color:var(--mm);text-align:center}
.m-err{color:#FF9C8A;font-size:14px;text-align:center}
.mbtn{width:100%;height:54px;border-radius:14px;border:0;font:700 16px var(--f-body);color:#1B1433;cursor:pointer;
  background:linear-gradient(180deg,#EBCD86,#C9A24E);box-shadow:0 8px 24px rgba(201,162,78,.25),inset 0 1px 0 rgba(255,255,255,.4)}
.mbtn.ghost{background:transparent;color:var(--g2);border:1px solid var(--ml);box-shadow:none}
.mbtn:disabled{opacity:.6}
.mbtn:focus-visible,.mseg button:focus-visible,.m-link:focus-visible,.tr-fc:focus-visible,.m-field:focus-visible,.m-date select:focus-visible{outline:2px solid var(--g2);outline-offset:3px}
.m-link{background:none;border:0;padding:4px;color:var(--g2);font:600 14px var(--f-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mseg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border:1px solid var(--ml);border-radius:14px;background:rgba(0,0,0,.18)}
.mseg button{height:42px;border:0;border-radius:10px;background:none;color:var(--mm);font:600 14px var(--f-body);cursor:pointer}
.mseg button.on{background:rgba(217,182,107,.16);color:var(--g2);box-shadow:inset 0 0 0 1px var(--ml)}
.m-tags{display:flex;flex-wrap:wrap;gap:6px}
.m-tags.center{justify-content:center}
.m-tags span{font-size:12.5px;font-weight:600;color:var(--g2);border:1px solid var(--ml);border-radius:999px;padding:4px 11px}
.m-panel{border:1px solid var(--ml);border-radius:18px;padding:16px;background:rgba(255,255,255,.035)}
.m-panel blockquote{margin:4px 0 0;font:italic 500 27px/1.2 var(--serif);color:var(--g2)}
.m-field,.m-date select{width:100%;height:50px;border-radius:12px;border:1px solid var(--ml);background:rgba(255,255,255,.05);color:var(--mi);font:500 16px var(--f-body);padding:0 14px}
.m-field::placeholder{color:#7F7898}
.m-date{display:grid;grid-template-columns:1fr 1.5fr 1.2fr;gap:8px}
.m-date select{appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;
  background:rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23D9B66B' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center/12px 8px}
.m-date option{background:#1A1534;color:#EEE6D3}
@keyframes mysIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Tarot */
.tr-hero{height:170px;position:relative;margin-top:4px}
.trb{position:absolute;left:50%;top:14px;width:88px;margin-left:-44px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));transform:translate(var(--x),var(--y,0)) rotate(var(--r))}
.trb svg,.tr-fc svg,.tr-sc svg,.tr-side svg{display:block;width:100%;height:auto}
.tr-hero.mix .trb{animation:trMix .9s ease-in-out}
@keyframes trMix{40%{transform:translate(0,0) rotate(0)}60%{transform:translate(0,-6px) rotate(0)}}
.tr-intro h2{text-align:center}.tr-intro>.m-sub{text-align:center}
.tr-fan{position:relative;height:196px;margin:6px 0 0}
.tr-fc{position:absolute;left:50%;top:14px;width:62px;margin-left:-31px;padding:0;border:0;background:none;cursor:pointer;border-radius:7px;
  transform-origin:50% 280px;transform:rotate(var(--r));transition:transform .22s ease,opacity .3s;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));
  animation:trDeal .55s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i) * 22ms)}
@keyframes trDeal{from{transform:rotate(0) translateY(40px);opacity:0}}
@media (hover:hover){.tr-fc:hover{transform:rotate(var(--r)) translateY(-14px)}}
.tr-fc.taken{transform:rotate(var(--r)) translateY(-70px) scale(.85);opacity:0;pointer-events:none}
.tr-fan.done .tr-fc{opacity:.25;pointer-events:none}
.tr-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.tr-slot{display:grid;justify-items:center;gap:6px}
.tr-slot small{font-size:13px;font-weight:600;color:var(--mm)}
.tr-slot.on small{color:var(--g)}
.tr-sc{width:62px;aspect-ratio:70/120;border-radius:8px;border:1.5px dashed var(--ml)}
.tr-slot.on .tr-sc{border:0;animation:trPop .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes trPop{from{transform:translateY(-30px) scale(.7);opacity:0}}
.tr-spread{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.tr-flip{perspective:800px;display:grid;gap:8px}
.tr-flip small{font-size:13px;font-weight:600;color:var(--g)}
.tr-in{position:relative;aspect-ratio:70/120;transform-style:preserve-3d;animation:trFlip .8s cubic-bezier(.4,.1,.2,1) both;animation-delay:var(--d)}
@keyframes trFlip{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
.tr-side{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tr-fside{transform:rotateY(180deg)}
.tcard{height:100%;box-sizing:border-box;border-radius:9px;border:1.5px solid var(--g);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10% 6% 12%;
  background:linear-gradient(160deg,#2F2462,#150F2C);box-shadow:0 10px 24px rgba(0,0,0,.45),0 0 24px rgba(217,182,107,.12)}
.tcard::before{content:"";position:absolute;inset:5px;border:1px solid rgba(217,182,107,.4);border-radius:6px;pointer-events:none}
.tc-no{font:600 20px/1 var(--serif);color:var(--g)}
.tcard svg{width:88%;color:var(--g)}
.tc-name{font:600 15px/1.05 var(--serif);color:var(--g2);text-align:center}
.tc-name.long{font-size:12.5px}
.tr-list{display:grid;gap:18px}
.tr-item{padding-top:16px;border-top:1px solid var(--ml);animation:mysIn .6s ease both;animation-delay:var(--d)}
.tr-item p:last-child{margin-top:10px}
.tr-read .m-panel{animation:mysIn .6s ease both;animation-delay:var(--d)}
/* Numeroloji */
.num-hero{display:grid;place-items:center;padding:6px 0;background:radial-gradient(closest-side,rgba(217,182,107,.18),transparent)}
.medal{position:relative;width:200px;height:200px;color:var(--g)}
.medal svg{width:100%;height:100%}
.medal b{position:absolute;inset:0;display:grid;place-items:center;font:600 84px/1 var(--serif);color:var(--g2);padding-bottom:4px}
.medal.spin .md-ring{transform-origin:100px 100px;animation:mdSpin 90s linear infinite}
@keyframes mdSpin{to{transform:rotate(360deg)}}
.medal.pop b{animation:mdPop .7s cubic-bezier(.3,1.4,.5,1) both .1s}
@keyframes mdPop{from{transform:scale(.4);opacity:0}}
.medal.sm{width:112px;height:112px}.medal.sm b{font-size:46px}
.m-badge{justify-self:center;font:600 13px var(--f-body);color:#1B1433;background:var(--g);border-radius:999px;padding:4px 12px}
.num-in h2{text-align:center}.num-in>.m-sub{text-align:center}
.num-in .m-head h2{text-align:left}
.m-calc{font:500 12.5px/1.6 var(--f-mono,"JetBrains Mono",monospace);color:var(--mm);text-align:center;border:1px dashed var(--ml);border-radius:12px;padding:8px 10px}
.m-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-two>div{border:1px solid var(--ml);border-radius:16px;padding:12px;background:rgba(255,255,255,.035)}
.m-two p:last-child{font-size:14px;margin-top:4px}
.m-minis{display:grid;gap:8px}
.m-mini{display:flex;gap:14px;align-items:center;border:1px solid var(--ml);border-radius:16px;padding:12px 14px;background:rgba(255,255,255,.035)}
.mm-n{flex:none;width:46px;text-align:center;font:600 40px/1 var(--serif);color:var(--g2)}
.m-mini p:last-child{font-size:14px}
.num-res .m-sub b{font-weight:700}
.mt-pair{display:flex;align-items:center;justify-content:center;gap:6px;text-align:center}
.mt-pair small{display:block;font-weight:600;color:var(--mi);margin-top:2px;max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-link{width:44px;height:1px;background:var(--g);position:relative;margin-bottom:22px}
.mt-link::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;background:var(--g);transform:translate(-50%,-50%) rotate(45deg)}
.mt-ring{position:relative;width:184px;height:184px;justify-self:center}
.mt-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.mt-ring circle{fill:none;stroke-width:7}
.mt-ring .r0{stroke:rgba(255,255,255,.09)}
.mt-ring .r1{stroke:var(--g);stroke-linecap:round;stroke-dasharray:var(--c);stroke-dashoffset:var(--o);animation:ringIn 1.3s cubic-bezier(.2,.7,.2,1) both}
@keyframes ringIn{from{stroke-dashoffset:var(--c)}}
.mt-ring b{position:absolute;inset:0;display:grid;place-items:center;font:600 56px/1 var(--serif);color:var(--g2);font-variant-numeric:tabular-nums}
.mt-bars{display:grid;gap:10px}
.mt-bars div{display:grid;grid-template-columns:118px 1fr 44px;align-items:center;gap:10px;font-size:14px}
.mt-bars span{color:var(--mm)}
.mt-bars i{height:7px;border-radius:9px;background:rgba(255,255,255,.09);overflow:hidden}
.mt-bars em{display:block;height:100%;width:var(--w);border-radius:9px;background:linear-gradient(90deg,#C9A24E,#F1DDA6);animation:barIn 1.2s ease both .3s}
@keyframes barIn{from{width:0}}
.mt-bars b{text-align:right;color:var(--g2);font-variant-numeric:tabular-nums}
@media (max-width:360px){.m-two{grid-template-columns:1fr}.mys h2{font-size:34px}}
@media (prefers-reduced-motion:reduce){.mys *,.mys *::before{animation:none!important;transition:none!important}.tr-in{transform:rotateY(180deg)}}
.ish-top{display:flex;align-items:center;justify-content:center;gap:16px}
.ish-timer{min-width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font:800 30px var(--font,inherit);background:var(--surface-2,#eef2f1);border:3px solid var(--line,#0E6B61);font-variant-numeric:tabular-nums}
.ish-timer.low{border-color:#E5484D;color:#E5484D}
.ish-form{display:grid;gap:6px}
.ish-form label{font-weight:600;font-size:14px;margin-top:4px}
.table-wrap{overflow-x:auto;margin-inline:-4px}
.ish-table{border-collapse:collapse;font-size:14px;min-width:100%}
.ish-table th,.ish-table td{padding:8px 6px;border-bottom:1px solid var(--rule);text-align:left;white-space:nowrap}
.ish-table th{font-size:12px;color:var(--muted);font-weight:600}
.ish-table td small{display:inline-block;margin-left:4px;font:600 11px/1 var(--f-mono);padding:2px 5px;border-radius:5px;background:var(--rule)}
.ish-table td small.p10{background:var(--good);color:#fff}
.ish-table td small.p5{background:#C9A227;color:#1d1a10}
.ish-table td.rej{color:var(--muted);text-decoration:line-through}
.rv-cat{margin:14px 0 6px;font:700 13px/1 var(--f-body);letter-spacing:.06em;color:var(--muted)}
.rv-list{display:grid;gap:6px}
.rv-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1.5px solid var(--rule);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;text-align:left}
.rv-item .who{font-size:12px;color:var(--muted);min-width:64px}
.rv-item .ans{flex:1;font-weight:700;font-size:16px}
.rv-item .mk{font:800 13px/1 var(--f-body);padding:5px 9px;border-radius:999px;background:var(--good);color:#fff}
.rv-item.no{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,var(--surface))}
.rv-item.no .ans{text-decoration:line-through;color:var(--muted)}
.rv-item.no .mk{background:var(--bad)}
.rv-item.auto{opacity:.55}
button.rv-item{cursor:pointer}
.judge-btn{margin-left:auto;font:600 12px/1 var(--f-body);padding:6px 10px;border-radius:999px;border:1.5px solid var(--rule);background:transparent;color:var(--ink)}
.judge-btn[aria-pressed="true"]{background:var(--line);border-color:var(--line);color:var(--line-ink)}
.board li{justify-content:space-between}

/* vampire + quiz battle */
.opt.pick{border-color:var(--line);background:var(--soft);font-weight:600}
.people li.dead{opacity:.5;text-decoration:line-through}
.people li.dead .dot{background:var(--bad)}
.role{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--soft)}
.role summary{cursor:pointer;font-weight:600}
.role[open]{display:grid;gap:6px}
.role b{font:800 26px/1.1 var(--f-display);color:var(--line)}
.card.night{background:#141B2B;border-color:#26324A;color:#E3E8F2}
.card.night .muted,.card.night .count{color:#9AA6BC}
.card.night .opt{background:#1C2538;border-color:#2E3B57;color:#E3E8F2}
.card.night .opt.pick{border-color:var(--line);background:#24324C}
.card.night .note{background:#1C2538;color:#C9D2E3}
.card.night .role{background:#1C2538}
.card.night .btn.ghost{color:#E3E8F2;border-color:#2E3B57}

/* batch 3 games */
.g2048{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:color-mix(in srgb,var(--line) 14%,var(--rule));padding:8px;border-radius:14px;touch-action:none;user-select:none;max-width:100%}
.cell2{aspect-ratio:1;border-radius:9px;background:color-mix(in srgb,var(--surface) 70%,transparent)}
.t-layer{position:absolute;inset:8px;pointer-events:none}
.t-layer.nudge{animation:nudge .25s}
@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.tile2{position:absolute;left:0;top:0;width:calc((100% - 24px)/4);aspect-ratio:1;border-radius:9px;display:grid;place-items:center;font:800 32px/1 var(--f-display);
  transform:translate(calc(var(--x) * (100% + 8px)),calc(var(--y) * (100% + 8px)));transition:transform .12s ease-in-out}
.tile2.appear{animation:appear .2s .1s both}
.tile2.pop{animation:pop2 .22s .1s}
@keyframes appear{from{scale:0}to{scale:1}}
@keyframes pop2{50%{scale:1.2}}
.g-over{position:absolute;inset:0;border-radius:14px;background:color-mix(in srgb,var(--surface) 80%,transparent);display:grid;place-content:center;gap:12px;text-align:center;backdrop-filter:blur(2px);animation:popin .3s}
.g-over b{font:800 26px/1 var(--f-display)}
.score2{display:flex;gap:6px}
.score2 span{display:grid;justify-items:center;background:var(--bg);border-radius:8px;padding:4px 10px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.score2 b{font:800 18px/1.1 var(--f-display);color:var(--ink);letter-spacing:0}
.arrows{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.arrows .btn{padding:10px;font-size:20px}
.sudoku{display:grid;grid-template-columns:repeat(9,1fr);border:2px solid var(--ink);border-radius:6px;overflow:hidden;max-width:100%}
.sc{aspect-ratio:1;border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--surface);font:600 clamp(14px,4.4vw,20px)/1 var(--f-body);color:var(--line);padding:0}
.sc.giv{color:var(--ink);font-weight:700}
.sc.br{border-right:2px solid var(--ink)}
.sc.bb{border-bottom:2px solid var(--ink)}
.sc.rel{background:var(--soft)}
.sc.sel{background:color-mix(in srgb,var(--line) 30%,var(--surface))}
.sc.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,var(--surface))}
.numpad{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.numpad .key{max-width:none;flex:none}
.scorebar{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.scorebar span{background:var(--bg);border-radius:10px;padding:8px 12px}
.scorebar b{font:800 20px/1 var(--f-display);margin-left:6px}
.tbtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.btn.danger{background:var(--bad);color:#fff}
.tabu{border:2px solid var(--line);border-radius:14px;overflow:hidden;text-align:center;display:grid}
.tabu .eyebrow{padding-top:12px}
.tabu-w{font:800 30px/1.1 var(--f-display);padding:18px 12px;overflow-wrap:anywhere}
.tabu ul{list-style:none;margin:0;padding:10px;background:var(--soft);display:grid;gap:4px;font-weight:600;color:var(--bad)}
.forehead{text-align:center}
.fh-word{font:800 clamp(34px,11vw,52px)/1.05 var(--f-display);padding-block:30px;overflow-wrap:anywhere}
.kids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kid-tile{border:2px solid var(--rule);background:var(--surface);border-radius:18px;padding:20px 10px;display:grid;gap:8px;justify-items:center;font-size:16px}
.kid-ico{font-size:44px;line-height:1}
.kid-tile.shape{font-size:64px;line-height:1;padding:14px}
.kid-tile.yay{border-color:var(--good);transform:scale(1.06)}
.kid-tile.nope{border-color:var(--bad);animation:shake .3s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.target{width:110px;height:110px;border-radius:50%;margin:10px auto}
.dots{display:flex;justify-content:center;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--rule)}
.dots i.on{background:var(--good)}
.stars{font-size:40px}
.sky{position:relative;height:380px;border-radius:14px;background:linear-gradient(#BFE3FF,#EAF6FF);overflow:hidden}
.balloon{position:absolute;bottom:-90px;width:58px;height:72px;border:0;border-radius:50% 50% 46% 46%;animation:rise linear forwards;padding:0}
.balloon::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:26px;background:#7a8aa0}
.balloon.pop{transform:scale(1.4);opacity:0;transition:.15s}
@keyframes rise{to{transform:translateY(-500px)}}
.agrid{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;max-width:100%}
.agrid.own{max-width:240px;opacity:.95}
.acb{aspect-ratio:1;border:0;padding:0;background:transparent;display:block}
.ac{display:block;aspect-ratio:1;border-radius:3px;background:color-mix(in srgb,#3E86C9 22%,var(--surface))}
.ac.ship{background:var(--muted)}
.ac.miss{background:var(--rule);box-shadow:inset 0 0 0 5px color-mix(in srgb,#3E86C9 22%,var(--surface))}
.ac.hit{background:#F08A24}
.ac.sunk{background:var(--bad)}
.cpu-hand,.my-hand{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;align-items:center}
.cpu-hand small{width:100%;text-align:center;color:var(--muted)}
.pc{width:56px;height:80px;border-radius:8px;border:1.5px solid var(--rule);background:#fff;color:#1b1f27;display:grid;place-items:center;align-content:center;gap:2px;padding:0}
.pc b{font:800 20px/1 var(--f-display)}
.pc span{font-size:20px;line-height:1}
.pc.red{color:#C9302C}
.pc.back{background:repeating-linear-gradient(45deg,var(--line) 0 6px,color-mix(in srgb,var(--line) 70%,#fff) 6px 12px);border-color:var(--line)}
.my-hand .pc{width:64px;height:92px}
.my-hand .pc:not(:disabled):hover{transform:translateY(-6px)}
.table-pile{display:grid;justify-items:center;gap:6px;padding:12px;border-radius:14px;background:#1E6B47}
.table-pile small{color:#DDEFE4}
.stack{position:relative}
.stack .under{position:absolute;left:5px;top:-5px;z-index:0}
.stack .pc:not(.under){position:relative;z-index:1}
.dboard{display:grid;grid-template-columns:repeat(8,1fr);border:3px solid #6B4A2B;border-radius:6px;overflow:hidden;max-width:100%}
.dsq{aspect-ratio:1;border:0;padding:0;display:grid;place-items:center}
.dsq.lt{background:#E9D3AE}.dsq.dk{background:#C59A66}
.dsq.lm{box-shadow:inset 0 0 0 3px rgba(255,214,90,.8)}
.dsq.sel{box-shadow:inset 0 0 0 4px var(--line)}
.dsq.dest::after{content:"";width:30%;height:30%;border-radius:50%;background:var(--line);opacity:.85}
.dp{width:78%;height:78%;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.dp.w{background:#FBF7EF;border:2px solid #CDBFA6}
.dp.b{background:#2B2B30;border:2px solid #111}
.dp.king::after{content:"♛";font-size:clamp(12px,4vw,20px);color:#C99A1B}
.dp.can{outline:2px dashed var(--line);outline-offset:2px}
.dp.moving{position:relative;z-index:5;box-shadow:0 8px 14px rgba(0,0,0,.35),inset 0 -3px 0 rgba(0,0,0,.25)}
.dsq.ghost-sq{position:relative}
.dp.ghost{position:absolute;inset:11%;width:auto;height:auto;z-index:2;pointer-events:none}
.dp.crowned{animation:dcrown .6s ease-out}
@keyframes dcrown{0%{transform:scale(1)}40%{transform:scale(1.25);box-shadow:0 0 0 6px rgba(201,154,27,.55)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.dp.crowned{animation:none}}

/* classic games */
.game-card{position:relative;overflow:hidden}
.turn-on{font-weight:600;color:var(--ink)}
.result-box{border:2px solid var(--rule);border-radius:14px;padding:14px;display:grid;gap:10px;text-align:center;animation:popin .35s}
.result-box.win{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--surface))}
.result-box b{font:800 22px/1.2 var(--f-display)}
.toast{justify-self:center;background:var(--ink);color:var(--surface);border-radius:999px;padding:8px 16px;font-weight:600;font-size:14px;animation:popin .4s cubic-bezier(.2,1.4,.4,1)}
.toast.pisti{background:var(--line);color:var(--line-ink);font-size:17px}
@keyframes popin{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.seat{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:12px;background:var(--bg);border:2px solid transparent}
.seat.on{border-color:var(--line)}
.seat small{color:var(--muted);margin-left:auto}
.hand-backs{display:flex;gap:3px}
.pc.mini{width:22px;height:32px;border-radius:4px}
.felt{position:relative;min-height:170px;border-radius:16px;background:radial-gradient(circle at 50% 40%,#2C8A5B,#1A5E3D);display:grid;place-items:center;padding:14px;gap:6px}
.felt .pile-count{color:#DDEFE4;font-size:13px}
.felt .toast{position:absolute;top:10px}
.pile2{position:relative;width:120px;height:110px}
.pile2.empty{display:grid;place-items:center;color:#DDEFE4}
.pile2 .pc{position:absolute;top:12px;width:64px;height:92px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.pile2 .under2{left:10px;transform:rotate(-10deg)}
.pile2 .top2{left:44px;transform:rotate(7deg)}
.pile2 .fly.from-me{animation:flyme .45s cubic-bezier(.2,.8,.3,1)}
.pile2 .fly.from-op{animation:flyop .45s cubic-bezier(.2,.8,.3,1)}
@keyframes flyme{from{transform:translateY(200px) rotate(-20deg) scale(.9);opacity:.4}}
@keyframes flyop{from{transform:translateY(-200px) rotate(20deg) scale(.9);opacity:.4}}
.pile2 .sweep.to-me{animation:flyme .45s cubic-bezier(.2,.8,.3,1),sweepme .5s .55s ease-in forwards}
.pile2 .sweep.to-op{animation:flyop .45s cubic-bezier(.2,.8,.3,1),sweepop .5s .55s ease-in forwards}
.pile2 .under2.sweep.to-me{animation:sweepme .5s .55s ease-in forwards}
.pile2 .under2.sweep.to-op{animation:sweepop .5s .55s ease-in forwards}
@keyframes sweepme{to{transform:translateY(220px) scale(.6);opacity:0}}
@keyframes sweepop{to{transform:translateY(-220px) scale(.6);opacity:0}}
.pcb{border:0;background:none;padding:0;transition:transform .15s}
.pcb:not(:disabled):hover{transform:translateY(-8px)}
.pcb:disabled{opacity:.75;cursor:default}
.pcb .pc{width:64px;height:92px}
.pcb.deal{animation:deal .4s both}
@keyframes deal{from{transform:translateY(-140px) rotate(-12deg);opacity:0}}
.agrid.big{max-width:340px;margin:0 auto}
.agrid.foe.live{outline:3px solid var(--line);outline-offset:3px;border-radius:4px}
.ac.boom{animation:boom .6s}
.ac.splash{animation:splash .6s}
@keyframes boom{0%{transform:scale(.3)}50%{transform:scale(1.5);background:#FFD23F}100%{transform:none}}
@keyframes splash{0%{transform:scale(1.6);opacity:.3}100%{transform:none}}
.tv-board{display:grid;gap:6px;background:#7A4E2D;padding:8px;border-radius:12px}
.tv-row{display:grid;grid-template-columns:repeat(6,1fr) 26px repeat(6,1fr);gap:2px;height:168px;background:#E8D2A6;border-radius:6px;padding:2px}
.tv-bar{background:#5C3A20;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.tv-row.tv-bot .tv-bar{flex-direction:column-reverse}
.pt{position:relative;border:0;padding:0;background:transparent;display:flex;flex-direction:column;align-items:center;min-width:0}
.tv-row.tv-bot .pt{flex-direction:column-reverse}
.pt .tri{position:absolute;left:8%;right:8%;top:0;height:78%;clip-path:polygon(0 0,100% 0,50% 100%)}
.tv-row.tv-bot .pt .tri{top:auto;bottom:0;clip-path:polygon(50% 0,100% 100%,0 100%)}
.pt.e .tri{background:#B5462F}.pt.o .tri{background:#2E5E4E}
.pt small{position:absolute;bottom:-1px;font-size:9px;color:#6B5536;z-index:1}
.tv-row.tv-bot .pt small{bottom:auto;top:-1px}
.stk{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding-block:2px;width:100%}
.tv-row.tv-bot .stk{flex-direction:column-reverse}
.ck{width:min(24px,6.4vw);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font:700 10px/1 var(--f-body);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.ck.w{background:#FBF6EC;border:1.5px solid #B9A88A;color:#3A2E1E}
.ck.b{background:#2A2A2F;border:1.5px solid #000;color:#eee}
.ck.mini{display:inline-grid;width:12px;vertical-align:middle}
.ck.drop{animation:popin .35s cubic-bezier(.2,1.4,.4,1)}
.pt.can .tri{filter:brightness(1.25)}
.pt.can{cursor:pointer}
.pt.sel{outline:3px solid var(--line);outline-offset:-2px;border-radius:4px}
.pt.dest::after{content:"";position:absolute;z-index:2;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--line);box-shadow:0 0 0 4px color-mix(in srgb,var(--line) 35%,transparent)}
.barbtn{border:0;background:none;padding:2px;display:flex;flex-direction:column;align-items:center;gap:2px;border-radius:6px}
.barbtn.sel{outline:3px solid var(--line)}
.dice{display:flex;justify-content:center;align-items:center;gap:10px}
.die{font-size:46px;line-height:1;color:var(--ink)}
.die.roll{animation:roll .6s}
@keyframes roll{0%{transform:rotate(-200deg) scale(.4)}70%{transform:rotate(20deg) scale(1.1)}100%{transform:none}}
.dice small{color:var(--muted)}
.cboard{display:grid;grid-template-columns:repeat(8,1fr);border:4px solid #4A3A2A;border-radius:6px;overflow:hidden;max-width:100%}
.csq{aspect-ratio:1;border:0;padding:0;display:grid;place-items:center;position:relative}
.csq.lt{background:#EEDDBB}.csq.dk{background:#B58863}
.csq.lm{box-shadow:inset 0 0 0 100px rgba(255,214,90,.35)}
.csq.sel{box-shadow:inset 0 0 0 4px var(--line)}
.csq.chk{background:radial-gradient(#ff5a4a,#c0392b 70%)}
.csq.dest::after{content:"";width:28%;height:28%;border-radius:50%;background:rgba(20,30,40,.35)}
.csq.cap{box-shadow:inset 0 0 0 4px rgba(200,40,40,.7)}
.cp{font-size:clamp(26px,9vw,40px);line-height:1}
.cp.w{color:#FFFDF6;-webkit-text-stroke:1.4px #2A2016;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.cp.b{color:#1D1A16;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.cp.drop{animation:popin .3s}
.ok-table{display:grid;grid-template-columns:1fr 1.4fr 1fr;grid-template-areas:". top ." "left center right";gap:8px;background:radial-gradient(circle,#2C8A5B,#1A5E3D);border-radius:16px;padding:10px;color:#F2F7F3}
.ok-seat{display:grid;justify-items:center;gap:2px;font-size:13px;padding:6px;border-radius:10px;border:2px solid transparent}
.ok-seat.on{border-color:#FFD23F}
.ok-seat small{opacity:.8}
.ok-seat.top{grid-area:top}.ok-seat.left{grid-area:left}.ok-seat.right{grid-area:right}
.ok-center{grid-area:center;display:grid;justify-items:center;gap:6px}
.ok-deck{border:0;background:none;display:grid;justify-items:center;color:#F2F7F3;padding:0}
.ok-deck:not(:disabled) .tile{outline:3px solid #FFD23F}
.ok-gost{display:grid;justify-items:center}
.ok-gost small{font-size:11px;opacity:.85}
.ok-info{font-size:12px;text-align:center}
.ok-info b{background:#FFF8E8;border-radius:4px;padding:1px 5px}
.tile{position:relative;width:34px;height:46px;border-radius:5px;background:#FFF8E8;border:1px solid #D9CBA8;box-shadow:0 2px 0 #C9B88F;display:inline-grid;place-items:center;font:800 19px/1 var(--f-display)}
.tile.mini{width:24px;height:32px;font-size:14px;vertical-align:middle}
.tile.back{background:repeating-linear-gradient(45deg,#E9DDBF 0 5px,#F7EED9 5px 10px)}
.tile.empty{background:rgba(255,255,255,.15);border:1px dashed rgba(255,255,255,.5);box-shadow:none}
.tile i{position:absolute;top:1px;right:2px;font-size:9px;font-style:normal;color:#C99A1B}
.tile.okey{box-shadow:0 2px 0 #C9B88F,0 0 0 2px #E8B931}
.c-k{color:#CF2E2E}.c-m{color:#1F5FC4}.c-s{color:#1C1C1C}.c-y{color:#C98A00}.c-f{color:#2E8B57}
.tile.drop{animation:popin .35s}
.rack{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;background:#8B5E3C;padding:8px;border-radius:10px}
.tbtn{border:0;padding:0;background:none;border-radius:6px;transition:transform .12s}
.tbtn.sel{transform:translateY(-8px)}
.tbtn.sel .tile{outline:3px solid var(--line)}
.tbtn.new .tile{animation:deal .4s}
.ok-disc{display:inline-flex}

/* okey table */
.app.wide{max-width:1100px}
.g-okey{padding:12px;background:#0E1A1F;border-color:#1F3138;color:#E8F1EE}
.g-okey .result-box{background:#14252B;border-color:#2B4650;color:#E8F1EE}
.g-okey .result-box.win{border-color:#3DDC97}
.okx{display:grid;gap:10px;--felt1:#145846;--felt2:#0B3A2F;--glow:#3DDC97}
.okx-rotate{display:none}
@media (orientation: portrait) and (max-width: 700px){
  .okx:not(.portrait-ok) > :not(.okx-rotate){display:none}
  .okx:not(.portrait-ok) .okx-rotate{display:grid;justify-items:center;gap:10px;text-align:center;padding:40px 10px;color:#E8F1EE}
  .okx-rotate span{color:#A8C3BA;font-size:14px}
  .okx-phone{font-size:56px;animation:turnph 2s ease-in-out infinite}
  @keyframes turnph{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(90deg)}}
  .okx-rotate .btn.ghost{color:#E8F1EE;border-color:#2B4650}
}
.okx-table{position:relative;display:grid;grid-template-columns:1fr 1.3fr 1fr;grid-template-areas:". top ." "left mid right";gap:8px;align-items:center;
  background:radial-gradient(ellipse at 50% 40%,var(--felt1),var(--felt2));border-radius:18px;padding:12px;box-shadow:inset 0 0 40px rgba(0,0,0,.45),0 0 0 1px rgba(61,220,151,.15)}
.okx-p{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:14px;background:rgba(5,20,18,.45);border:1px solid rgba(255,255,255,.08);min-width:0;backdrop-filter:blur(4px)}
.okx-p.top{grid-area:top;justify-self:center}.okx-p.left{grid-area:left}.okx-p.right{grid-area:right;flex-direction:row-reverse;text-align:right}
.okx-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:800 16px/1 var(--f-display);background:linear-gradient(135deg,#2B6E5E,#164539);color:#E8F1EE;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.15)}
.okx-p.on .okx-av{box-shadow:0 0 0 2px var(--glow),0 0 16px var(--glow);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 3px var(--glow),0 0 26px var(--glow)}}
.okx-pn{display:grid;min-width:0}
.okx-pn b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.okx-pn small{font-size:11px;color:#9FC1B5}
.okx-pd{margin-left:auto}.okx-p.right .okx-pd{margin-left:0;margin-right:auto}
.okx-mid{grid-area:mid;display:flex;justify-content:center;align-items:center;gap:14px}
.okx-deck{position:relative;display:grid;place-items:center;cursor:default;touch-action:none}
.okx-deck .otile.b2{position:absolute;transform:translate(3px,-3px);z-index:-1}
.okx-deck small{position:absolute;bottom:-16px;font:700 11px/1 var(--f-mono);color:#CFE6DD}
.okx-deck.live{cursor:grab}
.okx-deck.live .otile:first-child{box-shadow:0 0 0 2px var(--glow),0 0 18px var(--glow);animation:pulse 1.4s infinite}
.okx-gost,.okx-okey{display:grid;justify-items:center;gap:3px}
.okx-gost small,.okx-okey small{font-size:10px;color:#9FC1B5;text-transform:uppercase;letter-spacing:.08em}
.okx-okey{font-size:10px;color:#9FC1B5;text-transform:uppercase;letter-spacing:.08em}
.okx-okey b{font:800 24px/1 var(--f-display);background:#FFF7E6;border-radius:6px;padding:4px 8px;letter-spacing:0}
.okx-toast{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);background:rgba(0,0,0,.65);color:#fff;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;animation:popin .35s}
.okx-toast.hot{background:var(--glow);color:#06281E}
.otile{position:relative;width:var(--tw,40px);height:calc(var(--tw,40px) * 1.38);border-radius:7px;display:inline-grid;place-items:center;
  background:linear-gradient(180deg,#FFFDF6,#F1E6CC);box-shadow:0 3px 0 #C8B386,0 4px 8px rgba(0,0,0,.35);font:800 calc(var(--tw,40px) * .55)/1 var(--f-display);user-select:none;touch-action:none}
.otile b{transform:translateY(-12%)}
.otile i{position:absolute;bottom:14%;width:24%;aspect-ratio:1;border-radius:50%;background:currentColor;opacity:.85}
.otile em{position:absolute;top:2px;right:3px;font-size:10px;font-style:normal;color:#D4A017}
.otile.joker{box-shadow:0 3px 0 #C8B386,0 0 0 2px #E8B931,0 0 14px rgba(232,185,49,.6)}
.otile.sm{--tw:28px}
.otile.back{background:repeating-linear-gradient(45deg,#E7DAB7 0 5px,#F6EDD5 5px 10px)}
.otile.empty{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}
.otile.drop{animation:popin .35s}
.oc-k{color:#D7263D}.oc-m{color:#1C64D1}.oc-s{color:#1B1B1F}.oc-y{color:#D99000}.oc-f{color:#178A5A}
.okx-bottom{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.okx-zone{display:grid;justify-items:center;gap:4px;padding:8px;border-radius:14px;border:1.5px dashed rgba(255,255,255,.18);min-width:58px;transition:.15s}
.okx-zone small{font-size:11px;color:#9FC1B5;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.okx-zone.live{border-color:var(--glow);background:rgba(61,220,151,.08)}
.okx-zone.pile.live{cursor:grab}
.okx-zone.hover,.okx-slot.hover{background:rgba(61,220,151,.25)!important;border-color:var(--glow)}
.okx-zone.finish.hot{animation:pulse 1.4s infinite}
.okx-fin{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:rgba(255,255,255,.08)}
.okx-zone.finish.hot .okx-fin{background:var(--glow);color:#06281E}
.okx-right{display:grid;gap:8px}
.okx-rack{--tw:min(44px,calc((100vw - 260px) / 15));display:grid;grid-template-columns:repeat(15,1fr);gap:3px;padding:8px 8px 12px;border-radius:12px;
  background:linear-gradient(180deg,#9A6A3F,#6E4626);box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 8px 18px rgba(0,0,0,.45);position:relative}
.okx-rack::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:4px;background:#5A3820;border-radius:2px;opacity:.6}
.okx-slot{aspect-ratio:1/1.38;border-radius:7px;display:grid;place-items:center;background:rgba(0,0,0,.12);position:relative;z-index:1}
.okx-slot .otile{width:100%;height:100%;cursor:grab}
.okx-slot.sel .otile{transform:translateY(-8px);box-shadow:0 3px 0 #C8B386,0 0 0 2px var(--glow),0 0 16px var(--glow)}
.okx-slot.fresh .otile{animation:deal .45s}
.okx-ghost{position:fixed;z-index:9999;pointer-events:none;transform:scale(1.15) rotate(-4deg);box-shadow:0 12px 26px rgba(0,0,0,.5)!important}
.okx-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.okx-status{font-weight:600;color:#CFE6DD;font-size:14px}
.okx-status.me{color:var(--glow)}
.okx-btns{display:flex;flex-wrap:wrap;gap:6px}
.btn.sm{padding:8px 12px;font-size:14px}
.g-okey .btn.ghost{color:#E8F1EE;border-color:#2B4650}
.g-okey .btn:not(.ghost){background:var(--glow);color:#06281E}
.okx-winner{display:grid;gap:6px;justify-items:center}
.okx-winner small{color:#9FC1B5}
.okx-winner div{display:flex;flex-wrap:wrap;gap:3px;justify-content:center}
@media (max-width: 700px){
  .okx-table{grid-template-columns:1fr 1fr;grid-template-areas:"top top" "left right" "mid mid"}
  .okx-bottom{grid-template-columns:1fr;}
  .okx-rack{--tw:calc((100vw - 70px) / 15);grid-column:1/-1;order:-1}
  .okx-right{grid-template-columns:1fr 1fr}
  .okx-bottom{grid-template-columns:auto 1fr}
  .okx-zone.pile{order:1}.okx-right{order:2}
}
@media (orientation: landscape) and (max-height: 560px){
  .app.wide .screen{gap:4px;padding-top:0}
  .app.wide .back{padding:4px 0;font-size:13px}
  .g-okey{padding:8px;border-radius:14px}
  .okx{gap:6px}
  .okx-table{grid-template-columns:1fr auto auto 1fr;grid-template-areas:"left top mid right";padding:6px 8px;gap:8px}
  .okx-p{padding:4px 6px;gap:6px}
  .okx-av{width:28px;height:28px;font-size:13px}
  .okx-p .otile.sm{--tw:22px}
  .okx-mid{gap:10px}
  .okx-mid .otile{--tw:30px}
  .okx-okey b{font-size:18px;padding:3px 6px}
  .okx-toast{bottom:auto;top:-4px}
  .okx-rack{--tw:min(40px,calc((100vw - 230px) / 15));padding:6px 6px 9px}
  .okx-zone{padding:4px 6px;min-width:50px}
  .okx-zone .otile{--tw:30px}
  .okx-fin{width:30px;height:30px;font-size:16px}
  .okx-right{gap:4px}
  .btn.sm{padding:6px 10px;font-size:13px}
}
/* 101 okey */
.okx-toast.warn{background:#E5484D;color:#fff}
.y-badge{display:inline-block;font-size:10px;font-weight:700;background:var(--glow,#3DDC97);color:#06281E;border-radius:999px;padding:1px 6px;vertical-align:middle}
.y-melds{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;min-height:48px;max-height:120px;overflow:auto;padding:6px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.y-empty{color:#7FA597;font-size:12px;align-self:center;padding:8px}
.y-meld{display:grid;gap:2px;padding:4px 6px 6px;border-radius:10px;background:rgba(5,20,18,.55);border:1.5px solid rgba(255,255,255,.08);transition:.15s}
.y-meld small{font-size:10px;color:#9FC1B5}
.y-meld div{display:flex;gap:2px}
.y-meld.bump{animation:popin .4s}
.y-meld.hover{border-color:var(--glow,#3DDC97);background:rgba(61,220,151,.18)}
.otile.xs{--tw:22px;font-size:12px}
.otile.xs i{display:none}
.y-sum{font-size:12px;color:#9FC1B5;background:rgba(255,255,255,.06);border-radius:999px;padding:4px 10px}
.y-sum b{color:#E8F1EE}
.y-sum.good{color:var(--glow,#3DDC97)}
.y-sum.good b{color:var(--glow,#3DDC97)}
.y-board{display:grid;gap:8px;justify-items:center;text-align:center;padding:10px;border-radius:14px;background:rgba(5,20,18,.7);border:1px solid rgba(61,220,151,.3);animation:popin .35s}
.y-board table{border-collapse:collapse;font-size:13px;min-width:260px}
.y-board th,.y-board td{padding:5px 10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.y-board th{color:#9FC1B5;font-weight:600;font-size:11px}
.y-board tr.me td{color:var(--glow,#3DDC97)}
.y-board small{color:#9FC1B5;font-size:10px}
.g-y101{padding:12px;background:#0E1A1F;border-color:#1F3138;color:#E8F1EE}
.g-y101 .result-box{background:#14252B;border-color:#2B4650;color:#E8F1EE}
.g-y101 .btn.ghost{color:#E8F1EE;border-color:#2B4650}
.g-y101 .btn:not(.ghost){background:#3DDC97;color:#06281E}
@media (orientation: landscape) and (max-height: 560px){
  .g-y101{padding:8px;border-radius:14px}
  .y-melds{max-height:84px;min-height:36px;padding:4px}
  .okx.y1 .okx-rack{--tw:min(36px,calc((100vw - 200px) / 15))}
  .okx.y1 .okx-bar{gap:4px}
}

/* batak, king */
.ct{display:grid;gap:8px}
.ct-top{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.koz{background:var(--bg);border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600}
.koz.red{color:#C9302C}
.ct-table{position:relative;height:300px;border-radius:18px;background:radial-gradient(ellipse at 50% 45%,#2C8A5B,#165C3D);box-shadow:inset 0 0 40px rgba(0,0,0,.35)}
.ct-seat{position:absolute;display:flex;align-items:center;gap:6px;background:rgba(5,20,18,.55);color:#E8F1EE;padding:4px 8px;border-radius:12px;max-width:44%}
.ct-seat .okx-pn small{color:#BFD8CE}
.ct-seat.on .okx-av{box-shadow:0 0 0 2px #3DDC97,0 0 14px #3DDC97}
.ct-seat.me{bottom:6px;left:50%;transform:translateX(-50%)}
.ct-seat.top{top:6px;left:50%;transform:translateX(-50%)}
.ct-seat.left{left:6px;top:50%;transform:translateY(-50%);flex-direction:column}
.ct-seat.right{right:6px;top:50%;transform:translateY(-50%);flex-direction:column}
.ct-seat.left .okx-pn,.ct-seat.right .okx-pn{text-align:center}
.ct-seat.left,.ct-seat.right{max-width:86px;padding:4px}
.ct-seat.left .okx-pn b,.ct-seat.right .okx-pn b{font-size:11px}
.ct-seat.left .okx-pn small,.ct-seat.right .okx-pn small{font-size:9px}
.ct-table{height:320px}
.ct-center{position:absolute;inset:0;display:grid;place-items:center}
.ct-center .okx-toast{bottom:auto;top:56px}
.ct-card{position:absolute;left:50%;top:50%}
.ct-card .pc{width:52px;height:74px;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.ct-card.me{transform:translate(-50%,-10%)}
.ct-card.top{transform:translate(-50%,-95%)}
.ct-card.left{transform:translate(-120%,-55%) rotate(-8deg)}
.ct-card.right{transform:translate(20%,-55%) rotate(8deg)}
.ct-card.fly-me{animation:ctme .35s ease-out}.ct-card.fly-top{animation:cttop .35s ease-out}.ct-card.fly-left{animation:ctleft .35s ease-out}.ct-card.fly-right{animation:ctright .35s ease-out}
@keyframes ctme{from{translate:0 140px;opacity:.3}}@keyframes cttop{from{translate:0 -140px;opacity:.3}}@keyframes ctleft{from{translate:-140px 0;opacity:.3}}@keyframes ctright{from{translate:140px 0;opacity:.3}}
.ct-card.gone-me{animation:gme .6s .4s ease-in forwards}.ct-card.gone-top{animation:gtop .6s .4s ease-in forwards}.ct-card.gone-left{animation:gleft .6s .4s ease-in forwards}.ct-card.gone-right{animation:gright .6s .4s ease-in forwards}
@keyframes gme{to{translate:0 160px;opacity:0}}@keyframes gtop{to{translate:0 -160px;opacity:0}}@keyframes gleft{to{translate:-160px 0;opacity:0}}@keyframes gright{to{translate:160px 0;opacity:0}}
.ct-panel{display:grid;gap:8px;padding:10px;border-radius:14px;background:var(--bg);text-align:center}
.bid-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.btn.suit{font-size:20px;min-width:48px;background:#fff;color:#1b1f27;border:1.5px solid var(--rule)}
.btn.suit.red{color:#C9302C}
.kg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px}
.kg-grid .btn{display:grid;gap:2px;text-align:center}
.kg-grid small{font-size:11px;color:var(--muted);font-weight:400}
.ct-status{margin:0;text-align:center;font-weight:600;color:var(--muted)}
.ct-status.me{color:var(--line)}
.ct-hand{display:flex;flex-wrap:wrap;justify-content:center;gap:0;padding-left:16px}
.ct-hand .pcb{margin-left:-16px}
.ct-hand .pcb .pc{width:54px;height:78px}
.ct-hand .pcb:disabled{opacity:.55}
.ct .y-board{background:var(--bg);border-color:var(--rule);color:var(--ink)}
.ct .y-board th,.ct .y-board td{border-color:var(--rule)}
.ct .y-board small,.ct .y-board th{color:var(--muted)}
.ct .y-board tr.me td{color:var(--line)}
/* bulmaca */
.bm-clue{display:grid;gap:2px;background:var(--soft);border-radius:12px;padding:10px 12px}
.bm-clue span{font-weight:600}
.bm-clue small{color:var(--muted)}
.bm-grid{display:grid;gap:2px;max-width:100%}
.bm-x{aspect-ratio:1}
.bm-c{position:relative;aspect-ratio:1;border:1.5px solid var(--ink);border-radius:4px;background:var(--surface);font:800 clamp(13px,4.2vw,20px)/1 var(--f-display);padding:0;display:grid;place-items:center;color:var(--ink)}
.bm-c i{position:absolute;top:1px;left:2px;font:600 9px/1 var(--f-body);font-style:normal;color:var(--muted)}
.bm-c.word{background:var(--soft)}
.bm-c.sel{background:color-mix(in srgb,var(--line) 35%,var(--surface))}
.bm-c.shown{color:var(--line)}
.bm-c.ok{background:color-mix(in srgb,var(--good) 20%,var(--surface));border-color:var(--good)}
.bm-list{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14px}
.bm-list small{color:var(--muted)}
/* çiz bil */
.cz-canvas{width:100%;max-width:420px;aspect-ratio:1;border-radius:14px;border:2px solid var(--rule);touch-action:none;justify-self:center;background:#FFFDF7;display:block;margin:0 auto}
.cz-canvas.small{max-width:240px}
.cz-tools{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.cz-cols{display:flex;flex-wrap:nowrap;gap:4px;justify-content:center;width:100%}
.cz-col{flex:1 1 0;max-width:30px;aspect-ratio:1;height:auto;min-width:0;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1.5px var(--rule);padding:0}
.cz-col.on{box-shadow:0 0 0 3px var(--line)}
.cz-word{text-align:center;font:800 28px/1.1 var(--f-display);letter-spacing:.06em;color:var(--line)}
.cz-word.hidden{letter-spacing:.12em;color:var(--ink);font-size:22px;overflow-wrap:anywhere}
.dc-stage{display:grid;place-items:center;width:min(78vw,320px);aspect-ratio:1;margin:8px auto 14px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:radial-gradient(circle,color-mix(in srgb,var(--line) 14%,var(--surface)) 0 62%,color-mix(in srgb,var(--line) 30%,var(--surface)) 63% 64%,transparent 65%)}
.dc-bottle{height:82%;transition:transform 3.5s cubic-bezier(.12,.72,.18,1);filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))}
.dc-q{margin:4px 0 14px}
.dc-q .q{font-size:20px}
@media (prefers-reduced-motion:reduce){.dc-bottle{transition-duration:.6s}}
.mem-lv{justify-content:center;margin:2px 0 14px}
.mem-grid{display:grid;gap:10px;perspective:900px}
.mem-card{aspect-ratio:3/4;border:0;padding:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mem-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .38s cubic-bezier(.3,.8,.3,1.2)}
.mem-card.open .mem-in,.mem-card.done .mem-in{transform:rotateY(180deg)}
.mem-back,.mem-front{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center}
.mem-back{background:linear-gradient(145deg,color-mix(in srgb,var(--line) 82%,#fff),var(--line));box-shadow:0 3px 0 color-mix(in srgb,var(--line) 70%,#000),0 6px 14px rgba(0,0,0,.12)}
.mem-back i{width:46%;aspect-ratio:1;border-radius:50%;border:3px solid rgba(255,255,255,.55);background:radial-gradient(circle,rgba(255,255,255,.35) 0 22%,transparent 23%)}
.mem-front{transform:rotateY(180deg);background:var(--surface);border:2px solid var(--rule);font-size:clamp(28px,9vw,44px);box-shadow:0 6px 14px rgba(0,0,0,.08)}
.mem-card.done .mem-front{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--surface));animation:memok .4s ease}
.mem-card.no .mem-front{border-color:var(--bad);animation:memno .3s ease}
@keyframes memok{50%{transform:rotateY(180deg) scale(1.08)}}
@keyframes memno{25%{transform:rotateY(180deg) translateX(-4px)}75%{transform:rotateY(180deg) translateX(4px)}}
.mem-foot{display:flex;justify-content:space-between;margin-top:14px;color:var(--muted);font-size:14px;font-weight:600}
@media (prefers-reduced-motion:reduce){.mem-in{transition:none}.mem-card .mem-front{animation:none!important}}
.bl-res{display:grid;gap:8px;margin:6px 0 12px}
.bl-row{display:grid;gap:3px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--rule);background:var(--surface)}
.bl-row b{font-size:17px}.bl-row small{color:var(--muted);font-size:12.5px;font-weight:600}
.bl-row.truth{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--surface))}.bl-row.truth small{color:var(--good)}
.bl-votes{font-size:13px;color:var(--ink)}
.kd-teams{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:10px 0}
.kd-team{border-radius:14px;padding:10px 12px;border:2px solid}.kd-team.r{border-color:#D7263D}.kd-team.b{border-color:#1C64D1}
.kd-team h3{margin:0 0 6px;font-size:15px}.kd-team.r h3{color:#D7263D}.kd-team.b h3{color:#1C64D1}
.kd-team ul{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:14px}.kd-team small{color:var(--muted)}
.kd-me{display:flex;gap:8px;justify-content:center;margin:4px 0 12px;flex-wrap:wrap}
.kd-score{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px}
.kd-score span{flex:1;min-width:0;text-align:center;padding:8px;border-radius:12px;font-weight:700;opacity:.55}
.kd-score .r{background:#FBE3E6;color:#B01E31}.kd-score .b{background:#E1ECFB;color:#1550A8}.kd-score .on{opacity:1;outline:2px solid currentColor}
.kd-score b{font-size:20px;margin-left:4px}
.kd-msg{text-align:center;font-size:14.5px;margin:6px 0 10px;min-height:2.6em}
.t-r{color:#D7263D}.t-b{color:#1C64D1}
.kd-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.kd-card{min-width:0;overflow:hidden;aspect-ratio:1.25;border-radius:9px;border:1.5px solid var(--rule);background:#F4EEDF;color:#2A2418;font:700 clamp(9px,2.7vw,13px)/1.05 var(--f-body);padding:2px;display:grid;place-items:center;text-align:center;word-break:break-word;hyphens:auto;cursor:pointer}
.kd-card:disabled{cursor:default}
.kd-card.k-r{box-shadow:inset 0 -6px 0 #D7263D}.kd-card.k-b{box-shadow:inset 0 -6px 0 #1C64D1}.kd-card.k-n{box-shadow:inset 0 -6px 0 #C9B99A}.kd-card.k-x{box-shadow:inset 0 -6px 0 #111}
.kd-card.open.k-r{background:#D7263D;color:#fff}.kd-card.open.k-b{background:#1C64D1;color:#fff}.kd-card.open.k-n{background:#D9CDB4;color:#6B5E46}.kd-card.open.k-x{background:#111;color:#fff}
.kd-card.open span{opacity:.85;text-decoration:line-through;text-decoration-thickness:1px}
.kd-card.arm{outline:3px solid var(--line);transform:scale(1.05)}.kd-card.arm::after{content:"Emin misin? Tekrar dokun";position:absolute}
.kd-card{position:relative}.kd-card.arm::after{left:50%;bottom:-18px;transform:translateX(-50%);white-space:nowrap;font:600 10px var(--f-body);color:var(--line);background:var(--surface);padding:1px 5px;border-radius:5px;z-index:2}
.kd-card.last{animation:kdlast .5s ease}@keyframes kdlast{50%{transform:scale(1.12)}}
.kd-wrap .btn{margin-top:12px}
.fq-dial{width:100%;max-width:420px;display:block;margin:10px auto 0;touch-action:none}
.fq-ends{display:flex;justify-content:space-between;width:100%;max-width:420px;gap:10px;margin:2px auto 12px;font-weight:700;font-size:15px}
.fq-teams{display:flex;gap:8px;justify-content:center;margin-bottom:10px}
.fq-teams span{padding:6px 12px;border-radius:999px;background:var(--soft);font-weight:600;font-size:14px;opacity:.6}.fq-teams span.on{opacity:1;outline:2px solid var(--line)}
#fq-box{touch-action:none;cursor:grab}
.bm-lives{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:10px}
.bm-lives span{font-size:13px;padding:4px 10px;border-radius:999px;background:var(--soft)}.bm-lives span.out{opacity:.4;text-decoration:line-through}.bm-lives b{color:#D7263D;letter-spacing:1px}
.bm-bomb{font-size:96px;line-height:1;margin:8px 0}.bm-bomb.pulse{animation:bmp .25s ease}
@keyframes bmp{50%{transform:scale(1.12) rotate(-4deg)}}
.bm-hece{font:800 clamp(64px,22vw,120px)/1 var(--f-display);letter-spacing:.04em;color:var(--line);margin:6px 0 2px}
.bm-mode{font-weight:700;margin:0 0 16px;color:var(--muted)}
.bm-pass{font-size:20px;padding:20px}
.bm-bang{font-size:120px;line-height:1;animation:bmb .5s ease}@keyframes bmb{from{transform:scale(.2)}70%{transform:scale(1.25)}}
.stage{border:0;color:#fff;background:var(--sbg);--sacc:#FFD166;--sink:#1B1534;overflow:hidden}
.stage h2,.stage h3,.stage .q,.stage .big{color:#fff}
.stage .muted,.stage .st-help,.stage .st-note,.stage .count,.stage .eyebrow{color:rgba(255,255,255,.74)}
.stage .btn{display:block;width:100%;margin-top:10px;background:var(--sacc);color:var(--sink);font-weight:800}
.stage .btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.32)}
.stage .btn:disabled{opacity:.55}
.stage .field{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}.stage .field::placeholder{color:rgba(255,255,255,.5)}
.stage .opt{background:#fff;color:#1B1534;border-color:transparent}.stage .opt.pick{background:var(--sacc);color:var(--sink)}.stage .opt:disabled{opacity:.9}
.stage .board li{background:rgba(255,255,255,.1);color:#fff}.stage .board small{color:rgba(255,255,255,.6)}
.stage .stamp{color:#7CF0B0}.stage .note{background:rgba(255,255,255,.1);color:#fff}
.stage .join-row .btn{width:auto;margin-top:0}
.st-title{font:800 clamp(26px,7.5vw,34px)/1.08 var(--f-display);text-align:center;margin:10px 0 6px;letter-spacing:-.02em}
.st-help{text-align:center;font-size:15px;line-height:1.5;margin:6px auto 14px;max-width:34ch}
.st-note{text-align:center;font-size:13.5px;margin:10px 0 0}
.st-steps{margin:8px 0 14px;padding-left:22px;display:grid;gap:8px;font-size:15px;line-height:1.45;color:rgba(255,255,255,.88)}
.st-steps li::marker{color:var(--sacc);font-weight:800}
.st-hand{text-align:center;padding:22px 0 8px;color:var(--sacc)}.st-hand h2{margin:10px 0 6px;font-size:24px}.st-hand p{margin:0;color:rgba(255,255,255,.74)}
.st-fq{--sbg:radial-gradient(120% 70% at 50% 0%,#3D318F 0%,#1E1A4D 62%,#151236 100%);--sacc:#FFD166}
.fq-score{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.fq-tm{display:flex;justify-content:space-between;align-items:center;border-radius:16px;padding:10px 14px;background:rgba(255,255,255,.07);opacity:.55;transition:opacity .2s}
.fq-tm.on{opacity:1;box-shadow:inset 0 0 0 2px var(--sacc)}
.fq-tm span{font-weight:700;font-size:14px}.fq-tm.t0 span{color:#9DB0FF}.fq-tm.t1 span{color:#FFA98F}
.fq-tm b{font:800 28px/1 var(--f-display)}.fq-score.big .fq-tm{padding:18px}.fq-score.big b{font-size:44px}
.st-note+.fq-dialbox,.fq-dialbox{margin:4px auto 6px;max-width:440px}.fq-dialbox.small{max-width:260px}
.fq-dial{display:block;width:100%;touch-action:none}.fq-pt{fill:#fff;font:800 12px var(--f-body)}
.fq-ends{display:flex;justify-content:space-between;gap:10px;margin-top:2px}
.fq-ends span{padding:7px 13px;border-radius:999px;font-weight:700;font-size:14px;color:#fff;max-width:48%}.fq-ends .l{background:#4C6FFF}.fq-ends .r{background:#FF7A59;text-align:right}
.fq-result{display:flex;align-items:baseline;justify-content:center;gap:12px;margin:6px 0 2px}
.fq-result b{font:800 64px/1 var(--f-display);color:var(--sacc)}.fq-result.p0 b{color:rgba(255,255,255,.4)}.fq-result span{font-weight:700;font-size:18px}
#fq-box{cursor:grab}
.st-bm{--sbg:radial-gradient(100% 65% at 50% 28%,#4A2A18 0%,#22150F 62%,#140D0A 100%);--sacc:#FFC23D;--sink:#2A1A10}
.st-bm.lit{box-shadow:inset 0 0 90px rgba(255,110,30,.22)}
.st-bm.boom{--sbg:radial-gradient(circle at 50% 22%,#FFE066 0%,#FF8A1F 30%,#C21F2B 72%,#5E0D16 100%);--sacc:#fff;--sink:#8E1220}
.bm-hero,.bm-live{display:flex;justify-content:center;margin:6px 0 2px}.bm-hero .bm-svg{width:130px}.bm-live .bm-svg{width:150px}
.bm-live.pulse .bm-svg{animation:bmp .22s ease}@keyframes bmp{50%{transform:scale(1.1) rotate(-5deg)}}
.bm-spark{animation:bmspark .18s steps(2) infinite}@keyframes bmspark{50%{opacity:.45}}
.bm-tile{position:relative;margin:12px auto 18px;max-width:280px;background:#FFF3D6;color:#2A1A10;border-radius:22px;padding:12px 16px 14px;text-align:center;transform:rotate(-2deg);box-shadow:0 8px 0 #C99A55,0 20px 34px rgba(0,0,0,.45)}
.bm-tile b{display:block;font:900 clamp(64px,20vw,96px)/1 var(--f-display);letter-spacing:.03em}.bm-tile span{display:block;font-weight:700;font-size:15px;margin-top:2px;color:#7A5530}
.bm-pass{font-size:21px;padding:20px}
.bm-players{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:4px}
.bm-p{display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.09);font-size:14px;transition:background .2s}
.bm-p.hold{background:var(--sacc);color:var(--sink)}.bm-p.out{opacity:.35}.bm-p.out b{text-decoration:line-through}
.bm-p i{display:flex;gap:2px}.bm-p svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;opacity:.45}
.bm-p svg.on{fill:#FF3B5C;stroke:#FF3B5C;opacity:1}.bm-p.hold svg.on{fill:#C8102E;stroke:#C8102E}
.bm-names{display:grid;gap:8px;margin:4px 0 2px}
.bm-bang{text-align:center;font:900 clamp(76px,24vw,128px)/1 var(--f-display);color:#FFF8DC;text-shadow:0 7px 0 #8E1220,0 14px 30px rgba(0,0,0,.35);margin:18px 0 4px;animation:bmb .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes bmb{from{transform:scale(.2) rotate(-10deg);opacity:0}}
.st-bl{--sbg:linear-gradient(165deg,#6A1F9A 0%,#3B1166 55%,#250A44 100%);--sacc:#FF5FA2;--sink:#fff}
.st-bl .q{font-size:22px;line-height:1.3}
.st-bl .bl-row{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15)}.st-bl .bl-row small{color:rgba(255,255,255,.65)}.st-bl .bl-votes{color:#fff}
.st-bl .bl-row.truth{background:#2BD38A;border-color:#2BD38A;color:#08321E}.st-bl .bl-row.truth small,.st-bl .bl-row.truth .bl-votes{color:#08321E}
.st-kd{--sbg:linear-gradient(180deg,#16233F 0%,#0F1830 100%);--sacc:#FCA311;--sink:#1B1534}
.st-kd .kd-msg{color:#fff}.st-kd .kd-score .r{background:#3A1A24;color:#FF6B7F}.st-kd .kd-score .b{background:#16284C;color:#7FA7FF}
.st-kd .muted b.t-r{color:#FF6B7F}.st-kd .muted b.t-b{color:#7FA7FF}.st-kd .kd-msg .t-r{color:#FF6B7F}.st-kd .kd-msg .t-b{color:#7FA7FF}
@media (prefers-reduced-motion:reduce){.bm-spark,.bm-live.pulse .bm-svg,.bm-bang{animation:none}}
.cz-hint{text-align:center;font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cz-hint b{display:inline-block;margin-left:4px;padding:3px 10px;border-radius:999px;background:var(--line);color:var(--line-ink);letter-spacing:.02em;text-transform:none}
.cz-guesses{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cz-guesses span{background:var(--bg);border-radius:999px;padding:3px 10px;font-size:13px}
/* kelime oyunu */
.ko{display:grid;gap:8px}
.ko-scores{display:flex;flex-wrap:wrap;gap:6px}
.ko-scores span{background:var(--bg);border-radius:10px;padding:5px 10px;font-size:13px;border:2px solid transparent}
.ko-scores span.on{border-color:var(--line)}
.ko-scores b{margin-left:6px;font:800 16px/1 var(--f-display)}
.ko-board{display:grid;grid-template-columns:repeat(15,1fr);gap:1px;background:#C7B48C;padding:2px;border-radius:6px;max-width:100%}
.ko-c{position:relative;aspect-ratio:1;border:0;padding:0;background:#F3EAD3;display:grid;place-items:center;font:700 clamp(8px,2.2vw,12px)/1 var(--f-body);color:#7A6A4A}
.ko-c.p-K3{background:#E26D5C;color:#fff}.ko-c.p-K2{background:#F3B7A5;color:#7A2E21}.ko-c.p-H3{background:#3E86C9;color:#fff}.ko-c.p-H2{background:#A9D0EE;color:#1B4D75}
.ko-c.star{background:#F3B7A5;color:#7A2E21;font-size:14px}
.ko-c.fix,.ko-c.pend{background:linear-gradient(#FFF6DA,#F2DEAA);color:#2B2216;box-shadow:inset 0 -2px 0 #C9AE6E}
.ko-c.pend{outline:2px solid var(--line);outline-offset:-2px}
.ko-c.new{animation:popin .4s}
.ko-c b{font:800 clamp(11px,3.4vw,17px)/1 var(--f-display)}
.ko-c i,.ko-t i{position:absolute;right:2px;bottom:1px;font:600 clamp(6px,1.6vw,9px)/1 var(--f-body);font-style:normal}
.ko-rack{display:flex;justify-content:center;gap:5px;padding:8px;border-radius:10px;background:#8B5E3C}
.ko-t{position:relative;width:42px;height:42px;border:0;border-radius:6px;background:linear-gradient(#FFF6DA,#F2DEAA);box-shadow:0 3px 0 #B99A55;display:grid;place-items:center;color:#2B2216}
.ko-t b{font:800 22px/1 var(--f-display)}
.ko-t.sel{transform:translateY(-6px);outline:3px solid var(--line)}
.ko-t.used{opacity:.25}
.ko-log{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px}
.ko-log .unk{text-decoration:underline wavy #C9302C}
/* emlak */
.g-emlak{padding:12px;background:#F4EFE3;border-color:#E2D8C2}
.em2{display:grid;gap:12px}
@media (min-width: 760px){ .em2{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start} }
.em2-boardwrap{width:100%;max-width:min(100%,82vh);margin:0 auto}
.em2-board{position:relative;display:grid;grid-template-columns:1.25fr repeat(5,1fr) 1.25fr;grid-template-rows:1.25fr repeat(5,1fr) 1.25fr;gap:3px;aspect-ratio:1;
  background:#1F5A47;padding:5px;border-radius:16px;box-shadow:0 12px 30px rgba(31,90,71,.35),inset 0 0 0 2px rgba(255,255,255,.15)}
.em2-sq{position:relative;background:#FFFCF5;border-radius:6px;display:grid;align-content:center;justify-items:center;text-align:center;overflow:hidden;min-width:0;padding:2px;color:#2A2A2A}
.em2-sq b{font:700 clamp(7.5px,2.15vw,12px)/1.05 var(--f-body);overflow-wrap:anywhere;padding-inline:1px}
.em2-sq small{font:600 clamp(7px,1.9vw,10px)/1 var(--f-mono);color:#7A6F5D;margin-top:2px}
.em2-sq.prop{padding-top:clamp(9px,2.6vw,14px)}
.em2-band{position:absolute;top:0;left:0;right:0;height:clamp(8px,2.4vw,13px);display:flex;justify-content:center;align-items:center}
.em2-houses{display:flex;gap:1px}
.em2-houses i{width:clamp(5px,1.5vw,8px);height:clamp(5px,1.5vw,8px);background:#1E8A4C;clip-path:polygon(50% 0,100% 45%,100% 100%,0 100%,0 45%);border:0}
.em2-sq.owned{box-shadow:inset 0 0 0 2.5px var(--own)}
.em2-flag{position:absolute;right:0;bottom:0;width:0;height:0;border-left:clamp(8px,2.2vw,12px) solid transparent;border-bottom:clamp(8px,2.2vw,12px) solid var(--own)}
.em2-sq.sp{background:#FFF7E3}
.em2-sq.sans{background:#F0E9FF}.em2-sq.tax{background:#FFE9E6}.em2-sq.start{background:#E4F7EA}.em2-sq.gojail{background:#FFE9E6}
.em2-ic{font-size:clamp(14px,4.4vw,24px);line-height:1;font-weight:800;color:#5B4B8A}
.em2-sq.start .em2-ic{color:#1E8A4C}.em2-sq.tax .em2-ic,.em2-sq.gojail .em2-ic{color:#C9302C}
.em2-mid{grid-row:2/7;grid-column:2/7;display:grid;align-content:center;justify-items:center;gap:6px;padding:6px;text-align:center;min-width:0;color:#F4EFE3}
.em2-logo{font:800 clamp(18px,6vw,34px)/1 var(--f-display);letter-spacing:.18em;color:#F7D774;text-shadow:0 2px 0 rgba(0,0,0,.25);display:grid;justify-items:center;gap:2px}
.em2-logo small{font:600 10px/1 var(--f-body);letter-spacing:.12em;color:#BFE0D2}
.em2-dice{display:flex;gap:8px}
.die3{width:clamp(30px,9vw,44px);aspect-ratio:1;background:#fff;border-radius:22%;display:grid;grid-template-columns:repeat(3,1fr);padding:14%;gap:6%;box-shadow:0 4px 0 #C9C3B5,0 6px 12px rgba(0,0,0,.3)}
.die3 i{border-radius:50%}.die3 i.on{background:#222}
.die3.spin{animation:dspin .7s cubic-bezier(.2,.9,.3,1.2)}
@keyframes dspin{0%{transform:rotate(-540deg) scale(.3)}100%{transform:none}}
.em2-card{background:#F0E9FF;color:#3B2E6E;border-radius:10px;padding:6px 10px;font-size:clamp(10px,2.8vw,13px);font-weight:600;display:grid;gap:2px;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.em2-card small{font-size:9px;letter-spacing:.12em;color:#7A68B8}
.em2-card.flip{animation:flip .6s}
@keyframes flip{0%{transform:rotateY(90deg)}100%{transform:none}}
.em2-msg{font-size:clamp(9px,2.6vw,12px);color:#DCEFE6;display:grid;gap:2px;max-width:100%}
.em2-msg b{font-weight:700}
.em2-action{display:grid;gap:6px;justify-items:center;width:100%}
.em2-action .btn{padding:8px 14px;font-size:clamp(12px,3.4vw,15px)}
.g-emlak .btn:not(.ghost){background:#F7D774;color:#3A2E05}
.g-emlak .em2-action .btn.ghost{color:#F4EFE3;border-color:rgba(255,255,255,.4)}
.em2-roll{animation:pulse2 1.4s infinite}
@keyframes pulse2{50%{box-shadow:0 0 0 6px rgba(247,215,116,.35)}}
.em2-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.em2-wait{margin:0;font-size:clamp(10px,2.8vw,13px);color:#BFE0D2}
.deed{background:#fff;color:#222;border-radius:8px;overflow:hidden;width:min(100%,180px);box-shadow:0 6px 16px rgba(0,0,0,.35);animation:popin .35s}
.deed-h{color:#fff;padding:5px;display:grid;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.deed-h small{font-size:8px;letter-spacing:.14em}
.deed-h b{font:800 clamp(12px,3.6vw,16px)/1.1 var(--f-display)}
.deed table{width:100%;border-collapse:collapse;font-size:clamp(9px,2.5vw,11px)}
.deed td{padding:1px 8px;text-align:left}.deed td+td{text-align:right;font-family:var(--f-mono)}
.deed-f{display:block;font-size:9px;color:#777;padding:2px 0 5px}
.em2-build{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center}
.em2-build small{color:#BFE0D2;font-size:10px}
.chipb{border:0;border-left:5px solid var(--g);background:#fff;border-radius:6px;padding:4px 6px;font-size:clamp(9px,2.5vw,11px);font-weight:600}
.em2-tokens{position:absolute;inset:5px;pointer-events:none}
.em2-tok{position:absolute;width:clamp(10px,3.2vw,16px);aspect-ratio:1;border-radius:50%;background:var(--pc);border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.45);transform:translate(-50%,-50%);transition:left .13s,top .13s}
.em2-tok.hop{animation:hop .14s}
@keyframes hop{50%{transform:translate(-50%,-95%)}}
.em2-side{display:grid;gap:8px;align-content:start}
.em2-players{display:grid;gap:6px}
.em2-pl{display:flex;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:8px 10px;border:2px solid transparent;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.em2-pl.on{border-color:var(--pc);box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 25%,transparent)}
.em2-pl.out{opacity:.45}
.em2-av{width:32px;height:32px;border-radius:50%;background:var(--pc);color:#fff;display:grid;place-items:center;font:800 15px/1 var(--f-display);flex:none}
.em2-pi{display:grid;gap:3px;min-width:0}
.em2-pi b{font-size:13px;color:#222}
.em2-props{display:flex;flex-wrap:wrap;gap:2px}
.em2-props i{width:14px;height:14px;border-radius:3px;font:700 9px/14px var(--f-mono);color:#fff;text-align:center;font-style:normal}
.em2-props small{font-size:11px;color:#999}
.em2-money{position:relative;margin-left:auto;font:800 17px/1 var(--f-display);color:#1F5A47;display:grid;justify-items:end;gap:2px}
.em2-money small{font:600 10px/1 var(--f-body);color:#C9302C}
.em2-delta{position:absolute;right:0;top:-6px;font:800 13px/1 var(--f-mono);animation:rise2 1.6s forwards}
.em2-delta.up{color:#1E8A4C}.em2-delta.down{color:#C9302C}
@keyframes rise2{0%{opacity:0;transform:translateY(6px)}15%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
.em2-rules{margin:0;font-size:12px;color:#7A6F5D}
.em2-inboard{display:grid;gap:6px;justify-items:center;width:100%}
.em2-below{display:none}
@media (max-width: 759px){
  .em2-inboard{display:none}
  .em2-below{display:grid;gap:8px;justify-items:center;background:#1F5A47;border-radius:14px;padding:10px;color:#F4EFE3}
  .em2-below:has(.em2-action:empty){display:none}
  .em2-below .deed{width:min(100%,260px)}
}
.g-emlak .result-box{background:#fff}
.em2-houses i.otel{width:clamp(9px,2.6vw,14px);background:#D7263D;clip-path:none;border-radius:2px}
.em2-sq.prop{cursor:pointer;transition:transform .15s}
.em2-sq.prop:hover{transform:scale(1.04);z-index:2}
.em2-sq.prop:focus-visible{outline:2px solid #F7D774;outline-offset:1px}
.em2-mid{background:radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.12),transparent 65%),repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 10px,transparent 10px 20px);border-radius:10px}
.em2-prog{width:min(70%,180px);height:5px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.em2-prog i{display:block;height:100%;background:#F7D774;border-radius:3px;transition:width .6s}
.em2-sq.fx-sold::after{content:"SATILDI";position:absolute;inset:auto 0 32% 0;margin:auto;width:max-content;padding:1px 4px;border:2px solid #C9302C;color:#C9302C;font:800 clamp(7px,2vw,11px)/1 var(--f-display);letter-spacing:.06em;background:rgba(255,255,255,.85);border-radius:3px;transform:rotate(-14deg);animation:stamp .9s ease-out forwards}
@keyframes stamp{0%{opacity:0;transform:rotate(-14deg) scale(2.6)}35%{opacity:1;transform:rotate(-14deg) scale(.9)}50%{transform:rotate(-14deg) scale(1)}85%{opacity:1}100%{opacity:0}}
.em2-sq.fx-built{animation:built .7s ease-out}
@keyframes built{0%{transform:scale(1)}35%{transform:scale(1.18);box-shadow:0 0 0 4px #F7D774}100%{transform:scale(1)}}
.em2-sq.fx-rent{animation:rent 1s ease-out var(--d,0ms) both}
@keyframes rent{0%,100%{box-shadow:inset 0 0 0 2.5px var(--own)}30%{box-shadow:inset 0 0 0 2.5px var(--own),0 0 0 5px rgba(201,48,44,.75);background:#FFE1DC}}
.em2-turn{position:absolute;left:50%;top:22%;transform:translateX(-50%);background:var(--pc);color:#fff;font:800 clamp(13px,3.8vw,18px)/1 var(--f-display);padding:8px 16px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.35);white-space:nowrap;pointer-events:none;animation:turnb 1.5s ease-out forwards;z-index:4}
@keyframes turnb{0%{opacity:0;transform:translate(-50%,-10px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.05)}25%{transform:translate(-50%,0) scale(1)}80%{opacity:1}100%{opacity:0}}
.em2-av{position:relative}
.em2-crown{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-style:normal;color:#E8A317;font-size:14px;text-shadow:0 1px 0 #fff}
.em2-worth{font:600 10px/1 var(--f-mono);color:#7A6F5D}
.em2-modal{position:fixed;inset:0;background:rgba(10,20,16,.55);display:grid;place-items:center;z-index:50;padding:16px;animation:fadein .2s}
@keyframes fadein{from{opacity:0}}
.em2-mbox{background:#F4EFE3;border-radius:16px;padding:14px;display:grid;gap:10px;justify-items:center;width:min(100%,300px);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.em2-mbox .deed{width:100%}
.em2-minfo{display:grid;gap:4px;font-size:13px;color:#3A3A3A;width:100%}
.em2-minfo i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.em-len{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:4px}
.em-len .opt{text-align:center;padding:10px 8px}
@media (prefers-reduced-motion: reduce){.em2-sq.fx-sold::after,.em2-sq.fx-built,.em2-sq.fx-rent,.em2-turn{animation-duration:.01s}}


/* reward */
.ticket{background:var(--surface);border:1px solid var(--rule);border-radius:18px;overflow:hidden}
.ticket .head{background:var(--line);color:var(--line-ink);padding:18px 20px;display:grid;gap:4px}
.ticket .head h2{font-size:24px;font-weight:800}
.ticket .body{padding:22px 20px;display:grid;gap:14px;text-align:center;border-top:2px dashed var(--rule)}
.code{font:700 52px/1 var(--f-mono);letter-spacing:.14em}
.stamp{color:var(--good);font-weight:600}
.result-type{font:800 34px/1.05 var(--f-display);color:var(--line)}

/* beceri oyunları */
.arc .arc-stage{position:relative;width:100%;height:min(70vh,580px);border-radius:16px;overflow:hidden;background:#14213A;touch-action:none;user-select:none;-webkit-user-select:none}
.arc canvas{display:block;width:100%;height:100%;touch-action:none}
.arc-hud{position:absolute;top:10px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:center;color:#fff;pointer-events:none;text-shadow:0 2px 6px rgba(0,0,0,.45)}
.arc-hud #arc-score{font:800 30px/1 var(--f-display)}
.arc-hud #arc-info{font:600 13px/1 var(--f-body);background:rgba(0,0,0,.28);padding:6px 10px;border-radius:999px}
.arc-ov{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,18,30,.5);padding:16px}
.arc-ov[hidden]{display:none}
.arc-box{background:var(--surface);color:var(--ink);border-radius:18px;padding:20px;text-align:center;width:min(100%,290px);display:grid;gap:10px;animation:popin .3s}
.arc-box p{margin:0;color:var(--muted)}
.arc-title{font:800 26px/1.1 var(--f-display)}
.arc-big{font:800 56px/1 var(--f-display);color:var(--line)}
/* oyun kartları: görsel + sol altta oyunun adı (dile göre) */
.station.gcard{position:relative;aspect-ratio:1/1;min-height:0;padding:0;border:0;border-radius:20px;overflow:hidden;background:var(--surface);display:block;box-shadow:0 6px 16px rgba(21,32,51,.1);transition:transform .15s}
.station.gcard:hover{transform:translateY(-2px)}
.station.gcard:active{transform:scale(.97)}
.gc-art{position:absolute;inset:0;background:radial-gradient(circle at 80% 22%,rgba(255,255,255,.3) 0 18%,transparent 19%),radial-gradient(circle at 80% 22%,transparent 0 27%,rgba(255,255,255,.14) 28% 33%,transparent 34%),radial-gradient(circle at 12% 92%,rgba(255,255,255,.16) 0 30%,transparent 31%),linear-gradient(150deg,color-mix(in srgb,var(--tint) 70%,#fff),var(--tint))}
.gc-art img{position:absolute;right:-6%;top:-1%;width:78%;height:78%;object-fit:contain;display:block;filter:drop-shadow(0 12px 16px rgba(0,0,0,.3));transition:transform .25s}
.station.gcard.has-img:hover .gc-art img{transform:scale(1.05) rotate(-2deg)}
.station.gcard.has-img .gc-art{background:radial-gradient(circle at 72% 30%,rgba(255,255,255,.22),transparent 55%),linear-gradient(160deg,color-mix(in srgb,var(--tint) 82%,#fff),var(--tint))}
.station.gcard.has-img::after{background:linear-gradient(to top,rgba(0,0,0,.35),transparent 42%)}
.station.gcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,16,28,.75),rgba(10,16,28,.12) 48%,transparent 62%);pointer-events:none}
.gc-text{position:absolute;left:12px;right:10px;bottom:11px;z-index:2;display:grid;gap:3px;text-align:left}
.gc-text h3{margin:0;font:800 16.5px/1.1 var(--f-display);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.gc-text .meta{color:rgba(255,255,255,.86);font-size:11.5px;line-height:1.25}
.station.gcard.has-scene .gc-art{background:#152033}
.station.gcard.has-scene .gc-art img{inset:0;right:auto;top:auto;width:100%;height:100%;object-fit:cover;filter:none}
.station.gcard.has-scene:hover .gc-art img{transform:scale(1.04)}
.station.gcard.has-scene::after{background:linear-gradient(to top,rgba(8,12,20,.92) 0,rgba(8,12,20,.7) 24%,rgba(8,12,20,.2) 46%,transparent 60%)}
.station.gcard.has-scene .gc-text h3{text-shadow:0 2px 8px rgba(0,0,0,.6)}
.gc-tag{position:absolute;top:10px;left:10px;z-index:2;font:700 11px/1 var(--f-body);padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.92);color:#152033}
.gc-tag.gift{background:var(--line);color:var(--line-ink)}
.vh-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.lang{display:flex;background:var(--soft);border-radius:999px;padding:3px;flex:none;margin-bottom:2px}
.lang button{border:0;background:none;font:700 12px/1 var(--f-body);padding:7px 9px;border-radius:999px;color:var(--muted);min-width:34px}
.lang button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(21,32,51,.15)}
/* mekan üst kısmı */
.vh{margin:14px 0 6px;background:var(--surface);border-radius:26px;overflow:hidden;box-shadow:0 14px 34px rgba(21,32,51,.09);border:1px solid var(--rule)}
.vh-cover{position:relative;height:150px;background-color:var(--line);background-size:cover;background-position:center}
.vh-cover.pattern{background-image:radial-gradient(circle at 86% 18%,rgba(255,255,255,.2) 0 54px,transparent 55px),radial-gradient(circle at 86% 18%,transparent 0 78px,rgba(255,255,255,.1) 79px 96px,transparent 97px),radial-gradient(circle at 8% 120%,rgba(255,255,255,.14) 0 100px,transparent 101px),linear-gradient(135deg,color-mix(in srgb,var(--line) 70%,#000),var(--line))}
.vh-cover.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.28),transparent 45%)}
.vh-open,.vh-brand{position:absolute;top:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--f-body);padding:7px 11px;border-radius:999px}
.vh-open{left:12px;background:rgba(255,255,255,.95);color:#152033}
.vh-open i{width:7px;height:7px;border-radius:50%;background:#22A06B}.vh-open.closed i{background:#9AA3AF}
.about-list li.today b,.about-list li.today span{color:var(--line);font-weight:700}
.vh-brand{right:12px;color:#fff;background:rgba(0,0,0,.22);font-weight:700}
.vh-brand i{width:9px;height:20px;margin:-5px 0;background:url(/marka/maskot.webp) center/contain no-repeat;border-radius:0}
.vh-body{padding:0 18px 18px}
.vh-logo{width:78px;height:78px;border-radius:24px;margin-top:-40px;position:relative;z-index:1;border:4px solid var(--surface);background:var(--line);color:var(--line-ink);display:grid;place-items:center;font:800 34px/1 var(--f-display);overflow:hidden;box-shadow:0 8px 18px rgba(21,32,51,.16)}
.vh-logo img{width:100%;height:100%;object-fit:cover}
.vh-title h1{margin:12px 0 2px;font:800 30px/1.05 var(--f-display);letter-spacing:-.01em}
.vh-title p{margin:0;color:var(--muted);font-size:15px}
.vh-info{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:0;border:0;background:none;color:var(--line);font:600 13.5px var(--f-body);cursor:pointer}
.vh-info svg{width:16px;height:16px}
.vh-actions{display:grid;gap:6px;margin-top:16px}
.vh-act{display:grid;justify-items:center;gap:6px;padding:12px 0 10px;border-radius:18px;border:0;background:var(--soft);color:var(--ink);font:600 11px/1.1 var(--f-body);letter-spacing:-.01em;min-height:66px;min-width:0}
.vh-act span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.btn{text-decoration:none;text-align:center}
.vh + .hero{padding:16px 18px}.vh + .hero h1{font-size:24px}
.vh-act svg{width:22px;height:22px;color:var(--line)}
.vh-act:active{transform:scale(.96)}
.vh + .hero{margin-top:12px}
/* kampanyalar */
.camps{margin-top:22px}
.camps h2{font-size:20px;margin:0 0 10px}
.camp-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}
.camp-row::-webkit-scrollbar{display:none}
.camp-card{flex:0 0 82%;max-width:320px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--rule);border-radius:22px;padding:0;display:flex;flex-direction:column;text-align:left;overflow:hidden;color:var(--ink);}
.camp-card:only-child{flex-basis:100%;max-width:none}
.pop-bg{position:fixed;inset:0;z-index:90;background:rgba(8,12,18,.72);backdrop-filter:blur(4px);display:grid;place-items:center;padding:18px;animation:popIn .25s ease both}
.pop-bg.out{animation:popOut .2s ease both}
.pop-card{position:relative;width:min(440px,100%);max-height:calc(100dvh - 36px);overflow:auto;background:var(--surface);color:var(--ink);border-radius:26px;box-shadow:0 30px 80px rgba(0,0,0,.45);animation:popUp .32s cubic-bezier(.2,.9,.3,1.2) both}
.pop-img{display:block;width:100%;max-height:58dvh;object-fit:cover;background:var(--soft)}
.pop-ic{display:grid;place-items:center;height:150px;background:linear-gradient(135deg,color-mix(in srgb,var(--line) 70%,#fff),var(--line));color:#fff}.pop-ic svg{width:64px;height:64px}
.pop-body{padding:20px 22px 22px;display:grid;gap:8px}
.pop-body h2{margin:0;font:800 28px/1.1 var(--f-display);letter-spacing:-.02em}
.pop-body p{margin:0;color:var(--muted);font-size:16px;line-height:1.45}
.pop-until{font-size:14px;color:var(--muted)}
.pop-body .btn{margin-top:8px}
.pop-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font:400 28px/1 var(--f-body);display:grid;place-items:center;cursor:pointer;z-index:1}
@keyframes popIn{from{opacity:0}}@keyframes popOut{to{opacity:0}}@keyframes popUp{from{opacity:0;transform:translateY(24px) scale(.96)}}
@media (prefers-reduced-motion:reduce){.pop-bg,.pop-card{animation:none}}
.camp-dots{display:flex;justify-content:center;gap:6px;margin-top:8px}
.camp-dots i{width:6px;height:6px;border-radius:3px;background:var(--rule);transition:width .2s,background .2s}
.camp-dots i.on{width:18px;background:var(--line)}
.camp-img{display:grid;place-items:center;aspect-ratio:16/9;background:linear-gradient(135deg,var(--line),color-mix(in srgb,var(--line) 55%,#000)) center/cover no-repeat;color:rgba(255,255,255,.9)}
.camp-card.has-img .camp-img{background-color:var(--soft)}
.camp-img svg{width:42px;height:42px}
.camp-body{display:grid;gap:5px;padding:13px 15px 15px}
.camp-tag{font:700 11px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--line)}
.camp-body b{font:800 18px/1.15 var(--f-display)}
.camp-body small{color:var(--muted);font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.camp-body em{font:600 12px/1 var(--f-body);font-style:normal;color:var(--muted);margin-top:3px}
.camp-sheet{display:grid;gap:8px}.camp-sheet h3{font:800 24px/1.15 var(--f-display);margin:0}.camp-sheet p{margin:0;color:var(--muted);font-size:16px}
.camp-until{display:inline-flex;gap:6px;align-self:start;width:max-content;background:var(--soft);border-radius:999px;padding:7px 12px;font-size:14px}
/* duyurular + tuval */
.vtiles{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vtiles.one{grid-template-columns:1fr}
.vtile.t-canvas.wide{aspect-ratio:2/1;padding:0;background:#fff;display:block}
.t-canvas.wide canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.t-canvas.wide::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,16,28,.72),rgba(10,16,28,.1) 55%,transparent 70%);pointer-events:none}
.t-canvas.wide .tv-txt{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:grid;gap:3px;color:#fff;text-align:left}
.t-canvas.wide .tv-txt b{font:800 20px/1.15 var(--f-display);text-shadow:0 1px 6px rgba(0,0,0,.4)}
.t-canvas.wide .tv-txt small{font-size:13px;opacity:.9}
.tv-go{position:absolute;top:12px;right:12px;z-index:1;display:inline-flex;align-items:center;gap:7px;background:var(--line);color:var(--line-ink);font:700 13.5px/1 var(--f-body);padding:9px 13px;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.tv-go svg{width:15px;height:15px}
.camp-card.ann:not(.has-img) .camp-img{background:linear-gradient(135deg,color-mix(in srgb,var(--line) 70%,#fff),var(--line))}
.camp-card.ann .camp-tag{color:var(--line)}
.vtile{aspect-ratio:1;border:0;border-radius:26px;padding:16px;text-align:left;position:relative;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.vtile:active{transform:scale(.97)}
.t-news{background:var(--line);color:var(--line-ink);gap:8px}
.t-news::after{content:"";position:absolute;right:-34px;bottom:-34px;width:110px;height:110px;border:14px solid rgba(255,255,255,.13);border-radius:50%}
.t-eb{display:inline-flex;align-items:center;gap:7px;font:700 11.5px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;opacity:.95}
.t-eb i{width:8px;height:8px;border-radius:50%;background:currentColor;animation:newsping 2s infinite}
.t-eb em{font-style:normal;background:rgba(255,255,255,.22);border-radius:999px;padding:2px 7px;letter-spacing:0}
@keyframes newsping{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%,100%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}
@media (prefers-reduced-motion: reduce){.t-eb i{animation:none}}
.t-txt{font:700 17px/1.22 var(--f-display);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.t-more{margin-top:auto;font:700 12.5px/1 var(--f-body);opacity:.85;position:relative;z-index:1}
.t-prize{margin-top:auto;display:flex;align-items:center;gap:6px;font:600 12px/1.2 var(--f-body);background:rgba(255,255,255,.18);border-radius:12px;padding:7px 9px;position:relative;z-index:1;min-width:0}
.t-prize span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.t-prize svg,.t-brush svg{width:15px;height:15px;flex:none}
.t-canvas{background:#fff;color:var(--ink);justify-content:flex-end;border:1px solid var(--rule);padding:0}
.t-canvas canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.t-brush{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:12px;background:var(--surface);color:var(--line);display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.t-brush svg{width:18px;height:18px}
.t-label{position:relative;margin:8px;font:700 12.5px/1.2 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--surface);color:var(--ink);border-radius:10px;padding:6px 9px;align-self:flex-start;max-width:calc(100% - 16px);box-shadow:0 4px 12px rgba(0,0,0,.14)}
.tv-card{gap:12px}
.tv-view{border-radius:16px;overflow:hidden;border:1px solid var(--rule);background:#fff;touch-action:none}
.tv-view canvas{display:block;width:100%;aspect-ratio:1;image-rendering:pixelated;touch-action:none;cursor:crosshair}
.tv-tools{display:flex;align-items:center;justify-content:center;gap:12px}
.tv-tools .tb-btn{width:46px;justify-content:center;font:700 22px/1 var(--f-body)}
.tv-tools span{font:700 15px/1 var(--f-mono);min-width:34px;text-align:center}
.tv-pal{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}
.tv-pal button{aspect-ratio:1;border-radius:12px;border:2px solid var(--rule);padding:0}
.tv-pal button[aria-pressed=true]{outline:3px solid var(--ink);outline-offset:2px;transform:scale(1.06)}
.news-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.news-list li{font:600 16px/1.35 var(--f-body);padding:12px 14px;background:var(--soft);border-radius:14px}
.canvas-big{width:100%;border-radius:20px;display:block}
/* XOX ve SOS */
.xo-players{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.xo-players span{padding:6px 12px;border-radius:999px;background:var(--bg);font-weight:600;font-size:14px;border:2px solid transparent}
.xo-players span b{font-family:var(--f-display);margin-left:4px}
.xo-players .p0.on{border-color:var(--line)}.xo-players .p1.on{border-color:#E8743B}
.xo-board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(100%,330px);margin:6px auto 0}
.xo-sq{aspect-ratio:1;border:0;border-radius:18px;background:var(--bg);display:grid;place-items:center;padding:14%}
.xo-sq:not(:disabled):active{transform:scale(.95)}
.xo-sq svg{width:100%;height:100%;fill:none;stroke-width:5.5;stroke-linecap:round}
.xo-x{stroke:var(--line)}.xo-o{stroke:#E8743B}
.xo-sq.win{background:color-mix(in srgb,var(--good) 22%,var(--bg))}
.xo-sq.pop svg{animation:xopop .28s cubic-bezier(.3,1.6,.5,1)}
@keyframes xopop{from{transform:scale(.2);opacity:0}}
.sos-wrap{position:relative;width:min(100%,380px);margin:4px auto 0}
.sos-board{display:grid;gap:4px}
.sos-sq{aspect-ratio:1;border:0;border-radius:10px;background:var(--bg);font:800 clamp(18px,6vw,26px)/1 var(--f-display);color:var(--ink);padding:0}
.sos-sq:not(:disabled):active{background:var(--soft)}
.sos-sq.pop{animation:xopop .25s cubic-bezier(.3,1.6,.5,1)}
.sos-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sos-lines line{stroke-width:.09;stroke-linecap:round;opacity:.75}
.sos-lines .p0{stroke:var(--line)}.sos-lines .p1{stroke:#E8743B}
.sos-lines line.draw{stroke-dasharray:4;stroke-dashoffset:4;animation:sosdraw .45s ease-out forwards}
@keyframes sosdraw{to{stroke-dashoffset:0}}
.sos-toast{position:absolute;left:50%;top:-8px;transform:translate(-50%,-50%);background:var(--line);color:var(--line-ink);font:800 20px/1 var(--f-display);padding:12px 18px;border-radius:14px;pointer-events:none;animation:sostoast 1.3s forwards;white-space:nowrap}
.sos-toast.p1{background:#E8743B;color:#fff}
@keyframes sostoast{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}15%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%)}}
.sos-pick{display:flex;gap:10px;justify-content:center;margin-top:12px}
.sos-pick button{width:72px;height:56px;border-radius:14px;border:2px solid var(--rule);background:var(--surface);font:800 26px/1 var(--f-display)}
.sos-pick button[aria-pressed=true]{background:var(--line);color:var(--line-ink);border-color:var(--line)}
/* alt sayfa (sheet) */
.sheet-bg{position:fixed;inset:0;z-index:200;background:rgba(10,18,30,.45);display:flex;align-items:flex-end;justify-content:center;animation:fadein .18s}
.sheet-bg.out{opacity:0;transition:opacity .18s}
.sheet{width:min(100%,520px);background:var(--surface);color:var(--ink);border-radius:26px 26px 0 0;padding:10px 20px max(22px,env(safe-area-inset-bottom));display:grid;gap:14px;animation:sheetup .24s cubic-bezier(.2,.9,.3,1)}
@keyframes sheetup{from{transform:translateY(40px);opacity:.4}}
.sheet-grab{width:40px;height:5px;border-radius:3px;background:var(--rule);justify-self:center}
.sheet h2{font:800 22px/1.1 var(--f-display);margin:0}
.wifi-card{display:flex;align-items:center;gap:14px;background:var(--soft);border-radius:18px;padding:14px}
.wifi-card svg{width:30px;height:30px;color:var(--line);flex:none}
.wifi-card small,.wifi-pass small{display:block;color:var(--muted);font-size:12px}
.wifi-card b{font-size:17px}
.wifi-pass{border:2px dashed var(--rule);border-radius:18px;padding:14px;text-align:center}
.wifi-pass code{font:700 26px/1.3 var(--f-mono);letter-spacing:.04em}
.about-txt{margin:0;font-size:16px;line-height:1.55}
.about-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.about-list li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--rule);padding-bottom:8px;font-size:15px}
.about-list span{color:var(--muted)}
/* çift dokunmada yakınlaşma yok, oyunlarda metin seçilmez */
html,body{touch-action:manipulation;-webkit-text-size-adjust:100%}
button,a,.station,.screen,canvas{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.screen button,.station{-webkit-user-select:none;user-select:none}
/* üst çubuk: geri, ses, tam ekran */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tb-right{display:flex;gap:6px}
.tb-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--rule);background:var(--surface);color:var(--ink);font:600 13px/1 var(--f-body)}
.tb-btn svg{width:16px;height:16px}
.tb-btn.off{color:var(--muted)}
/* tam ekran */
body.fs{padding:0;overflow:hidden}
body.fs .app{max-width:none;margin:0}
body.fs .screen{position:fixed;inset:0;z-index:50;align-content:start;background:var(--bg);overflow:auto;padding:max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom));gap:6px}
body.fs .screen>.card{max-width:1100px;margin:0 auto;width:100%}
body.fs .arc{padding:8px;gap:6px}
body.fs .arc .title-row,body.fs .arc>.muted{display:none}
body.fs .arc .arc-stage{height:calc(100dvh - 76px);height:calc(100vh - 76px);border-radius:12px}
@supports (height:100dvh){body.fs .arc .arc-stage{height:calc(100dvh - 76px)}}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* canlı mekan: demo mekan seçicisi gizli */
.oh-live .demo{display:none}