/* ==========================================================================
   Yahtzee score card — static, no build step.
   Colour + type language carried over from the original Flask app, but sized
   responsively instead of relying on a mobile browser's 980px fallback width.
   ========================================================================== */

:root{
  --blue:        #00B2FF;
  --blue-row:    #00A2EF;
  --blue-mid:    #0080B0;
  --blue-deep:   #005F7B;
  --orange:      #FE7C0B;
  --paper:       #FFFBFF;
  --green:       #6BD595;
  --red:         #FF5A5F;

  --display: 'Lilita One', 'Arial Black', Helvetica, Arial, sans-serif;
  --body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --shadow-soft: 0 7px 29px rgba(100,100,111,.2);
  --shadow-text: 3px 3px 6px rgba(0,0,0,.28);
  --radius: 1.25rem;
}

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

/* Author display rules (.btn, .view) outrank the UA sheet's [hidden] rule,
   so state that as a rule of our own. */
[hidden]{ display: none !important; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  min-height: 100dvh;
  background: var(--blue);
  font-family: var(--body);
  color: #fff;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Icon sprite host — kept in the layout but invisible, so <use> resolves
   everywhere (display:none breaks referencing in some engines).
   Note: <use> shadow content inherits fill from the <use> element itself, so
   the colour has to be set on each instance (.icon, .crown), not on the
   symbols in here. */
.sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }

button{ font: inherit; color: inherit; }

.view{
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 3rem;
}
.view[hidden]{ display: none; }

/* ---------------------------------------------------------------- headings */

.wordmark{
  font-family: var(--display);
  font-size: clamp(4.5rem, 22vw, 9rem);
  line-height: .95;
  text-align: center;
  letter-spacing: -.02em;
  color: var(--blue);
  -webkit-text-stroke: .18em var(--paper);
  paint-order: stroke fill;
  text-shadow: .06em .06em .22em rgba(0,0,0,.45);
  margin: clamp(1rem, 5vh, 3rem) 0 0;
}

.tag{
  font-family: var(--display);
  font-size: clamp(1.5rem, 7vw, 2.75rem);
  color: #fff;
  background: var(--orange);
  display: inline-block;
  padding: .1em .5em .05em;
  margin: -.22em .15em 0 0;
  float: right;
  position: relative;
  transform: rotate(6deg);
  box-shadow: 4px 4px 6px rgba(0,0,0,.35);
  letter-spacing: -.01em;
}

h2{
  font-family: var(--display);
  font-size: clamp(2.5rem, 11vw, 4rem);
  line-height: 1.02;
  text-align: center;
  letter-spacing: -.02em;
  text-shadow: var(--shadow-text);
  margin: .5em 0 .6em;
}

h4{
  font-family: var(--display);
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  color: var(--blue-mid);
  text-align: center;
  letter-spacing: -.01em;
  margin: 0 0 .4rem;
}

.notice{
  text-align: center;
  font-size: clamp(1rem, 4.5vw, 1.35rem);
  margin: -.5rem 0 1.75rem;
  color: rgba(255,255,255,.92);
}

/* ----------------------------------------------------------------- buttons */

.actions{
  display: grid;
  gap: 1rem;
  margin-top: clamp(1.5rem, 6vh, 3rem);
  clear: both;
}

