@font-face { font-family: 'Fredoka'; font-weight: 300 700; font-display: swap; src: url(/radio/assets/fonts/fredoka-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: 'Fredoka'; font-weight: 300 700; font-display: swap; src: url(/radio/assets/fonts/fredoka-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
:root {
  --night: #14112f; --dusk: #2b2366; --cream: #fff3dd; --bmo: #74e0c0; --gum: #ff7ab6; --sun: #ffd54a; --red: #ff5d73; --lav: #b8a6ff;
  --soft: rgba(255,243,221,.74); --muted: rgba(255,243,221,.5); --line: rgba(255,243,221,.1); --line2: rgba(255,243,221,.18);
  --card: rgba(36,30,86,.55); --field: rgba(12,10,32,.6);
  --font: 'Fredoka', ui-rounded, 'Nunito', system-ui, sans-serif; --ease: cubic-bezier(.2,.8,.2,1); --pop: cubic-bezier(.34,1.56,.64,1);
  --tile: 54px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); color: var(--cream); line-height: 1.4; background: var(--night); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 50% at 50% 0%, rgba(116,224,192,.12), transparent 70%), radial-gradient(60% 50% at 100% 100%, rgba(255,122,182,.12), transparent 70%),
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,243,221,.8) 50%, transparent 51%), radial-gradient(1px 1px at 78% 12%, rgba(255,243,221,.6) 50%, transparent 51%), radial-gradient(1px 1px at 88% 58%, rgba(255,243,221,.5) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 32% 72%, rgba(255,243,221,.6) 50%, transparent 51%), radial-gradient(1px 1px at 60% 40%, rgba(255,243,221,.5) 50%, transparent 51%), radial-gradient(1px 1px at 6% 88%, rgba(255,243,221,.5) 50%, transparent 51%), var(--night); }
button, input { font: inherit; color: inherit; } button { cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 10px; }
[hidden] { display: none !important; }

.nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px clamp(16px, 4vw, 40px); padding-top: max(12px, env(safe-area-inset-top)); background: rgba(20,17,47,.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; color: inherit; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--sun); color: var(--night); font-weight: 700; box-shadow: 0 4px 0 var(--dusk); }
.nav-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--bmo); padding: 6px 12px; border-radius: 999px; background: rgba(116,224,192,.1); white-space: nowrap; }
.nav-r { margin-left: auto; display: flex; gap: 8px; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; background: var(--card); border: 1px solid var(--line2); font-size: 1.05rem; transition: border-color .15s, transform .15s; } .icon-btn:hover { border-color: var(--bmo); } .icon-btn:active { transform: scale(.94); }
@media (max-width: 560px) { .brand-name { display: none; } .nav-title { font-size: .9rem; } }

