* { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; box-sizing: border-box; }
body { margin: 0; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }

.logo-mark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 22px; color: #020617; background: linear-gradient(135deg, #f59e0b, #ea580c); box-shadow: 0 8px 24px -8px rgba(234, 88, 12, .6); }
.logo-mark.small { width: 34px; height: 34px; border-radius: 11px; font-size: 17px; }

.btn-primary { border-radius: 14px; padding: 11px 18px; font-weight: 800; color: #0f172a; background: linear-gradient(135deg, #fbbf24, #f97316); box-shadow: 0 8px 20px -10px rgba(249, 115, 22, .8); transition: transform .12s, filter .12s; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); }
.btn-primary:active:not(:disabled) { transform: scale(.97); }
.btn-secondary { border-radius: 14px; padding: 10px 16px; font-weight: 700; background: #1e293b; border: 1px solid #334155; color: #e2e8f0; transition: background .12s; }
.btn-secondary:hover:not(:disabled) { background: #273449; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 10px; border-radius: 999px; background: #1e293b; border: 1px solid #334155; color: #cbd5e1; white-space: nowrap; }
.pill b { color: #fbbf24; letter-spacing: .15em; }
.icon-btn { position: relative; width: 34px; height: 34px; border-radius: 10px; background: #1e293b; border: 1px solid #334155; color: #e2e8f0; font-weight: 700; display: grid; place-items: center; }
.icon-btn:hover { background: #273449; }
.dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 99px; background: #f43f5e; border: 2px solid #0f172a; }
.tool-btn { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 12px; background: #1e293b; border: 1px solid #334155; color: #e2e8f0; }
.tool-btn:hover:not(:disabled) { background: #273449; }
.tool-btn.on { border-color: #f59e0b; color: #fbbf24; }
.react-btn { width: 34px; height: 34px; border-radius: 10px; background: #1e293b; border: 1px solid #334155; font-size: 16px; }
.react-btn:active { transform: scale(.9); }

/* ---------- Kalem paneli ---------- */
.pen-panel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-radius: 16px; padding: 8px 10px; background: #0f172a; border: 1px solid #1e293b; min-height: 56px; }
.pen-panel.mine { border-color: color-mix(in srgb, var(--pc, #f59e0b) 70%, transparent); background: color-mix(in srgb, var(--pc, #f59e0b) 10%, #0f172a); }
.pen-avatar { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #0f172a; flex-shrink: 0; }
.pen-take { font-size: 15px; padding: 10px 18px; }
.pen-queue { font-size: 11px; color: #94a3b8; }
.pen-bar { height: 5px; border-radius: 99px; background: #1e293b; overflow: hidden; margin-top: 4px; max-width: 220px; }
.pen-bar i { display: block; height: 100%; width: 0; }
.pen-hold { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pen-hold i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255, 255, 255, .45); }
.pen-hold span { position: relative; }
.pen-hold.holding { transform: scale(.97); }
.pen-select { border-radius: 10px; background: #1e293b; border: 1px solid #334155; color: #e2e8f0; font-size: 13px; padding: 7px 8px; }

/* ---------- Tahta temaları ---------- */
/* Kâğıt: gazete bulmacası görünümü. Koyu: göz yormayan, düşük parlaklıklı. */
:root {
  --b-wrap: #e2e8f0; --b-frame: #1f2937; --b-cell: #fffdf8; --b-line: #9ca3af; --b-ink: #111827;
  --b-clue: #e5e7eb; --b-clue-ink: #111827; --b-clue-hover: #d1d5db;
  --b-sel: #fcd34d; --b-sel-ink: #111827; --b-word: #fef3c7;
  --b-arrow: #dc2626; --b-arrow-bg: #fee2e2; --b-key: #374151; --b-wrong: #dc2626; --b-revealed: #b45309;
  --b-bar: #f8fafc; --b-bar-line: #e2e8f0;
}
body[data-board="dark"] {
  --b-wrap: #0b1220; --b-frame: #020617; --b-cell: #1b2537; --b-line: #2b3648; --b-ink: #e2e8f0;
  --b-clue: #0c1320; --b-clue-ink: #a8b3c4; --b-clue-hover: #162033;
  --b-sel: #a16207; --b-sel-ink: #fefce8; --b-word: #2a2414;
  --b-arrow: #f87171; --b-arrow-bg: #3b1d24; --b-key: #7d8aa0; --b-wrong: #fb7185; --b-revealed: #fbbf24;
  --b-bar: #151e2e; --b-bar-line: #2b3648;
}

/* ---------- İpucu çubuğu ---------- */
.clue-bar { display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 9px 12px; background: var(--b-bar); color: var(--b-ink); font-weight: 600; font-size: 15px; min-height: 46px; box-shadow: inset 0 0 0 1px var(--b-bar-line); }
.clue-arrow { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--b-arrow-bg); color: var(--b-arrow); font-weight: 800; flex-shrink: 0; }

/* ---------- Tahta ---------- */
.board-wrap { position: relative; overflow: auto; border-radius: 14px; background: var(--b-wrap); padding: 6px; align-self: center; max-width: 100%; touch-action: pan-x pan-y; }
.board { --cs: 52px; display: grid; gap: 0; background: var(--b-frame); border: 2px solid var(--b-frame); width: max-content; user-select: none; }
.cell { position: relative; width: var(--cs); height: var(--cs); background: var(--b-cell); outline: 1px solid var(--b-line); outline-offset: -0.5px; display: grid; place-items: center; cursor: pointer; }
.cell .ch { font-family: 'Inter', sans-serif; font-weight: 700; font-size: calc(var(--cs) * .54); color: var(--b-ink); line-height: 1; text-transform: none; transition: transform .15s; }
.cell.mine-word { background: var(--b-word); }
.cell.holder-word { background: color-mix(in srgb, var(--hc) 22%, var(--b-cell)); }
.cell.sel { background: var(--b-sel) !important; }
.cell.sel .ch { color: var(--b-sel-ink); }
.cell.holder-sel { box-shadow: inset 0 0 0 3px var(--hc); }
.cell.wrong .ch { color: var(--b-wrong); }
.cell.wrong::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(220, 38, 38, .12) 6px 8px); pointer-events: none; }
.cell.revealed .ch { color: var(--b-revealed); }
.cell.pop .ch { animation: pop .25s ease-out; }
@keyframes pop { 0% { transform: scale(.5); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.cell .by { position: absolute; left: 3px; bottom: 3px; width: 5px; height: 5px; border-radius: 99px; }
.cell .key { position: absolute; inset: 9%; border-radius: 99px; border: 1.5px solid var(--b-key); pointer-events: none; }
.cell .keyn { position: absolute; right: 2px; bottom: 0; font-size: calc(var(--cs) * .19); font-weight: 700; color: var(--b-key); }
.cell .arr { position: absolute; color: var(--b-arrow); font-size: calc(var(--cs) * .28); font-weight: 900; line-height: 1; pointer-events: none; }
.arr.R { left: 1px; top: 50%; transform: translateY(-50%); }
.arr.D { top: 0; left: 50%; transform: translateX(-50%); }
.arr.DR { left: 1px; top: 0; }
.arr.RD { left: 1px; top: 0; }
.cell .cur { position: absolute; inset: 1px; border: 2px dashed var(--cc); border-radius: 3px; pointer-events: none; }
.cell .curname { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 700; padding: 0 4px; border-radius: 4px; color: #0f172a; background: var(--cc); white-space: nowrap; z-index: 3; pointer-events: none; }

.clue { position: relative; width: var(--cs); height: var(--cs); background: var(--b-clue); outline: 1px solid var(--b-line); outline-offset: -0.5px; display: flex; flex-direction: column; overflow: hidden; }
.clue .ct { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1px 2px; font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif; font-weight: 500; font-size: calc(var(--cs) * .165); line-height: 1.12; color: var(--b-clue-ink); overflow: hidden; cursor: pointer; word-break: break-word; hyphens: auto; }
.clue .ct + .ct { border-top: 1px solid var(--b-line); }
.clue .ct.active { background: var(--b-sel); color: var(--b-sel-ink); }
.clue .ct.holder-active { background: color-mix(in srgb, var(--hc) 35%, var(--b-clue)); }
.clue .ct:hover { background: var(--b-clue-hover); }

.react-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.floaty { position: absolute; bottom: 10px; font-size: 32px; animation: floatUp 2.2s ease-out forwards; text-align: center; }
.floaty small { display: block; font-size: 10px; font-weight: 700; color: #0f172a; background: #fff; border-radius: 6px; padding: 0 4px; }
@keyframes floatUp { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translateY(-20px) scale(1.1); } 100% { transform: translateY(-260px) scale(1); opacity: 0; } }

/* ---------- Anahtar kelime ---------- */
.keybox { width: 30px; height: 30px; border-radius: 99px; border: 2px solid #475569; display: grid; place-items: center; font-weight: 800; position: relative; background: #0f172a; }
.keybox small { position: absolute; bottom: -4px; right: -4px; font-size: 9px; background: #334155; border-radius: 99px; width: 14px; height: 14px; display: grid; place-items: center; }
.keybox.done { border-color: #f59e0b; color: #fbbf24; }

/* ---------- Klavye ---------- */
.kbd { position: sticky; bottom: 0; z-index: 20; display: flex; flex-direction: column; gap: 5px; padding: 8px 2px calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(to top, #020617 85%, transparent); }
.kbd .row { display: flex; gap: 4px; justify-content: center; }
.kbd button { flex: 1; max-width: 44px; height: 46px; border-radius: 9px; background: #334155; color: #f8fafc; font-weight: 700; font-size: 16px; border-bottom: 2px solid #1e293b; }
.kbd button.wide { max-width: 64px; flex: 1.5; background: #475569; font-size: 14px; }
.kbd button:active { background: #f59e0b; color: #0f172a; }

/* ---------- Yan panel ---------- */
.side { width: 330px; flex-shrink: 0; }
.side-inner { position: sticky; top: 64px; height: calc(100vh - 80px); display: flex; flex-direction: column; gap: 10px; }
.panel { border-radius: 16px; background: #0f172a; border: 1px solid #1e293b; padding: 10px; }
.panel-title { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: #94a3b8; margin-bottom: 6px; text-transform: uppercase; }
.player { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 10px; font-size: 13px; }
.player.me { background: #1e293b; }
.player .av { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #0f172a; flex-shrink: 0; }
.player.off { opacity: .45; }
.player .tag { font-size: 10px; padding: 1px 6px; border-radius: 99px; background: #334155; color: #e2e8f0; }
.player .pass { font-size: 11px; padding: 2px 7px; border-radius: 8px; background: #334155; }
.tab { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 9px; color: #94a3b8; }
.tab.active { background: #1e293b; color: #f8fafc; }
.badge { font-size: 10px; background: #f43f5e; color: white; border-radius: 99px; padding: 0 5px; margin-left: 2px; }
.feed { overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; padding-right: 2px; }
.feed li { padding: 5px 8px; border-radius: 9px; background: #111c31; color: #cbd5e1; line-height: 1.35; }
.feed li time { float: right; font-size: 10px; color: #64748b; margin-left: 6px; }
.feed li.k-pen { border-left: 3px solid #f59e0b; }
.feed li.k-word { border-left: 3px solid #38bdf8; }
.feed li.k-check, .feed li.k-hint { border-left: 3px solid #a78bfa; }
.feed li.k-win { border-left: 3px solid #22c55e; background: #052e1a; }
.feed li .who { font-weight: 700; }

@media (max-width: 1023px) {
  .side { position: fixed; inset: 0; z-index: 60; width: auto; background: rgba(2, 6, 23, .7); display: none; }
  .side.open { display: block; }
  .side-inner { position: absolute; right: 0; top: 0; bottom: 0; width: min(360px, 92vw); height: auto; background: #020617; padding: 12px; border-left: 1px solid #1e293b; }
}
@media (max-width: 640px) {
  .clue-bar { font-size: 14px; padding: 7px 10px; }
  .board-wrap { padding: 3px; border-radius: 10px; }
  .pen-panel { padding: 6px 8px; }
}

/* ---------- Pencere & bildirim ---------- */
.modal { position: fixed; inset: 0; z-index: 90; background: rgba(2, 6, 23, .75); display: grid; place-items: center; padding: 16px; }
.modal-card { width: 100%; max-width: 420px; text-align: center; border-radius: 22px; background: #0f172a; border: 1px solid #334155; padding: 24px; animation: pop .3s ease-out; }
.stat { border-radius: 12px; background: #1e293b; padding: 8px; }
.stat b { display: block; font-size: 18px; }
.toasts { position: fixed; left: 50%; transform: translateX(-50%); top: 72px; z-index: 100; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { padding: 9px 14px; border-radius: 12px; background: #f8fafc; color: #0f172a; font-weight: 700; font-size: 13px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); animation: pop .25s ease-out; }
.hidden { display: none !important; }

/* ---------- Eklenen bulmacalar ---------- */
.lib-card { max-width: 560px; text-align: left; max-height: 90vh; display: flex; flex-direction: column; }
.lib-list { overflow-y: auto; display: grid; gap: 8px; }
.lib-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; background: #111c31; border: 1px solid #1e293b; }
.lib-item.current { border-color: #f59e0b; }
.lib-thumb { width: 64px; height: 64px; flex-shrink: 0; border-radius: 8px; background: #fff center / cover no-repeat; }
.lib-meta { font-size: 11px; color: #94a3b8; }
.lib-tag { font-size: 10px; padding: 1px 6px; border-radius: 99px; background: #334155; color: #e2e8f0; margin-left: 4px; }
.lib-empty { font-size: 13px; color: #94a3b8; padding: 16px 4px; }

/* Oyunda fotoğraftan gelen ipucu kutuları */
.clue.photo { background-repeat: no-repeat; cursor: pointer; }
.clue.photo.active { box-shadow: inset 0 0 0 3px var(--b-sel); }
.clue.photo.holder-active { box-shadow: inset 0 0 0 3px var(--hc); }
body[data-board="dark"] .clue.photo:not(.pic), body[data-board="dark"] .clue-thumb { filter: invert(.88) hue-rotate(180deg); }
body[data-board="dark"] .clue.photo.pic { filter: brightness(.75); }
.clue-thumb { width: 46px; height: 46px; flex-shrink: 0; border-radius: 6px; background-repeat: no-repeat; cursor: zoom-in; box-shadow: inset 0 0 0 1px var(--b-bar-line); }
.clue-thumb.big { position: fixed; z-index: 70; left: 50%; top: 50%; width: min(300px, 80vw); height: min(300px, 80vw); transform: translate(-50%, -50%); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); cursor: zoom-out; }