/* ============================================================
   style.css — games.mmaxii.xyz
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Tomorrow:wght@300;400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:   #0e0b12; --bg2: #120f1a; --bg3: #1a1228; --bg4: #221935;
  --border: #1e1828; --border2: #2e2440; --border3: #3e3455;
  --text: #c9c3d6; --text2: #8b83a0; --text3: #4a4360; --text4: #2e2845;
  --accent: #a77fdb; --accent-dim: #7a5fb0;
  --accent-bg: #1a1228; --accent-border: rgba(167,127,219,.35);
  --pg:      #4ec97e; --pg-bg:      #0a1510; --pg-border:      rgba(78,201,126,.4);
  --extreme: #f87171; --extreme-bg: #150a0a; --extreme-border: rgba(248,113,113,.4);
  --spicy:   #e879f9; --spicy-bg:   #170812; --spicy-border:   rgba(232,121,249,.4);
  --font: 'Tomorrow', monospace;
  --r: 6px; --r-md: 10px; --r-lg: 14px;
  /* Theme-switchable extras */
  --text-bright: #e8e2f0;
  --card-shine: rgba(167,127,219,.5);
  --dare-bg: #151005;
  --pol-bg: #170c2a; --pol-border: rgba(167,127,219,.4);
}

html { scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg); color: var(--text);
       min-height: 100vh; -webkit-font-smoothing: antialiased; }

/* ── Layout ──────────────────────────────────────────────── */
.page { max-width: 720px; margin: 0 auto; padding: 2rem 1.25rem 5rem; }
.label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
         color: var(--text3); margin-bottom: 8px; }

/* ── Header ──────────────────────────────────────────────── */
.site-header { text-align: center; padding-bottom: 1.5rem; margin-bottom: 1.5rem;
               border-bottom: 1px solid var(--border); }
.site-title { font-size: 22px; font-weight: 500; color: var(--text-bright);
              letter-spacing: .04em; margin-bottom: 4px; }
.site-sub { font-size: 11px; color: var(--text3); letter-spacing: .1em; text-transform: uppercase; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
             color: var(--text3); text-decoration: none; letter-spacing: .04em;
             margin-bottom: 1.25rem; transition: color .15s; }
.back-link:hover { color: var(--text2); }
.back-link .icon { width: 14px; height: 14px; }

/* ── Players bar ─────────────────────────────────────────── */
.players-bar { background: var(--bg2); border: 1px solid var(--border);
               border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 1rem; }
.players-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.players-chips:empty { display: none; }
.player-chip { display: inline-flex; align-items: center; gap: 5px;
               padding: 3px 8px 3px 10px; border-radius: 20px;
               border: 1px solid var(--border2); background: var(--bg3);
               font-family: var(--font); font-size: 12px; color: var(--text2); transition: all .2s; }
.player-chip.active { background: var(--bg4); font-weight: 500; }
.player-chip .rm { cursor: pointer; background: none; border: none;
                   padding: 0 0 0 4px; font-size: 15px; color: var(--text3); line-height: 1; }
.player-chip .rm:hover { color: var(--text); }
.players-input-row { display: flex; align-items: center; gap: 8px; }
.players-input-row .icon { width: 14px; height: 14px; color: var(--text3); flex-shrink: 0; }
.players-input-row input { flex: 1; background: transparent; border: none; outline: none;
                            font-family: var(--font); font-size: 12px; color: var(--text);
                            letter-spacing: .03em; min-width: 0; }
.players-input-row input::placeholder { color: var(--text3); }
.btn-add-player { background: var(--accent-bg); border: 1px solid var(--accent-border);
                  border-radius: var(--r); padding: 5px 10px; cursor: pointer;
                  color: var(--accent); display: flex; align-items: center; transition: all .15s; }
.btn-add-player .icon { width: 14px; height: 14px; }
.btn-add-player:hover { border-color: var(--accent); }
.players-meta-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.btn-xs { font-family: var(--font); font-size: 10px; letter-spacing: .06em;
          text-transform: uppercase; cursor: pointer; border-radius: var(--r);
          transition: all .15s; display: inline-flex; align-items: center; gap: 5px;
          border: 1px solid var(--border); background: transparent;
          color: var(--text3); padding: 4px 10px; }
.btn-xs .icon { width: 12px; height: 12px; }
.btn-xs:hover { border-color: var(--border2); color: var(--text2); }
.btn-xs.active { border-color: var(--accent-border); background: var(--accent-bg); color: var(--accent); }

/* ── Level row ───────────────────────────────────────────── */
.level-row { display: flex; gap: 6px; margin-bottom: .75rem; flex-wrap: wrap; }
.level-btn { flex: 1; min-width: 0; padding: 8px 6px; border-radius: var(--r);
             border: 1px solid var(--border); background: var(--bg2);
             color: var(--text3); font-family: var(--font); font-size: 11px;
             font-weight: 500; letter-spacing: .04em; cursor: pointer; transition: all .15s; }
