:root {
      color-scheme: light;
      --ink: #26312f;
      --paper: #f7f1e5;
      --panel: #fffaf0;
      --grass: #a8cf8a;
      --sand: #ecd58d;
      --water: #79bfd0;
      --tree: #4f8c5b;
      --stone: #888f87;
      --accent: #d76f45;
      --accent-dark: #9f4e37;
      --shadow: rgba(29, 45, 43, 0.16);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      background:
        linear-gradient(180deg, rgba(121, 191, 208, 0.24), transparent 38%),
        var(--paper);
      color: var(--ink);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      transition: background 0.5s ease, color 0.5s ease;
    }

    body.time-morning {
      background:
        linear-gradient(180deg, rgba(236, 213, 141, 0.32), transparent 40%),
        var(--paper);
    }

    body.time-evening {
      background:
        linear-gradient(180deg, rgba(215, 111, 69, 0.22), transparent 42%),
        #f3e7d0;
    }

    body.time-night {
      background:
        linear-gradient(180deg, rgba(38, 49, 47, 0.3), transparent 44%),
        #d9d6c8;
      color: #1c2523;
    }

    .shell {
      width: min(960px, calc(100vw - 24px));
      display: grid;
      grid-template-columns: minmax(0, 1fr) 250px;
      gap: 14px;
      padding: 14px;
      border: 2px solid rgba(38, 49, 47, 0.16);
      border-radius: 8px;
      background: rgba(255, 250, 240, 0.72);
      box-shadow: 0 18px 48px var(--shadow);
    }

    .game-panel,
    .side-panel,
    .message-bar {
      border: 2px solid rgba(38, 49, 47, 0.14);
      border-radius: 8px;
      background: var(--panel);
    }

    .game-panel {
      padding: 12px;
      min-width: 0;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      min-height: 34px;
    }

    h1 {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: 0;
      line-height: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .hint {
      flex: 0 0 auto;
      font-size: 12px;
      color: rgba(38, 49, 47, 0.72);
      text-align: right;
      line-height: 1.15;
      max-width: 170px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .world {
      display: grid;
      grid-template-columns: repeat(20, minmax(20px, 1fr));
      aspect-ratio: 20 / 12;
      border: 3px solid rgba(38, 49, 47, 0.22);
      background: var(--water);
      overflow: hidden;
      user-select: none;
      touch-action: manipulation;
    }

    .tile {
      display: grid;
      place-items: center;
      min-width: 0;
      min-height: 0;
      border: 1px solid rgba(255, 255, 255, 0.22);
      font-size: clamp(12px, 2.2vw, 22px);
      font-weight: 800;
      line-height: 1;
      cursor: default;
    }

    .grass { background: var(--grass); }
    .sand { background: var(--sand); }
    .water { background: var(--water); color: #245c66; }
    .time-evening .water { filter: saturate(0.92) brightness(0.96); }
    .time-night .water { background: #5f9aaa; color: #173f47; }
    .time-night .grass { background: #86ad79; }
    .time-night .sand { background: #d4bf7a; }
    .wave {
      animation: wavePulse 2.8s ease-in-out infinite;
      background: #a9dcea;
      color: #2f7480;
    }
    .tree { background: var(--tree); color: #f7f1e5; }
    .stone { background: var(--stone); color: #f7f1e5; }
    .ridge { background: #5e6c67; color: #fffaf0; }
    .hut,
    .home-site { background: #c8885b; color: #fffaf0; }
    .home-tent { background: #d9b15f; color: #26312f; }
    .home-shack { background: #a86f45; color: #fffaf0; }
    .home-cabin { background: #73543a; color: #fffaf0; }
    .home-cottage { background: #8b3f78; color: #fffaf0; }
    .postbox { background: #e6c653; color: #26312f; }
    .dock { background: #a87954; color: #fffaf0; }
    .firefly { background: var(--grass); color: #fff06a; }
    .npc { background: #f1b46b; color: #283230; }
    .npc-chatting {
      animation: npcChat 0.7s steps(1) infinite;
      color: #fffaf0;
    }
    .friend-1 { background: #2b7a78; color: #fffaf0; }
    .friend-2 { background: #8b3f78; color: #fffaf0; }
    .friend-3 { background: #d75535; color: #fffaf0; }
    .shell-tile { color: #f9fbf7; text-shadow: 0 1px 1px rgba(38, 49, 47, 0.35); }
    .blue-shell { color: #def5ff; text-shadow: 0 1px 1px rgba(18, 72, 92, 0.42); }
    .buried { color: rgba(38, 49, 47, 0.36); }
    .player {
      color: #fffaf0;
      background: var(--accent);
      text-shadow: 0 1px 0 rgba(38, 49, 47, 0.3);
    }

    .player-waving,
    .remote-waving {
      background: #fff06a;
      color: #26312f;
      animation: waveEmote 0.35s steps(1) infinite;
    }

    .remote-player {
      color: #111918;
      background: #4df2d0;
      text-shadow: none;
    }

    .remote-player:nth-of-type(3n) { background: #fff06a; }
    .remote-player:nth-of-type(3n + 1) { background: #ff7ad9; }

    .side-panel {
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .stat {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(38, 49, 47, 0.14);
      gap: 10px;
    }

    .stat strong {
      font-size: 22px;
      color: var(--accent);
    }

    .sky-stat {
      justify-content: center;
    }

    .sky-stat strong {
      letter-spacing: 0.08em;
    }

    .section-title {
      margin: 0 0 6px;
      font-size: 13px;
      text-transform: uppercase;
      color: rgba(38, 49, 47, 0.64);
    }

    .inventory,
    .legend,
    .quest {
      display: grid;
      gap: 6px;
      font-size: 13px;
      line-height: 1.35;
    }

    .quest {
      padding: 8px;
      border: 1px solid rgba(38, 49, 47, 0.12);
      border-radius: 6px;
      background: #f8edca;
    }

    .message-bar {
      grid-column: 1 / -1;
      padding: 12px 14px;
      min-height: 48px;
      font-size: 14px;
      line-height: 1.45;
    }

    button {
      width: 100%;
      border: 2px solid rgba(38, 49, 47, 0.18);
      border-radius: 6px;
      background: #f2dca5;
      color: var(--ink);
      padding: 10px 12px;
      font: inherit;
      font-weight: 800;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    button:hover {
      background: #edcc7d;
    }

    .mobile-hint {
      display: none;
    }

    @keyframes wavePulse {
      0%, 100% { filter: brightness(1); }
      50% { filter: brightness(1.18); }
    }

    @keyframes npcChat {
      0% { background: #2b7a78; }
      33% { background: #8b3f78; }
      66% { background: #d75535; }
      100% { background: #2b7a78; }
    }

    @keyframes waveEmote {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-1px); }
    }

    @media (max-width: 760px) {
      body {
        place-items: start center;
        min-height: 100svh;
        padding: 8px 0 max(8px, env(safe-area-inset-bottom));
      }

      .shell {
        width: min(100vw, 430px);
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 8px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
      }

      .game-panel,
      .side-panel,
      .message-bar {
        border-width: 1px;
      }

      .game-panel {
        padding: 8px;
      }

      .topbar {
        margin-bottom: 8px;
      }

      h1 {
        font-size: clamp(17px, 5.2vw, 22px);
        max-width: 52vw;
      }

      .side-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        order: 3;
        padding: 10px;
        gap: 10px;
      }

      .side-panel button {
        grid-column: 1 / -1;
      }

      .hint {
        max-width: 42vw;
        text-align: right;
        font-size: clamp(9px, 2.7vw, 11px);
      }

      .world {
        grid-template-columns: repeat(20, minmax(0, 1fr));
        border-width: 2px;
      }

      .tile {
        border-width: 0;
        font-size: clamp(11px, 4.6vw, 18px);
      }

      .desktop-hint {
        display: none;
      }

      .mobile-hint {
        display: inline;
      }

      .message-bar {
        order: 2;
        min-height: 64px;
        font-size: 13px;
      }

      .stat {
        padding-bottom: 0;
        border-bottom: 0;
      }

      .legend {
        grid-template-columns: 1fr 1fr;
        font-size: 12px;
      }

    }