/*
 * themes.css — the 11 ThemeStore palettes + the chunky component recipes,
 * lifted from the TV port (which ports res/values/styles.xml + bg_game_*.xml).
 *
 * Sizing: everything is Android dp numbers × var(--u). app.css sets --u
 * responsively (a phone-width play column that scales to the viewport).
 *
 * The signature look: NO blur shadows — a hard "shadow lip" (box-shadow:
 * 0 5u 0 0) under a gradient face with a dark stroke; keys/buttons add a
 * translucent white gloss bar; press = the face physically drops onto the lip.
 */

/* --u lives OUTSIDE the theme blocks so a page override keeps winning even
   once a theme picker sets data-theme. app.css provides the responsive value. */
:root { --u: 1px; }

:root,
:root[data-theme="classic"] {
  --accent1: #BFE6C5;
  --accent2: #F4B7C0;
  --face: #FFFFFF;
  --face-top: #ECECEC;
  --panel-face: #FAFAFA;
  --panel-top: #E4E4E4;
  --text-primary: #222222;
  --text-secondary: #666666;
  --stroke: #2A2A2A;
  --shadow: #2A2A2A;
  --bg: #EAEAEA;
  --answer-ink: #512DA8;
  --stat-red: #E53935;
  --good-green: #1A8F3C;
}

