/* Design tokens, reset, page shell and the header / beat / footer chrome. */

:root{
  --felt:#0F1F1A; --felt2:#183127; --felt3:#214A38;
  --panel:#152820; --panel2:#1C372C;
  --line:#335748; --line2:#244337;
  --ink:#FFF8E8; --dim:#AAC1B5;
  --gold:#F2C35B; --gold2:#B98324; --blue:#6AB7F5; --red:#EF6860; --good:#68D49C;
  --violet:#A78BFA; --bone:#FFF7E6; --shade:rgba(0,0,0,.42);
  --brass:linear-gradient(180deg,#FFE39D 0%,#F2C35B 48%,#B98324 100%);
  --r:8px; --r2:12px;
  --ease:cubic-bezier(.2,.75,.25,1);
}
/* High-contrast display setting: brighter secondary text and stronger
   borders, opted into from the settings screen (public/js/prefs.js) rather
   than only ever inferred from the OS. */
:root.hc{
  --dim:#EAF3ED; --line:#7BAA95; --line2:#5C8C78;
}
:root.hc .ghost{background:rgba(255,255,255,.14);border-color:rgba(255,248,232,.5)}
:root.hc input{border-color:rgba(255,248,232,.4)}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[tabindex]:focus-visible{outline:3px solid rgba(106,183,245,.78);outline-offset:2px}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(110% 70% at 50% -18%,rgba(70,154,115,.32) 0%,transparent 62%),
    radial-gradient(90% 60% at 105% 22%,rgba(106,183,245,.13) 0%,transparent 48%),
    radial-gradient(90% 72% at -10% 86%,rgba(239,104,96,.12) 0%,transparent 46%),
    linear-gradient(180deg,#11231D 0%,#0B1714 100%),
    var(--felt);
  color:var(--ink);
  font:16px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex;flex-direction:column;overscroll-behavior:none;
  -webkit-font-smoothing:antialiased}

/* ---------------------------------------------------------------- chrome */
header{position:relative;display:flex;align-items:center;gap:.55rem;width:100%;
  max-width:760px;margin:0 auto;padding:.7rem .9rem .6rem;
  background:linear-gradient(180deg,rgba(13,28,22,.88),rgba(13,28,22,.62));
  backdrop-filter:blur(12px)}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--red) 8%,var(--gold) 50%,
    var(--blue) 92%,transparent);opacity:.62}
.mark{display:flex;align-items:baseline;gap:.3rem;font-weight:800;
  letter-spacing:0;font-size:1.08rem;white-space:nowrap;
  text-shadow:0 1px 0 rgba(0,0,0,.5)}
.mark em{font-style:normal;background:var(--brass);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.meta{color:var(--dim);font-size:.76rem;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip{font-size:.74rem;padding:.34rem .62rem;border-radius:999px;font-weight:750;
  border:1px solid rgba(255,248,232,.14);background:rgba(255,255,255,.045);color:var(--ink);
  width:auto;margin:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .18s,color .18s,background .18s,transform .18s var(--ease)}
.chip.on{border-color:rgba(242,195,91,.76);color:var(--gold);background:rgba(242,195,91,.14)}
.chip.ico{padding:.3rem .5rem;font-size:.9rem;line-height:1;color:var(--dim)}
.chip.ico.on{color:var(--gold)}

.beat{position:relative;width:100%;max-width:760px;margin:0 auto;
  padding:.5rem .9rem;font-size:.84rem;color:var(--dim);
  border-bottom:1px solid var(--line2);min-height:2.1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:rgba(9,20,16,.48)}
.beat.bust{color:var(--red)} .beat.flip7,.beat.win{color:var(--good)}
.beat.freeze{color:var(--blue)}
.beat.action,.beat.flip3,.beat.saved{color:var(--gold)}

main{flex:1;width:100%;max-width:760px;margin:0 auto;overflow-y:auto;
  padding:.9rem .9rem 1.1rem;-webkit-overflow-scrolling:touch}
footer{position:relative;width:100%;max-width:760px;margin:0 auto;
  background:linear-gradient(180deg,rgba(28,55,44,.9),rgba(18,36,29,.96));
  padding:.8rem .9rem calc(.75rem + env(safe-area-inset-bottom));
  box-shadow:0 -12px 34px rgba(0,0,0,.2)}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue) 10%,var(--gold) 50%,
    var(--red) 90%,transparent);opacity:.55}

@media (min-width:760px){
  header{margin-top:.8rem;border-radius:var(--r2) var(--r2) 0 0}
  footer{margin-bottom:.8rem;border-radius:0 0 var(--r2) var(--r2)}
}

@media (max-width:380px){
  header{gap:.4rem;padding-left:.65rem;padding-right:.65rem}
  main{padding-left:.65rem;padding-right:.65rem}
  footer{padding-left:.65rem;padding-right:.65rem}
  .chip{padding-left:.5rem;padding-right:.5rem}
}