/* Styles for the game-mode pages and the add-on modes (flags, daily, name the
   countries). The shared site styles are inlined in each page; this file only adds. */

/* Custom panel: same frame as #q-panel */
#x-panel{width:400px;flex-shrink:0;display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--border);overflow-y:auto;overflow-x:hidden}
#x-panel[hidden]{display:none}
.x-body{padding:16px 20px 22px;display:flex;flex-direction:column;gap:12px}
.x-intro{font-size:13px;color:var(--muted2);line-height:1.7}
.x-form{display:flex;gap:8px}
.x-form[hidden]{display:none}
.x-input{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--border2);border-radius:30px;color:var(--text);font-family:'Syne',sans-serif;font-size:16px;font-weight:700;padding:12px 18px;outline:none;caret-color:var(--accent)}
.x-input:focus{border-color:var(--accent);background:rgba(0,212,180,.06)}
.x-msg{font-size:12px;color:var(--gold);min-height:1em}
.x-msg.ok{color:var(--ok)}.x-msg.ng{color:var(--ng)}
.x-stats{display:flex;gap:10px;flex-wrap:wrap}
.x-stats span{flex:1;min-width:70px;background:var(--panel2);border-radius:var(--r2);padding:10px 12px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);display:flex;flex-direction:column;gap:4px}
.x-stats strong{font-family:'Syne',sans-serif;font-size:18px;letter-spacing:0;text-transform:none;color:var(--text)}
.x-link{background:none;border:none;color:var(--muted2);font-family:'DM Mono',monospace;font-size:12px;text-decoration:underline;cursor:pointer;align-self:flex-start;padding:4px 0}
.x-link[hidden]{display:none}
.x-next{font-size:12px;color:var(--muted2);text-align:center}
@media(max-width:767px){
  #x-panel{width:100%;flex:0 0 auto;max-height:58vh;border-left:none;border-top:1px solid var(--border)}
  .x-body{padding:12px 14px 16px;gap:10px}
}

/* Daily */
.d-rows{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
.d-row{display:grid;grid-template-columns:14px minmax(0,1fr) auto 26px;align-items:center;gap:10px;background:var(--panel2);border-radius:var(--r2);padding:9px 12px;font-size:13px}
.d-row.hit{outline:1px solid var(--accent)}
.d-sw{width:14px;height:14px;border-radius:4px}
.d-nm{font-family:'Syne',sans-serif;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-km{color:var(--muted2);font-size:12px;white-space:nowrap}
.d-dir{text-align:center}
.d-head{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:700;color:var(--accent);text-align:center;margin-top:6px}
.d-bonus .q-txt{margin-bottom:10px;min-height:0}
.d-bonus .opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.d-bonus .opt{min-height:64px}
.d-stats span{text-align:center;align-items:center}

/* Name the countries */
.n-regions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.n-reg{background:var(--panel2);border:1px solid var(--border);border-radius:var(--r2);padding:12px;color:var(--text);text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;font-family:'DM Mono',monospace}
.n-reg strong{font-family:'Syne',sans-serif;font-size:13px}
.n-reg span{font-size:11px;color:var(--muted2)}
.n-reg.on{border-color:var(--accent);background:rgba(0,212,180,.08)}
.n-reg:first-child{grid-column:1/-1}
.n-go{align-self:stretch}
.n-list{display:flex;flex-direction:column;gap:12px}
.n-gh{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.n-gh span{color:var(--muted2)}
.n-chips{display:flex;flex-wrap:wrap;gap:5px}
.n-chip{font-size:11px;background:rgba(0,212,180,.1);border:1px solid rgba(0,212,180,.3);color:var(--text);border-radius:20px;padding:3px 9px}
.n-chip.miss{background:rgba(255,58,58,.08);border-color:rgba(255,58,58,.35);color:#ff9d9d}

/* Mode-page content */
.mp-hero{min-height:78vh}
.mp-hero .hero-title{font-size:clamp(2.3rem,6.5vw,4.6rem)}
.mp-crumbs{font-size:11px;letter-spacing:1px;color:var(--muted2);margin-bottom:18px}
.mp-crumbs a{color:var(--muted2);text-decoration:none;border-bottom:1px solid var(--border2)}
.mp-body{max-width:760px}
.mp-body p,.mp-body li{font-size:15px;color:var(--muted2);line-height:1.85}
.mp-body p+p{margin-top:14px}
.mp-body ul,.mp-body ol{padding-left:1.2em;margin:12px 0}
.mp-body strong{color:var(--text)}
.mp-body a,.mp-links a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(0,212,180,.35)}
.mp-body h3{font-family:'Syne',sans-serif;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--text);margin:26px 0 8px}
.mp-table-wrap{overflow-x:auto;margin-top:24px;border:1px solid var(--border);border-radius:var(--r)}
.mp-table{width:100%;border-collapse:collapse;font-size:13px}
.mp-table th{text-align:left;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);padding:12px 14px;border-bottom:1px solid var(--border2);background:var(--panel2)}
.mp-table td{padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text)}
.mp-table td:last-child{color:var(--muted2)}
.mp-table tr:last-child td{border-bottom:none}
.mp-diff{display:flex;justify-content:center;gap:8px;margin:0 0 18px}
.mp-diff .diff-btn{min-width:84px}
.mp-faq{margin-top:10px}
.mp-faq details{border-bottom:1px solid var(--border);padding:14px 0}
.mp-faq summary{font-family:'Syne',sans-serif;font-weight:700;font-size:14px;color:var(--text);cursor:pointer}
.mp-faq details p{margin-top:10px}
.en-note{font-size:.85em;color:var(--muted2)}