:root{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#eaf1ff;background:#0a1022}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 15% 12%,#1d315b 0,transparent 35%),radial-gradient(circle at 90% 85%,#24345b 0,transparent 35%),#0a1022;min-height:100vh}.shell{max-width:1240px;margin:auto;padding:26px 22px}header{display:flex;justify-content:space-between;align-items:center;padding:8px 0 46px}.brand{font-size:22px;font-weight:900;letter-spacing:2px}.brand span{color:#69ebba}.tag,small{color:#96a8c7;font-size:12px}.entry{display:grid;grid-template-columns:1.15fr .85fr;gap:65px;align-items:center;min-height:68vh}.eyebrow{color:#68eab8;letter-spacing:4px;font-size:12px;font-weight:800}h1{font-size:clamp(40px,5vw,72px);line-height:1.1;letter-spacing:-3px;margin:20px 0}h1 em{font-style:normal;color:#69ebba}.hero p{color:#aebcd5;max-width:540px;font-size:18px;line-height:1.7}.steps{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}.steps span,.round span,.topline{border:1px solid #344363;border-radius:14px;padding:11px 15px;background:#15213b}.card{border:1px solid #344363;background:#121d34e8;box-shadow:0 20px 60px #05091355;border-radius:24px;padding:28px}h2{margin:0 0 22px;font-size:22px}h3{font-size:15px;margin:28px 0 12px}label{display:block;color:#aebcd5;font-size:13px;margin:18px 0}input,select{width:100%;background:#0b1428;border:1px solid #394865;border-radius:12px;padding:14px 15px;color:white;font:inherit;outline:none;margin-top:8px}input:focus,select:focus{border-color:#69ebba}button{border:1px solid #4d6486;background:#1b2c49;color:#edf7ff;padding:13px 17px;border-radius:12px;font:inherit;font-weight:700;cursor:pointer}button:hover{filter:brightness(1.15)}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:#69ebba;border-color:#69ebba;color:#09251e}.buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.divider{text-align:center;color:#899bb7;font-size:12px;margin:23px 0 13px}.join,.guess,.chatForm{display:flex;gap:8px}.join input,.guess input,.chatForm input{margin:0;min-width:0}.lobby{display:grid;gap:8px;color:#91a2bd}.lobby button{text-align:left;display:flex;justify-content:space-between}.topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.topline strong{font-size:23px;letter-spacing:4px;margin:0 14px}.link{background:none;border:none;color:#69ebba;padding:7px}.grid{display:grid;grid-template-columns:1.45fr 1fr;gap:20px}.play{text-align:center;min-height:500px;display:flex;flex-direction:column;align-items:stretch}.round{display:flex;justify-content:space-between;gap:8px}.round span{font-size:13px}.hint{margin-top:72px;color:#aebcd5;font-size:18px}.mask{font-size:clamp(28px,5vw,58px);letter-spacing:10px;font-weight:900;min-height:110px;margin:25px 0;word-break:break-word}.result{color:#69ebba;min-height:38px}.guess{margin-top:auto}.start{margin-top:14px}aside{display:grid;gap:20px;align-content:start}.scores{min-height:190px}.player{display:flex;justify-content:space-between;border-bottom:1px solid #293951;padding:12px 0}.player:first-child{color:#69ebba}.socialTitle{display:flex;justify-content:space-between;align-items:start;gap:8px}.socialTitle h2{font-size:19px}.socialTitle button{font-size:12px;padding:9px}.chat{height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin-bottom:12px}.bubble{background:#1c2c48;padding:9px 12px;border-radius:12px;overflow-wrap:anywhere}.bubble b{color:#69ebba;margin-right:8px}.chatForm button{padding:10px}.social small{display:block;margin-top:10px}footer{text-align:center;color:#637591;font-size:12px;margin-top:48px}@media(max-width:800px){header{padding-bottom:26px}.entry,.grid{grid-template-columns:1fr;gap:24px}.entry{min-height:0}.hero{padding:15px 0}.hero p{font-size:16px}.steps{margin-top:20px}.card{padding:20px}.play{min-height:390px}.hint{margin-top:45px}.mask{letter-spacing:5px;min-height:80px;margin:15px 0}.topline{flex-wrap:wrap;gap:12px}.buttons{grid-template-columns:1fr}}
#matrix{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}#matrix span{position:absolute;top:-12%;color:#55eab0;font-size:12px;font-weight:800;letter-spacing:3px;writing-mode:vertical-rl;text-shadow:0 0 12px #6efac1;animation:fall linear infinite,glow 3s ease-in-out infinite alternate}@keyframes fall{to{transform:translateY(125vh)}}@keyframes glow{0%,45%{opacity:.04}65%,100%{opacity:.35}}.shell{position:relative;z-index:1}.brand{text-decoration:none;color:#eaf1ff}.brand:hover{color:#fff}.steps button{font-size:13px;padding:10px 14px}.potential{color:#69ebba;margin-top:12px;font-weight:700}.hint{margin-top:48px}.emojiBar{display:flex;gap:5px;margin:6px 0}.emojiBar button{background:transparent;border:0;padding:4px;font-size:19px}.lobby{color:#69ebba;font-weight:800}#authStatus{font-size:12px;color:#69ebba;min-height:18px}#signedIn{padding:12px 0}dialog{background:#121d34;color:#eaf1ff;border:1px solid #4a6487;border-radius:20px;padding:24px;width:min(500px,92vw);max-height:75vh;overflow:auto;box-shadow:0 30px 90px #0009}dialog::backdrop{background:#050a18c9}.dialogHead{display:flex;justify-content:space-between;align-items:center}.dialogHead h2{margin:0 0 15px}.dialogHead button{padding:5px 10px}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){#matrix span{animation:none}}
.shell{padding:16px 22px}header{padding:4px 0 14px}.entry{min-height:calc(100dvh - 105px);gap:clamp(22px,4vw,60px);grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);align-items:center}.hero h1{font-size:clamp(36px,4vw,60px);margin:10px 0 12px;line-height:1.06}.hero p{font-size:15px;line-height:1.5;margin:0}.steps{margin:18px 0 0;gap:7px}.steps span,.steps button{font-size:12px;padding:9px 11px}.playSetup{margin-top:22px;padding:18px 20px;max-width:620px}.playSetup h2{font-size:18px;margin:0}.playSetup label{margin:10px 0}.playSetup select{margin-top:5px;padding:10px}.playSetup .buttons{margin:8px 0 0}.playSetup button{padding:10px}.joinBlock{display:flex;align-items:center;gap:14px;margin-top:12px}.joinBlock>span{color:#aebcd5;font-size:12px;white-space:nowrap}.join{flex:1}.join input{padding:10px}.openCount{display:flex;justify-content:space-between;align-items:center;color:#aebcd5;margin-top:12px;font-size:13px}.accountCard{width:100%;max-width:420px;justify-self:end;padding:24px}.accountCard h2{margin-bottom:14px}.authTabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#09152b;padding:5px;border-radius:14px}.authTabs button{border:0;background:transparent;color:#aabbd4;padding:10px}.authTabs button.active{background:#294967;color:white;box-shadow:0 2px 10px #0004}.accountCard form label{margin:13px 0}.accountCard form input{margin-top:6px;padding:11px}.accountCard .full{margin-top:8px}.full{width:100%}.accountCard small{font-size:11px}footer{margin-top:8px}.noticeIcon{width:54px;height:54px;display:grid;place-items:center;border-radius:17px;background:#214b49;color:#69ebba;font-size:29px;font-weight:800;margin-bottom:15px}#noticeDialog{width:min(390px,92vw);text-align:left;padding:27px}#noticeDialog h2{margin:0 0 8px}#noticeDialog p{color:#b4c3db;line-height:1.55;margin:0 0 20px;overflow-wrap:anywhere}#noticeDialog.error .noticeIcon{color:#ffc5b9;background:#55313a}#noticeDialog.success .noticeIcon{color:#69ebba;background:#215044}@media(max-width:800px){.shell{padding:18px}.entry{grid-template-columns:1fr;gap:20px;min-height:0}.hero h1{font-size:clamp(38px,9vw,60px)}.accountCard{justify-self:stretch;max-width:none}.playSetup{max-width:none}.joinBlock{flex-wrap:wrap}.join{width:100%}}@media(min-width:801px) and (max-height:720px){.hero h1{font-size:clamp(33px,3.2vw,49px)}.hero p{font-size:14px}.steps{margin-top:12px}.playSetup{margin-top:13px;padding:14px 18px}.accountCard{padding:18px}.entry{min-height:calc(100dvh - 88px)}header{padding-bottom:8px}}@media(max-height:570px){.entry{min-height:0}}
.roomActions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.roomActions button{padding:8px 12px;font-size:13px}.countdown{margin:22px auto 0;background:#173d3d;border:1px solid #52c99f;border-radius:20px;min-width:180px;padding:13px 28px;display:grid;gap:1px}.countdown span{font-size:48px;line-height:1;font-weight:900;color:#69ebba}.countdown small{color:#d0e7df;letter-spacing:1px}.gameControls{display:flex;gap:10px;justify-content:center;margin-top:14px}.gameControls button{margin:0;flex:1}#privateDialog p{color:#b4c3db}#privateDialog label{margin:15px 0}#privateDialog .full{margin-top:10px}.social .chat{height:190px}@media(max-width:800px){.topline{align-items:flex-start}.roomActions{width:100%;justify-content:space-between}.play{min-height:380px}.countdown{margin-top:14px}.hint{margin-top:25px}}
body{background:radial-gradient(circle at 12% 10%,#2454a0 0,transparent 35%),radial-gradient(circle at 88% 80%,#194d91 0,transparent 38%),#071329}.card{background:#102343eb;border-color:#3a6396;box-shadow:0 18px 55px #02091577}.topline,.round span,.steps span{background:#18365e;border-color:#4375ac}input,select{background:#0b2345;border-color:#4c75a3}input:focus,select:focus{border-color:#58c5ff;box-shadow:0 0 0 3px #39a8ff2c}button:not(.primary):not(.link){background:#1c416e;border-color:#507bb0}.primary{background:linear-gradient(135deg,#55dddb,#55b9ff);border-color:#65d9f2;color:#062437}#matrix span{color:#68bbff;text-shadow:0 0 16px #2d9dff;opacity:.14}#matrix .leaderName{position:absolute;writing-mode:horizontal-tb;max-width:18vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:900;font-size:clamp(14px,1.9vw,26px);letter-spacing:1px;color:#92d9ff;text-shadow:0 0 10px #1faaff,0 0 26px #298cff;animation:leaderGlow 6s ease-in-out infinite alternate;opacity:.06}@keyframes leaderGlow{0%,22%{opacity:.05;filter:blur(2px)}50%,75%{opacity:.52;filter:blur(0)}100%{opacity:.12;filter:blur(1px)}}@media(prefers-reduced-motion:reduce){#matrix .leaderName{animation:none;opacity:.28}}
@media (max-width: 800px) {
	body { overflow-x: hidden; }
	#matrix { display: none; }
	.shell { padding: 12px 14px calc(20px + env(safe-area-inset-bottom)); }
	header { padding-bottom: 18px; }
	.entry { display: block; min-height: auto; }
	.hero h1 { font-size: clamp(34px, 11vw, 52px); letter-spacing: -1px; }
	.hero p { font-size: 14px; }
	.steps { margin-top: 16px; }
	.steps span, .steps button { flex: 1 1 calc(50% - 7px); text-align: center; }
	.playSetup, .accountCard { max-width: none; margin-top: 18px; padding: 18px; }
	.buttons { grid-template-columns: 1fr; }
	.joinBlock { display: block; }
	.joinBlock > span { display: block; margin-bottom: 7px; }
	.join { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
	.topline { display: grid; gap: 12px; padding: 12px; }
	.roomActions { justify-content: stretch; }
	.roomActions > * { min-width: 0; }
	.roomActions button { flex: 1; }
	.grid { grid-template-columns: 1fr; }
	.play { min-height: 0; }
	.round { flex-wrap: wrap; }
	.guess { grid-template-columns: minmax(0, 1fr) auto; }
	aside { display: grid; gap: 16px; }
	.social .chat { height: 160px; }
	footer { padding-bottom: env(safe-area-inset-bottom); }
}

@media (max-width: 420px) {
	.brand { font-size: 18px; letter-spacing: 1px; }
	.round span { padding: 9px 10px; }
	.guess { grid-template-columns: 1fr; }
	.guess button { width: 100%; }
	.roomActions { display: grid; grid-template-columns: 1fr; }
}
/* Oyun alanında sıralama kelimenin yanında; sohbet hemen oyun kartının altında. */
@media (max-width: 800px) {
  #game .topline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 9px;padding:7px 10px;margin-bottom:9px}
  #game .topline small{font-size:9px}
  #game .topline strong{font-size:16px;letter-spacing:2px;margin:0 5px}
  #game .topline .link{font-size:11px;padding:3px}
  #game .roomActions{display:flex;width:auto;align-items:center;gap:5px}
  #game .roomActions span{font-size:10px;color:#a9c9ed}
  #game .roomActions button{flex:none;padding:6px 8px;font-size:10px}
  #game .grid{position:relative;display:block}
  #game .play{min-height:340px;padding:14px;overflow:hidden}
  #game .round{width:calc(100% - 128px);justify-content:flex-start;gap:4px}
  #game .round span{padding:5px 7px;font-size:10px}
  #game .hint{margin-top:65px;font-size:14px}
  #game .mask{font-size:clamp(23px,7vw,38px);min-height:54px;margin:10px 0;letter-spacing:4px}
  #game .result{font-size:12px;min-height:27px}
  #game .potential{font-size:12px;margin-top:5px}
  #game .scores{position:absolute;top:8px;right:8px;width:124px;max-height:145px;min-height:0;overflow:auto;padding:8px;z-index:2;border-radius:13px;box-shadow:0 8px 20px #010b2280}
  #game .scores h2{font-size:11px;margin:0 0 3px}
  #game .scores .player{font-size:10px;padding:3px 0;gap:3px}
  #game .scores .player span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #game .scores .player strong{white-space:nowrap}
  #game .scores .leadersOpen{font-size:9px;padding:4px;margin-top:5px;width:100%}
  #game aside{display:block;margin-top:9px}
  #game .social{padding:13px}
  #game .social h2{margin:0 0 8px}
  #game .social .chat{height:115px}
}
@media (max-width: 800px) {
  input, select, textarea { font-size:16px; }
  #game .guess { display:flex; }
  #game .guess input { flex:1; min-width:0; }
  #game .guess button { flex:none; width:auto; }
  #game .chatForm input { flex:1; min-width:0; }
  #game .social { scroll-margin-bottom:env(safe-area-inset-bottom); }
  #game aside { display:flex; flex-direction:column; gap:10px; }
  #game .social { order:1; }
  #game .scores { order:2; position:static; width:100%; max-height:none; min-height:0; overflow:visible; padding:13px; box-shadow:0 18px 55px #02091577; }
  #game .scores h2 { font-size:16px; margin:0 0 8px; }
  #game .scores .player { font-size:13px; padding:8px 0; }
  #game .scores .leadersOpen { font-size:12px; padding:9px; }
  #game .round { width:100%; }
  #game .hint { margin-top:25px; }
}
.leaderTabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 16px}
.leaderTabs button{font-size:13px;padding:10px 7px}
.leaderTabs button.active{background:linear-gradient(135deg,#55dddb,#55b9ff);border-color:#65d9f2;color:#062437}
#leadersDialog{max-height:min(78dvh,740px)}
#globalLeaders{max-height:60dvh;overflow-y:auto;overscroll-behavior:contain}
#forgotDialog p{color:#b4c3db;line-height:1.55}
#forgotOpen{display:block;margin:9px 0 0 auto}
@media(max-width:800px){#leadersDialog{width:calc(100vw - 24px);padding:16px}.leaderTabs button{font-size:12px;padding:9px 5px}#globalLeaders .player{font-size:13px;gap:10px}}
@media(max-width:800px){#game .mask.longWord{font-size:clamp(18px,5vw,30px);letter-spacing:1px;line-height:1.35;overflow-wrap:anywhere}}
button, input, select { min-height: 44px; }
button { touch-action: manipulation; }
@media (max-width: 800px) {
  html { overflow-x: hidden; }
  body { min-width: 320px; padding-bottom: env(safe-area-inset-bottom); }
  .shell { width: 100%; max-width: 100%; }
  .hero p, .card, dialog { overflow-wrap: anywhere; }
  .join input, .guess input, .chatForm input { min-width: 0; }
  .chatForm button, .guess button { min-width: 44px; }
  dialog { margin: auto; max-height: calc(100dvh - 32px); }
}
#finalScoresDialog{max-height:min(78dvh,740px)}
#finalScoresList{max-height:60dvh;overflow-y:auto;overscroll-behavior:contain}