#app { flex: 1; display: flex; }
.screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 16px 28px; animation: screenIn .45s var(--ease); }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px); } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 16px; background: var(--sun); color: var(--night); font-weight: 700; box-shadow: 0 5px 0 #c99a1c; transition: transform .12s, box-shadow .12s, opacity .2s; }
.btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #c99a1c; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: 0 5px 0 #c99a1c; }
.btn.big { width: 100%; font-size: 1.15rem; padding: 16px 22px; }
.btn.ghost { background: var(--bmo); box-shadow: 0 5px 0 #3fa688; }
.link { margin-top: 12px; color: var(--muted); font-weight: 600; font-size: .92rem; } .link:hover { color: var(--cream); }
.eyebrow { color: var(--bmo); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; }
.hint { color: var(--soft); font-size: .92rem; text-align: center; min-height: 1.3em; margin: 14px 0 12px; }
.err { color: var(--red); font-weight: 600; min-height: 1.3em; margin-top: 10px; text-align: center; }

/* Giriş */
.home, .lobby, .end { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.logo { display: flex; gap: 6px; margin-bottom: 18px; }
.logo span { display: grid; place-items: center; width: 46px; height: 52px; border-radius: 13px; font-weight: 700; font-size: 1.6rem; color: var(--night); background: linear-gradient(180deg, #fff6e4, #ffe3a8); box-shadow: 0 5px 0 #d4a64a, 0 10px 20px rgba(0,0,0,.3); animation: bob 2.6s var(--ease) infinite; }
.logo span:nth-child(2n) { background: linear-gradient(180deg, #c7fff0, #74e0c0); box-shadow: 0 5px 0 #3fa688, 0 10px 20px rgba(0,0,0,.3); }
.logo span:nth-child(3n) { background: linear-gradient(180deg, #ffd6ea, #ff9cc8); box-shadow: 0 5px 0 #d45d95, 0 10px 20px rgba(0,0,0,.3); }
.logo span:nth-child(1) { animation-delay: 0s; --r: -6deg; } .logo span:nth-child(2) { animation-delay: .12s; --r: 4deg; } .logo span:nth-child(3) { animation-delay: .24s; --r: -3deg; } .logo span:nth-child(4) { animation-delay: .36s; --r: 6deg; } .logo span:nth-child(5) { animation-delay: .48s; --r: -5deg; } .logo span:nth-child(6) { animation-delay: .6s; --r: 3deg; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-8px) rotate(calc(var(--r, 0deg) * -1)); } }
h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.05; } h1 em { font-style: normal; color: var(--gum); }
.lead { color: var(--soft); margin: 10px 0 16px; font-size: 1.05rem; } .lead b { color: var(--sun); }
.demo { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 600; margin-bottom: 22px; }
.demo-a { color: var(--gum); letter-spacing: .06em; } .demo-b { color: var(--bmo); } .demo-arrow { color: var(--muted); }
.field { width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left; margin-bottom: 14px; }
.field span { font-size: .85rem; color: var(--soft); font-weight: 600; padding-left: 4px; }
.field input, .join input { width: 100%; padding: 14px 16px; border-radius: 16px; background: var(--field); border: 1.5px solid var(--line2); font-size: 1.08rem; font-weight: 600; outline: none; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .join input:focus { border-color: var(--bmo); box-shadow: 0 0 0 4px rgba(116,224,192,.15); }
.or { width: 100%; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; margin: 20px 0 12px; } .or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line2); }
.join { width: 100%; display: flex; gap: 10px; } .join input { text-transform: uppercase; letter-spacing: .3em; text-align: center; } .join .btn { flex: none; }

/* Lobi */
.code { margin: 6px 0 20px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 26px; border-radius: 22px; background: var(--card); border: 1.5px dashed var(--line2); transition: border-color .15s, transform .15s; }
.code:hover { border-color: var(--sun); transform: translateY(-2px); }
.code span { font-size: clamp(2.4rem, 10vw, 3.2rem); font-weight: 700; letter-spacing: .22em; color: var(--sun); line-height: 1.1; padding-left: .22em; }
.code small { color: var(--soft); font-weight: 600; }
.seats { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); animation: pop .4s var(--pop); }
.seat .av { width: 56px; height: 56px; font-size: 1.5rem; }
.seat b { font-size: 1.05rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seat small { color: var(--muted); font-size: .8rem; }
.seat.wait { border-style: dashed; color: var(--muted); } .seat.wait .av { background: var(--field); color: var(--muted); animation: pulse 1.4s ease-in-out infinite; }
.seat .tag { position: absolute; top: 8px; right: 10px; font-size: .7rem; font-weight: 700; color: var(--sun); }
@keyframes pulse { 50% { transform: scale(.92); opacity: .6; } }
@keyframes pop { from { transform: scale(.8); opacity: 0; } }
.av { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; font-style: normal; font-weight: 700; color: var(--night); background: var(--bmo); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.av.b { background: var(--gum); }
.settings { width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); text-align: left; }
.set > span { display: block; font-size: .82rem; color: var(--soft); font-weight: 600; margin-bottom: 6px; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--field); }
.seg button { flex: 1; padding: 9px 4px; border-radius: 10px; font-weight: 600; font-size: .92rem; color: var(--soft); transition: background .2s, color .2s, transform .12s; white-space: nowrap; }
.seg button:hover { color: var(--cream); } .seg button.on { background: var(--sun); color: var(--night); box-shadow: 0 3px 0 #c99a1c; }
.settings.ro .seg button { cursor: default; } .settings.ro .seg button:not(.on) { opacity: .55; }
@media (max-width: 400px) { .seg button { font-size: .8rem; } }

/* Oyun */
#sGame { justify-content: flex-start; gap: 14px; max-width: 900px; width: 100%; margin: 0 auto; position: relative; }
.hud { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.pl { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 20px; background: var(--card); border: 1.5px solid var(--line); min-width: 0; transition: border-color .3s, transform .3s; }
.pl.r { flex-direction: row-reverse; text-align: right; }
.pl > div { display: flex; flex-direction: column; min-width: 0; }
.pl .nm { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl .sc { font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--sun); }
.pl.me { border-color: rgba(116,224,192,.5); } .pl.off { opacity: .5; }
.pl.bump { animation: bump .6s var(--pop); } .pl.bump .sc { color: var(--bmo); }
@keyframes bump { 30% { transform: scale(1.08); } }
.mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.vs { font-weight: 700; color: var(--gum); font-size: 1.1rem; } .round { font-size: .8rem; color: var(--soft); font-weight: 600; white-space: nowrap; }
.timer { position: relative; width: 100%; height: 14px; border-radius: 999px; background: var(--field); overflow: hidden; border: 1px solid var(--line); }
.timer i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--bmo), var(--sun)); transform-origin: left; }
.timer.low i { background: linear-gradient(90deg, var(--red), #ff9b5d); animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .6; } }
.timer span { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: .7rem; font-weight: 700; color: var(--night); }
.stage { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 220px; }
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px calc(var(--tile) * .45); }
.word { display: flex; gap: calc(var(--tile) * .12); }
.tile { position: relative; display: grid; place-items: center; width: var(--tile); height: calc(var(--tile) * 1.12); border-radius: calc(var(--tile) * .24); font-size: calc(var(--tile) * .58); font-weight: 700; color: var(--night); text-transform: lowercase;
  background: linear-gradient(180deg, #fff8ea, #ffe2a6); box-shadow: 0 calc(var(--tile) * .1) 0 #d4a64a, 0 12px 24px rgba(0,0,0,.35);
  animation: drop .55s var(--pop) both; animation-delay: calc(var(--i) * 45ms); transition: transform .7s var(--pop), background .4s, box-shadow .4s; }
.tile::after { content: ''; position: absolute; inset: 4px 6px auto; height: 30%; border-radius: 999px; background: rgba(255,255,255,.45); }
@keyframes drop { from { opacity: 0; transform: translateY(-40px) rotate(var(--rot, 8deg)) scale(.6); } }
.tiles.wiggle .tile { animation: drop .55s var(--pop) both, wig 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * 45ms), calc(var(--i) * -170ms); }
@keyframes wig { 0%, 100% { rotate: 0deg; } 25% { rotate: -3deg; } 75% { rotate: 3deg; } }
.tiles.solved .tile { background: linear-gradient(180deg, #d4fff2, #74e0c0); box-shadow: 0 calc(var(--tile) * .1) 0 #3fa688, 0 12px 24px rgba(0,0,0,.35); }
.tiles.missed .tile { background: linear-gradient(180deg, #ffe0e6, #ff9cae); box-shadow: 0 calc(var(--tile) * .1) 0 #c9566b, 0 12px 24px rgba(0,0,0,.35); }
.banner { min-height: 2.2em; font-size: clamp(1.1rem, 4vw, 1.5rem); font-weight: 700; text-align: center; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .4s var(--pop); }
.banner.on { opacity: 1; transform: none; } .banner.win { color: var(--bmo); } .banner.lose { color: var(--gum); } .banner.none { color: var(--soft); }
.banner small { display: block; font-size: .8rem; color: var(--muted); font-weight: 600; }
.opp { font-size: .95rem; color: var(--soft); padding: 6px 14px; border-radius: 999px; background: rgba(255,122,182,.1); opacity: 0; transition: opacity .2s; min-height: 1.4em; } .opp.on { opacity: 1; } .opp .opp-n { color: var(--gum); font-weight: 600; }
.dots { display: inline-flex; gap: 3px; vertical-align: middle; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--gum); animation: pop .2s var(--pop); }
.answer { width: 100%; max-width: 560px; display: flex; gap: 10px; padding-bottom: env(safe-area-inset-bottom); }
.answer input { flex: 1; min-width: 0; padding: 16px 18px; border-radius: 18px; background: var(--field); border: 2px solid var(--line2); font-size: 1.3rem; font-weight: 600; outline: none; text-align: center; letter-spacing: .04em; transition: border-color .15s, box-shadow .15s; }
.answer input:focus { border-color: var(--bmo); box-shadow: 0 0 0 4px rgba(116,224,192,.15); }
.answer input:disabled { opacity: .5; }
.answer .btn { width: 62px; font-size: 1.3rem; padding: 0; }
.answer.shake { animation: shake .4s; } .answer.shake input { border-color: var(--red); }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.count { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(20,17,47,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.count span { font-size: clamp(6rem, 30vw, 11rem); font-weight: 700; color: var(--sun); text-shadow: 0 10px 0 var(--dusk); animation: cnt .8s var(--pop) both; }
@keyframes cnt { 0% { transform: scale(2.2); opacity: 0; } 40% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: .9; } }

/* Sonuç */
.crown { font-size: 4rem; animation: crown 1.6s var(--ease) infinite; } .crown.tie { filter: grayscale(.2); }
@keyframes crown { 50% { transform: translateY(-10px) rotate(-6deg); } }
.end h2 { font-size: clamp(1.7rem, 6vw, 2.3rem); margin: 4px 0 16px; }
.final { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.final > div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: 22px; background: var(--card); border: 1.5px solid var(--line); animation: pop .5s var(--pop) both; }
.final > div:nth-child(2) { animation-delay: .12s; }
.final .win { border-color: var(--sun); box-shadow: 0 0 0 4px rgba(255,213,74,.12); }
.final b { font-size: 1rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .final strong { font-size: 2.6rem; line-height: 1; color: var(--sun); }
.hist { width: 100%; list-style: none; margin-top: 16px; max-height: 32vh; overflow: auto; border-radius: 18px; background: var(--card); border: 1px solid var(--line); text-align: left; }
.hist li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: .92rem; } .hist li:last-child { border-bottom: 0; }
.hist li span { color: var(--muted); } .hist li.me span { color: var(--bmo); font-weight: 600; } .hist li.op span { color: var(--gum); font-weight: 600; }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 3px; animation: fall var(--d, 2.4s) cubic-bezier(.25,.6,.4,1) forwards; }
@keyframes fall { to { transform: translate(var(--x), 110vh) rotate(var(--r)); opacity: .9; } }
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; padding: 12px 18px; border-radius: 14px; background: #fff3dd; color: var(--night); font-weight: 600; transition: opacity .25s, transform .25s; z-index: 60; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.conn { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 45; padding: 8px 14px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 600; font-size: .88rem; }
@media (max-width: 560px) { .pl { padding: 8px 10px; gap: 8px; } .pl .av { width: 34px; height: 34px; font-size: .9rem; } .pl .sc { font-size: 1.4rem; } .pl .nm { font-size: .82rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ─── 2. sürüm: dolu dolu giriş, lobi, oyun ve sonuç ─── */
.floaty { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.floaty span { position: absolute; bottom: -80px; font-weight: 700; color: rgba(255,243,221,.06); font-size: var(--s, 3rem); animation: rise var(--d, 22s) linear infinite; animation-delay: var(--dl, 0s); }
@keyframes rise { to { transform: translateY(-120vh) rotate(var(--r, 40deg)); } }

/* Giriş: iki sütun */
.home { max-width: 1040px; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; text-align: left; }
.home-l { display: flex; flex-direction: column; align-items: flex-start; }
.home-l .logo { margin-bottom: 14px; }
.home-l .lead { margin: 10px 0 18px; }
.demo { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border-radius: 22px; margin-bottom: 18px; }
.demo-tiles { display: flex; flex-wrap: wrap; gap: 4px 14px; min-height: 44px; --tile: 34px; }
.demo-tiles .tile { animation: none; cursor: default; transition: transform .6s var(--pop), background .4s, box-shadow .4s; }
.demo-tiles.solved .tile { background: linear-gradient(180deg, #d4fff2, #74e0c0); box-shadow: 0 3px 0 #3fa688, 0 8px 16px rgba(0,0,0,.3); }
.demo-cap { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gum); transition: color .3s; } .demo-cap.ok { color: var(--bmo); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-bottom: 16px; }
.steps li { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); transition: transform .2s var(--pop), border-color .2s; }
.steps li:hover { transform: translateY(-3px) rotate(-1deg); border-color: var(--line2); }
.steps i { font-style: normal; font-size: 1.4rem; } .steps b { font-size: .95rem; } .steps span { font-size: .78rem; color: var(--muted); }
.mystats { display: flex; flex-wrap: wrap; gap: 8px; } .mystats:empty { display: none; }
.mystats span { padding: 6px 12px; border-radius: 999px; background: rgba(255,213,74,.1); color: var(--sun); font-weight: 600; font-size: .85rem; }
.panel { position: relative; display: flex; flex-direction: column; align-items: center; padding: 132px clamp(18px, 3vw, 28px) 24px; margin-top: 110px; border-radius: 30px; text-align: center;
  background: radial-gradient(120% 70% at 50% 0%, rgba(116,224,192,.16), transparent 60%), linear-gradient(170deg, #2e2670, #1c1747 75%); border: 1px solid var(--line2); box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.panel .char-host { position: absolute; left: 50%; top: -140px; width: 250px; height: 262px; transform: translateX(-50%); pointer-events: none; }
.char-host canvas { display: block; width: 100%; height: 100%; }
.char-host.no3d { display: none; }
.panel-t { font-weight: 600; color: var(--soft); font-size: .9rem; margin-bottom: 8px; }
.avs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; margin-bottom: 14px; }
.avs button { aspect-ratio: 1; border-radius: 14px; font-size: 1.45rem; background: var(--field); border: 2px solid transparent; transition: transform .18s var(--pop), border-color .15s, background .15s; }
.avs button:hover { transform: translateY(-3px) scale(1.06); }
.avs button[aria-checked="true"] { border-color: var(--sun); background: rgba(255,213,74,.14); transform: scale(1.08); animation: wob .5s var(--pop); }
@keyframes wob { 40% { transform: scale(1.18) rotate(-8deg); } }
.name-row { display: flex; gap: 8px; } .name-row input { flex: 1; min-width: 0; }
.dice { flex: none; width: 54px; border-radius: 16px; background: var(--field); border: 1.5px solid var(--line2); font-size: 1.4rem; transition: transform .3s var(--pop); } .dice:hover { transform: rotate(20deg) scale(1.08); } .dice.roll { animation: roll .5s var(--pop); }
@keyframes roll { to { transform: rotate(360deg); } }
.btn span { font-size: 1.2em; }
.shine { position: relative; overflow: hidden; } .shine::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 60%, 100% { left: 130%; } }
@media (max-width: 860px) {
  .home { grid-template-columns: 1fr; max-width: 480px; text-align: center; }
  .home-l { align-items: center; } .demo { align-items: center; } .mystats { justify-content: center; }
  .panel { margin-top: 120px; }
}
@media (max-width: 420px) { .steps span { display: none; } .logo span { width: 40px; height: 46px; font-size: 1.35rem; } }

/* Lobi */
.lobby { max-width: 520px; }
.code-card { width: 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; }
.code { margin: 6px 0 10px; }
.share-row, .end-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line2); font-weight: 600; font-size: .9rem; color: var(--cream); text-decoration: none; transition: transform .15s var(--pop), border-color .15s, background .15s; }
.chip:hover { transform: translateY(-2px); border-color: var(--bmo); } .chip:active { transform: scale(.95); }
.chip.wa:hover { border-color: #25d366; } .chip:disabled { opacity: .4; pointer-events: none; }
.seats { position: relative; }
.seats::after { content: 'VS'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--gum); color: var(--night); font-weight: 700; box-shadow: 0 4px 0 #c24d86; }
.seat .av { font-size: 1.9rem; width: 64px; height: 64px; }
.seat:not(.wait) .av { animation: bob 2.4s var(--ease) infinite; }
.presets { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.presets button { padding: 9px 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line2); font-weight: 600; font-size: .85rem; transition: transform .15s var(--pop), border-color .15s; }
.presets button:hover { transform: translateY(-2px); border-color: var(--sun); } .presets button.on { border-color: var(--sun); color: var(--sun); background: rgba(255,213,74,.1); }
.presets.ro { display: none; }
.warm { width: 100%; margin-top: 14px; padding: 14px; border-radius: 22px; background: linear-gradient(160deg, rgba(255,122,182,.14), var(--card)); border: 1px solid var(--line); animation: pop .4s var(--pop); }
.warm-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .warm-h span { color: var(--sun); font-weight: 600; font-size: .85rem; }
.warm-q { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; --tile: 34px; margin-bottom: 10px; min-height: 40px; }
.warm-f { display: flex; gap: 8px; } .warm-f input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 14px; background: var(--field); border: 1.5px solid var(--line2); font-weight: 600; outline: none; text-align: center; } .warm-f input:focus { border-color: var(--gum); }
#startBtn.ready { animation: ready 1.4s ease-in-out infinite; } @keyframes ready { 50% { transform: scale(1.03); box-shadow: 0 5px 0 #c99a1c, 0 0 0 8px rgba(255,213,74,.15); } }

/* Emoji tepkileri */
.emobar { display: flex; justify-content: center; gap: 6px; margin: 10px 0 4px; flex-wrap: wrap; }
.emobar button { width: 40px; height: 40px; border-radius: 12px; font-size: 1.25rem; background: var(--card); border: 1px solid var(--line); transition: transform .15s var(--pop), background .15s; }
.emobar button:hover { transform: translateY(-3px) scale(1.12); background: rgba(255,243,221,.08); } .emobar button:active { transform: scale(.9); }
.emofly { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
.emofly span { position: absolute; bottom: 90px; font-size: 2.6rem; animation: emo 2.2s cubic-bezier(.2,.7,.3,1) forwards; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.emofly span small { display: block; font-size: .75rem; font-weight: 700; text-align: center; color: var(--cream); background: rgba(20,17,47,.8); border-radius: 999px; padding: 2px 8px; margin-top: -4px; }
@keyframes emo { 0% { transform: translateY(40px) scale(.3); opacity: 0; } 15% { transform: translateY(0) scale(1.2); opacity: 1; } 30% { transform: translateY(-30px) scale(1); } 100% { transform: translateY(-46vh) translateX(var(--dx, 0)) scale(.9) rotate(var(--rr, 10deg)); opacity: 0; } }

/* Oyun */
.pl { position: relative; }
.pl .av { font-size: 1.35rem; }
.streak { position: absolute; top: -10px; right: 12px; font-style: normal; font-weight: 700; font-size: .78rem; padding: 2px 8px; border-radius: 999px; background: linear-gradient(90deg, #ff7a3d, #ffd54a); color: var(--night); box-shadow: 0 3px 10px rgba(255,122,61,.4); opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s var(--pop); }
.pl.r .streak { right: auto; left: 12px; } .streak.on { opacity: 1; transform: none; animation: flame 1s ease-in-out infinite; }
@keyframes flame { 50% { transform: scale(1.08) rotate(-3deg); } }
.pips { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.pips i { width: 12px; height: 12px; border-radius: 50%; background: var(--field); border: 1px solid var(--line2); transition: background .3s, transform .3s var(--pop); }
.pips i.cur { border-color: var(--sun); transform: scale(1.25); animation: pulse 1.2s ease-in-out infinite; }
.pips i.me { background: var(--bmo); border-color: var(--bmo); } .pips i.op { background: var(--gum); border-color: var(--gum); } .pips i.none { background: rgba(255,243,221,.25); }
.tiles .tile { cursor: pointer; user-select: none; -webkit-user-select: none; }
.tiles .tile:hover { filter: brightness(1.06); }
.tile.used { opacity: .28; scale: .9; filter: grayscale(.5); }
.tiles.solved .tile.used, .tiles.missed .tile.used { opacity: 1; scale: 1; filter: none; }
.tile.hl { box-shadow: 0 calc(var(--tile) * .1) 0 #c99a1c, 0 0 0 3px var(--sun), 0 12px 24px rgba(0,0,0,.35); }
.hintline { min-height: 1.5em; font-weight: 600; color: var(--sun); font-size: .95rem; } .hintline:empty { visibility: hidden; }
.tools { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.tool { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line2); font-weight: 600; font-size: .9rem; transition: transform .15s var(--pop), border-color .15s, opacity .2s; }
.tool:hover { transform: translateY(-2px); border-color: var(--bmo); } .tool:active { transform: scale(.94); } .tool:disabled { opacity: .35; pointer-events: none; }
.tool b { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; background: var(--sun); color: var(--night); font-size: .75rem; padding: 0 5px; }
.count small { position: absolute; bottom: 22%; left: 0; right: 0; text-align: center; color: var(--soft); font-weight: 600; font-size: 1rem; }

/* Sonuç */
.end { max-width: 520px; }
.end-sub { color: var(--soft); margin: -10px 0 14px; }
.final > div { position: relative; }
.final .av { width: 60px; height: 60px; font-size: 1.8rem; }
.final small { color: var(--muted); font-size: .8rem; }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; } .badges:empty { display: none; }
.badges span { padding: 7px 12px; border-radius: 999px; background: rgba(116,224,192,.1); color: var(--bmo); font-weight: 600; font-size: .85rem; animation: pop .5s var(--pop) both; }
.badges span:nth-child(2) { animation-delay: .1s; } .badges span:nth-child(3) { animation-delay: .2s; }
.hist li em { font-style: normal; color: var(--muted); font-size: .8rem; margin-left: 6px; }
.end-row { margin-top: 12px; }

.dlg { margin: auto; width: min(520px, calc(100% - 32px)); border: 1px solid var(--line2); border-radius: 26px; padding: 22px; background: #221c55; color: var(--cream); }
.dlg::backdrop { background: rgba(10,8,30,.65); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dlg h2 { margin-bottom: 12px; } .dlg ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; color: var(--soft); } .dlg b { color: var(--cream); } .dlg em { color: var(--gum); font-style: normal; font-weight: 600; }
@media (max-width: 860px) {
  .home { justify-items: center; gap: 0; }
  .home-l { display: contents; }
  .home-l .logo { order: 1; } .home h1 { order: 2; } .home-l .lead { order: 3; margin-bottom: 0; }
  .panel { order: 4; width: 100%; margin: 120px 0 22px; padding-top: 112px; }
  .panel .char-host { top: -118px; width: 210px; height: 222px; }
  .demo { order: 5; } .steps { order: 6; } .mystats { order: 7; }
}