/* --- 1. Setup --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
ul     { list-style: none; }


/* --- 2. Design Tokens --- */
:root {
  /* Colour palette */
  --color-bg-page:        #050e1c;   /* deepest background, also used for PWA theme */
  --color-bg-gradient-1:  #0f2a4a;  /* radial highlight at top of .app */
  --color-bg-gradient-2:  #02080f;   /* bottom of page gradient */
  --color-bg-card:        #0c1e30;   /* card surface — slightly deeper, less vibrant */
  --color-border-card:    rgba(255, 255, 255, 0.09);
  --color-border-hover:   rgba(200, 169, 110, 0.50);  /* brass on hover */
  --color-glow-soft:      rgba(255, 255, 255, 0.15);  /* resting icon / logo drop-shadow */
  --color-glow-hover:     rgba(200, 169, 110, 0.40);  /* brass hover glow */

  /* Brass / gold accent — naval instrument-panel feel */
  --color-accent:         #c8a96e;
  --color-accent-light:   #d9bb82;             
  --color-accent-dim:     rgba(200, 169, 110, 0.30);
  --color-accent-faint:   rgba(200, 169, 110, 0.10);

  /* Card background texture — repeating diagonal line pattern */
  --color-card-texture:   rgba(255, 255, 255, 0.013);

  /* White scale — used for text and accents */
  --color-white:          #ffffff;
  --color-white-dim:      rgba(255, 255, 255, 0.75); 
  --color-white-faint:    rgba(255, 255, 255, 0.55);
  --color-white-ghost:    rgba(255, 255, 255, 0.06);

  /* Body text */
  --color-text:           #d6e6f5;
  --color-text-dim:       #9fb6cc;

  /* Semantic colours — modifier badges and notes */
  --color-positive:       #6fdc9a;   /* positive modifier */
  --color-negative:       #ff7a7a;   /* negative modifier / impossible */
  --color-warning:        #f2a65a;   /* amber warning — also used for warn note text */
  --color-info:           #6ea8dc;   /* indirect weapon note */

  /* Semantic note text colours — foreground text inside each note variant */
  --color-text-danger:    #ff9a9a;
  --color-text-info:      #8fc2ff;

  /* Semantic backgrounds */
  --color-bg-positive:    rgba(111, 220, 154, 0.14);
  --color-bg-negative:    rgba(255, 122, 122, 0.16);
  --color-bg-warning:     rgba(242, 166, 90, 0.12);
  --color-bg-info:        rgba(110, 168, 220, 0.12);

  /*  Typography */
  --font-display:         'Permanent Marker', cursive;  /* app title only */
  --font-ui:              'Cinzel', serif;               /* headings, labels, buttons */
  --font-body:            'Spectral', Georgia, serif;    /* body copy, notes, descriptions */

  /* Font size scale — from largest to smallest */
  --font-size-roll:             5.06rem;   /* big roll number */
  --font-size-roll-impossible:  3.06rem;   /* "—" when no hit is possible */
  --font-size-question:         1.11rem;   /* question heading h2 */
  --font-size-normal-numbers:   0.94rem;   /* modifier pill value, breakdown total, option label, breakdown row modifier */
  --font-size-body:             0.89rem;   /* general body, notes, roll suffix, buttons */
  --font-size-body-small:       0.82rem;   /* option desc, q-subtext */
  --font-size-label:            0.73rem;   /* progress label, result heading, nav buttons */
  --font-size-label-sm:         0.68rem;   /* step label, section titles */

  /* Spacing */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   14px;
  --space-lg:   20px;
  --space-xl:   26px;
  --space-2xl:  32px;

  /* Shapes */
  --radius-sm:   2px;
  --radius-md:   2px;
  --radius-lg:   2px;
  --radius-pill: 2px;
  --chamfer:     11px;

  /* Motion */
  --duration-out:  160ms;
  --duration-in:   220ms;
  --easing:        cubic-bezier(0.4, 0, 0.2, 1);

  /* Scale */
  --scale-hover:   1.1;   /* hover zoom — icons and logos */
  --scale-active:  0.97;  /* press feedback — all buttons */
}


