:root {
    --parchment: #f1e4c6;
    --parchment-deep: #e5d3a8;
    --parchment-shadow: #c9b485;
    --ink: #2a1f14;
    --ink-soft: #4a3826;
    --gold: #b8893a;
    --gold-bright: #d4a855;
    --gold-deep: #8a6422;
    --marble: #f5ecd6;
    --oxblood: #7a2e2a;
    --oxblood-dark: #5a1e1a;
    --laurel: #5a6b3a;
    --laurel-dark: #3d4a26;
    --sky-top: #4a6b8a;
    --sky-mid: #7fa0c0;
    --sky-low: #c9d9e8;
    --sky-dawn: #e8c8a8;
    --cloud: #faf5ea;
    --cloud-shadow: #d4c9b0;
  }

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

  html, body {
    min-height: 100vh;
    background: var(--parchment);
    color: var(--ink);
    font-family: 'Cormorant Garamond', serif;
    overflow-x: hidden;
  }

  body {
    background-image:
      radial-gradient(ellipse at 20% 45%, rgba(184, 137, 58, 0.12) 0%, transparent 50%),
      radial-gradient(ellipse at 85% 80%, rgba(122, 46, 42, 0.08) 0%, transparent 45%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.15 0 0 0 0 0.08 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: auto, auto, 200px 200px;
    padding: 0 0 4rem;
  }

  /* ============ OLYMPUS SKY + CLOUDS ============ */
  .olympus-sky {
    position: relative;
    height: 340px;
    overflow: hidden;
    background: linear-gradient(
      180deg,
      var(--sky-top) 0%,
      var(--sky-mid) 35%,
      var(--sky-low) 70%,
      var(--sky-dawn) 95%,
      var(--parchment) 100%
    );
    margin-bottom: -60px;
  }

  .olympus-sky::before {
    content: "";
    position: absolute;
    top: -100px;
    left: 50%;
    width: 600px;
    height: 600px;
    margin-left: -300px;
    background: radial-gradient(circle, rgba(255, 230, 170, 0.45) 0%, rgba(255, 220, 140, 0.15) 40%, transparent 70%);
    pointer-events: none;
  }

  .mountain {
    position: absolute;
    bottom: 55px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 180px;
    pointer-events: none;
    opacity: 0.35;
  }

  .cloud-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }

  .cloud {
    position: absolute;
    opacity: 0.85;
    filter: drop-shadow(0 4px 10px rgba(60, 80, 110, 0.15));
  }

  @keyframes drift-right {
    from { transform: translateX(-30vw); }
    to { transform: translateX(120vw); }
  }

  @keyframes drift-left {
    from { transform: translateX(120vw); }
    to { transform: translateX(-30vw); }
  }

  .cloud-1 { top: 30px; animation: drift-right 55s linear infinite; }
  .cloud-2 { top: 80px; animation: drift-right 85s linear infinite; animation-delay: -30s; }
  .cloud-3 { top: 140px; animation: drift-left 70s linear infinite; }
  .cloud-4 { top: 20px; animation: drift-right 95s linear infinite; animation-delay: -60s; }
  .cloud-5 { top: 180px; animation: drift-right 65s linear infinite; animation-delay: -15s; }
  .cloud-6 { top: 110px; animation: drift-left 100s linear infinite; animation-delay: -45s; }

  /* ============ LIGHTNING ============ */
  .lightning {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 0 12px rgba(255, 240, 180, 0.95))
            drop-shadow(0 0 24px rgba(255, 220, 120, 0.7));
  }

  .lightning path {
    fill: #fff8e0;
    stroke: #fff;
    stroke-width: 0.5;
  }

  @keyframes lightning-strike {
    0%   { opacity: 0; }
    2%   { opacity: 1; }
    4%   { opacity: 0.2; }
    6%   { opacity: 1; }
    10%  { opacity: 0; }
    14%  { opacity: 0.95; }
    18%  { opacity: 0; }
    100% { opacity: 0; }
  }

  /* Full-screen flash behind the lightning */
  .sky-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at var(--flash-x, 50%) var(--flash-y, 30%),
                rgba(255, 245, 200, 0.5) 0%,
                rgba(255, 235, 170, 0.2) 25%,
                transparent 55%);
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
  }

  @keyframes sky-flash-anim {
    0%   { opacity: 0; }
    2%   { opacity: 1; }
    6%   { opacity: 0.3; }
    10%  { opacity: 0; }
    100% { opacity: 0; }
  }

  .bolt-1 {
    left: 18%; top: 85px;
    animation: lightning-strike 7s linear infinite;
    animation-delay: 1.5s;
  }
  .bolt-2 {
    left: 62%; top: 110px;
    animation: lightning-strike 11s linear infinite;
    animation-delay: 4s;
  }
  .bolt-3 {
    left: 38%; top: 70px;
    animation: lightning-strike 9s linear infinite;
    animation-delay: 7s;
  }
  .bolt-4 {
    left: 82%; top: 95px;
    animation: lightning-strike 13s linear infinite;
    animation-delay: 10s;
  }

  .flash-1 { animation: sky-flash-anim 7s linear infinite; animation-delay: 1.5s; --flash-x: 18%; --flash-y: 40%; }
  .flash-2 { animation: sky-flash-anim 11s linear infinite; animation-delay: 4s; --flash-x: 62%; --flash-y: 45%; }
  .flash-3 { animation: sky-flash-anim 9s linear infinite; animation-delay: 7s; --flash-x: 38%; --flash-y: 35%; }
  .flash-4 { animation: sky-flash-anim 13s linear infinite; animation-delay: 10s; --flash-x: 82%; --flash-y: 42%; }

  @media (prefers-reduced-motion: reduce) {
    .lightning, .sky-flash { display: none; }
  }

  /* ============ EASTER EGG CREATURES ============ */
  .easter-egg {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    z-index: 6;
    filter: drop-shadow(0 6px 14px rgba(42, 31, 20, 0.35));
    transition: transform 0.3s ease;
  }

  .easter-egg:hover {
    transform: scale(1.12);
    filter: drop-shadow(0 8px 20px rgba(255, 230, 140, 0.6))
            drop-shadow(0 0 20px rgba(255, 210, 100, 0.5));
  }

  /* Zeus on his throne-cloud — drifts slowly from right to left */
  .zeus-cloud {
    top: 50px;
    animation: zeus-drift 120s linear infinite;
    animation-delay: -20s;
  }

  @keyframes zeus-drift {
    from { transform: translateX(120vw); }
    to   { transform: translateX(-35vw); }
  }

  /* Pegasus soars across the sky rarely — full cycle is 90s, visible for ~12s.
     First appearance ~15s after page load. */
  .pegasus {
    top: 90px;
    animation: pegasus-fly 90s linear infinite;
    animation-delay: 5s;
  }

  @keyframes pegasus-fly {
    /* Invisible waiting off-screen */
    0%, 10% {
      transform: translateX(-30vw) translateY(40px);
      opacity: 0;
    }
    /* Enter from left */
    12% {
      transform: translateX(-15vw) translateY(20px);
      opacity: 1;
    }
    /* Arc upward at mid-screen */
    18% {
      transform: translateX(50vw) translateY(-30px);
      opacity: 1;
    }
    /* Glide out to the right */
    24% {
      transform: translateX(115vw) translateY(20px);
      opacity: 1;
    }
    26% {
      transform: translateX(125vw) translateY(40px);
      opacity: 0;
    }
    /* Rest of cycle: stay invisible off-screen */
    100% {
      transform: translateX(125vw) translateY(40px);
      opacity: 0;
    }
  }

  /* Icarus ascends toward the sun — full cycle is 100s, visible for ~15s.
     First appearance ~40s after page load. */
  .icarus {
    top: 200px;
    animation: icarus-ascent 100s linear infinite;
    animation-delay: 30s;
  }

  @keyframes icarus-ascent {
    /* Invisible waiting */
    0%, 8% {
      transform: translateX(-20vw) translateY(0) rotate(-10deg);
      opacity: 0;
    }
    /* Enter from bottom-left */
    10% {
      transform: translateX(-10vw) translateY(0) rotate(-10deg);
      opacity: 0.85;
    }
    /* Rise and approach the sun */
    15% {
      transform: translateX(15vw) translateY(-80px) rotate(-18deg);
      opacity: 1;
    }
    /* Peak: nearest the sun */
    20% {
      transform: translateX(35vw) translateY(-160px) rotate(-25deg);
      opacity: 1;
    }
    /* Wings failing */
    23% {
      transform: translateX(45vw) translateY(-180px) rotate(-32deg);
      opacity: 0.6;
    }
    25% {
      transform: translateX(52vw) translateY(-190px) rotate(-38deg);
      opacity: 0;
    }
    /* Rest of cycle: invisible */
    100% {
      transform: translateX(52vw) translateY(-190px) rotate(-38deg);
      opacity: 0;
    }
  }

  /* Speech bubble for easter egg hovers */
  .egg-bubble {
    position: absolute;
    background: var(--marble);
    border: 2px solid var(--gold-deep);
    padding: 0.6rem 1rem;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--ink);
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(42, 31, 20, 0.4);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
    z-index: 7;
    max-width: 280px;
    white-space: normal;
    width: max-content;
  }

  .easter-egg:hover + .egg-bubble,
  .easter-egg:focus + .egg-bubble,
  .easter-egg.egg-tapped + .egg-bubble {
    opacity: 1;
    transform: translateY(0);
  }

  .egg-bubble::before {
    content: "";
    position: absolute;
    left: 20px;
    top: -8px;
    width: 12px;
    height: 12px;
    background: var(--marble);
    border-left: 2px solid var(--gold-deep);
    border-top: 2px solid var(--gold-deep);
    transform: rotate(45deg);
  }

  .egg-bubble .speaker {
    display: block;
    font-family: 'Cinzel', serif;
    font-style: normal;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: var(--oxblood);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
  }

  /* ============ PEDIMENT DECORATION ============ */
  .pediment {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 140px;
    pointer-events: none;
    z-index: 4;
    opacity: 0.5;
  }

  /* ============ HEADER ============ */
  .header {
    position: relative;
    z-index: 10;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    padding: 3rem 1rem 1rem;
  }

  .meander {
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='22' viewBox='0 0 80 22'%3E%3Cpath d='M0 2h14v14h-8v-8h-4v14h20v-20h-22zM28 2h22v20h-14v-8h8v-4h-12v14h-4z' fill='%23faf5ea' fill-opacity='0.7'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    margin: 0 auto 1.2rem;
    max-width: 600px;
  }

  .title-greek {
    font-family: 'Cinzel', serif;
    font-size: clamp(1rem, 2vw, 1.3rem);
    letter-spacing: 0.5em;
    color: var(--cloud);
    margin-bottom: 0.8rem;
    text-shadow: 0 2px 8px rgba(42, 31, 20, 0.4);
  }

  h1 {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: clamp(2.8rem, 7vw, 5rem);
    letter-spacing: 0.22em;
    color: var(--cloud);
    text-shadow:
      2px 2px 0 rgba(42, 31, 20, 0.3),
      0 4px 20px rgba(42, 31, 20, 0.4),
      0 0 40px rgba(255, 230, 170, 0.3);
    line-height: 1;
    margin-bottom: 0.5rem;
  }

  .subtitle {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    color: var(--cloud);
    letter-spacing: 0.05em;
    text-shadow: 0 2px 6px rgba(42, 31, 20, 0.5);
  }

  .subtitle::before { content: "— "; color: var(--gold-bright); }
  .subtitle::after { content: " —"; color: var(--gold-bright); }

  /* ============ COLUMNS ============ */
  .column {
    position: fixed;
    top: 340px;
    bottom: 0;
    width: 60px;
    background:
      linear-gradient(90deg,
        transparent 0%,
        rgba(201, 180, 133, 0.15) 10%,
        rgba(229, 211, 168, 0.3) 20%,
        rgba(229, 211, 168, 0.3) 40%,
        rgba(201, 180, 133, 0.25) 50%,
        rgba(229, 211, 168, 0.3) 60%,
        rgba(229, 211, 168, 0.3) 80%,
        rgba(201, 180, 133, 0.15) 90%,
        transparent 100%);
    pointer-events: none;
    z-index: 0;
  }
  .column.left { left: 0; }
  .column.right { right: 0; }

  @media (max-width: 900px) { .column { display: none; } }

  /* ============ MAIN ============ */
  main {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    padding: 0 1rem;
  }

  .temple {
    background: var(--marble);
    background-image:
      linear-gradient(135deg, rgba(201, 180, 133, 0.08) 0%, transparent 40%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='m'%3E%3CfeTurbulence baseFrequency='0.015' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.78 0 0 0 0 0.6 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23m)'/%3E%3C/svg%3E");
    border: 2px solid var(--gold-deep);
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow:
      0 0 0 4px var(--marble),
      0 0 0 5px var(--gold-deep),
      0 12px 40px rgba(42, 31, 20, 0.25),
      inset 0 0 60px rgba(184, 137, 58, 0.06);
    position: relative;
  }

  .temple::before, .temple::after {
    content: "❦";
    position: absolute;
    font-size: 1.2rem;
    color: var(--gold-deep);
    top: 8px;
  }
  .temple::before { left: 12px; }
  .temple::after { right: 12px; }

  /* ============ STATS ============ */
  .stats-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    color: var(--ink-soft);
    text-transform: uppercase;
    margin-bottom: 1rem;
    padding: 0.6rem 0.8rem;
    background: var(--marble);
    border: 1px solid var(--gold-deep);
  }

  .stat-val {
    color: var(--oxblood);
    font-weight: 700;
    font-size: 1rem;
  }

  /* ============ DROPDOWN ============ */
  .oracle-label {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    color: var(--gold-deep);
    margin-bottom: 0.8rem;
    text-align: center;
    text-transform: uppercase;
  }

  .oracle {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    margin-bottom: 0.5rem;
    position: relative;
  }

  .dropdown-wrap {
    flex: 1;
    position: relative;
  }

  .dropdown-trigger {
    width: 100%;
    padding: 1rem 1.2rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 500;
    background: var(--parchment);
    border: 2px solid var(--gold-deep);
    color: var(--ink);
    outline: none;
    transition: all 0.2s;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dropdown-trigger:hover:not(:disabled), .dropdown-trigger.open {
    border-color: var(--oxblood);
    background: var(--parchment-deep);
  }

  .dropdown-trigger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .dropdown-trigger .placeholder {
    color: var(--ink-soft);
    opacity: 0.55;
    font-style: italic;
  }

  .dropdown-trigger .chevron {
    font-size: 0.9rem;
    color: var(--gold-deep);
    transition: transform 0.2s;
  }

  .dropdown-trigger.open .chevron {
    transform: rotate(180deg);
  }

  .dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--parchment);
    border: 2px solid var(--gold-deep);
    max-height: 420px;
    overflow: hidden;
    z-index: 50;
    box-shadow: 0 12px 32px rgba(42, 31, 20, 0.28);
    display: none;
    flex-direction: column;
  }

  .dropdown-panel.open { display: flex; }

  .dropdown-search {
    padding: 0.7rem 1rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    background: var(--parchment-deep);
    border: none;
    border-bottom: 1px solid var(--gold-deep);
    outline: none;
    color: var(--ink);
  }

  .dropdown-search::placeholder {
    color: var(--ink-soft);
    opacity: 0.5;
    font-style: italic;
  }

  .dropdown-list {
    overflow-y: auto;
    flex: 1;
  }

  .dropdown-group-label {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: var(--oxblood);
    padding: 0.6rem 1rem 0.3rem;
    text-transform: uppercase;
    background: var(--parchment-deep);
    border-bottom: 1px solid rgba(138, 100, 34, 0.3);
    position: sticky;
    top: 0;
  }

  .dropdown-item {
    padding: 0.55rem 1.2rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(138, 100, 34, 0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dropdown-item:hover:not(.guessed), .dropdown-item.highlight {
    background: var(--parchment-deep);
    color: var(--oxblood);
  }

  .dropdown-item.guessed {
    opacity: 0.4;
    text-decoration: line-through;
    pointer-events: none;
  }

  .dropdown-item .mini-tag {
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    color: var(--gold-deep);
    text-transform: uppercase;
  }

  #submitBtn {
    padding: 0 1.8rem;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.25em;
    background: var(--oxblood);
    color: var(--marble);
    border: 2px solid var(--oxblood-dark);
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
  }

  #submitBtn:hover:not(:disabled) {
    background: var(--oxblood-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 0 var(--gold-deep);
  }

  #submitBtn:active:not(:disabled) { transform: translateY(1px); }
  #submitBtn:disabled { opacity: 0.5; cursor: not-allowed; }

  /* ============ TABLE ============ */
  .scroll-container {
    margin-top: 1.5rem;
    overflow-x: auto;
  }

  table.guesses {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    min-width: 860px;
  }

  .guesses thead th {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--marble);
    background: var(--ink);
    padding: 0.9rem 0.35rem;
    text-transform: uppercase;
    text-align: center;
    border: 1px solid var(--gold-deep);
    position: relative;
  }

  .guesses thead th::after {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 4px;
    height: 1px;
    background: var(--gold-bright);
    opacity: 0.5;
  }

  .guesses tbody td {
    padding: 0.55rem 0.35rem;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid rgba(42, 31, 20, 0.2);
    position: relative;
    vertical-align: middle;
    min-height: 56px;
    height: 56px;
  }

  .cell-name {
    background: var(--parchment-deep);
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.1em;
    color: var(--ink);
    text-transform: uppercase;
  }

  .cell-match {
    background: var(--laurel);
    color: var(--marble);
    font-weight: 600;
    animation: reveal 0.5s ease both;
  }

  .cell-partial {
    background: var(--gold);
    color: var(--ink);
    font-weight: 600;
    animation: reveal 0.5s ease both;
  }

  .cell-miss {
    background: var(--oxblood);
    color: var(--marble);
    animation: reveal 0.5s ease both;
  }

  .cell-match::before, .cell-partial::before, .cell-miss::before {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    opacity: 0.6;
  }

  .hint-arrow {
    font-size: 0.75rem;
    margin-left: 0.3rem;
    opacity: 0.85;
  }

  @keyframes reveal {
    from { transform: rotateY(90deg); opacity: 0; }
    to { transform: rotateY(0); opacity: 1; }
  }

  .guesses tbody tr:nth-child(1) td:nth-child(2) { animation-delay: 0.05s; }
  .guesses tbody tr:nth-child(1) td:nth-child(3) { animation-delay: 0.12s; }
  .guesses tbody tr:nth-child(1) td:nth-child(4) { animation-delay: 0.19s; }
  .guesses tbody tr:nth-child(1) td:nth-child(5) { animation-delay: 0.26s; }
  .guesses tbody tr:nth-child(1) td:nth-child(6) { animation-delay: 0.33s; }
  .guesses tbody tr:nth-child(1) td:nth-child(7) { animation-delay: 0.40s; }
  .guesses tbody tr:nth-child(1) td:nth-child(8) { animation-delay: 0.47s; }
  .guesses tbody tr:nth-child(1) td:nth-child(9) { animation-delay: 0.54s; }

  /* ============ LEGEND ============ */
  .legend {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: 0.75rem;
    font-family: 'IM Fell English', serif;
    font-size: 0.95rem;
    color: var(--ink-soft);
  }

  .legend-item { display: flex; align-items: center; gap: 0.5rem; }
  .legend-swatch { width: 20px; height: 20px; border: 1px solid rgba(42, 31, 20, 0.3); }
  .legend-match { background: var(--laurel); }
  .legend-partial { background: var(--gold); }
  .legend-miss { background: var(--oxblood); }

  /* ============ SCHOLAR PANEL ============ */
  .scholar-panel {
    background: var(--parchment-deep);
    border-left: 4px solid var(--oxblood);
    padding: 1rem 1.2rem;
    margin-top: 1rem;
    font-family: 'IM Fell English', serif;
    font-size: 1rem;
    color: var(--ink-soft);
    line-height: 1.5;
    animation: fadeIn 0.4s ease;
  }

  .scholar-panel-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    color: var(--oxblood);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    display: block;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ============ VICTORY ============ */
  .victory {
    text-align: center;
    padding: 2rem 1.5rem;
    margin-top: 1.5rem;
    background: linear-gradient(180deg, var(--marble), var(--parchment-deep));
    border: 2px solid var(--gold-deep);
    position: relative;
    animation: victoryRise 0.6s ease;
  }

  @keyframes victoryRise {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .victory-laurel {
    font-size: 2.5rem;
    color: var(--laurel);
    margin-bottom: 0.5rem;
  }

  .victory h2 {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 0.15em;
    color: var(--oxblood);
    margin-bottom: 0.5rem;
  }

  .victory .tribute {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--ink-soft);
    margin-bottom: 1.2rem;
  }

  .myth-lesson {
    text-align: left;
    background: var(--parchment);
    border-left: 4px solid var(--gold-deep);
    padding: 1rem 1.2rem;
    margin-top: 1rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--ink);
  }

  .myth-lesson-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    color: var(--gold-deep);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
  }

  .myth-lesson strong { color: var(--oxblood); font-weight: 700; }

  .new-game-btn {
    margin-top: 1rem;
    padding: 0.8rem 2rem;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.25em;
    background: var(--ink);
    color: var(--marble);
    border: 2px solid var(--gold-deep);
    cursor: pointer;
    text-transform: uppercase;
  }

  .new-game-btn:hover { background: var(--laurel-dark); }

  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--parchment-deep); }
  ::-webkit-scrollbar-thumb { background: var(--gold-deep); border: 2px solid var(--parchment-deep); }

  @media (max-width: 600px) {
    /* Base mobile adjustments - comprehensive mobile block at end of file */
  }
  /* ============ SHARE & STATS ADDITIONS ============ */
  .puzzle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.6rem 1rem;
    background: var(--marble);
    border: 1px solid var(--gold-deep);
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .puzzle-header .puzzle-num {
    color: var(--oxblood);
    font-weight: 700;
    font-size: 1.05rem;
  }

  .puzzle-header .puzzle-date {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.03em;
    font-size: 0.9rem;
    color: var(--ink-soft);
  }

  .challenge-banner {
    background: linear-gradient(135deg, var(--oxblood), var(--oxblood-dark));
    color: var(--marble);
    padding: 0.6rem 1rem;
    text-align: center;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    border: 1px solid var(--gold-deep);
  }

  .challenge-banner strong {
    font-family: 'Cinzel', serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--gold-bright);
  }

  /* Share section inside victory panel */
  .share-section {
    margin-top: 1.2rem;
    padding: 1.2rem;
    background: var(--marble);
    border: 2px dashed var(--gold-deep);
  }

  .share-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--oxblood);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.8rem;
  }

  .share-preview {
    background: var(--parchment);
    padding: 1rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    line-height: 1.5;
    white-space: pre-wrap;
    text-align: left;
    border: 1px solid var(--gold-deep);
    margin-bottom: 1rem;
    color: var(--ink);
    letter-spacing: 0.02em;
  }

  .share-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .share-btn {
    padding: 0.7rem 1.4rem;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    background: var(--ink);
    color: var(--marble);
    border: 2px solid var(--gold-deep);
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.15s;
  }

  .share-btn:hover {
    background: var(--oxblood);
  }

  .share-btn.copied {
    background: var(--laurel);
    border-color: var(--laurel-dark);
  }

  .share-btn .icon {
    display: inline-block;
    margin-right: 0.4rem;
  }

  /* Global stats strip */
  .global-stats {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--parchment-deep);
    border-left: 4px solid var(--laurel);
    text-align: left;
    font-family: 'IM Fell English', serif;
    font-size: 1rem;
    color: var(--ink);
    line-height: 1.6;
  }

  .global-stats-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    color: var(--laurel-dark);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
  }

  .global-stats .stat-number {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: var(--oxblood);
    font-size: 1.1rem;
  }

  /* Distribution histogram */
  .distribution {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .dist-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }

  .dist-row .label {
    width: 24px;
    text-align: right;
    color: var(--ink-soft);
    font-weight: 600;
  }

  .dist-row .bar {
    flex: 1;
    height: 18px;
    background: var(--marble);
    position: relative;
    border: 1px solid rgba(138, 100, 34, 0.3);
  }

  .dist-row .bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--laurel);
    transition: width 0.5s ease;
  }

  .dist-row .bar-fill.mine {
    background: var(--oxblood);
  }

  .dist-row .bar-count {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: var(--marble);
    font-weight: 700;
  }

  .dist-row .bar-count.dark {
    color: var(--ink);
  }

  /* Toast for copy confirmation */
  .toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--ink);
    color: var(--marble);
    padding: 0.8rem 1.4rem;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 1px solid var(--gold-deep);
    box-shadow: 0 8px 24px rgba(42, 31, 20, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 1000;
  }

  .toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* Loading state */
  .loading-message {
    text-align: center;
    padding: 2rem;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    color: var(--ink-soft);
    font-size: 1.1rem;
  }

  /* ============ COMPREHENSIVE MOBILE STYLES ============ */

  /* Tablet & below: tighten spacing */
  @media (max-width: 900px) {
    body { padding-bottom: 3rem; }
    main { padding: 0 0.75rem; }
    .temple { padding: 1.5rem 1rem; }
    .olympus-sky { height: 280px; }
    .pediment { height: 100px; }
    .mountain { width: 700px; bottom: 40px; }

    /* Easter eggs slightly smaller on tablet */
    .zeus-cloud svg { width: 150px; height: 108px; }
    .pegasus svg { width: 110px; height: 93px; }
    .icarus svg { width: 75px; height: 92px; }
    .icarus { top: 170px; }
    .pegasus { top: 70px; }
  }

  /* Phones: major restructuring */
  @media (max-width: 640px) {
    body {
      padding-bottom: 2rem;
    }

    /* --- Sky section compacts --- */
    .olympus-sky {
      height: 220px;
      margin-bottom: -40px;
    }
    .pediment {
      height: 80px;
      opacity: 0.35;
    }
    .mountain {
      width: 500px;
      height: 120px;
      bottom: 30px;
    }
    .olympus-sky::before {
      width: 400px;
      height: 400px;
      margin-left: -200px;
      top: -80px;
    }

    /* Smaller easter eggs */
    .zeus-cloud svg { width: 120px; height: 87px; }
    .pegasus svg { width: 90px; height: 76px; }
    .icarus svg { width: 60px; height: 73px; }
    .icarus { top: 130px; }
    .pegasus { top: 55px; }

    /* Tighter cloud animations (off-screen less far) */
    .cloud { transform: scale(0.7); }

    /* --- Title header --- */
    .header {
      padding: 2rem 0.75rem 0.5rem;
    }
    h1 {
      font-size: clamp(2rem, 11vw, 2.8rem);
      letter-spacing: 0.15em;
    }
    .title-greek {
      font-size: 0.85rem;
      letter-spacing: 0.4em;
      margin-bottom: 0.5rem;
    }
    .subtitle {
      font-size: 0.95rem;
    }
    .meander {
      max-width: 280px;
      margin-bottom: 0.8rem;
    }

    /* --- Puzzle header: stack vertically --- */
    .puzzle-header {
      flex-direction: column;
      gap: 0.25rem;
      padding: 0.75rem 0.75rem;
      font-size: 0.7rem;
      letter-spacing: 0.15em;
      text-align: center;
    }
    .puzzle-header .puzzle-date {
      font-size: 0.85rem;
    }

    /* --- Temple card: tighter --- */
    main {
      padding: 0 0.5rem;
    }
    .temple {
      padding: 1rem 0.75rem;
    }
    .temple::before, .temple::after {
      display: none;
    }

    /* --- Dropdown + submit: stack --- */
    .oracle {
      flex-direction: column;
      gap: 0.5rem;
    }
    .dropdown-trigger {
      font-size: 1.1rem;
      padding: 0.85rem 1rem;
    }
    #submitBtn {
      padding: 0.85rem;
      width: 100%;
      font-size: 0.85rem;
    }
    .dropdown-panel {
      max-height: 320px;
    }
    .dropdown-item {
      font-size: 1rem;
      padding: 0.6rem 1rem;
    }
    .oracle-label {
      font-size: 0.75rem;
      letter-spacing: 0.25em;
    }

    /* --- Legend: smaller --- */
    .legend {
      gap: 0.8rem;
      padding: 0.5rem 0.25rem;
      font-size: 0.85rem;
    }
    .legend-swatch {
      width: 16px;
      height: 16px;
    }

    /* --- GUESS TABLE → COMPACT GRID on mobile (keep real tile layout) --- */
    .scroll-container {
      overflow-x: visible;
      margin-top: 1rem;
    }
    table.guesses {
      min-width: 0;
      width: 100%;
      border-collapse: separate;
      border-spacing: 2px;
      table-layout: fixed;
      display: table;
    }
    /* Make the Figure column slightly wider; others equal */
    table.guesses thead th:nth-child(1),
    table.guesses tbody td:nth-child(1) {
      width: 17%;
    }
    table.guesses thead th:nth-child(n+2),
    table.guesses tbody td:nth-child(n+2) {
      width: calc(83% / 7);
    }
    table.guesses thead {
      display: table-header-group;
    }
    table.guesses thead th {
      padding: 0.35rem 0.1rem;
      font-size: 0.42rem;
      letter-spacing: 0.05em;
      font-weight: 700;
    }
    table.guesses thead th::after {
      display: none;
    }
    table.guesses tbody {
      display: table-row-group;
    }
    table.guesses tbody tr {
      display: table-row;
      margin: 0;
      border: none;
      background: transparent;
      padding: 0;
    }
    table.guesses tbody td {
      display: table-cell;
      padding: 0.25rem 0.1rem;
      font-size: 0.52rem;
      line-height: 1.1;
      min-height: 0;
      height: auto;
      border: 1px solid rgba(42, 31, 20, 0.2);
      text-align: center;
      margin: 0;
      position: relative;
      vertical-align: middle;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
      hyphens: auto;
    }
    /* Hide the ::before labels since the column headers are visible */
    table.guesses tbody td::before {
      display: none;
    }
    /* Restore small triangle indicators in top-right */
    table.guesses tbody td.cell-match::after,
    table.guesses tbody td.cell-partial::after,
    table.guesses tbody td.cell-miss::after {
      content: "";
      display: block;
      position: absolute;
      top: 2px;
      right: 2px;
      width: 5px;
      height: 5px;
      border-top: 1.5px solid currentColor;
      border-right: 1.5px solid currentColor;
      opacity: 0.6;
    }
    table.guesses tbody td.cell-name {
      background: var(--parchment-deep);
      color: var(--ink);
      font-size: 0.5rem !important;
      letter-spacing: 0.04em;
      padding: 0.3rem 0.15rem;
      text-align: center;
      font-weight: 700;
      text-transform: uppercase;
    }
    /* Cell styling (match/partial/miss) stays as in the desktop defaults */
    table.guesses tbody td.cell-match {
      background: var(--laurel);
      color: var(--marble);
      font-weight: 600;
    }
    table.guesses tbody td.cell-partial {
      background: var(--gold);
      color: var(--ink);
      font-weight: 600;
    }
    table.guesses tbody td.cell-miss {
      background: var(--oxblood);
      color: var(--marble);
    }
    .hint-arrow {
      font-size: 0.5rem;
      margin-left: 0.1rem;
    }

    /* --- Scholar panel / hints --- */
    .scholar-panel {
      padding: 0.8rem 1rem;
      font-size: 0.95rem;
    }

    /* --- Victory panel --- */
    .victory {
      padding: 1.5rem 1rem;
    }
    .victory h2 {
      font-size: 1.5rem;
      letter-spacing: 0.1em;
    }
    .victory .tribute {
      font-size: 1rem;
    }
    .victory-laurel {
      font-size: 2rem;
    }
    .myth-lesson {
      padding: 0.8rem 1rem;
      font-size: 1rem;
    }
    .myth-lesson:last-of-type {
      font-size: 0.95rem;
      line-height: 1.6;
    }

    /* --- Share section --- */
    .share-section {
      padding: 1rem 0.75rem;
    }
    .share-preview {
      font-size: 0.9rem;
      padding: 0.75rem;
    }
    .share-buttons {
      flex-direction: column;
      gap: 0.5rem;
    }
    .share-btn {
      width: 100%;
      padding: 0.8rem;
      font-size: 0.75rem;
      letter-spacing: 0.18em;
    }

    /* --- Global stats --- */
    .global-stats {
      padding: 0.85rem;
      font-size: 0.95rem;
    }
    .dist-row .label {
      width: 20px;
      font-size: 0.65rem;
    }
    .dist-row .bar {
      height: 16px;
    }

    /* --- Challenge banner --- */
    .challenge-banner {
      font-size: 0.85rem;
      padding: 0.5rem 0.75rem;
    }

    /* --- Toast --- */
    .toast {
      font-size: 0.75rem;
      padding: 0.7rem 1.1rem;
      bottom: 1rem;
    }

    /* --- Egg bubbles: narrower --- */
    .egg-bubble {
      max-width: 200px;
      font-size: 0.85rem;
      padding: 0.5rem 0.75rem;
    }
    .egg-bubble .speaker {
      font-size: 0.6rem;
    }

    /* Columns decoration doesn't make sense on small screens */
    .column { display: none; }
  }

  /* Very small phones */
  @media (max-width: 380px) {
    h1 {
      font-size: 1.9rem;
      letter-spacing: 0.1em;
    }
    .olympus-sky { height: 180px; }
    .mountain { width: 420px; }
    .dropdown-trigger { font-size: 1rem; }
    .dropdown-item { font-size: 0.95rem; }
    .victory h2 { font-size: 1.3rem; }

    /* Even tighter tile grid */
    table.guesses thead th {
      font-size: 0.38rem;
      padding: 0.3rem 0.05rem;
    }
    table.guesses tbody td {
      font-size: 0.46rem;
      padding: 0.2rem 0.05rem;
    }
    table.guesses tbody td.cell-name {
      font-size: 0.44rem !important;
      padding: 0.25rem 0.1rem;
    }
    table.guesses tbody td.cell-match::after,
    table.guesses tbody td.cell-partial::after,
    table.guesses tbody td.cell-miss::after {
      width: 4px;
      height: 4px;
    }
  }

  /* Touch-specific: larger tap targets */
  @media (hover: none) and (pointer: coarse) {
    .dropdown-item {
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
    }
    .share-btn, #submitBtn, .new-game-btn {
      min-height: 44px;
    }
    .dropdown-trigger {
      min-height: 48px;
    }
  }

  /* ============================================
     KID MODE (Easy) — picture-based guessing
     ============================================ */

  /* --- Mode Toggle at top of temple --- */
  .mode-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
  }

  .toggle-container {
    display: flex;
    background: var(--parchment);
    border: 2px solid var(--gold-deep);
    border-radius: 50px;
    padding: 4px;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(42, 31, 20, 0.1);
  }

  .toggle-btn {
    padding: 0.55rem 1.2rem;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    background: transparent;
    color: var(--ink-soft);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.25s;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }

  .toggle-btn.active {
    background: var(--oxblood);
    color: var(--marble);
    box-shadow: 0 2px 6px rgba(122, 46, 42, 0.35);
  }

  .toggle-btn .icon {
    font-size: 1rem;
  }

  /* Hide one mode's content when the other is active */
  body.mode-easy .hard-only { display: none !important; }
  body.mode-hard .easy-only { display: none !important; }

  /* --- Kid mode: riddle bubble --- */
  .kid-riddle {
    background: linear-gradient(135deg, var(--parchment) 0%, var(--parchment-deep) 100%);
    border: 2px dashed var(--gold-deep);
    border-radius: 16px;
    padding: 1.2rem 1.3rem;
    margin-bottom: 1.2rem;
    text-align: center;
  }

  .kid-riddle-label {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    color: var(--oxblood);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
  }

  .kid-riddle-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--ink);
    line-height: 1.5;
    min-height: 1.8rem;
    animation: riddleFade 0.4s ease;
  }

  @keyframes riddleFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* --- Kid mode: hearts & progress row --- */
  .kid-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--ink-soft);
    text-transform: uppercase;
  }

  .kid-progress-row .count {
    color: var(--oxblood);
    font-weight: 700;
    font-size: 1rem;
  }

  .hearts {
    display: flex;
    gap: 4px;
  }

  .heart {
    font-size: 1.3rem;
    transition: transform 0.3s, opacity 0.3s;
  }

  .heart.lost {
    opacity: 0.25;
    filter: grayscale(1);
  }

  @keyframes heartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
  }

  .heart.popping {
    animation: heartPop 0.3s ease;
  }

  /* --- Kid mode: god grid --- */
  .god-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
  }

  @media (max-width: 900px) {
    .god-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  }

  @media (max-width: 700px) {
    .god-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  }

  @media (max-width: 480px) {
    .god-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .kid-riddle-text { font-size: 1rem; }
  }

  .god-card {
    position: relative;
    background: var(--parchment);
    border: 2px solid var(--gold-deep);
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px;
  }

  .god-card:hover:not(.eliminated):not(.correct) {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px rgba(184, 137, 58, 0.4);
    background: var(--marble);
  }

  .god-card:active:not(.eliminated):not(.correct) {
    transform: translateY(-1px) scale(1.01);
  }

  .god-card .god-portrait {
    width: 92%;
    height: 78%;
    object-fit: contain;
    display: block;
    border-radius: 50%;
  }

  .god-card .god-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--ink);
    text-align: center;
    letter-spacing: 0.06em;
    margin-top: 2px;
    line-height: 1.1;
    text-transform: uppercase;
  }

  @media (max-width: 480px) {
    .god-card .god-name { font-size: 0.58rem; }
  }

  .god-card.eliminated {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(0.85);
    pointer-events: none;
  }

  .god-card.eliminated::after {
    content: "✕";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--oxblood);
    font-weight: 900;
    background: rgba(245, 236, 214, 0.4);
  }

  .god-card.correct {
    border-color: var(--laurel);
    border-width: 4px;
    background: #e8f0d4;
    animation: celebrate 0.8s ease;
    pointer-events: none;
  }

  @keyframes celebrate {
    0% { transform: scale(1); }
    30% { transform: scale(1.15) rotate(-3deg); }
    60% { transform: scale(1.1) rotate(3deg); }
    100% { transform: scale(1.08) rotate(0); }
  }

  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
  }

  .god-card.shaking {
    animation: shake 0.4s ease;
  }

  /* --- Kid mode: victory modal portrait --- */
  .kid-victory-portrait {
    width: 140px;
    height: 140px;
    margin: 0.8rem auto;
    display: block;
    object-fit: contain;
    border-radius: 50%;
    border: 3px solid var(--gold-deep);
  }

  /* --- Confetti on kid-mode victory --- */
  .confetti-piece {
    position: fixed;
    width: 10px;
    height: 10px;
    top: -20px;
    z-index: 99;
    pointer-events: none;
    animation: confettiFall 2.5s linear forwards;
  }

  @keyframes confettiFall {
    0% { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
  }

  /* ============================================
     HOW TO PLAY (collapsible instructions)
     ============================================ */
  .how-to-play {
    background: var(--parchment);
    border: 2px solid var(--gold-deep);
    border-radius: 8px;
    margin-bottom: 1.2rem;
    overflow: hidden;
  }

  .how-to-play summary {
    list-style: none;
    cursor: pointer;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--ink);
    text-transform: uppercase;
    transition: background 0.2s;
    user-select: none;
  }

  .how-to-play summary::-webkit-details-marker {
    display: none;
  }

  .how-to-play summary:hover {
    background: var(--parchment-deep);
  }

  .how-to-play .htp-icon {
    font-size: 1.1rem;
  }

  .how-to-play .htp-title {
    flex: 1;
  }

  .how-to-play .htp-chevron {
    font-size: 0.7rem;
    color: var(--gold-deep);
    transition: transform 0.25s;
  }

  .how-to-play[open] .htp-chevron {
    transform: rotate(180deg);
  }

  .how-to-play[open] summary {
    border-bottom: 1px solid var(--gold-deep);
    background: var(--parchment-deep);
  }

  .how-to-play .htp-body {
    padding: 1rem 1.2rem 1.1rem;
    background: var(--marble);
    animation: htpSlide 0.3s ease;
  }

  @keyframes htpSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .htp-steps {
    margin: 0 0 0.8rem;
    padding-left: 1.4rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink);
  }

  .htp-steps li {
    margin-bottom: 0.5rem;
  }

  .htp-steps li:last-child {
    margin-bottom: 0;
  }

  .htp-steps strong {
    color: var(--oxblood);
    font-weight: 700;
  }

  .htp-steps em {
    font-style: italic;
    color: var(--gold-deep);
    font-weight: 600;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0 0.2em;
  }

  .htp-swatch {
    display: inline-block;
    padding: 1px 8px;
    margin: 0 2px;
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 3px;
    border: 1px solid rgba(42, 31, 20, 0.15);
  }
  .htp-swatch.htp-match {
    background: var(--laurel);
    color: var(--marble);
  }
  .htp-swatch.htp-partial {
    background: var(--gold);
    color: var(--ink);
  }
  .htp-swatch.htp-miss {
    background: var(--oxblood);
    color: var(--marble);
  }

  .htp-note {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ink-soft);
    margin: 0;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(138, 100, 34, 0.3);
  }

  @media (max-width: 640px) {
    .how-to-play summary {
      font-size: 0.72rem;
      padding: 0.65rem 0.85rem;
    }
    .htp-steps {
      font-size: 0.95rem;
      padding-left: 1.2rem;
    }
    .htp-body {
      padding: 0.85rem 1rem 0.95rem;
    }
    .htp-swatch {
      font-size: 0.7em;
      padding: 0 6px;
    }
  }

  /* ============================================
     SITE FOOTER
     ============================================ */
  .site-footer {
    max-width: 1100px;
    margin: 2rem auto 0;
    padding: 1.5rem 1rem 0.5rem;
    text-align: center;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ink-soft);
    letter-spacing: 0.03em;
    border-top: 1px solid rgba(138, 100, 34, 0.3);
    position: relative;
    z-index: 5;
  }

  .site-footer::before,
  .site-footer::after {
    content: "❦";
    color: var(--gold-deep);
    margin: 0 0.6em;
    font-style: normal;
    opacity: 0.7;
  }

  .site-footer .footer-emoji {
    display: inline-block;
    animation: tornadoSpin 3s ease-in-out infinite;
    font-style: normal;
  }

  @keyframes tornadoSpin {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
  }

  .site-footer .footer-brand {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.12em;
    color: var(--oxblood);
    text-transform: uppercase;
    font-size: 0.85em;
  }

  @media (max-width: 640px) {
    .site-footer {
      margin-top: 1.5rem;
      padding: 1rem 0.75rem 0.5rem;
      font-size: 0.85rem;
    }
    .site-footer::before,
    .site-footer::after {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .site-footer .footer-emoji {
      animation: none;
    }
  }