:root{
  --bg:#241016; --bg2:#2c1219; --panel:#31161e;
  --paper:#efe4cf; --paper2:#e7d9bd; --paper-edge:#d8c7a3;
  --ink:#2a1a12; --ink-soft:#6b5642;
  --brass:#c79a4b; --brass-dim:#987434;
  --sage:#93a877; --sage-deep:#6f855a;
  --rose:#cf7488; --rose-deep:#a5526a;
  --cream:#f3e9d8; --muted:rgba(243,233,216,.55); --faint:rgba(243,233,216,.28);
  --line:rgba(199,154,75,.28);
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
html,body{margin:0}
body{
  background:radial-gradient(120% 80% at 50% -10%, #3a1922 0%, var(--bg) 55%, #1a0b0f 100%);
  background-attachment:fixed;
  color:var(--cream); font-family:"Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100dvh; display:flex; flex-direction:column;
  /* a pull-to-refresh mid-flight would reload the app and drop the run */
  overscroll-behavior-y:contain;
  -webkit-tap-highlight-color:transparent;
}
/* Safe areas: the notch and the home indicator. index.html sets viewport-fit=cover. */
.wrap{
  width:100%; max-width:640px; margin:0 auto; flex:1; display:flex; flex-direction:column;
  padding:calc(22px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
          calc(30px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
}
button{
  font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;
  touch-action:manipulation;               /* no double-tap zoom on controls */
  -webkit-user-select:none; user-select:none;
}
button:focus-visible,a:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:6px}
/* Every interactive control clears the 44px minimum tap target. `gap` because
   inline-flex collapses the whitespace between a label and a nested <b>. */
.link,.exit,.back-link,.reset{min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:5px}

/* header */
header{display:flex; align-items:baseline; justify-content:space-between; gap:14px}
.brand{display:flex; flex-direction:column; gap:2px}
.brand h1{font-family:"Cormorant Garamond",serif; font-weight:600; font-size:30px; letter-spacing:.02em; margin:0; line-height:1}
.brand small{color:var(--muted); font-size:12px; letter-spacing:.04em}
.streak{text-align:right; line-height:1.1}
.streak b{font-size:22px; font-family:"Cormorant Garamond",serif; color:var(--brass)}
.streak span{display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}

.view{flex:1; display:none; flex-direction:column}
.view.active{display:flex}
.hidden{display:none !important}

/* home */
#home{justify-content:center; gap:26px}
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.stat{background:linear-gradient(180deg,var(--panel),#2a1017); border:1px solid var(--line); border-radius:14px; padding:16px 12px; text-align:center}
.stat b{display:block; font-family:"Cormorant Garamond",serif; font-size:30px; color:var(--cream); line-height:1}
.stat span{display:block; margin-top:6px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.home-lead{font-family:"Cormorant Garamond",serif; font-size:23px; line-height:1.35; color:var(--cream); font-weight:500}
.home-lead em{font-style:italic; color:var(--brass)}
.btn-primary{background:linear-gradient(180deg,#d7ab5b,#b9873a); color:#241016; font-weight:600; padding:16px 22px; min-height:56px; border-radius:13px; font-size:16px; width:100%; box-shadow:0 10px 26px -10px rgba(199,154,75,.7); transition:transform .12s ease, filter .12s}
.btn-primary:hover{filter:brightness(1.05)} .btn-primary:active{transform:translateY(1px)}
.link{background:none; color:var(--muted); font-size:13px; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line); padding:8px}
.link:hover{color:var(--cream)}

/* session */
#session{gap:16px}
.prog{display:flex; align-items:center; gap:12px; margin-top:4px}
.prog-track{flex:1; height:3px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden}
.prog-fill{height:100%; width:0; background:linear-gradient(90deg,var(--brass-dim),var(--brass)); transition:width .3s ease}
.prog-num{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.05em; min-width:52px; text-align:right}
.exit{font-size:12px; color:var(--muted); padding-right:4px; flex-shrink:0} .exit:hover{color:var(--rose)}

.stage{flex:1; display:flex; align-items:center; perspective:1600px; min-height:min(300px,40dvh)}
/* dvh, not vh: iOS vh assumes the URL bar is hidden and clips the card when it is not. */
.card{position:relative; width:100%; aspect-ratio:5/4; max-height:56dvh; transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.7,.2,1); touch-action:manipulation;
  -webkit-user-select:none; user-select:none; cursor:pointer}
.card.flipped{transform:rotateY(180deg)}
.face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:16px; padding:30px; display:flex; flex-direction:column;
  background:radial-gradient(130% 120% at 50% 0%, var(--paper) 0%, var(--paper2) 100%); color:var(--ink); box-shadow:var(--shadow); border:1px solid var(--paper-edge)}
.face::before{content:""; position:absolute; inset:12px; border:1px solid rgba(152,116,52,.45); border-radius:9px; pointer-events:none}
.face .corner{position:absolute; width:9px; height:9px; border:1px solid var(--brass-dim)}
.c-tl{top:7px; left:7px; border-right:none; border-bottom:none}
.c-tr{top:7px; right:7px; border-left:none; border-bottom:none}
.c-bl{bottom:7px; left:7px; border-right:none; border-top:none}
.c-br{bottom:7px; right:7px; border-left:none; border-top:none}
.face .kind{font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--brass-dim); font-weight:600}
.face .kind.warn{color:var(--rose-deep)}
.back{transform:rotateY(180deg)}

.face-body{flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px}
.name{font-family:"Cormorant Garamond",serif; font-weight:600; line-height:1.12; font-size:clamp(24px,6.2vw,40px); color:var(--ink)}
.ask{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft)}
.detail{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.d-lead{font-family:"Cormorant Garamond",serif; font-weight:600; line-height:1.14; font-size:clamp(22px,5.4vw,32px); color:var(--ink)}
.d-context{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-dim); font-weight:600; max-width:34ch}
.d-notes{font-size:14.5px; color:var(--ink-soft); line-height:1.45; max-width:34ch; font-style:italic}

/* conjugation tables: both faces lay out identically so they read the same way */
.listing{display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; max-width:31ch}
.l-lead{font-family:"Cormorant Garamond",serif; font-weight:600; line-height:1.1;
  font-size:clamp(22px,5.2vw,32px); color:var(--ink); text-align:center}
.l-sub{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-dim); font-weight:600}
.l-rows{list-style:none; margin:4px 0 0; padding:0; width:100%; display:flex; flex-direction:column}
.l-rows li{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:4px 0; border-bottom:1px solid rgba(152,116,52,.18)}
.l-rows li:last-child{border-bottom:none}
.l-rows.dense li{padding:2.5px 0}
.l-rows .lk{color:var(--ink-soft); font-size:12.5px; font-style:italic; flex-shrink:0}
.l-rows .lv{color:var(--ink); font-size:15px; font-weight:500; text-align:right}
.l-rows.dense .lk{font-size:11.5px}
.l-rows.dense .lv{font-size:14px}

/* drawn figures: botanical line art, sized to whatever room the face has left */
.figure{flex:1; min-height:0; width:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:7px}
/* The SVG is taken out of flow and pinned to the box, rather than sized with a
   percentage height. A percentage height resolves against the parent's height,
   and a flex item's height is not definite in every engine -- Gecko in
   particular can compute it as auto and let the drawing size itself. Pinning
   removes the question: preserveAspectRatio letterboxes the drawing inside
   whatever room the card has left, in any browser. */
.g-art{flex:1 1 0; min-height:0; width:100%; position:relative}
.g-art svg{position:absolute; inset:0; display:block; width:100%; height:100%}
.g-lead{font-family:"Cormorant Garamond",serif; font-weight:600; line-height:1.12;
  font-size:clamp(20px,4.8vw,28px); color:var(--ink)}
.g-sub{font-size:12px; letter-spacing:.1em; color:var(--brass-dim); font-weight:600; max-width:34ch}
.g-notes{font-size:13px; color:var(--ink-soft); line-height:1.4; max-width:34ch; font-style:italic}

.controls{min-height:60px; display:flex; gap:12px}
.btn-flip{width:100%; min-height:60px; background:linear-gradient(180deg,#40202a,#331620); border:1px solid var(--line); color:var(--cream); padding:17px; border-radius:13px; font-size:15px; letter-spacing:.06em; font-weight:500; transition:border-color .15s, transform .1s}
.btn-flip:hover{border-color:var(--brass)} .btn-flip:active{transform:translateY(1px)}
.btn-flip .hint{color:var(--faint); font-size:12px; margin-left:8px}
.rate{flex:1; min-height:60px; padding:17px; border-radius:13px; font-size:15px; font-weight:600; border:1px solid transparent; transition:transform .1s, filter .12s}
.rate:active{transform:translateY(1px)}
.rate .k{display:block; font-size:10px; font-weight:500; letter-spacing:.12em; opacity:.6; margin-top:3px}
.miss{background:rgba(207,116,136,.14); border-color:var(--rose-deep); color:var(--rose)} .miss:hover{filter:brightness(1.15)}
.got{background:rgba(147,168,119,.16); border-color:var(--sage-deep); color:var(--sage)} .got:hover{filter:brightness(1.12)}

/* summary */
#summary{justify-content:center; gap:22px; text-align:center}
#summary .big{font-family:"Cormorant Garamond",serif; font-size:34px; color:var(--brass)}
.sum-stats{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
.revisit{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; text-align:left}
.revisit h4{margin:0 0 10px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--rose)}
.revisit ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px}
.revisit li{font-size:14px; color:var(--cream); display:flex; justify-content:space-between; gap:12px}
.revisit li span{color:var(--muted); font-size:12.5px}
.sum-actions{display:flex; flex-direction:column; gap:10px}

/* cellar */
#cellar{gap:20px}
.back-link{align-self:flex-start; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.back-link:hover{color:var(--brass)}
.cellar-title{font-family:"Cormorant Garamond",serif; font-size:28px; margin:0}
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.metric{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 8px; text-align:center}
.metric b{display:block; font-family:"Cormorant Garamond",serif; font-size:24px; color:var(--cream)}
.metric span{display:block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:3px}
.block{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px}
.block h3{margin:0 0 14px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass)}
.bar-row{display:flex; align-items:center; gap:12px; margin-bottom:11px}
.bar-row:last-child{margin-bottom:0}
.bar-label{width:92px; font-size:13px; color:var(--cream); flex-shrink:0}
.bar-track{flex:1; height:8px; background:rgba(255,255,255,.07); border-radius:5px; overflow:hidden}
.bar-fill{height:100%; border-radius:5px; background:linear-gradient(90deg,var(--brass-dim),var(--brass))}
.bar-pct{width:52px; text-align:right; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.struggle li{display:flex; justify-content:space-between; gap:12px; font-size:14px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.05)}
.struggle li:last-child{border-bottom:none}
.struggle .nm{color:var(--cream)} .struggle .sc{color:var(--rose); font-size:12.5px; font-variant-numeric:tabular-nums}
.empty{color:var(--muted); font-size:13.5px; font-style:italic}
.reset{color:var(--rose-deep); font-size:12px; align-self:center; text-decoration:underline; text-underline-offset:3px}
.reset:hover{color:var(--rose)}

/* deck chooser */
#decks{justify-content:center; gap:18px}
.deckpick{display:flex; flex-direction:column; gap:8px}
.dp-label{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
/* A real <select>, so the phone gets its native picker and the keyboard works.
   appearance:none to drop the platform chrome, with our own caret. */
#deckSelect{
  appearance:none; -webkit-appearance:none;
  width:100%; min-height:60px; padding:16px 44px 16px 18px;
  font-family:"Cormorant Garamond",serif; font-size:23px; font-weight:600;
  color:var(--cream); background:linear-gradient(180deg,var(--panel),#2a1017);
  border:1px solid var(--line); border-radius:14px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),
                   linear-gradient(135deg,var(--brass) 50%,transparent 50%);
  background-position:calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  transition:border-color .15s;
}
#deckSelect:hover{border-color:var(--brass)}
#deckSelect option{background:var(--panel); color:var(--cream); font-size:16px}
.deckinfo{min-height:64px}
.dp-sub{margin:0; font-size:13.5px; color:var(--muted); line-height:1.5}
.dp-prog{margin:8px 0 0; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brass-dim); font-variant-numeric:tabular-nums}
#deckRemoveBtn{color:var(--rose-deep)} #deckRemoveBtn:hover{color:var(--rose)}

/* build your own deck: copy a brief, hand it to an AI, paste the deck back */
.mkdeck{border:1px solid var(--line); border-radius:14px; background:rgba(49,22,30,.5)}
.mkdeck > summary{
  list-style:none; cursor:pointer; padding:15px 18px; min-height:44px;
  display:flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
}
.mkdeck > summary::-webkit-details-marker{display:none}
.mkdeck > summary::after{content:"+"; margin-left:auto; font-size:17px; color:var(--brass-dim)}
.mkdeck[open] > summary::after{content:"\2212"}
.mkdeck[open] > summary{border-bottom:1px solid var(--line)}
.mkdeck > *:not(summary){margin:12px 18px}
.mkdeck > *:last-child{margin-bottom:18px}
.mk-steps{padding-left:20px; color:var(--muted); font-size:13px; line-height:1.6}
.mk-steps li{margin-bottom:3px}
.mk-input,.mk-text{
  display:block; width:calc(100% - 36px); box-sizing:border-box;
  background:#24101699; border:1px solid var(--line); border-radius:11px;
  color:var(--cream); padding:12px 14px; font-size:14px; font-family:inherit;
}
.mk-input{min-height:44px}
.mk-text{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; line-height:1.5; resize:vertical}
.mk-input:focus,.mk-text:focus{outline:none; border-color:var(--brass)}
.mk-input::placeholder,.mk-text::placeholder{color:var(--faint)}
.btn-quiet{
  width:calc(100% - 36px); min-height:48px; padding:13px;
  background:linear-gradient(180deg,#40202a,#331620); border:1px solid var(--line);
  color:var(--cream); border-radius:12px; font-size:14px; letter-spacing:.05em;
  transition:border-color .15s, opacity .15s;
}
.btn-quiet:hover:not(:disabled){border-color:var(--brass)}
.btn-quiet:disabled{opacity:.4; cursor:not-allowed}
.mk-note{color:var(--brass-dim); font-size:12.5px; line-height:1.5}
.mk-report{
  border:1px solid var(--line); border-left:2px solid var(--brass-dim);
  border-radius:10px; padding:12px 14px; font-size:12.5px; line-height:1.55;
}
.mk-report p{margin:0 0 6px} .mk-report p:last-child{margin-bottom:0}
.mk-report ul{margin:0 0 8px; padding-left:18px} .mk-report ul:last-child{margin-bottom:0}
.mk-ok{color:var(--cream); font-family:"Cormorant Garamond",serif; font-size:18px; font-weight:600}
.mk-bad{color:var(--rose)}
.mk-meta{color:var(--muted); font-size:11px; letter-spacing:.1em; text-transform:uppercase}
.mk-errs{color:var(--rose)}
.mk-warns{color:var(--brass-dim)}

/* profiles */
#profiles{gap:18px}
.pnote{color:var(--muted); font-size:13.5px; line-height:1.5; margin:0}
.pnote b{color:var(--cream); font-weight:600}
.plist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.prow{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.prow.current{border-color:var(--brass)}
.pname{flex:1; min-width:0; text-align:left; padding:6px 0; min-height:44px; display:flex;
  flex-direction:column; justify-content:center; gap:3px}
.pname .nm{color:var(--cream); font-size:15px; font-weight:500}
.prow.current .pname .nm{color:var(--brass)}
.pname .sub{color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums}
.pacts{display:flex; gap:4px; flex-shrink:0}
.link.tiny{font-size:12px; padding:8px 10px; min-height:44px}
.link.tiny.danger{color:var(--rose-deep)}
.link.tiny.danger:hover{color:var(--rose)}
.pio{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.home-foot{display:flex; justify-content:center; gap:6px; flex-wrap:wrap; align-items:center}
.home-foot .link b{color:var(--cream); font-weight:600}

.foot{margin-top:22px; text-align:center; color:var(--faint); font-size:11px; letter-spacing:.05em}
/* On a phone the 5:4 ratio is width-driven and leaves the card small in a tall
   stage. Let it fill the stage instead, so the type is readable without zoom. */
@media (max-width:520px){
  /* align-self, not height:100% -- the stage is flex-sized, so a percentage
     height has no definite parent to resolve against and collapses to 0. */
  .card{aspect-ratio:auto; align-self:stretch}
}
@media (max-width:420px){
  .l-rows .lv{font-size:14px}
  .l-rows.dense .lv{font-size:13px}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .brand h1{font-size:26px}
  .face{padding:22px}
  .face::before{inset:9px}
  .stat{padding:14px 8px}
  .stat b{font-size:26px}
  .stat span{font-size:9px; letter-spacing:.1em}
  .home-lead{font-size:21px}
  .controls{gap:10px}
}
/* Short viewports (landscape phones): let the card shrink rather than push the
   rating buttons off-screen. */
@media (max-height:560px){
  .stage{min-height:0}
  .card{max-height:42dvh}
  .face{padding:18px}
  #home{gap:18px}
  #session{gap:10px}
  .prog{margin-top:0}
  .foot{display:none}   /* decorative; the rating buttons matter more here */
}
@media (prefers-reduced-motion:reduce){ .card{transition:none} .prog-fill,.btn-primary,.rate{transition:none} }