:root[data-theme="pink"]       { --accent1:#FFB7C5; --accent2:#FFD8A8; --face:#FFE3EE; --face-top:#F5C8D8; --panel-face:#FCD7E5; --panel-top:#F0BFD0; --bg:#F8E0EA; }
:root[data-theme="mint"]       { --accent1:#A8E6C0; --accent2:#B8E0F0; --face:#E2F7EA; --face-top:#BDE6CC; --panel-face:#D5EFE0; --panel-top:#B0DEC0; --bg:#DDF1E5; }
:root[data-theme="lavender"]   { --accent1:#D5C4F0; --accent2:#FFCCEA; --face:#EFE5FB; --face-top:#D5C4F0; --panel-face:#E5D9F4; --panel-top:#CBB8E8; --bg:#E6DEF2; }
:root[data-theme="peach"]      { --accent1:#FFCBA4; --accent2:#FFE6B5; --face:#FFEBD9; --face-top:#F8CFAA; --panel-face:#FCE0CC; --panel-top:#F2C39E; --bg:#FAE5D6; }
:root[data-theme="lemon"]      { --accent1:#FFEC8B; --accent2:#FFD3A5; --face:#FFF8D9; --face-top:#F5E68F; --panel-face:#FCF1CB; --panel-top:#EDDB81; --bg:#FBF3D0; }
:root[data-theme="sky"]        { --accent1:#A8D2EE; --accent2:#D5C4F0; --face:#E0F0FB; --face-top:#A8D2EE; --panel-face:#D2E6F5; --panel-top:#9DC8E5; --bg:#D6E9F7; }
:root[data-theme="rose"]       { --accent1:#F0B8B8; --accent2:#FFD9C0; --face:#FCE0E0; --face-top:#F0B8B8; --panel-face:#F4D2D2; --panel-top:#E6ABAB; --bg:#F2D8D8; }
:root[data-theme="sage"]       { --accent1:#BFD4B0; --accent2:#E5E2A8; --face:#E5F0DC; --face-top:#BFD4B0; --panel-face:#D8E5CE; --panel-top:#B2C7A2; --bg:#DDE7D5; }
:root[data-theme="periwinkle"] { --accent1:#B8BFEC; --accent2:#FFB7DE; --face:#E5E8FB; --face-top:#B8BFEC; --panel-face:#D8DCF4; --panel-top:#ABB2E2; --bg:#DDE0F4; }
:root[data-theme="coral"]      { --accent1:#F6BBA0; --accent2:#FFE4B5; --face:#FFE3D5; --face-top:#F6BBA0; --panel-face:#FCD6C5; --panel-top:#EDAD90; --bg:#FBDED1; }
:root[data-theme="dark"] {
  --accent1:#5BC8A8; --accent2:#E66B7C;
  --face:#262A33; --face-top:#181B22;
  --panel-face:#1E222B; --panel-top:#13161D;
  --text-primary:#F0F0F0; --text-secondary:#9C9CA8;
  --stroke:#000000; --shadow:#000000;
  --bg:#0F1115;
}

/* ------------------------------------------------------------ foundations */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'Roboto', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

.mw-black { font-weight: 900; }

.mw-outline   { font-weight: 900; paint-order: stroke fill; -webkit-text-stroke: calc(3 * var(--u)) var(--stroke); }
.mw-outline-2 { font-weight: 900; paint-order: stroke fill; -webkit-text-stroke: calc(2 * var(--u)) var(--stroke); }
.mw-outline-4 { font-weight: 900; paint-order: stroke fill; -webkit-text-stroke: calc(4 * var(--u)) var(--stroke); }

.mw-label {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

/* ------------------------------------------------------------------ card */
.mw-card {
  background: linear-gradient(to bottom, var(--face-top) 0%, var(--face) 50%, var(--face) 100%);
  border: calc(3 * var(--u)) solid var(--stroke);
  border-radius: calc(24 * var(--u));
  box-shadow: 0 calc(5 * var(--u)) 0 0 var(--shadow);
}

.mw-panel {
  background: linear-gradient(to bottom, var(--panel-top) 0%, var(--panel-face) 100%);
  border: calc(4 * var(--u)) solid var(--stroke);
  border-radius: calc(20 * var(--u));
}

/* ----------------------------------------------------- keypad tile (keys) */
.mw-tile {
  position: relative;
  background: linear-gradient(to bottom, var(--face-top) 0%, var(--face) 50%, var(--face) 100%);
  border: calc(3 * var(--u)) solid var(--stroke);
  border-radius: calc(16 * var(--u));
  box-shadow: 0 calc(5 * var(--u)) 0 0 var(--shadow);
  color: var(--text-primary);
  font-weight: 900;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
  touch-action: manipulation;
}
.mw-tile::before {
  content: '';
  position: absolute;
  left: calc(8 * var(--u)); right: calc(8 * var(--u));
  top: calc(6 * var(--u)); bottom: calc(30 * var(--u));
  border-radius: calc(10 * var(--u));
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.5));
  pointer-events: none;
}
.mw-tile:active, .mw-tile.pressed {
  transform: translateY(calc(5 * var(--u)));
  box-shadow: 0 calc(2 * var(--u)) 0 0 var(--shadow);
  transition-duration: 50ms;
}
.mw-tile:active::before, .mw-tile.pressed::before { opacity: 0; }

/* --------------------------------------------------------- button (pills) */
.mw-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, var(--face-top) 0%, var(--face) 50%, var(--face) 100%);
  border: calc(3 * var(--u)) solid var(--stroke);
  border-radius: calc(36 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) 0 0 var(--shadow);
  color: var(--text-primary);
  font-family: inherit;
  font-weight: 900;
  font-size: calc(20 * var(--u));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-height: calc(76 * var(--u));
  padding: calc(8 * var(--u)) calc(24 * var(--u)) calc(16 * var(--u));
  cursor: pointer;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
  touch-action: manipulation;
}
.mw-btn::before {
  content: '';
  position: absolute;
  left: calc(14 * var(--u)); right: calc(14 * var(--u));
  top: calc(10 * var(--u)); bottom: calc(48 * var(--u));
  border-radius: calc(22 * var(--u));
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.5));
  pointer-events: none;
}
.mw-btn:active, .mw-btn.pressed {
  transform: translateY(calc(6 * var(--u)));
  box-shadow: 0 calc(2 * var(--u)) 0 0 var(--shadow);
  transition-duration: 50ms;
}
.mw-btn:active::before, .mw-btn.pressed::before { opacity: 0; }
.mw-btn.gold { background: linear-gradient(to bottom, #FFE9A0, #F5C233 55%, #E8A41E); border-color: #B8860B; box-shadow: 0 calc(6 * var(--u)) 0 0 #8A5A10; color: #3A2606; }

/* ------------------------------------------------------------ progress bar */
.mw-progress {
  height: calc(16 * var(--u));
  background: rgba(0, 0, 0, 0.2);
  border: calc(2 * var(--u)) solid var(--stroke);
  border-radius: calc(10 * var(--u));
  overflow: hidden;
}
.mw-progress .mw-progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(to bottom, var(--face-top), var(--face));
  border-right: calc(2 * var(--u)) solid var(--stroke);
  border-radius: calc(8 * var(--u));
  transition: width 250ms ease-out;
}

/* ------------------------------------------------------- shared animations */
@keyframes mw-shake {
  0%, 100% { transform: translateX(0); }
  8.3% { transform: translateX(calc(-10 * var(--u))); }
  25%  { transform: translateX(calc(10 * var(--u))); }
  41.6%{ transform: translateX(calc(-10 * var(--u))); }
  58.3%{ transform: translateX(calc(10 * var(--u))); }
  75%  { transform: translateX(calc(-10 * var(--u))); }
  91.6%{ transform: translateX(calc(10 * var(--u))); }
}
.shake { animation: mw-shake 300ms linear; }

@keyframes mw-pop-fade {
  0%   { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.2); opacity: 0; }
}
.pop-fade { animation: mw-pop-fade 800ms ease-in-out forwards; }
.pop-fade-once { animation: mw-pop-fade 800ms ease-in-out; }

@keyframes mw-slide-in {
  0%   { transform: translateY(-50%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.slide-in { animation: mw-slide-in 300ms cubic-bezier(0, 0, 0.2, 1); }

.fade-out { opacity: 0; transition: opacity 100ms ease-in; }

@keyframes mw-pop {
  0% { transform: scale(0.5); } 70% { transform: scale(1.15); } 100% { transform: scale(1); }
}
.pop { animation: mw-pop 500ms ease-out; }