/* Shared theme + atom styles for the History Quiz prototypes. */

/* ----- font stacks ----- */
:root{
  --font-serif:'Spectral',Georgia,'Times New Roman',serif;
  --font-sans:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* =================================================================== THEMES */
/* default = paper */
:root,[data-theme="paper"]{
  --bg:#ece5d4; --bg-2:#e3dbc6; --surface:#fffdf7; --ink:#2b2a26; --ink-soft:#6f6a5e;
  --line:#d6cfba; --accent:#5b61e6; --accent-soft:#e7e8fb; --on-accent:#ffffff;
  --good:#3f9c63; --good-soft:#e0f0e6; --bad:#d3624a; --bad-soft:#f6e3dd; --amber:#cf9a37;
  --card-bg:#fffdf7; --card-ink:#2b2a26; --card-line:#2b2a26; --card-shadow:3px 4px 0 rgba(43,42,38,.16);
  --pill-bg:#efe9da; --radius:18px; --radius-card:16px; --radius-pill:999px;
  --head:var(--font-serif); --body:var(--font-sans); --head-weight:600;
  --frame:#2b2a26; --bezel:#11110f; --hud-bg:rgba(255,253,247,.85); --grain:0;
}
[data-theme="almanac"]{
  --bg:#e2d4b4; --bg-2:#d6c49c; --surface:#f4ead0; --ink:#3a2f21; --ink-soft:#7c6a4d;
  --line:#cdb88c; --accent:#9a5b25; --accent-soft:#ecd9bd; --on-accent:#fbf3df;
  --good:#4f7a45; --good-soft:#dde7c9; --bad:#a8482c; --bad-soft:#ecd2c4; --amber:#b07d24;
  --card-bg:#f7eed7; --card-ink:#3a2f21; --card-line:#8a6f44; --card-shadow:3px 4px 0 rgba(58,47,33,.22);
  --pill-bg:#e7d6b3; --radius:14px; --radius-card:12px; --radius-pill:8px;
  --head:var(--font-serif); --body:var(--font-serif); --head-weight:700;
  --frame:#3a2f21; --bezel:#241c10; --hud-bg:rgba(244,234,208,.9); --grain:1;
}
[data-theme="cardgame"]{
  --bg:#eef1f8; --bg-2:#e2e7f3; --surface:#ffffff; --ink:#1b2030; --ink-soft:#6b7488;
  --line:#dde3ef; --accent:#2f6bff; --accent-soft:#e2ebff; --on-accent:#ffffff;
  --good:#16a96b; --good-soft:#d6f4e6; --bad:#ff5546; --bad-soft:#ffe1de; --amber:#f0a000;
  --card-bg:#ffffff; --card-ink:#1b2030; --card-line:#e6eaf2; --card-shadow:0 8px 20px rgba(27,32,48,.13);
  --pill-bg:#eef1f8; --radius:24px; --radius-card:20px; --radius-pill:999px;
  --head:var(--font-sans); --body:var(--font-sans); --head-weight:700;
  --frame:#11131a; --bezel:#000; --hud-bg:rgba(255,255,255,.88); --grain:0;
}
[data-theme="dark"]{
  --bg:#14151b; --bg-2:#1b1d26; --surface:#23252f; --ink:#ecebe5; --ink-soft:#9a9bab;
  --line:#33353f; --accent:#7c83ff; --accent-soft:#2a2c42; --on-accent:#0c0d12;
  --good:#3fcb8a; --good-soft:#173026; --bad:#ff6b5e; --bad-soft:#321f1d; --amber:#e0a93c;
  --card-bg:#272a34; --card-ink:#ecebe5; --card-line:#3a3d49; --card-shadow:0 10px 26px rgba(0,0,0,.5);
  --pill-bg:#2c2f3a; --radius:22px; --radius-card:18px; --radius-pill:999px;
  --head:var(--font-sans); --body:var(--font-sans); --head-weight:600;
  --frame:#2a2d38; --bezel:#000; --hud-bg:rgba(35,37,47,.85); --grain:0;
}

/* =================================================================== BASE */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(120% 90% at 50% -10%, var(--bg-2), var(--bg) 70%);
  color:var(--ink); font-family:var(--body); -webkit-font-smoothing:antialiased;
  overflow:hidden; transition:background .4s,color .4s;
  user-select:none; -webkit-user-select:none; touch-action:none;
}
.stage{position:fixed;inset:0;}

