:root {
          --bg:        #0b0e14;
          --surface:   #12161f;
          --border:    #1e2535;
          --accent:    #00c8a0;
          --accent-dim:#007a62;
          --danger:    #e05555;
          --warn:      #e09c30;
          --text:      #d4dce8;
          --muted:     #4a5568;
          --font-head: 'Rajdhani', sans-serif;
          --font-mono: 'Share Tech Mono', monospace;
        }

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

        body {
          background: var(--bg);
          color: var(--text);
          font-family: var(--font-head);
          min-height: 100vh;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          padding: 60px 20px 80px;
          /* subtle grid background */
          background-image:
            linear-gradient(var(--border) 1px, transparent 1px),
            linear-gradient(90deg, var(--border) 1px, transparent 1px);
          background-size: 40px 40px;
        }

        /* ── Header ── */
        header {
          text-align: center;
          margin-bottom: 52px;
          animation: fadeDown 0.6s ease both;
        }
        .logo-line {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 14px;
          margin-bottom: 8px;
        }
        .logo-icon {
          width: 36px; height: 36px;
          border: 2px solid var(--accent);
          border-radius: 6px;
          display: flex; align-items: center; justify-content: center;
          position: relative;
          flex-shrink: 0;
        }
        .logo-icon::before,
        .logo-icon::after {
          content: '';
          position: absolute;
          width: 8px; height: 8px;
          border-radius: 50%;
          background: var(--accent);
        }
        .logo-icon::before { top: 6px; left: 6px; }
        .logo-icon::after  { bottom: 6px; right: 6px;
          background: transparent;
          border: 2px solid var(--accent);
        }
        /* the line between the two dots */
        .logo-icon span {
          display: block;
          width: 14px; height: 2px;
          background: var(--accent);
          transform: rotate(-35deg);
        }

        h1 {
          font-size: 2.4rem;
          font-weight: 700;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: #fff;
        }
        h1 em {
          font-style: normal;
          color: var(--accent);
        }
        .subtitle {
          font-family: var(--font-mono);
          font-size: 0.78rem;
          color: var(--muted);
          letter-spacing: 0.2em;
          text-transform: uppercase;
          margin-top: 6px;
        }

        /* ── Card ── */
        .card {
          width: 100%;
          max-width: 620px;
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: 12px;
          padding: 36px 36px 32px;
          animation: fadeUp 0.6s 0.15s ease both;
        }

        .field-label {
          font-family: var(--font-mono);
          font-size: 0.72rem;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--muted);
          margin-bottom: 10px;
          display: block;
        }

        .input-row {
          display: flex;
          gap: 10px;
        }

        input[type="text"] {
          flex: 1;
          background: var(--bg);
          border: 1px solid var(--border);
          border-radius: 7px;
          color: var(--text);
          font-family: var(--font-mono);
          font-size: 0.85rem;
          padding: 0 14px;
          height: 46px;
          outline: none;
          transition: border-color 0.2s;
        }
        input[type="text"]::placeholder { color: var(--muted); }
        input[type="text"]:focus { border-color: var(--accent); }

        button {
          height: 46px;
          padding: 0 24px;
          background: var(--accent);
          color: #000;
          border: none;
          border-radius: 7px;
          font-family: var(--font-head);
          font-size: 1rem;
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          cursor: pointer;
          transition: background 0.15s, transform 0.1s;
          white-space: nowrap;
          flex-shrink: 0;
        }
        button:hover  { background: #00e8ba; }
        button:active { transform: scale(0.97); }
        button:disabled { background: var(--accent-dim); cursor: not-allowed; }

        /* ── Status / spinner ── */
        .status {
          display: none;
          align-items: center;
          gap: 10px;
          margin-top: 20px;
          font-family: var(--font-mono);
          font-size: 0.8rem;
          color: var(--muted);
        }
        .status.visible { display: flex; }
        .spinner {
          width: 16px; height: 16px;
          border: 2px solid var(--border);
          border-top-color: var(--accent);
          border-radius: 50%;
          animation: spin 0.7s linear infinite;
          flex-shrink: 0;
        }

        /* ── Results ── */
        #results { margin-top: 28px; display: none; }
        #results.visible { display: block; }

        .result-header {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          margin-bottom: 16px;
          padding-bottom: 12px;
          border-bottom: 1px solid var(--border);
        }
        .fight-name {
          font-size: 1.3rem;
          font-weight: 700;
          letter-spacing: 0.06em;
          color: #fff;
        }
        .fight-meta {
          font-family: var(--font-mono);
          font-size: 0.75rem;
          color: var(--muted);
        }

        /* Cast rows */
        .cast-list { display: flex; flex-direction: column; gap: 8px; }

        .cast-row {
          display: grid;
          grid-template-columns: 110px 24px 24px 130px 1fr 90px;
          align-items: center;
          gap: 12px;
          background: var(--bg);
          border: 1px solid var(--border);
          border-radius: 7px;
          padding: 10px 14px;
          font-family: var(--font-mono);
          font-size: 0.8rem;
        }
        .cast-times { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
        .cast-time-row { display: flex; gap: 6px; align-items: baseline; }
        .cast-time-label {
          font-size: 0.62rem;
          color: var(--muted);
          letter-spacing: 0.08em;
          text-transform: uppercase;
          width: 26px;
        }
        .cast-time-value { font-size: 0.8rem; }
        .cast-time-value.expected { color: var(--muted); }
        .cast-time-value.actual   { color: var(--accent); }
        .cast-time-value.missing  { color: var(--danger); }

        .cast-skill { color: var(--text); }
        .cast-player { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        /* Info icon + tooltip */
        .info-icon {
          width: 18px; height: 18px;
          border-radius: 50%;
          border: 1px solid var(--muted);
          color: var(--muted);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-family: var(--font-head);
          font-size: 0.72rem;
          font-weight: 700;
          cursor: help;
          position: relative;
          transition: color 0.15s, border-color 0.15s;
        }
        .info-icon:hover { color: var(--accent); border-color: var(--accent); }
        .info-icon[data-explanation=""] { visibility: hidden; }

        .info-icon .tooltip {
          visibility: hidden;
          opacity: 0;
          position: absolute;
          bottom: calc(100% + 8px);
          left: 50%;
          transform: translateX(-50%);
          width: max-content;
          max-width: 280px;
          background: var(--surface);
          border: 1px solid var(--accent-dim);
          border-radius: 6px;
          padding: 8px 10px;
          font-family: var(--font-mono);
          font-size: 0.72rem;
          line-height: 1.4;
          color: var(--text);
          text-align: left;
          white-space: normal;
          z-index: 10;
          box-shadow: 0 4px 14px rgba(0,0,0,0.4);
          transition: opacity 0.15s;
          pointer-events: none;
        }
        .info-icon .tooltip::after {
          content: '';
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          border: 5px solid transparent;
          border-top-color: var(--accent-dim);
        }
        .info-icon:hover .tooltip,
        .info-icon:focus-visible .tooltip {
          visibility: visible;
          opacity: 1;
        }

        /* Map icon + popup — same pattern as info icon, larger floating image */
        .map-icon {
          width: 18px; height: 18px;
          border-radius: 50%;
          border: 1px solid var(--muted);
          color: var(--muted);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-family: var(--font-head);
          font-size: 0.68rem;
          font-weight: 700;
          cursor: help;
          position: relative;
          transition: color 0.15s, border-color 0.15s;
        }
        .map-icon:hover { color: var(--accent); border-color: var(--accent); }
        .map-icon[data-has-map="false"] { visibility: hidden; }

        .map-icon .map-popup {
          visibility: hidden;
          opacity: 0;
          position: absolute;
          bottom: calc(100% + 8px);
          left: 50%;
          transform: translateX(-50%);
          background: var(--surface);
          border: 1px solid var(--accent-dim);
          border-radius: 6px;
          padding: 6px;
          z-index: 10;
          box-shadow: 0 4px 14px rgba(0,0,0,0.4);
          transition: opacity 0.15s;
          pointer-events: none;
        }
        .map-icon .map-popup img {
          display: block;
          width: 320px;
          border-radius: 4px;
        }
        .map-icon .map-popup::after {
          content: '';
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          border: 5px solid transparent;
          border-top-color: var(--accent-dim);
        }
        .map-icon:hover .map-popup,
        .map-icon:focus-visible .map-popup {
          visibility: visible;
          opacity: 1;
        }

        .verdict {
          text-align: right;
          font-weight: 700;
          font-size: 0.75rem;
          letter-spacing: 0.1em;
        }
        .verdict.ON_TIME { color: #00c8a0; }
        .verdict.EARLY   { color: #7edaa0; }
        .verdict.LATE    { color: #c43d3d; }
        .verdict.MISSING { color: var(--danger); }

        .delta {
          font-size: 0.7rem;
          color: var(--muted);
          font-family: var(--font-mono);
          margin-top: 2px;
          text-align: right;
        }

        /* Maps */
        .maps-section { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }
        .phase-map { display: flex; flex-direction: column; }
        .phase-map-header {
          font-family: var(--font-mono);
          font-size: 0.72rem;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--muted);
          display: flex;
          align-items: baseline;
          gap: 10px;
          margin-bottom: 10px;
        }
        .phase-map-header strong {
          color: var(--text);
          font-weight: 700;
          letter-spacing: 0.18em;
        }
        .phase-map img {
          width: 100%;
          border-radius: 8px;
          border: 1px solid var(--border);
          display: block;
        }

        /* Error */
        .error-box {
          display: none;
          margin-top: 20px;
          padding: 14px 16px;
          background: rgba(224,85,85,0.08);
          border: 1px solid var(--danger);
          border-radius: 7px;
          font-family: var(--font-mono);
          font-size: 0.8rem;
          color: var(--danger);
        }
        .error-box.visible { display: block; }

        /* No-theory notice */
        .notice {
          font-family: var(--font-mono);
          font-size: 0.78rem;
          color: var(--muted);
          padding: 14px;
          border: 1px dashed var(--border);
          border-radius: 7px;
          text-align: center;
          margin-top: 12px;
        }

        /* Animations */
        @keyframes fadeDown {
          from { opacity: 0; transform: translateY(-16px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeUp {
          from { opacity: 0; transform: translateY(16px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes spin {
          to { transform: rotate(360deg); }
        }