/* tivimini phone controller. Mobile first: iOS Safari 15+, Android Chrome, Samsung Internet. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0d12; color: #f2f4f8; font-family: -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  touch-action: manipulation; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
input { -webkit-user-select: text; user-select: text; }
[hidden] { display: none !important; }
.top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #141824; }
.brand { font-weight: 800; letter-spacing: .5px; }
.brand::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff6f2c; margin-left: 3px; vertical-align: super; }
.room { color: #9aa3b8; font-size: 15px; }
.banner { background: #c42b33; color: #fff; text-align: center; padding: 8px; font-weight: 700; font-size: 15px; }
main { flex: 1; display: flex; }
.screen { flex: 1; display: flex; flex-direction: column; padding: 18px 16px 24px; max-width: 520px; margin: 0 auto; width: 100%; }
h1 { font-size: 28px; margin: 12px 0 6px; }
.dim { color: #9aa3b8; }
.center { text-align: center; }
.big { font-size: 22px; font-weight: 700; margin: 10px 0; }
.error { color: #ff6b6b; font-weight: 600; min-height: 1.4em; }
.notice { color: #9aa3b8; font-size: 14px; line-height: 1.45; margin: 12px 0 0; } /* ST-7a aydınlatma, sabit (açılır değil) */
.notice-link { color: #c9d1e6; text-decoration: underline; }
label { display: block; margin: 16px 0 6px; color: #c9d1e6; font-size: 15px; }
input { width: 100%; font-size: 22px; padding: 14px; border-radius: 14px; border: 2px solid #3a4256; background: #1c2131; color: #fff; outline: none; }
input:focus { border-color: #ff6f2c; }
#code { letter-spacing: 10px; font-weight: 800; text-align: center; }
.btn { display: block; width: 100%; margin-top: 20px; padding: 16px; font-size: 20px; font-weight: 800; border-radius: 16px; border: 0; color: #fff; background: #2a3044; }
.btn.primary { background: #ff6f2c; }
.btn.ghost { background: transparent; border: 2px solid #3a4256; color: #c9d1e6; margin-top: auto; }
.btn:disabled { opacity: .5; }
.me { display: flex; align-items: center; font-size: 24px; font-weight: 800; margin: 8px 0; }
.seat { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #0b0d12; font-weight: 900; margin-right: 12px; flex: 0 0 auto; }
.seat.dot { width: 22px; height: 22px; margin: 0 12px 0 6px; }
.s1 { background: #ff8a3d; } .s2 { background: #b67cff; } .s3 { background: #33d1d1; } .s4 { background: #ff6fae; }
.players, .list { list-style: none; padding: 0; margin: 12px 0; }
.players li, .list li { display: flex; align-items: center; padding: 10px 12px; margin-bottom: 8px; background: #1c2131; border-radius: 14px; font-size: 18px; }
.players li .st { margin-left: auto; font-size: 14px; color: #3ddc84; }
.players li.off .st { color: #ffc53d; }
.list li .sc { margin-left: auto; font-weight: 800; }
.list li.mine { outline: 2px solid #ff6f2c; }
.bar { display: flex; justify-content: space-between; font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.timer { font-variant-numeric: tabular-nums; }
.answers { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-gap: 12px; min-height: 300px; margin: 12px 0; }
.ans { border: 0; border-radius: 22px; font-size: 56px; font-weight: 900; color: #fff; transition: transform .08s, opacity .2s; }
.ans:active { transform: scale(.96); }
.a0 { background: #e8333c; } .a1 { background: #2fc24a; } .a2 { background: #ffd21f; color: #3a2e00; } .a3 { background: #2f8cff; }
.ans:disabled { color: #fff; } .a2:disabled { color: #3a2e00; } /* browsers grey out disabled button text */
.answers.locked .ans { opacity: .3; }
.answers.locked .ans.chosen { opacity: 1; outline: 6px solid #fff; outline-offset: -6px; }
.answers.reveal .ans.correct { opacity: 1; outline: 6px solid #3ddc84; outline-offset: -6px; }
.result { text-align: center; font-size: 26px; font-weight: 800; min-height: 1.3em; margin: 4px 0; }
.result.ok { color: #3ddc84; } .result.bad { color: #ff6b6b; }
.grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 6px; margin: 8px auto; width: 100%; max-width: 330px; }
.tile { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; border-radius: 8px; background: #1c2131; border: 2px solid #3a4256; min-height: 48px; }
.tile.f { border-color: #9aa3b8; }
.tile.h { background: #2fa84f; border-color: #2fa84f; } .tile.n { background: #d4a72c; border-color: #d4a72c; } .tile.m { background: #3a3f4e; border-color: #3a3f4e; }
.msg { text-align: center; min-height: 1.4em; font-weight: 700; margin: 6px 0; color: #ffc53d; }
.kb { margin-top: auto; }
.kb .row { display: flex; justify-content: center; margin-bottom: 6px; }
.kb .row > * + * { margin-left: 4px; }
.key { flex: 1 1 0; min-width: 0; height: 50px; border: 0; border-radius: 8px; background: #5a6278; color: #fff; font-size: 18px; font-weight: 800; padding: 0; }
.key.wide { flex: 1.6 1 0; font-size: 14px; }
.key.h { background: #2fa84f; } .key.n { background: #d4a72c; } .key.m { background: #2a2e3a; color: #9aa3b8; }
.key:active { filter: brightness(1.3); }
.rank { font-size: 72px; font-weight: 900; text-align: center; margin: 20px 0 0; color: #ffc53d; }
#s-results .big, #s-results > .dim { text-align: center; }
#s-wait, #s-closed { justify-content: center; text-align: center; }