/* --- 3. App Shell --- */
html, body {
  height: 100%;
  background: var(--color-bg-page);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;      /* Stops the horizontal flash during slide animations */
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 90% 35% at 50% 0%, var(--color-bg-gradient-1) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-bg-page) 0%, var(--color-bg-gradient-2) 100%);
  animation: appFadeIn 0.35s ease-out both;
}

@keyframes appFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* --- 4. Header --- */
.app-header {
  text-align: center;
  padding: 28px var(--space-lg) var(--space-lg);
  border-bottom: 1px solid var(--color-white-ghost);
  flex-shrink: 0;
}

.header-ship-icon {
  display: inline-block;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 12px var(--color-glow-soft));
  transition: transform var(--duration-in) ease; /* Adds a nice feel when hovering */
  text-decoration: none;
}

.header-ship-icon img {
  width: 54px;
  height: 54px;
  display: block;
}

.app-title {
  font-family: var(--font-display);
  font-size: var(--font-size-title);
  color: var(--color-white);
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.12);
}

.app-subtitle {
  font-family: var(--font-ui);
  font-size: var(--font-size-label-sm);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-top: 6px;
}


/* --- 5. Main Layout --- */
.app-main {
  flex: 1;
  padding: 22px var(--space-md) var(--space-lg);
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}


/* --- 6. Progress Bar --- */
.progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
}

.progress-label {
  font-family: var(--font-ui);
  font-size: var(--font-size-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white-dim);
}

.progress-count {
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  color: var(--color-text-dim);
  font-style: italic;
}

.progress-track {
  height: 4px;
  background: var(--color-white-ghost);
  border-radius: 0;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-dim) 100%);
  border-radius: 0;
  transition: width 0.4s var(--easing);
}


/* --- 7. Card --- */

/* Chamfered top-left corner using a double-layer technique:
   Outer clip sets the shape and exposes a 1px edge of --color-accent-dim (the "border").
   ::before is the actual card fill, inset by 1px on the chamfered edges. */
.card {
  position: relative;
  background: var(--color-accent-dim);          /* 1px exposed edge acts as the border */
  clip-path: polygon(
    var(--chamfer) 0%,
    100%           0%,
    100%           100%,
    0%             100%,
    0%             var(--chamfer)
  );
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.55));
  isolation: isolate;
}

/* Inner card fill — 1px inset so the outer accent-dim edge shows along the chamfer */
.card::before {
  content: '';
  position: absolute;
  inset: 1px;
  background:
    repeating-linear-gradient(
      -52deg,
      transparent,
      transparent 22px,
      var(--color-card-texture) 22px,
      var(--color-card-texture) 23px
    ),
    var(--color-bg-card);
  clip-path: polygon(
    calc(var(--chamfer) - 1px) 0%,
    100%                        0%,
    100%                        100%,
    0%                          100%,
    0%                          calc(var(--chamfer) - 1px)
  );
  z-index: -1;
}

/* Brass top-rail — runs from the chamfer point across the full top edge */
.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: var(--chamfer);
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent) 0%, transparent 85%);
  opacity: 0.55;
}


/* --- 8. Slide Transitions --- */
#mainContent {
  transition:
    opacity   var(--duration-out) var(--easing),
    transform var(--duration-out) var(--easing);
}

#mainContent.slide-out-left  { opacity: 0; transform: translateX(-28px); }
#mainContent.slide-out-right { opacity: 0; transform: translateX(28px);  }
#mainContent.slide-in-right  { animation: slideInRight var(--duration-in) var(--easing) both; }
#mainContent.slide-in-left   { animation: slideInLeft  var(--duration-in) var(--easing) both; }

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0);     }
}


/* --- 9. Question Card --- */
.question-card {
  padding: var(--space-xl) var(--space-lg) 22px;
}

.q-step-label {
  font-family: var(--font-ui);
  font-size: var(--font-size-label-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white-faint);
  margin-bottom: 10px;
}

