/* Gömülü yazı tipi (SIL Open Font License): Rubik */
/* Rubik variable font: Latin + Latin-ext include Turkish glyphs at every weight. */
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url('/rubik-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url('/rubik-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --side:clamp(230px,16vw,490px);
  --ink:#f4f7ff; --muted:#a9b9d3;
  --red:#B3363B; --blue:#2F6CC4; /* mat, koyu zeminle uyumlu tonlar */ --indigo:#2C3B63; --neutral:#DED2BD; --black:#1C2026;
  --lobby-bg:#3D1408; --game-bg:#57200F; --panel:#121824;
  --action:#E39A3B; --gold:#F2B544; --accent:#3D93F5;
  --navy:rgba(14,20,32,.70); --navy-line:rgba(255,255,255,.07);
  --display:"Rubik",system-ui,sans-serif;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper:#1a110c; --grid-major:rgba(242,181,68,.07); --grid-minor:rgba(242,181,68,.03);
  --contour:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720' viewBox='0 0 720 720' fill='none' stroke='%23F2B544' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M120 160c60-70 190-60 230 10s-20 150-110 160-180-100-120-170z'/%3E%3Cpath d='M90 150c80-110 260-90 300 10s-40 200-170 210S30 250 90 150z'/%3E%3Cpath d='M60 140c100-150 330-120 370 10s-60 250-230 260S-10 260 60 140z'/%3E%3Cpath d='M500 460c50-40 140-20 150 40s-60 100-120 90-80-90-30-130z'/%3E%3Cpath d='M470 440c70-70 200-40 215 50s-80 150-170 135-120-120-45-185z'/%3E%3Cpath d='M440 420c90-100 260-60 280 60s-100 200-220 180-160-150-60-240z'/%3E%3Cpath d='M560 120c30-20 80-10 85 25s-35 55-65 50-45-55-20-75z'/%3E%3Cpath d='M540 105c45-40 120-20 128 35s-55 90-100 80-70-80-28-115z'/%3E%3Cpath d='M150 560c40-25 100-10 105 30s-45 60-80 55-60-60-25-85z'/%3E%3Cpath d='M130 545c55-45 140-25 148 40s-65 100-115 90-85-90-33-130z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{min-height:100%}
body{margin:0;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--ink);font-family:Rubik,"Segoe UI",system-ui,-apple-system,sans-serif;
  /* Harekât masası kâğıdı: koordinat ızgarası ve silik eş yükselti çizgileri. */
  background-color:var(--paper);
  background-image:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.55) 100%),var(--contour),linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),linear-gradient(var(--grid-minor) 1px,transparent 1px),linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px);
  background-size:cover,720px 720px,120px 120px,120px 120px,24px 24px,24px 24px}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button:focus-visible,input:focus-visible,select:focus-visible,.prow:focus-visible{outline:3px solid rgba(242,181,68,.8);outline-offset:2px}
.ic{width:1em;height:1em;flex:none;vertical-align:middle}
.screen{display:none}.screen.active{display:block}
.muted{color:var(--muted);font-style:italic;font-size:13px;margin:4px 0}