.btn{
  display: block;
  width: 100%;
  border: 0;
  cursor: pointer;
  background: var(--paper);
  color: var(--orange);
  font-family: var(--display);
  font-size: clamp(1.5rem, 6.5vw, 2.1rem);
  letter-spacing: -.03em;
  text-transform: uppercase;
  padding: .55em .6em .42em;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
}
.btn:hover{ background: var(--orange); color: var(--paper); }
.btn:active{ transform: translateY(2px) scale(.99); }
.btn:focus-visible{ outline: 4px solid #fff; outline-offset: 3px; }

.btn-sub{
  display: block;
  font-family: var(--body);
  font-weight: 700;
  font-size: .42em;
  letter-spacing: 0;
  text-transform: none;
  opacity: .7;
  margin-top: .2em;
}

.btn-ghost{
  background: rgba(255,255,255,.16);
  color: #fff;
  box-shadow: none;
}
.btn-ghost:hover{ background: rgba(255,255,255,.28); color: #fff; }

.btn-danger{ color: var(--red); }
.btn-danger:hover{ background: var(--red); color: var(--paper); }

.btn-quiet{
  background: none;
  box-shadow: none;
  color: rgba(255,255,255,.7);
  font-size: clamp(1.1rem, 4.5vw, 1.4rem);
  margin-top: 1.5rem;
}
.btn-quiet:hover{ background: none; color: #fff; }

.back{
  background: none;
  border: 0;
  cursor: pointer;
  padding: .5rem;
  margin: 0 0 .5rem -.5rem;
  color: rgba(255,255,255,.55);
  display: block;
}
.back:hover{ color: #fff; }
.back svg{ width: 2rem; height: 2rem; display: block; }

/* -------------------------------------------------------------- home hero */

.hero{
  margin: clamp(1rem, 4vh, 2.5rem) auto;
  max-width: 22rem;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
}
.hero svg{ width: 100%; height: auto; display: block; }
.hero-die{ fill: var(--paper); stroke: var(--blue-deep); stroke-opacity: .38; stroke-width: 3; }
.hero-pip{ fill: var(--orange); }

/* --------------------------------------------------------- name entry form */

.name-field{
  display: block;
  width: 100%;
  background: var(--paper);
  color: #1e1e1e;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  font-family: var(--display);
  font-size: clamp(1.4rem, 6vw, 2rem);
  letter-spacing: -.02em;
  text-align: center;
  text-transform: uppercase;
  padding: .55em .5em .42em;
  margin-bottom: 1rem;
}
.name-field::placeholder{ color: rgba(30,30,30,.28); }
.name-field:focus{ outline: 4px solid #fff; outline-offset: 3px; }
.name-field.invalid{ box-shadow: 0 0 0 4px var(--red); }
#names-form .btn{ margin-top: 1rem; }

/* ------------------------------------------------------------- score sheet */

.view-game{ max-width: 74rem; }

.turn{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .5rem;
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  border-radius: var(--radius);
  padding: .75rem 1.25rem 1rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.turn .back{ margin: 0; }
.turn-body{ min-width: 0; padding-right: 1.5rem; }

#turn-name{
  font-family: var(--display);
  font-size: clamp(1.9rem, 8vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-align: center;
  text-shadow: var(--shadow-text);
  margin: 0;
  overflow-wrap: break-word;
}
.turn-meta{
  text-align: center;
  margin: .25rem 0 0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

.card{ display: grid; gap: 1.5rem; }
.section{ min-width: 0; }
.rows{ border-radius: .75rem; overflow: hidden; }

.row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
  background: var(--blue);
}
.rows .row:nth-child(odd){ background: var(--blue-row); }

.icon{
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  background: var(--orange);
  border-radius: 30%;
  color: #fff;
  fill: currentColor;
  padding: .3rem;
  border: 2px solid var(--paper);
  box-shadow: var(--shadow-soft);
}
.icon-flat{
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 1rem;
  background: rgba(255,255,255,.18);
  box-shadow: none;
  padding: 0;
}

.label{
  font-family: var(--display);
  font-size: clamp(.95rem, 3.6vw, 1.15rem);
  letter-spacing: -.01em;
  color: #fff;
  min-width: 0;
}

.hint{
  display: block;
  font-family: var(--body);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .02em;
  color: rgba(255,255,255,.55);
}
.hint.warn{ color: #FFE08A; }

.cell{
  width: 4rem;
  height: 3rem;
  text-align: center;
  border: 0;
  border-radius: .6rem;
  background: var(--paper);
  color: #1e1e1e;
  font-family: var(--display);
  font-size: 1.4rem;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.09);
  appearance: textfield;
  -moz-appearance: textfield;
}
.cell::-webkit-outer-spin-button,
.cell::-webkit-inner-spin-button{ appearance: none; margin: 0; }
.cell::placeholder{ color: rgba(30,30,30,.22); }
.cell:focus{ outline: 3px solid #fff; outline-offset: 2px; }
.cell.filled{ color: var(--blue-deep); }
.cell.invalid{ box-shadow: 0 0 0 3px var(--red); color: var(--red); }

/* value picker — appears under the focused row */
.row.locked .icon{ opacity: .45; }
.row.locked .label{ color: rgba(255,255,255,.55); }
.cell:disabled{ background: rgba(255,255,255,.25); box-shadow: none; cursor: not-allowed; }

.picker{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .1rem 0 .4rem;
}
.chip{
  border: 0;
  cursor: pointer;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: -.01em;
  min-width: 2.3rem;
  padding: .45rem .5rem .3rem;
  border-radius: .55rem;
}
.chip:hover{ background: var(--paper); color: var(--orange); }
.chip[aria-pressed="true"]{ background: var(--orange); color: #fff; }
.chip-clear{ background: rgba(0,0,0,.18); }

.row-bonus{ background: var(--blue-mid) !important; margin-top: .35rem; border-radius: .75rem; }
.bonus-state{
  font-family: var(--display);
  font-size: 1.1rem;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
}
.bonus-state.earned{ color: var(--green); }

.row-total{
  grid-column: 1 / -1;
  grid-template-columns: 1fr auto;
  background: var(--blue-deep) !important;
  border-radius: .75rem;
  margin-top: .35rem;
  padding: .65rem 1rem;
}
.row-total .label{ font-size: 1.1rem; }
.grand{
  font-family: var(--display);
  font-size: 1.8rem;
  line-height: 1;
  color: #fff;
}

.actions-game{ margin-top: 1.5rem; }

/* -------------------------------------------------------------- standings */

.standings{
  background: rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin-top: 1.5rem;
}
.standings-title{
  font-family: var(--display);
  font-size: 1.4rem;
  text-shadow: var(--shadow-text);
  margin: 0 0 .5rem;
}
.standings ul{ list-style: none; margin: 0; padding: 0; }
.standings li{ margin: 0; }
.standings button{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: .45rem .25rem;
  border-radius: .5rem;
  font-family: var(--display);
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  letter-spacing: -.01em;
  color: var(--blue-mid);
}
.standings button:hover{ background: rgba(255,255,255,.16); color: #fff; }
.standings button > span:first-child{ text-transform: uppercase; }
.standings button[aria-current="true"]{ color: #fff; }
.standings .pts{ color: rgba(255,255,255,.75); white-space: nowrap; }
.standings .done{ font-family: var(--body); font-weight: 700; font-size: .7rem; text-transform: uppercase; opacity: .7; }

/* ---------------------------------------------------------------- results */

.results{ list-style: none; margin: 0; padding: 0; }
.results li{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  background: var(--blue-row);
}
.results li:nth-child(even){ background: var(--blue); }
.results li:first-child{ border-radius: var(--radius) var(--radius) 0 0; }
.results li.leader{ background: var(--blue-mid); }
.results li.leader .rank{ color: rgba(255,255,255,.7); }
.results li:last-child{ border-radius: 0 0 var(--radius) var(--radius); }
.results li:only-child{ border-radius: var(--radius); }
.rank{
  font-family: var(--display);
  font-size: 1.5rem;
  color: rgba(255,255,255,.45);
  min-width: 1.5rem;
}
.results .crown{ width: 1.75rem; height: 1.75rem; color: #FFD666; fill: currentColor; }
.result-name{
  font-family: var(--display);
  font-size: clamp(1.4rem, 6vw, 2rem);
  letter-spacing: -.02em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  min-width: 0;
}
.result-score{
  font-family: var(--display);
  font-size: clamp(1.4rem, 6vw, 2rem);
  color: rgba(255,255,255,.7);
  white-space: nowrap;
}

/* ------------------------------------------------------------- wide screens */

@media (min-width: 46rem){
  .row{ padding: .6rem 1rem; gap: 1rem; }
  .icon{ width: 3.25rem; height: 3.25rem; }
  .cell{ width: 5rem; height: 3.5rem; font-size: 1.6rem; }
  .label{ font-size: 1.25rem; }
}

@media (min-width: 62rem){
  .view-game{ padding: 2rem 2rem 4rem; }
  .card{ grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
  .view-game .actions-game{ max-width: 26rem; margin-inline: auto; }
  .standings{ max-width: 30rem; margin-inline: auto; }
  .btn-quiet{ display: block; margin-inline: auto; width: auto; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}

/* game footer — pause / early finish */
.game-foot{ display: grid; gap: .25rem; justify-items: center; margin-top: 1rem; }
.game-foot .btn-quiet{ margin-top: .25rem; width: auto; }