/* ================================================================
   DER FAHNDER — PWA Game Player
   Dark crime-noir theme, mobile-first
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Outfit:wght@300;400;500;600&display=swap');

:root {
  --bg: #0B0B10; --bg2: #12121A; --bg3: #1A1A25; --bg4: #222233;
  --gold: #C9A84C; --gold-hi: #E8D06A; --gold-lo: #8B7A3A;
  --parch: #F5ECD7; --cream: #FAF6EC; --blood: #9B2226;
  --ink: #E8E2D4; --ink2: #A09888; --ink3: #6B6358;
  --green: #2E7D32; --green-lo: #1B5E20;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Outfit', system-ui, sans-serif;
  --r: 6px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--sans); background:var(--bg); color:var(--ink);
  line-height:1.7; min-height:100vh; min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--gold); color:var(--bg); }

/* ═══ HEADER ═══ */
.app-header {
  background:var(--bg2); border-bottom:1px solid rgba(201,168,76,.1);
  padding:12px 20px; display:flex; align-items:center; gap:12px;
  position:sticky; top:0; z-index:100; backdrop-filter:blur(20px);
}
.app-logo { height:36px; border-radius:8px; }
.app-brand { font-family:var(--serif); font-size:.85rem; font-weight:700; color:var(--gold); letter-spacing:2px; }
.app-game-title { font-size:.72rem; color:var(--ink3); margin-left:auto; }

/* ═══ SCREENS ═══ */
.screen { display:none; min-height:calc(100vh - 60px); padding:2rem 1.2rem; }
.screen.active { display:block; }

/* ═══ ENTRY SCREEN ═══ */
.entry { text-align:center; padding-top:15vh; }
.entry-logo { width:120px; height:120px; margin:0 auto 1.5rem; border-radius:20px; }
.entry h1 { font-family:var(--serif); font-size:2rem; color:var(--parch); margin-bottom:.3rem; }
.entry p { color:var(--ink2); margin-bottom:2rem; font-size:.95rem; }
.entry-input {
  display:flex; gap:.5rem; max-width:320px; margin:0 auto 1rem;
}
.entry-input input {
  flex:1; padding:14px 16px; background:var(--bg3); border:1.5px solid rgba(201,168,76,.15);
  color:var(--ink); font-family:var(--sans); font-size:1.1rem; border-radius:var(--r);
  text-align:center; letter-spacing:3px; text-transform:uppercase;
}
.entry-input input:focus { outline:none; border-color:var(--gold); }
.entry-input button {
  padding:14px 24px; background:var(--gold); color:var(--bg); border:none;
  font-family:var(--sans); font-weight:600; border-radius:var(--r); cursor:pointer;
  font-size:.9rem;
}
.entry-input button:active { transform:scale(.97); }

/* ═══ PLAYER SELECT ═══ */
.player-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; max-width:400px; margin:0 auto; }
.player-btn {
  padding:1.2rem; background:var(--bg3); border:1.5px solid rgba(201,168,76,.1);
  border-radius:var(--r); cursor:pointer; text-align:center; transition:all .3s;
}
.player-btn:hover, .player-btn:active { border-color:var(--gold); background:var(--bg4); }
.player-btn .pname { font-family:var(--serif); font-size:1.1rem; font-weight:700; color:var(--parch); }
.player-btn .prole { font-size:.75rem; color:var(--ink3); margin-top:2px; }

/* ═══ GAME VIEW ═══ */
.game-header {
  text-align:center; padding:1.5rem 0; border-bottom:1px solid rgba(201,168,76,.08); margin-bottom:1.5rem;
}
.game-header h2 { font-family:var(--serif); font-size:1.5rem; color:var(--parch); }
.game-header .char-role { font-size:.85rem; color:var(--gold); }
.game-header .game-title { font-size:.72rem; color:var(--ink3); margin-top:4px; }

/* ═══ ROUNDS ═══ */
.round-list { max-width:500px; margin:0 auto; }
.round-item {
  background:var(--bg2); border:1px solid rgba(201,168,76,.08);
  border-radius:var(--r); margin-bottom:.8rem; overflow:hidden;
  transition:border-color .3s;
}
.round-header {
  padding:14px 18px; display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; transition:background .2s;
}
.round-header:active { background:var(--bg3); }
.round-num {
  font-family:var(--serif); font-size:1.1rem; font-weight:700; color:var(--parch);
  display:flex; align-items:center; gap:10px;
}
.round-status { font-size:1.2rem; }
.round-item.open { border-color:rgba(201,168,76,.2); }
.round-item.locked .round-num { color:var(--ink3); }