/* phone frame (390x844 logical) */
.phone{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:390px;height:844px;background:var(--frame);border-radius:54px;padding:13px;
  box-shadow:0 2px 0 2px var(--bezel), 0 40px 80px -20px rgba(0,0,0,.45);
  transition:background .4s;
}
.screen{
  position:relative;width:100%;height:100%;background:var(--bg);border-radius:42px;overflow:hidden;
  display:flex;flex-direction:column;transition:background .4s;
}
.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:150px;height:30px;background:var(--frame);border-radius:0 0 18px 18px;z-index:40;}
.statusbar{position:absolute;top:0;left:0;right:0;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;font-weight:600;color:var(--ink);z-index:30;font-family:var(--font-sans);}
.statusbar .dots{display:flex;gap:5px;align-items:center}
.app{position:absolute;inset:0;padding:54px 18px 22px;display:flex;flex-direction:column;}

/* =================================================================== ATOMS */
.btn{
  appearance:none;border:none;cursor:pointer;font-family:var(--font-sans);font-weight:700;font-size:15px;
  background:var(--accent);color:var(--on-accent);border-radius:var(--radius-pill);padding:13px 22px;
  box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 70%, #000);transition:transform .1s,box-shadow .1s,background .3s;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 70%, #000);}
.btn[disabled]{opacity:.4;pointer-events:none;}
.btn.ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line);box-shadow:0 3px 0 var(--line);}
.btn.ghost:active{box-shadow:0 1px 0 var(--line);}
.btn.sm{font-size:13px;padding:9px 15px;box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 70%, #000);}

.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-sans);font-weight:700;font-size:13px;
  background:var(--pill-bg);color:var(--ink);border-radius:var(--radius-pill);padding:4px 11px;}
.pill.year{background:var(--ink);color:var(--bg);} 
.pill.good{background:var(--good);color:#fff;}
.pill.bad{background:var(--bad);color:#fff;}
.pill.accent{background:var(--accent);color:var(--on-accent);}
.pill.ghost{background:transparent;border:1.5px dashed var(--line);color:var(--ink-soft);}

/* event card */
.card{
  background:var(--card-bg);color:var(--card-ink);border:1.5px solid var(--card-line);
  border-radius:var(--radius-card);box-shadow:var(--card-shadow);
  display:flex;align-items:center;gap:11px;padding:11px 13px;position:relative;
}
[data-theme="cardgame"] .card,[data-theme="dark"] .card{border-color:var(--card-line);}
.card .ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;font-size:23px;line-height:1;}
[data-theme="cardgame"] .card .ic{border-radius:14px;}
.card .ttl{font-family:var(--head);font-weight:var(--head-weight);font-size:15px;line-height:1.22;letter-spacing:.1px;}
.card.sm{padding:8px 10px;gap:9px;border-radius:calc(var(--radius-card) - 4px);}
.card.sm .ic{width:34px;height:34px;font-size:19px;border-radius:10px;}
.card.sm .ttl{font-size:13px;}
.card.lg .ic{width:64px;height:64px;font-size:34px;border-radius:18px;}
.card.lg .ttl{font-size:20px;}

/* feedback flourishes */
.card.is-correct{border-color:var(--good);box-shadow:0 0 0 2px var(--good), var(--card-shadow);}
.card.is-wrong{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad), var(--card-shadow);}
@keyframes popin{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes liftpop{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.pop{animation:popin .34s cubic-bezier(.2,1.3,.4,1)}
.shake{animation:nudge .32s}

/* HUD score chip */
.scorechip{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--font-sans);}
.scorechip b{font-size:20px;font-weight:700;color:var(--accent);}
.scorechip span{font-size:11px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.6px;}
.streak{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-sans);font-weight:700;font-size:13px;color:var(--bad);}

/* toast */
.toast{position:absolute;left:50%;transform:translateX(-50%);z-index:60;
  font-family:var(--font-sans);font-weight:700;font-size:15px;color:#fff;border-radius:999px;padding:9px 18px;
  box-shadow:0 8px 20px rgba(0,0,0,.25);white-space:nowrap;}
.toast.good{background:var(--good);}.toast.bad{background:var(--bad);}

/* dragged ghost */
.ghost{position:absolute;z-index:200;pointer-events:none;width:300px;
  box-shadow:0 18px 30px -8px rgba(0,0,0,.4);transform:rotate(-2deg) scale(1.03);}

/* generic gap drop indicator */
.gap{height:10px;border-radius:999px;transition:height .14s,background .14s;}
.gap.armed{height:46px;background:var(--accent-soft);border:2px dashed var(--accent);}

/* scroll regions hide scrollbars */
.noscroll::-webkit-scrollbar{display:none}
.noscroll{scrollbar-width:none;-ms-overflow-style:none;}

/* paper grain for almanac */
[data-theme="almanac"] .screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:radial-gradient(rgba(120,90,40,.06) 1px, transparent 1px);background-size:4px 4px;}