/* ---------- Butonlar ---------- */
.startbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 30px;border-radius:12px;font-weight:700;font-size:16px;color:#2A1608;background:var(--action);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 0 #8A4C12;transition:transform .15s,filter .15s}
.startbtn.small{padding:10px 20px;font-size:14px;border-radius:9px;box-shadow:0 3px 0 #8A4C12}
.startbtn:disabled{opacity:.5;filter:grayscale(.4);cursor:not-allowed;box-shadow:0 5px 0 #263a50}
.sbtn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:11px;font-size:14px;color:#e8f0ff;background:rgba(14,20,32,.5);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:background .15s,box-shadow .15s}
.sbtn:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 16px rgba(242,181,68,.2)}
.sbtn.primary{background:rgba(227,154,59,.28);border-color:rgba(242,181,68,.7);box-shadow:0 0 18px rgba(227,154,59,.3)}

/* ---------- Üst bar ---------- */
.room{--mid:clamp(560px,52vw,1540px);--cols:var(--side) minmax(0,var(--mid)) var(--side);padding:10px 12px 28px;max-width:2880px;margin:0 auto}
.room.zoom{--cols:clamp(190px,13vw,240px) minmax(0,1fr) clamp(190px,13vw,240px)}
.topbar,.shell{display:grid;grid-template-columns:var(--cols);justify-content:space-between;gap:12px}
.topbar{margin-bottom:14px}
.tb{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;background:var(--navy);border:1px solid var(--navy-line);border-radius:9px;backdrop-filter:blur(8px);min-width:0}
.tb.center{justify-content:center;flex-wrap:wrap}.tb.right{justify-content:flex-end}
.grow{flex:1}
.tb-label{font-size:13px;color:#c5d3ea;white-space:nowrap}
.code{letter-spacing:2px;font-size:14px}
.tb.left{gap:2px}
.tb.left .ib{width:26px}
.tb.left .tb-label{font-size:12px}
.tb.left .code{font-size:12px;letter-spacing:0}
.ib{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(170,198,237,.18);color:#dbe7fb;font-size:16px;flex:none}
.ib:hover,.tbtn:hover{background:rgba(255,255,255,.15)}
.tbtn{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:7px;background:rgba(255,255,255,.07);border:1px solid rgba(170,198,237,.18);font-size:13px;font-weight:600;color:#e8f0ff;white-space:nowrap}
.tbtn .ic{font-size:15px}
.tbtn.static{cursor:default}.tbtn.static:hover{background:rgba(255,255,255,.07)}
.turnpill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:7px;font-size:13px;background:rgba(255,255,255,.07);border:1px solid rgba(170,198,237,.18);white-space:nowrap}
.turnpill i{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.turnpill.red i{background:var(--red)}.turnpill.blue i{background:var(--accent)}
.turnpill b{font-weight:700}

/* ---------- Yerleşim ---------- */
.shell{align-items:start}
.side{display:flex;flex-direction:column;gap:12px;min-width:0}
.center{min-width:0}
.panel{background:var(--navy);border:1px solid var(--navy-line);border-radius:10px}

/* Takım kartları */
.tcard{position:relative;border-radius:16px;padding:14px 12px;text-align:center;overflow:hidden;border:0;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 32px rgba(0,0,0,.25);transition:box-shadow .3s}
.tcard.red{background:linear-gradient(160deg,rgba(196,62,68,.62),rgba(104,26,34,.5))}
.tcard.blue{background:linear-gradient(160deg,rgba(54,120,214,.82),rgba(24,52,116,.78))}
.tcard>*{position:relative}
.tcard.red.active{box-shadow:inset 0 0 0 1px rgba(255,140,140,.7),0 0 34px rgba(224,87,91,.5),0 12px 32px rgba(0,0,0,.25)}
.tcard.blue.active{box-shadow:inset 0 0 0 1px rgba(110,180,255,.8),0 0 34px rgba(61,147,245,.55),0 12px 32px rgba(0,0,0,.25)}
.tc-title{font-weight:700;font-size:15px;letter-spacing:.3px;display:flex;align-items:center;justify-content:center;gap:7px;word-break:break-word}
.tc-title i{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.9;flex:none}
.tc-num{font-size:62px;font-weight:800;line-height:1;margin:6px 0 2px;text-shadow:0 3px 8px rgba(0,0,0,.3)}
.tc-sub{font-size:13px;font-weight:600;opacity:.92;letter-spacing:.4px}
.tc-cap{display:inline-flex;align-items:center;gap:7px;margin:10px 0 8px;background:rgba(18,24,36,.5);border:1px solid rgba(255,255,255,.14);padding:6px 12px;border-radius:7px;font-weight:700;text-transform:uppercase;font-size:14px;max-width:100%}
.tc-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.tc-chips span{background:rgba(18,24,36,.4);border-radius:5px;padding:4px 8px;font-size:13px;font-weight:500}
.tc-turn{position:static!important;display:inline-block;margin-bottom:6px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4);text-shadow:0 0 8px rgba(255,255,255,.6);font-size:11px;font-weight:800;padding:3px 8px;border-radius:20px;letter-spacing:.4px}

/* Süre */
.timer{display:none;background:var(--navy);border:1px solid var(--navy-line);border-radius:10px;padding:12px 14px;text-align:center}
.t-label{font-size:12px;color:#c9d8ef;display:flex;align-items:center;justify-content:center;gap:6px}
.t-time{font-size:26px;font-weight:800;margin:4px 0 8px;color:#35d07f}
.t-bar{height:8px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}
.t-bar i{display:block;height:100%;background:#35d07f;transition:width 1s linear}
.timer.mid .t-time{color:var(--gold)}.timer.mid .t-bar i{background:var(--gold)}
.timer.low .t-time{color:#ff6a5e}.timer.low .t-bar i{background:#ff6a5e}

/* Günlük */
.logp{padding:14px 16px;min-height:330px;max-height:calc(100vh - 380px);display:flex;flex-direction:column;flex:1}
.lp-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-bottom:10px}
.lp-toggle{display:none;margin-left:auto;padding:5px 9px;border:1px solid rgba(202,219,246,.22);border-radius:6px;color:#dce8f8;font-size:12px}
.lp-toggle:hover{background:rgba(255,255,255,.08)}
.lp-body{overflow:auto;display:flex;flex-direction:column;gap:7px;padding-right:2px}
.li{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.35;padding:7px 9px;border-radius:7px;background:rgba(255,255,255,.05)}
.li i{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:none;background:#9fb0cc}
.li.red i{background:var(--red)}.li.blue i{background:var(--accent)}.li.n i{background:var(--neutral)}.li.k i{background:var(--black);box-shadow:0 0 0 1px rgba(255,255,255,.45)}

/* ---------- Lobi ---------- */
.lobby{display:flex;flex-direction:column;align-items:center}
.cap-pill{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:30px;font-weight:700;font-size:15px;background:linear-gradient(180deg,#6B3A1C,#4A2410);border:1px solid rgba(255,255,255,.18);box-shadow:0 4px 0 rgba(0,0,0,.28);margin:0 0 18px;text-align:center}
.cap-pill .ic{color:var(--gold);font-size:17px}
.lcols{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:100%}
.lcol{display:flex;flex-direction:column;gap:10px;min-width:0}
.lhead{height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid;font-size:18px}
.lcol.red .lhead{background:linear-gradient(180deg,#BC444A,#8D272D);border-color:rgba(255,255,255,.14)}
.lcol.blue .lhead{background:linear-gradient(180deg,#36497D,#2C3B63);border-color:rgba(61,147,245,.5)}
.tname{background:transparent;border:1px solid transparent;border-radius:6px;color:#fff;font:inherit;font-weight:700;text-transform:uppercase;text-align:center;width:min(260px,70%);padding:4px 6px}
.tname::placeholder{color:rgba(255,255,255,.85);text-transform:uppercase}
.tname:not([readonly]){border-color:rgba(255,255,255,.35);background:rgba(0,0,0,.12)}
.tname[readonly]{cursor:default;pointer-events:none}
.rows{display:flex;flex-direction:column;gap:9px}
.prow{position:relative;height:58px;border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 8px 0 0;border:1px solid rgba(160,185,230,.14);transition:filter .12s,transform .12s}
.lcol.red .prow{background:rgba(18,24,36,.9)}
.lcol.blue .prow{background:rgba(44,59,99,.92)}
.prow.cap{border:2px solid var(--gold);background:rgba(18,24,36,.96)!important}
.prow.me{box-shadow:0 0 0 2px var(--gold)}
.pav{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:rgba(255,255,255,.1);color:var(--accent);flex:none}
.lcol.red .pav{color:#E8898B}
.pcrown{color:var(--gold);font-size:18px;display:grid}
.pname{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.prow.cap .pname{text-transform:uppercase;letter-spacing:.5px}
.ptag{font-size:11px;font-weight:800;padding:3px 7px;border-radius:5px;letter-spacing:.4px;flex:none}
.ptag.host{background:var(--gold);color:var(--black)}.ptag.me{background:var(--accent);color:var(--panel)}
.prm{opacity:0;width:26px;height:26px;border-radius:6px;display:grid;place-items:center;background:rgba(255,255,255,.1);flex:none}
.prow:hover .prm,.prow:focus-within .prm,.prm:focus-visible{opacity:1}
.pickbtn{flex:1;min-width:0;height:100%;display:flex;align-items:center;gap:12px;padding:0 6px 0 12px;text-align:left;border-radius:8px;cursor:pointer;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.empty{padding:16px;text-align:center;color:var(--muted);font-size:13px;border:1px dashed rgba(170,198,237,.25);border-radius:8px}
.joinbtn{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:8px;border:1px dashed rgba(202,219,246,.3);background:rgba(18,24,36,.55);font-size:13px;font-weight:600;color:#cfdcf2}
.joinbtn:hover{background:rgba(30,52,88,.7)}
.lobby-actions{margin:24px 0 12px}
.lobby-tools{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.issue{color:#c8e0f7;font-size:13px;margin:12px 0 0;min-height:19px;text-align:center}
.note{font-size:12px;color:rgba(230,238,250,.72);text-align:center;max-width:560px;margin:10px 0 0;line-height:1.5}

/* ---------- Kart tahtası ---------- */
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(5px,.6vw,9px)}
.wc{position:relative;display:block;width:100%;aspect-ratio:1.339;border:1px solid rgba(70,48,30,.32);border-radius:9px;background:#E2D9C6;overflow:hidden;container-type:inline-size;perspective:900px;box-shadow:0 4px 12px rgba(0,0,0,.25);transition:transform .18s,box-shadow .18s;color:#fff;text-align:center}
.wc-flip{position:absolute;inset:0;display:block;transform-style:preserve-3d}
.wc.flipped .wc-flip{transform:none}
.wc.flipped .wc-front{visibility:hidden}
.wc.flipped .wc-back{transform:none}
.wc-face{position:absolute;inset:0;display:block;overflow:hidden;border-radius:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.wc-face:before{content:none}
.wc-face .wm,.wc-back .stamp{display:none}
.wc-front{background:#E2D9C6 url('/cards/neutral.jpg') center/100% 100% no-repeat}
.wc.key-r .wc-front{background-image:url('/cards/red.jpg')}
.wc.key-b .wc-front{background-image:url('/cards/blue.jpg')}
.wc.key-k .wc-front{background-image:url('/cards/black.jpg')}
.wc.key-r .wc-front .wc-word,.wc.key-b .wc-front .wc-word,.wc.key-k .wc-front .wc-word{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.wc-back{transform:rotateY(180deg)}
.wc-surface{position:absolute;z-index:1;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;color:inherit;text-align:center;overflow:hidden}
.wc-surface:not(:disabled):hover{filter:brightness(1.04)}
.wc.locked{cursor:default}
.wc-open{position:absolute;z-index:4;top:4px;left:4px;display:grid;place-items:center;width:clamp(32px,20%,40px);min-width:32px;min-height:32px;aspect-ratio:1;padding:5px;border:1px solid rgba(255,255,255,.78);border-radius:6px;background:#36A875;color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.3);touch-action:manipulation}
.wc-open .ic{width:100%;height:100%;stroke-width:3}
.wc-open:not(:disabled):hover{background:#278b60;filter:brightness(1.08)}
.wc-open:disabled{cursor:default;opacity:.88}
.wc-suggestions{position:absolute;z-index:3;top:5px;right:5px;left:calc(clamp(32px,20%,40px) + 10px);display:flex;justify-content:flex-end;align-content:flex-start;flex-wrap:wrap;gap:2px;max-height:44%;overflow:hidden;pointer-events:none}
.wc-suggestion{max-width:100%;padding:2px 4px;border-radius:4px;background:rgba(76,31,30,.78);color:#fff;font:600 clamp(8px,5.6cqw,12px)/1.1 Rubik,"Segoe UI",sans-serif;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.wc.marked{box-shadow:0 0 0 2px #36A875,0 6px 16px rgba(0,0,0,.3)}
.wc-back.r,.mini-card.r{background:url('/cards/red.jpg') center/100% 100% no-repeat}
.wc-back.b,.mini-card.b{background:url('/cards/blue.jpg') center/100% 100% no-repeat}
.wc-back.n{background:url('/cards/neutral-revealed.png') center/100% 100% no-repeat;color:#332719}
.mini-card.n{background:url('/cards/neutral.jpg') center/100% 100% no-repeat;color:#332719}
.wc-back.k,.mini-card.k{background:url('/cards/black.jpg') center/100% 100% no-repeat}
.mini-card{border-color:rgba(70,48,30,.25);border-radius:7px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.mini-card .wc-front{background:transparent}
.mini-card.r .wc-word,.mini-card.b .wc-word,.mini-card.k .wc-word{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.mini-card.n .wc-word{color:#332719}
.board .mini-card.r .wc-front .wc-word{background:linear-gradient(180deg,#8F282A,#711D20);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.board .mini-card.b .wc-front .wc-word{background:linear-gradient(180deg,#214F89,#173B69);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.board .mini-card.k .wc-front .wc-word{background:linear-gradient(180deg,#15171B,#08090B);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.board .mini-card.n .wc-front .wc-word{background:linear-gradient(180deg,#C2B59B,#A99B7F);color:#332719;text-shadow:0 1px 0 rgba(255,255,255,.28)}
.wm{position:absolute;left:50%;top:8%;width:clamp(28px,34cqw,64px);aspect-ratio:1;transform:translateX(-50%);color:rgba(82,57,32,.12);display:block;z-index:0}
.wm svg{width:100%;height:100%;display:block}
.wc-word{position:absolute;z-index:1;left:6%;right:6%;top:50%;transform:translateY(-50%);font-family:Rubik,"Segoe UI",system-ui,sans-serif;font-weight:700;line-height:1.08;letter-spacing:.06em;font-size:clamp(10px,9cqw,20px);text-transform:uppercase;overflow-wrap:anywhere;color:inherit;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.wc-front .wc-word{color:#3A2B1A}
.wc-back.r .wc-word,.wc-back.b .wc-word,.wc-back.k .wc-word{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.board .wc-word{top:auto;bottom:9%;left:8%;right:8%;min-height:34%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:3px 6px;border:1px solid rgba(255,255,255,.24);border-radius:10px;background:linear-gradient(180deg,#C2B59B,#A99B7F);color:#332719;text-shadow:0 1px 0 rgba(255,255,255,.28);box-shadow:0 2px 5px rgba(0,0,0,.2);transform:none}
.board .wc.key-r .wc-front .wc-word,.board .wc-back.r .wc-word{background:linear-gradient(180deg,#8F282A,#711D20);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.board .wc.key-b .wc-front .wc-word,.board .wc-back.b .wc-word{background:linear-gradient(180deg,#214F89,#173B69);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.board .wc.key-k .wc-front .wc-word,.board .wc-back.k .wc-word{background:linear-gradient(180deg,#15171B,#08090B);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.board .wc.word-strip-hidden .wc-back .wc-word{visibility:hidden}
.stamp{position:absolute;left:50%;top:26%;transform:translate(-50%,-50%);width:24%;aspect-ratio:1;border-radius:50%;background:rgba(0,0,0,.24);display:grid;place-items:center;z-index:2}
.stamp .ic{width:62%;height:62%;stroke-width:3.2}
.wc.ghost{opacity:.62}

.cluebar{margin-top:12px;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:var(--navy);border:1px solid var(--navy-line);flex-wrap:wrap}
.cluebar.red{box-shadow:inset 3px 0 0 #D2575C,0 10px 30px rgba(0,0,0,.18)}.cluebar.blue{box-shadow:inset 3px 0 0 var(--accent),0 10px 30px rgba(0,0,0,.18)}
.cl-label{font-size:12px;font-weight:700;color:#b9cbe6;letter-spacing:.6px}
.cl-word{font-size:26px;font-weight:800;letter-spacing:.5px}
.cl-num{min-width:40px;height:40px;padding:0 8px;border-radius:10px;display:grid;place-items:center;background:var(--gold);color:#1C2026;font-weight:800;font-size:20px}
.cl-side{margin-left:auto;font-size:13px;color:#c5d4ec}
.cl-wait{font-size:14px;color:#d3e0f5}
.cluebar input{height:44px;border-radius:10px;border:0;background:rgba(255,255,255,.06);box-shadow:inset 0 2px 6px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.08);color:#fff;padding:0 14px;font:inherit;font-size:15px;transition:box-shadow .15s}
.cluebar input[id=clueWord]{flex:1;min-width:150px}
.cluebar input::placeholder,.field input::placeholder,.m-input::placeholder{color:rgba(255,255,255,.4)}
.cluebar input:focus,.field input:focus,.m-input:focus{outline:0;box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 0 0 1px var(--gold),0 0 18px rgba(242,181,68,.3)}
.field input,.m-input{border:0;background:rgba(255,255,255,.06);box-shadow:inset 0 2px 6px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.08)}
.stepper{display:inline-flex;align-items:center;height:44px;border-radius:10px;background:rgba(255,255,255,.06);box-shadow:inset 0 2px 6px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.08)}
.stepper button{width:38px;height:100%;font-size:20px;color:#dbe7fb;border-radius:10px}
.stepper button:hover{background:rgba(255,255,255,.09)}
.stepper output{min-width:36px;text-align:center;font-family:var(--display);font-size:22px;color:var(--gold)}
.cluebar.result{justify-content:space-between;border-left-width:1px;border-color:var(--gold)}
.cluebar.result .crown{color:var(--gold);font-size:28px}
.res-title{font-weight:800;font-size:20px}.res-sub{font-size:13px;color:#c5d4ec}
.board-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ---------- Ana sayfa ---------- */
.home-top{display:flex;justify-content:space-between;align-items:center;padding:18px clamp(18px,4vw,56px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:1.5px;font-size:20px;color:inherit;text-decoration:none}
.brandmark{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:var(--action);color:#2A1608}
.hero{max-width:1300px;margin:0 auto;padding:20px clamp(18px,4vw,56px) 40px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,70px);align-items:center;min-height:calc(100vh - 200px)}
.hero h1{font-size:clamp(40px,5.6vw,76px);line-height:1.02;letter-spacing:-2.5px;margin:0 0 20px;font-weight:800;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{font-size:17px;line-height:1.65;color:#c5dcf5;max-width:500px;margin:0 0 28px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.preview{background:rgba(18,24,36,.93);border:1px solid var(--navy-line);border-radius:14px;padding:14px;box-shadow:0 12px 28px rgba(0,0,0,.3)}
.mini-head{display:flex;gap:8px;margin-bottom:10px}
.mini-chip{flex:1;border-radius:7px;padding:8px 12px;font-weight:700;font-size:12px;display:flex;justify-content:space-between}
.mini-chip.red{background:var(--red)}.mini-chip.blue{background:var(--blue)}
.preview .board{gap:6px}.preview .wc{border-width:3px;border-radius:8px}
.join-card{width:min(460px,92vw);margin:0 auto 60px;background:rgba(18,24,36,.94);border:1px solid var(--navy-line);border-radius:14px;padding:24px}
.join-card h2{margin:0 0 6px;font-size:22px}.join-card p{margin:0 0 18px;color:var(--muted);font-size:14px}
.field{margin-bottom:14px}.field label{display:block;font-size:12px;font-weight:700;color:#cfdcf0;margin-bottom:7px;letter-spacing:.5px}
.field input{width:100%;height:46px;border-radius:9px;border:1px solid rgba(255,255,255,.2);background:#0D121B;color:#fff;padding:0 14px;font:inherit}
.field input.codein{text-transform:uppercase;letter-spacing:5px;text-align:center;font-weight:800}
.link{color:#bcd0ee;font-weight:600;font-size:13px;margin-bottom:12px}

/* ---------- Modal & toast ---------- */
.modal-back{position:fixed;inset:0;background:rgba(5,12,26,.6);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:18px;z-index:50}
.modal-back:not([hidden]){display:flex;animation:modal-fade .2s ease-out}
.modal-back:not([hidden]) .modal{animation:modal-in .2s cubic-bezier(.23,1,.32,1)}
@keyframes modal-fade{from{opacity:0}}
@keyframes modal-in{from{opacity:0;transform:translateY(6px) scale(.97)}}
.end-video-overlay{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.96)}
.end-video-overlay:not([hidden]){display:flex}
.end-video-frame{width:min(100%,1200px);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.end-video-frame video{display:block;width:100%;max-height:calc(100svh - 92px);object-fit:contain;background:#000;border-radius:10px}
.end-video-actions{display:flex;justify-content:center;gap:10px}
.end-video-actions .mbtn{flex:none;min-width:130px}
.modal{width:min(100%,460px);background:#121824;border:1px solid rgba(160,190,234,.25);border-radius:16px;padding:26px;box-shadow:0 30px 90px rgba(0,0,0,.45)}
.m-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:24px;background:var(--indigo);color:var(--gold);margin-bottom:14px}
.modal h2{margin:0 0 8px;font-size:22px}
.m-text{font-size:14px;line-height:1.6;color:#bccbe2;white-space:pre-line}
.m-input{width:100%;height:44px;margin-top:14px;border-radius:9px;border:1px solid rgba(255,255,255,.2);background:#0D121B;color:#fff;padding:0 14px;font:inherit}
.m-btns{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.mbtn{flex:1;min-width:110px;padding:12px 14px;border-radius:9px;font-weight:700;font-size:14px}
.mbtn.primary{background:var(--action);color:#2A1608}
.mbtn.ghost{background:rgba(255,255,255,.08);border:1px solid var(--navy-line)}
.tm-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;white-space:normal}
.tm.spectators{grid-column:1/-1}
.spectator-actions{display:flex;gap:5px;flex:none}
.full-width{width:100%}
.copy-fallback{position:fixed;opacity:0}
.tc-empty-cap{height:12px}
.end-result-heading{display:flex;align-items:center;gap:12px}
.tm h4{margin:0 0 8px;font-size:13px}
.tm div{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;background:rgba(255,255,255,.06);margin-bottom:5px;font-size:13px;color:#fff}
.tm .tm-member{justify-content:space-between;gap:8px}.tm .tm-member span{min-width:0;overflow-wrap:anywhere}.tm .tm-member small{color:var(--muted);font-size:10px}.tm .tm-member button{flex:none;border:1px solid var(--navy-line);border-radius:6px;padding:5px 7px;color:#2A1608;background:var(--action);font:inherit;font-size:11px}
.tm.red h4{color:#F08A8C}.tm.blue h4{color:var(--accent)}.tm .ic{color:var(--gold)}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#121824;border:1px solid rgba(161,192,237,.25);color:#fff;border-radius:11px;padding:12px 18px;font-size:13px;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.35);transition:opacity .22s ease-out,transform .22s ease-out;z-index:90;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.turn-video-backdrop{position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.34);opacity:0;pointer-events:none;transition:opacity .18s ease}
.turn-video-backdrop.active{opacity:1}
.turn-visual{position:fixed;z-index:86;top:50%;left:50%;width:min(38vw,460px);aspect-ratio:2400/1792;transform:translate(-50%,-50%) translateX(120vw);opacity:0;pointer-events:none;transition:opacity .24s ease,transform .32s ease}
.turn-visual canvas{display:block;width:100%;height:100%;object-fit:contain}
.turn-visual video{display:none}
.turn-visual.playing{animation:turn-visual-travel var(--turn-visual-duration,2.4s) cubic-bezier(.22,.68,.24,1) both}
@keyframes turn-visual-travel{0%{opacity:0;transform:translate(-50%,-50%) translateX(120vw)}12%{opacity:1;transform:translate(-50%,-50%) translateX(0)}78%{opacity:1;transform:translate(-50%,-50%) translateX(0)}100%{opacity:0;transform:translate(-50%,-50%) translateX(-120vw)}}
@media(max-width:700px){.turn-visual{width:min(82vw,460px)}}
.turn-fallback{position:fixed;z-index:86;top:50%;left:50%;width:max-content;max-width:calc(100vw - 32px);transform:translate(-50%,-50%) scale(.9);padding:18px 28px;border-radius:16px;font-weight:800;font-size:clamp(22px,5vw,40px);letter-spacing:.5px;color:#fff;background:var(--panel);border:2px solid rgba(255,255,255,.25);box-shadow:0 14px 40px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;text-align:center}
.turn-fallback.red{background:var(--red)}.turn-fallback.blue{background:var(--blue)}
.turn-fallback.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.turn-visual.mobile-visible{opacity:1;transform:translate(-50%,-50%);animation:none!important}
@media(prefers-reduced-motion:reduce){.turn-visual.playing{animation:none!important;opacity:1;transform:translate(-50%,-50%)}}

.tb,.timer,.logp,.cluebar,.preview,.join-card{backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 30px rgba(0,0,0,.18)}
.wc-word,.tc-title,.tc-num,.tc-sub,.brand,.hero h1,.cl-word,.cl-num,.lhead,.tname,.startbtn,.cap-pill,.t-time,.res-title,.lp-head,.tc-cap,.pname,.mbtn,.modal h2,.join-card h2,.sbtn,.cl-label,.mini-chip,.tc-turn,.ptag{font-family:var(--display);font-weight:700;letter-spacing:.04em}
.startbtn{font-family:Rubik,"Segoe UI",system-ui,sans-serif;font-weight:800;letter-spacing:.15px}
.hero h1{font-family:Rubik,"Segoe UI",system-ui,sans-serif;font-weight:800;letter-spacing:0}.tc-num{letter-spacing:0}
.center.turn-change{animation:turn-change .35s ease-out}
@keyframes turn-change{50%{filter:brightness(1.16)}}
.confetti-layer{position:absolute;z-index:55;inset:0;overflow:hidden;pointer-events:none}
.confetti-layer i{position:absolute;left:var(--x);top:-12px;width:8px;height:13px;background:var(--c,#83BFFF);border-radius:2px;animation:confetti-fall 2.6s var(--delay) ease-in forwards}
@keyframes confetti-fall{to{transform:translate(var(--drift),105vh) rotate(760deg);opacity:.15}}
/* ---------- Mobil / dar ekran ---------- */
@media(max-width:1100px){
  .room{--cols:1fr}
  .topbar{display:flex;flex-wrap:wrap;gap:8px}
  .tb{flex:1 1 auto}.tb.center{order:3;flex-basis:100%}
  .shell{grid-template-columns:1fr 1fr;grid-template-areas:"red blue" "center center" "timer timer" "log log"}
  .side{display:contents}
  .tcard.red{grid-area:red}.tcard.blue{grid-area:blue}.timer{grid-area:timer}.logp{grid-area:log;max-height:340px}.center{grid-area:center}
  .tc-num{font-size:44px}
  .hero{grid-template-columns:1fr;min-height:auto}
}
@media(max-width:700px){
  .room{padding:8px 8px 24px}
  .board{gap:5px}
.wc{aspect-ratio:1.339;border-radius:7px}
  .wc-open{top:3px;left:3px;width:clamp(18px,36cqw,24px);height:clamp(18px,36cqw,24px);min-width:18px;min-height:18px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
  .wc-open .ic{width:clamp(14px,26cqw,18px);height:clamp(14px,26cqw,18px);padding:2px;box-sizing:border-box;border:1px solid rgba(255,255,255,.78);border-radius:5px;background:#36A875;box-shadow:0 2px 5px rgba(0,0,0,.3)}
  .wc-open:not(:disabled):hover{background:transparent}
  #center .board .wc-word{height:34%;min-height:0;white-space:nowrap;overflow-wrap:normal;overflow:hidden;left:4%;right:4%;padding:2px}
  .wc-face{border-radius:6px}.wc-word{font-size:clamp(10px,12cqw,16px)}.wm{top:7%}
  .lcols{grid-template-columns:1fr;gap:16px}
  .cap-pill{font-size:12px;padding:10px 16px}
  .tc-chips span{font-size:11px;padding:3px 6px}
  .tc-title{font-size:13px}
  .cl-word{font-size:20px}.cl-side{margin-left:0;width:100%}
  .hero-actions .startbtn,.hero-actions .sbtn{flex:1}
  .home-top{padding:14px 18px}
  .hero{padding-top:14px;padding-bottom:28px;gap:22px}
  .preview{padding:10px;border-radius:12px}
  .join-card{padding:20px}
}
@media(max-width:400px){.wc-word{left:4%;right:4%;font-size:clamp(9px,11cqw,16px)}}
/* UI düzeni: kısa metinler, tutarlı kontrol yükseklikleri ve küçük ekran taşmalarını önleme */
.hero{min-height:calc(100svh - 74px);padding-top:10px;padding-bottom:28px}
.hero h1{margin-bottom:24px}
.sbtn{min-height:50px;padding:14px 20px;justify-content:center}
.join-card .link{align-self:flex-start}
.tcard{min-width:0}
.tc-title{min-width:0}
.tc-cap{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lhead{min-width:0;padding:0 8px}
.tname{min-width:0}
.prow{min-width:0}
.ptag{white-space:nowrap}
.tb.center .turnpill{max-width:100%;overflow-wrap:anywhere}
.board-actions .sbtn{min-height:42px}
.modal{max-height:calc(100svh - 36px);overflow:auto}
.home-joining .join-card{margin-top:0}
@media(max-width:700px){
  .hero{min-height:0}
  .home-joining #screen-home{display:flex;flex-direction:column}
  .home-joining .join-card{flex:1;min-height:calc(100svh - 78px);margin-bottom:12px}
  .shell{gap:8px}
  .tcard{padding:12px 8px}
  .logp{min-height:180px;max-height:38svh;padding:12px}
  .lp-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:32px}
  .logp:not(.log-open){min-height:0;max-height:none}
  .logp:not(.log-open) .lp-body{display:none}
  .logp.log-open .lp-body{max-height:30svh}
  .hero{gap:14px;padding-top:8px;padding-bottom:18px}
  .hero h1{font-size:clamp(38px,11vw,52px);margin-bottom:12px}
  .hero p{font-size:15px;line-height:1.45;margin-bottom:16px}
  .hero-actions{gap:8px}
  .hero-actions .startbtn,.hero-actions .sbtn{min-height:48px;padding:12px 14px}
  .preview{padding:8px}
  .preview .wc-word{left:3%;right:3%;padding:1px 2px;font-size:clamp(7px,8cqw,9px);letter-spacing:0}
  .issue{max-width:calc(100vw - 32px)}
}
@media(hover:none){.prm{opacity:1}}
/* ---------- Oyun içi animasyonlar ---------- */
body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .9s ease}
body::before{background:radial-gradient(ellipse 80% 55% at 50% 0%,rgba(224,87,91,.30),transparent 70%)}
body::after{background:radial-gradient(ellipse 80% 55% at 50% 0%,rgba(61,147,245,.28),transparent 70%)}
body.turn-red::before,body.turn-blue::after{opacity:1}
.board{transition:filter .6s ease}
.board.boom{filter:brightness(.42) saturate(.7);animation:board-shake .5s .45s ease-in-out}
@keyframes board-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.wc.pending{animation:card-pending .75s ease-in-out infinite}
@keyframes card-pending{50%{transform:scale(.965);filter:brightness(.9)}}
.wc.just-open .wc-front{visibility:visible}
.wc.just-open .wc-back{z-index:5;animation:card-wipe .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes card-wipe{from{clip-path:circle(0% at 50% 55%)}to{clip-path:circle(80% at 50% 55%)}}
.wc.just-open{z-index:2;animation:card-pop .55s ease-out}
.wc.just-open.res-good{animation:card-pop .55s ease-out,card-good .9s .4s ease-out}
.wc.just-open.res-bad{animation:card-pop .55s ease-out,card-shake .45s .55s ease-in-out}
.wc.just-open.res-neutral{animation:card-pop .55s ease-out,card-dim .7s .45s ease-out}
.wc.just-open.res-black{animation:card-pop .55s ease-out,card-black 1.2s .4s ease-out}
@keyframes card-pop{40%{transform:scale(1.07) translateY(-4px);box-shadow:0 14px 26px rgba(0,0,0,.4)}}
@keyframes card-good{0%{box-shadow:0 0 0 0 rgba(78,214,150,.95)}100%{box-shadow:0 0 0 16px rgba(78,214,150,0)}}
@keyframes card-shake{20%,60%{transform:translateX(-5px) rotate(-1deg)}40%,80%{transform:translateX(5px) rotate(1deg)}}
@keyframes card-dim{40%{filter:saturate(.4) brightness(.9)}}
@keyframes card-black{0%{box-shadow:0 0 0 0 rgba(0,0,0,.9)}100%{box-shadow:0 0 0 40px rgba(0,0,0,0)}}
.wc.end-reveal{animation:card-end-reveal .5s calc(.5s + var(--i,0) * 40ms) ease-out both}
@keyframes card-end-reveal{from{opacity:1;filter:grayscale(1) brightness(1.08);transform:scale(.97)}60%{opacity:.85;transform:scale(1.03)}to{opacity:.62;filter:none;transform:none}}
.wc-suggestion.chip-in{animation:chip-in .28s cubic-bezier(.3,1.5,.5,1) both}
@keyframes chip-in{from{opacity:0;transform:scale(.4)}}
.cluebar.clue-new{animation:clue-flash 1s ease-out}
@keyframes clue-flash{0%{background:rgba(131,191,255,.28)}}
.cl-letter{display:inline-block;animation:clue-letter .38s calc(var(--i) * 45ms) cubic-bezier(.3,1.4,.5,1) both}
@keyframes clue-letter{from{opacity:0;transform:translateY(-14px) scale(.8)}}
.cl-num.num-pop{animation:num-pop .45s calc(var(--i,0) * 45ms + .1s) cubic-bezier(.3,1.6,.5,1) both}
@keyframes num-pop{from{opacity:0;transform:scale(.3)}}
.tc-num.bump{animation:count-bump .5s .35s ease-out}
@keyframes count-bump{40%{transform:scale(1.28);text-shadow:0 0 18px rgba(255,255,255,.55)}}
.timer.urgent .t-time{animation:timer-urgent 1s ease-in-out infinite;color:#ff9a9a}
@keyframes timer-urgent{50%{transform:scale(1.08)}}
.startbtn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #8A4C12}
.sbtn:active:not(:disabled),.tbtn:active,.mbtn:active,.ib:active,.joinbtn:active:not(:disabled){transform:translateY(1px) scale(.98)}
.wc-open:active:not(:disabled){transform:scale(.9)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.t-time,.tc-num,.cl-num{font-variant-numeric:tabular-nums}
/* Fareyle gezinen cihazlarda hover hareketleri; dokunmatikte dokunuşta takılı kalmaz. */
@media(hover:hover){
  .startbtn:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.07)}
  .prow:hover{filter:brightness(1.35);transform:translateX(2px)}
  .wc:not(.locked):hover{transform:translateY(-3px);box-shadow:0 8px 17px rgba(0,0,0,.32)}}
/* Mobil oyun üst alanı: iki satır bar, kompakt takım kartları, süre tahtanın üstünde. */
@media(max-width:700px){
  .topbar{gap:6px;margin-bottom:8px}
  .tb{min-height:44px;padding:4px 6px}
  .tb.left{flex:1 1 0;min-width:0;gap:4px}.tb.right{flex:0 0 auto}
  .tb.left .tb-label{display:none}
  .tb.left .code{font-size:14px;letter-spacing:1px;margin-left:4px}
  .tb.center{order:3;flex-wrap:nowrap;justify-content:flex-start;gap:6px}
  .ib,.tb.left .ib{width:36px;height:36px}
  .tbtn{height:36px;font-size:0;gap:0;padding:0 10px}.tbtn .ic{font-size:17px}
  .tbtn.static{font-size:13px;gap:5px}
  .tb.right .tbtn[data-act=exit]{font-size:13px;gap:6px}
  .tb.center [data-act=zoom]{display:none}
  .tb.center .turnpill{height:36px;font-size:12px;padding:0 10px;margin-left:auto}
  .tb.center .turnpill.red,.tb.center .turnpill.blue{display:none}
  .shell{grid-template-areas:"red blue" "timer timer" "center center" "log log"}
  .tcard{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"num title" "num cap";align-items:center;text-align:left;padding:8px 12px;column-gap:12px;border-radius:12px}
  .tc-num{grid-area:num;font-size:36px;margin:0}
  .tc-title{grid-area:title;justify-content:flex-start;font-size:12px}
  .tc-sub,.tc-chips{display:none}
  .tcard .tc-turn{position:absolute!important;bottom:8px;right:8px;margin:0;font-size:9px;padding:2px 6px}
  .tc-cap{grid-area:cap;margin:4px 0 0;padding:3px 7px;font-size:11px;justify-self:start}
  .tc-empty-cap{display:none}
  .timer{padding:8px 12px;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;text-align:left}
  .timer[style*="block"]{display:grid!important}
  .t-time{margin:0;font-size:18px;order:3}
  .t-bar{order:2}
}
/* Telsiz sinyali şeridi (signal-strip.js çizer). */
.signal{position:sticky;top:0;z-index:40;display:block;height:52px;margin-bottom:10px;border-bottom:1px solid rgba(242,181,68,.28);background:rgba(20,12,8,.82);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:opacity .3s ease}
.signal canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.signal.dim{opacity:.25}
.sig-text{position:absolute;left:12px;top:6px;max-width:calc(100% - 24px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 10px/1 var(--display);letter-spacing:.12em;color:rgba(242,181,68,.8);text-shadow:0 1px 2px rgba(0,0,0,.8);pointer-events:none}
@media(max-width:700px){.signal{height:36px}.sig-text{top:4px;font-size:9px}}