/* ═══ UNLOCK ═══ */
.unlock-form {
  padding:12px 18px; display:flex; gap:.5rem; align-items:center;
  background:var(--bg3); border-top:1px solid rgba(201,168,76,.06);
}
.unlock-form input {
  flex:1; padding:10px 12px; background:var(--bg); border:1px solid rgba(201,168,76,.12);
  color:var(--gold); font-family:var(--sans); font-size:1.1rem; border-radius:var(--r);
  text-align:center; letter-spacing:4px; max-width:140px;
}
.unlock-form input:focus { outline:none; border-color:var(--gold); }
.unlock-form button {
  padding:10px 18px; background:var(--gold); color:var(--bg); border:none;
  font-family:var(--sans); font-weight:600; border-radius:var(--r); cursor:pointer;
  font-size:.82rem;
}
.unlock-error { color:var(--blood); font-size:.78rem; margin-left:8px; }

/* ═══ ROUND CONTENT ═══ */
.round-content {
  padding:18px; display:none; border-top:1px solid rgba(201,168,76,.06);
}
.round-item.open .round-content { display:block; }
.round-item.open .unlock-form { display:none; }

.content-section { margin-bottom:1.5rem; }
.content-label {
  font-size:.68rem; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  margin-bottom:6px; display:flex; align-items:center; gap:6px;
}
.label-public { color:var(--gold); }
.label-secret { color:var(--blood); }
.label-hint { color:var(--green); }
.label-ifasked { color:#2196F3; }
.label-never { color:var(--blood); }

.content-text {
  font-size:.92rem; color:var(--ink2); line-height:1.85;
  padding:12px 14px; background:var(--bg3); border-radius:var(--r);
  border-left:3px solid rgba(201,168,76,.15);
}
.content-text.secret {
  background:rgba(155,34,38,.08); border-left-color:var(--blood);
  color:var(--ink);
}
.content-text.hint {
  background:rgba(46,125,50,.06); border-left-color:var(--green);
}
.content-text.ifasked {
  background:rgba(33,150,243,.06); border-left-color:#2196F3;
}
.content-text.never {
  background:rgba(155,34,38,.12); border-left-color:var(--blood);
  font-weight:600;
}

.hint-card {
  background:var(--bg3); border:1px solid rgba(46,125,50,.15);
  border-radius:var(--r); padding:14px; margin-bottom:.8rem;
}
.hint-card.golden { border-color:var(--gold); background:rgba(201,168,76,.05); }
.hint-title { font-family:var(--serif); font-size:1rem; font-weight:700; color:var(--parch); margin-bottom:4px; }
.hint-target { font-size:.78rem; color:var(--green); font-weight:600; margin-bottom:6px; }
.hint-text { font-size:.88rem; color:var(--ink2); line-height:1.7; }
.hint-instruction { font-size:.78rem; color:var(--ink3); font-style:italic; margin-top:8px; }

/* ═══ OFFLINE WARNING ═══ */
.offline-bar {
  display:none; background:rgba(201,168,76,.15); color:var(--gold);
  text-align:center; padding:8px; font-size:.78rem; font-weight:500;
}
.offline-bar.show { display:block; }

/* ═══ CACHE WARNING ═══ */
.cache-warning {
  background:rgba(155,34,38,.1); border:1px solid rgba(155,34,38,.2);
  border-radius:var(--r); padding:14px; margin:1rem 0; text-align:center;
}
.cache-warning p { font-size:.85rem; color:var(--ink2); line-height:1.6; }
.cache-warning strong { color:var(--blood); }

/* ═══ LOADING ═══ */
.loading { text-align:center; padding:3rem; }
.spinner {
  width:40px; height:40px; border:3px solid var(--bg3);
  border-top-color:var(--gold); border-radius:50%;
  animation:spin 1s linear infinite; margin:0 auto 1rem;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══ MESSAGES ═══ */
.msg { padding:12px 16px; border-radius:var(--r); margin:1rem 0; font-size:.88rem; text-align:center; }
.msg-error { background:rgba(155,34,38,.15); color:#ff6b6b; border:1px solid rgba(155,34,38,.3); }
.msg-success { background:rgba(46,125,50,.1); color:#66bb6a; border:1px solid rgba(46,125,50,.2); }
.msg-info { background:rgba(201,168,76,.08); color:var(--gold); border:1px solid rgba(201,168,76,.15); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 400px) {
  .player-grid { grid-template-columns:1fr; }
  .entry h1 { font-size:1.6rem; }
  .round-content { padding:14px; }
}