.q-text {
  font-family: var(--font-ui);
  font-size: var(--font-size-question);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.35;
  margin-bottom: 5px;
}

.q-subtext {
  font-family: var(--font-body);
  font-size: var(--font-size-body-small);
  color: var(--color-text-dim);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 18px;
}


/* --- 10. Option Buttons --- */
.options-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.option-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 13px 15px 13px 13px;
  text-align: left;
  background: var(--color-white-ghost);
  border: 1px solid var(--color-border-card);
  border-left: 3px solid transparent;
  border-radius: 0;
  transition: background 140ms ease, border-color 140ms ease, transform 80ms ease;
  -webkit-tap-highlight-color: transparent;
}

.option-btn:active {
  transform: scale(var(--scale-active));
  background: var(--color-accent-faint);
}

.option-text-group { flex: 1; min-width: 0; }

.option-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--font-size-normal-numbers);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 2px;
  transition: color 140ms ease;
}

.option-desc {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-body-small);
  color: var(--color-text-dim);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.option-badge {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  font-weight: 700;
  min-width: 38px;
  text-align: center;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
}

.badge-pos  { color: var(--color-positive); background: var(--color-bg-positive); }
.badge-neg  { color: var(--color-negative); background: var(--color-bg-negative); }
.badge-zero { color: var(--color-text-dim); background: var(--color-white-ghost); }


/* --- 11. Result Card --- */
.result-card {
  padding: var(--space-xl) var(--space-lg) 24px;
}

.result-heading {
  font-family: var(--font-ui);
  font-size: var(--font-size-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white-dim);
  text-align: center;
  margin-bottom: var(--space-sm);
}


/* --- 12. Roll Display --- */
.roll-display {
  text-align: center;
  padding: 16px 0 var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-white-ghost);
}

.roll-label {
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  font-style: italic;
  margin-bottom: 5px;
}

.roll-number {
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 5px;
}

.roll-number.possible   { font-size: var(--font-size-roll);            color: var(--color-white);    text-shadow: 0 0 40px rgba(255, 255, 255, 0.25); }
.roll-number.impossible { font-size: var(--font-size-roll-impossible);  color: var(--color-negative); text-shadow: 0 0 24px rgba(201,  96,  96, 0.35); }

.roll-suffix            { font-family: var(--font-body); font-size: var(--font-size-body); color: var(--color-text-dim); font-style: italic; }
.roll-suffix.impossible { color: var(--color-negative); font-style: normal; }


/* --- 13. Modifier Pill --- */
.modifier-pill-wrap {
  text-align: center;
  margin-top: 0;
  margin-bottom: var(--space-md);
}

.modifier-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--color-accent-dim);
  border-radius: 0;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-body);
}

.pill-label { font-family: var(--font-body); color: var(--color-text-dim); font-style: italic; }
.pill-value { font-family: var(--font-ui); font-size: var(--font-size-normal-numbers); font-weight: 700; }

.mod-pos  { color: var(--color-positive); }
.mod-neg  { color: var(--color-negative); }
.mod-zero { color: var(--color-text-dim); }


/* --- 14. Modifier Breakdown --- */
.breakdown-section { margin-bottom: 18px; }

.section-title {
  font-family: var(--font-ui);
  font-size: var(--font-size-label-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: var(--space-sm);
}

.breakdown-list { display: flex; flex-direction: column; gap: 5px; }

.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.035);
  border-left: 2px solid var(--color-white-ghost);
  border-radius: 0;
}

.breakdown-row-label { font-family: var(--font-body); font-size: var(--font-size-body); color: var(--color-text); }
.breakdown-row-mod   { font-family: var(--font-ui); font-size: var(--font-size-normal-numbers); font-weight: 700; }

.no-modifiers { font-family: var(--font-body); font-size: var(--font-size-body); color: var(--color-text-dim); font-style: italic; padding: 6px 10px; }


/* --- 15. Notes / Reminders --- */
.notes-section { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: 22px; }

.note {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.55;
  padding: 9px 12px;
  border-radius: 0;
  border-left: 3px solid;
}