.level-btn:hover { border-color: var(--border2); color: var(--text2); }
.level-btn[data-lv="pg"].active    { border-color: var(--pg-border);      background: var(--pg-bg);      color: var(--pg); }
.level-btn[data-lv="extreme"].active { border-color: var(--extreme-border); background: var(--extreme-bg); color: var(--extreme); }
.level-btn[data-lv="pol"].active   { border-color: var(--pol-border); background: var(--pol-bg); color: #a77fdb; }
.level-btn[data-lv="spicy"].active { border-color: var(--spicy-border);   background: var(--spicy-bg);   color: var(--spicy); }

/* ── Mode row ────────────────────────────────────────────── */
.mode-row { display: flex; gap: 6px; margin-bottom: .75rem; flex-wrap: wrap; }
.mode-btn { flex: 1; min-width: 0; padding: 8px 6px; border-radius: var(--r);
            border: 1px solid var(--border); background: var(--bg2);
            color: var(--text3); font-family: var(--font); font-size: 11px;
            font-weight: 500; letter-spacing: .04em; cursor: pointer; transition: all .15s; }
.mode-btn:hover { border-color: var(--border2); color: var(--text2); }
.mode-btn.active-all   { border-color: var(--border3); background: var(--bg3); color: var(--text2); }
.mode-btn.active-truth { border-color: var(--accent-border); background: var(--accent-bg); color: var(--accent); }
.mode-btn.active-dare  { border-color: rgba(251,191,36,.4); background: var(--dare-bg); color: #fbbf24; }
.mode-btn.active-q     { border-color: var(--pg-border); background: var(--pg-bg); color: var(--pg); }

/* ── How to play ─────────────────────────────────────────── */
.how-to-play { border: 1px solid var(--border); border-radius: var(--r-md);
               margin-top: .5rem; margin-bottom: 1rem; background: var(--bg2); }
.how-to-play summary { padding: 10px 14px; cursor: pointer; font-size: 11px;
                        letter-spacing: .08em; text-transform: uppercase; color: var(--text3);
                        display: flex; align-items: center; gap: 7px; list-style: none;
                        outline: none; transition: color .15s; user-select: none; }
.how-to-play summary::-webkit-details-marker { display: none; }
.how-to-play summary .icon { width: 13px; height: 13px; }
.how-to-play summary:hover { color: var(--text2); }
.how-to-play[open] summary { color: var(--accent); border-bottom: 1px solid var(--border); }
.how-to-play-body { padding: 12px 14px; font-size: 12px; color: var(--text2);
                    line-height: 1.75; letter-spacing: .02em; }
.how-to-play-body strong { color: var(--text); }

/* ── Card ────────────────────────────────────────────────── */
.card { background: var(--bg2); border: 1px solid var(--border);
        border-radius: var(--r-lg); padding: 2rem 1.5rem;
        text-align: center; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 14px;
        position: relative; overflow: hidden; margin-bottom: .75rem; }
.card::before { content: ''; position: absolute; top: 0; left: 0; right: 0;
                height: 1px; background: linear-gradient(90deg,transparent,var(--card-shine),transparent); }
.card-fixed { min-height: 200px; height: 200px; max-height: 200px; }
.card-q { font-size: 17px; font-weight: 400; color: var(--text-bright);
           line-height: 1.65; letter-spacing: .01em; max-width: 500px; }
.card-q.empty { color: var(--text3); font-size: 14px; }
.card-counter { font-size: 11px; color: var(--text4); letter-spacing: .06em; }
.badge-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.badge { display: inline-flex; align-items: center; font-size: 10px;
         font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
         padding: 3px 10px; border-radius: 20px;
         border: 1px solid var(--bc, var(--border2)); color: var(--cc, var(--text2));
         background: color-mix(in srgb, var(--cc, transparent) 12%, transparent); }
.badge-truth { --bc: var(--accent-border); --cc: var(--accent); }
.badge-dare  { --bc: rgba(251,191,36,.4);  --cc: #fbbf24; }
.card-choices { display: flex; gap: 8px; width: 100%; margin-top: 4px; }
.card-choice-btn { flex: 1; padding: 10px; border-radius: var(--r-md);
  font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all .15s; letter-spacing: .02em; }
.choice-truth { border: 1px solid var(--accent-border); background: var(--accent-bg); color: var(--accent); }
.choice-truth:hover { border-color: var(--accent); }
.choice-dare  { border: 1px solid rgba(251,191,36,.4); background: var(--dare-bg); color: #fbbf24; }
.choice-dare:hover { border-color: #fbbf24; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn { font-family: var(--font); font-size: 13px; font-weight: 500;
       letter-spacing: .04em; cursor: pointer; border-radius: var(--r-md);
       transition: all .15s; display: inline-flex; align-items: center;
       justify-content: center; gap: 7px; border: none; }
.btn .icon { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary { flex: 1; padding: 12px 16px; background: var(--accent-bg);
               border: 1px solid var(--accent-border); color: var(--accent); }
.btn-primary:hover { border-color: var(--accent); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.btn-secondary { padding: 12px 14px; background: var(--bg2);
                 border: 1px solid var(--border); color: var(--text3); }
.btn-secondary:hover { border-color: var(--border2); color: var(--text); }
.btn-secondary:disabled { opacity: .4; cursor: not-allowed; }
.actions { display: flex; gap: 8px; margin-bottom: .75rem; }

/* ── History ─────────────────────────────────────────────── */
.hist-section { margin-bottom: .75rem; }
.hist-pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.hist-pill { font-size: 11px; font-family: var(--font); padding: 4px 10px;
             border-radius: 20px; border: 1px solid var(--border);
             background: var(--bg2); color: var(--text3); cursor: pointer; transition: all .1s; }
.hist-pill:hover { border-color: var(--border2); color: var(--text); }

/* ── Toast ───────────────────────────────────────────────── */
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--bg3);
         border: 1px solid var(--accent-border); color: var(--accent);
         font-family: var(--font); font-size: 12px; padding: 9px 16px;
         border-radius: var(--r); opacity: 0; transition: opacity .2s;
         pointer-events: none; letter-spacing: .04em; z-index: 9999; }
.toast.show { opacity: 1; }

/* ── Divider / footer ────────────────────────────────────── */
hr.divider { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
.site-footer { text-align: center; font-size: 11px; color: var(--text4); letter-spacing: .06em; }
.site-footer a { color: var(--text3); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }

/* ── Vote ────────────────────────────────────────────────── */
.vote-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.vote-btn { padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border2);
            background: var(--bg3); color: var(--text2); font-family: var(--font);
            font-size: 13px; cursor: pointer; transition: all .15s; user-select: none; }
.vote-btn:hover { border-color: var(--accent-border); color: var(--accent); }
.vote-btn.voted { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.vote-count { display: inline-flex; align-items: center; justify-content: center;
              background: rgba(0,0,0,.15); border-radius: 10px;
              font-size: 10px; padding: 0 5px; margin-left: 5px; }

/* ── Finger (Put a Finger) ───────────────────────────────── */
.finger-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: .75rem; }
.finger-item { text-align: center; }
.finger-name { font-size: 10px; color: var(--text3); margin-bottom: 4px; letter-spacing: .03em; }
.finger { width: 34px; height: 46px; border-radius: 17px 17px 8px 8px;
          border: 1.5px solid var(--border2); background: var(--bg3);
          cursor: pointer; transition: all .2s; display: flex; align-items: flex-start;
          justify-content: center; padding-top: 5px; }
.finger .icon { width: 14px; height: 14px; color: var(--text3); }
.finger.down { background: rgba(248,113,113,.15); border-color: rgba(248,113,113,.4);
               transform: translateY(12px); opacity: .5; }
.finger.down .icon { color: #f87171; }
.finger-count-num { font-size: 11px; color: var(--text3); text-align: center;
                    margin-top: 3px; font-family: var(--font); }

/* ── Big word (Headband/Taboo) ───────────────────────────── */
.big-word { font-size: 34px; font-weight: 500; letter-spacing: .04em; color: var(--text-bright); }
.taboo-forbidden { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 6px; }
.taboo-forbidden span { font-size: 11px; padding: 2px 9px; border-radius: 20px;
                        background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3);
                        color: #f87171; letter-spacing: .04em; text-decoration: line-through; }

/* ── This or That ────────────────────────────────────────── */
.tot-options { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.tot-opt { padding: 7px 18px; border-radius: var(--r); font-family: var(--font);
           font-size: 14px; font-weight: 500; border: 1px solid var(--border2);
           background: var(--bg3); color: var(--text2); }
.tot-opt.a { border-color: var(--accent-border); background: var(--accent-bg); color: var(--accent); }
.vs { color: var(--text3); font-size: 12px; align-self: center; }

/* ── Timer ───────────────────────────────────────────────── */
.timer-bar { width: 100%; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.timer-bar-fill { height: 100%; background: var(--accent); border-radius: 2px;
                  transition: width .1s linear, background .3s; }
.timer-bar-fill.warning { background: #fbbf24; }
.timer-bar-fill.danger  { background: #f87171; }

/* ── Modal ───────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55);
                 z-index: 500; display: none; align-items: center;
                 justify-content: center; padding: 1.5rem; }
.modal-box { background: var(--bg2); border: 1px solid var(--border2);
             border-radius: var(--r-lg); width: 100%; max-width: 400px; max-height: 80vh; overflow-y: auto; }
.modal-header { display: flex; align-items: center; justify-content: space-between;
                padding: 14px 16px; border-bottom: 1px solid var(--border); }
.modal-close { background: none; border: none; cursor: pointer; font-size: 20px;
               color: var(--text3); line-height: 1; padding: 2px 6px; }
.modal-close:hover { color: var(--text); }

/* ── Theme switcher ──────────────────────────────────────── */
.theme-bar { display: flex; align-items: center; gap: 12px;
             padding: 14px 0; margin-top: .5rem; border-top: 1px solid var(--border); }
.theme-bar-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); }
.theme-dot { width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
             transition: transform .15s, box-shadow .15s; flex-shrink: 0;
             border: 3px solid transparent; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.theme-dot:hover { transform: scale(1.18); box-shadow: 0 0 0 2px rgba(128,128,128,.4); }
.theme-dot.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); transform: scale(1.15); }
.theme-dot.theme-purple { background: #a77fdb; }
.theme-dot.theme-light  { background: linear-gradient(135deg,#f0e8ff,#e0d4f8); border:1.5px solid #cbbfee; }

/* ── Index page ──────────────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: .75rem; }
.cat-tile { padding: 12px 11px; border-radius: var(--r-md); border: 1px solid var(--border);
            background: var(--bg2); color: var(--text2); font-family: var(--font);
            cursor: pointer; text-align: left; transition: all .15s;
            display: flex; align-items: center; gap: 10px; line-height: 1.3;
            text-decoration: none; }
.cat-tile .tile-icon { flex-shrink: 0; color: var(--text3); }
.cat-tile .tile-icon .icon { width: 20px; height: 20px; }
.cat-tile .tile-name { display: block; font-size: 12px; font-weight: 500; color: var(--text); }
.cat-tile .tile-desc { display: block; font-size: 10px; color: var(--text3); margin-top: 1px; }
.cat-tile:hover { border-color: var(--accent-border); background: var(--bg3); }
.cat-tile:hover .tile-icon { color: var(--accent); }

/* ── Focus / Fullscreen overlay ──────────────────────────── */
.focus-overlay { display: none; position: fixed; inset: 0; background: var(--bg);
                 z-index: 300; flex-direction: column; align-items: stretch;
                 padding: 0; overflow: hidden; }
.focus-overlay.open { display: flex; }
.focus-topbar { display: flex; align-items: center; justify-content: space-between;
                padding: 12px 16px; border-bottom: 1px solid var(--border);
                flex-shrink: 0; }
.focus-title { font-size: 14px; font-weight: 500; color: var(--text2);
               letter-spacing: .06em; }
.focus-exit-btn { display: inline-flex; align-items: center; gap: 6px;
                  background: none; border: 1px solid var(--border); border-radius: var(--r);
                  color: var(--text3); font-family: var(--font); font-size: 11px;
                  letter-spacing: .04em; padding: 5px 12px; cursor: pointer;
                  transition: all .15s; }
.focus-exit-btn .icon { width: 13px; height: 13px; }
.focus-exit-btn:hover { border-color: var(--border2); color: var(--text2); }
.focus-players { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px;
                 border-bottom: 1px solid var(--border); flex-shrink: 0; }
.focus-players:empty { display: none; }
.player-chip-mini { display: inline-flex; align-items: center; padding: 2px 10px;
                    border-radius: 20px; border: 1px solid var(--border2);
                    background: var(--bg3); font-family: var(--font); font-size: 11px;
                    color: var(--text2); transition: all .15s; }
.player-chip-mini.active { background: var(--bg4); font-weight: 500; }
.focus-card { flex: 1 !important; min-height: 0 !important; height: auto !important;
              max-height: none !important; margin: 1rem 1rem 0 !important;
              border-radius: var(--r-lg) !important; font-size: 20px; }
.focus-card .card-q { font-size: 22px; }
.focus-actions { display: flex; gap: 8px; padding: 12px 16px; flex-shrink: 0; }
.focus-stats { font-size: 11px; color: var(--text3); text-align: center;
               letter-spacing: .08em; padding-bottom: 6px; flex-shrink: 0; }

/* ── Page transitions ────────────────────────────────────── */
@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.page { animation: page-in .2s ease-out; }
.page.leaving {
  opacity: 0; transform: translateY(-4px);
  transition: opacity .12s ease-in, transform .12s ease-in;
  animation: none;
  pointer-events: none;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .page { padding: 1.25rem 1rem 4rem; }
  .cat-grid { grid-template-columns: 1fr; }
  .card-q { font-size: 15px; }
  .level-btn, .mode-btn { font-size: 10px; padding: 7px 5px; }
  .big-word { font-size: 26px; }
}