/* Note colour variants */
.note-white  { border-color: var(--color-border-hover); color: var(--color-text-dim);   background: rgba(255, 255, 255, 0.035); }
.note-warn   { border-color: var(--color-warning);      color: var(--color-warning);  background: var(--color-bg-warning);    }
.note-danger { border-color: var(--color-negative);     color: var(--color-text-danger); background: var(--color-bg-negative);  }
.note-info   { border-color: var(--color-info);         color: var(--color-text-info);  background: var(--color-bg-info);       }

.note strong { font-style: normal; font-weight: 600; color: var(--color-text); }


/* --- 16. Restart Button (inside result card) --- */
.btn-restart {
  width: 100%;
  background: var(--color-accent);
  border: none;
  color: var(--color-bg-page);
  padding: var(--space-md) var(--space-lg);
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-restart:active { transform: scale(var(--scale-active)); background: var(--color-accent-light); }


/* --- 17. Navigation Row (Back / Reset) --- */
.nav-row {
  flex-shrink: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-nav {
  background: none;
  border: 1px solid var(--color-border-card);
  color: var(--color-text-dim);
  padding: var(--space-sm) 16px;
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: all 140ms ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-nav:active {
  transform: scale(var(--scale-active));
  color: var(--color-accent);
  border-color: var(--color-accent-dim);
}


/* 18. Footer ───────────────────────────────────────────── */
.app-footer {
  text-align: center;
  padding: var(--space-lg) 16px 28px;
  border-top: 1px solid var(--color-white-ghost);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.footer-logo-link {
  display: inline-block;
  transition: transform var(--duration-in) ease;
  filter: drop-shadow(0 0 12px var(--color-glow-soft));
  text-decoration: none;
}

.footer-logo-link img {
  width: 140px;
  height: auto;
  display: block;
}

.footer-disclaimer {
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  color: var(--color-text-dim);
  line-height: 1.75;
}


/* --- 19. Hover states — pointer devices only ---
   Gated behind (hover: hover) and (pointer: fine) so these rules never fire
   on touch screens, preventing the sticky-hover bug on mobile.
   Touch devices use the :active states above exclusively. */
@media (hover: hover) and (pointer: fine) {

  .header-ship-icon:hover {
    transform: scale(var(--scale-hover));
    filter: drop-shadow(0 0 15px var(--color-glow-hover));
  }

  .option-btn:hover {
    background: var(--color-accent-faint);
    border-color: var(--color-border-card);
    border-left-color: var(--color-accent);
  }

  .option-btn:active { border-left-color: var(--color-accent); }

  .option-btn:hover .option-label { color: var(--color-accent); }

  .btn-restart:hover {
    background: var(--color-accent-light);
    box-shadow: 0 4px 20px var(--color-accent-dim);
  }

  .btn-nav:hover {
    color: var(--color-accent);
    border-color: var(--color-accent-dim);
  }

  .footer-logo-link:hover {
    transform: scale(var(--scale-hover));
    filter: drop-shadow(0 0 15px var(--color-glow-hover));
  }

}


/* --- 20. Responsive — Tablet / Desktop --- */
@media (min-width: 480px) {
  :root {
    --font-size-title:    2.2rem;
    --font-size-question: 1.15rem;
    --font-size-roll:     6rem;
  }
  .app-main               { padding: 28px var(--space-lg) 24px; }
  .question-card,
  .result-card            { padding: var(--space-2xl) 28px 28px; }
  .option-btn             { padding: var(--space-md) 18px var(--space-md) 13px; } /* preserve left padding for 3px border */
}

@media (min-width: 768px) {
  :root {
    --font-size-title: 2.6rem;
  }
  .app-header             { padding: 36px var(--space-lg) 26px; }
  .footer-logo-link img   { width: 170px; }
}


/* --- 21. Utility --- */
.hidden { display: none !important; }

.no-scrollbars {
  overflow: hidden !important; 
  height: 100vh !important;
  width: 100vw;
  position: fixed;
  scrollbar-width: none; 
  -ms-overflow-style: none;
}

.no-scrollbars::-webkit-scrollbar {
  display: none;
}