body {
      font-family: 'Nunito', sans-serif;
      user-select: none;
      background-color: #090D16;
      color: #F8FAFC;
    }

    #victory-modal.hidden, #workshop-modal.hidden, #world-map-modal.hidden,
    #choice-modal.hidden, #gallery-modal.hidden, #dashboard-modal.hidden,
    #debug-hint-box.hidden, #editor-toolbar.hidden, #world-map-back.hidden,
    #world-complete-banner.hidden { display: none !important; }

    .grid-cell {
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .robot-icon {
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Directional Indicator Styles */
    .forward-target-tile {
      box-shadow: inset 0 0 12px rgba(16, 185, 129, 0.6);
      border-color: #10B981 !important;
      background-color: rgba(16, 185, 129, 0.12) !important;
    }

    .direction-badge {
      position: absolute;
      width: 1.35rem;
      height: 1.35rem;
      background: #F59E0B;
      color: #0F172A;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.65rem;
      font-weight: 900;
      box-shadow: 0 0 10px rgba(245, 158, 11, 0.85);
      border: 2px solid #FFFFFF;
      z-index: 25;
      animation: pulse-direction 1.8s infinite ease-in-out;
    }

    @keyframes pulse-direction {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.15); box-shadow: 0 0 14px rgba(245, 158, 11, 1); }
    }

    .active-command {
      border-color: #F59E0B !important;
      background-color: rgba(245, 158, 11, 0.2) !important;
      box-shadow: 0 0 14px rgba(245, 158, 11, 0.6);
      transform: scale(1.02);
    }

    @keyframes pulse-glow {
      0%, 100% { transform: scale(1); opacity: 0.9; }
      50% { transform: scale(1.1); opacity: 1; filter: drop-shadow(0 0 14px rgba(234, 179, 8, 0.95)); }
    }

    .beacon-glow {
      animation: pulse-glow 2s infinite ease-in-out;
    }

    @keyframes float-gentle {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-6px); }
    }

    .floating {
      animation: float-gentle 2.8s ease-in-out infinite;
    }

    body { --theme-accent: #10b981; --theme-map: #064e3b; }
    body[data-theme="crystal"] { --theme-accent: #a78bfa; --theme-map: #2e1065; }
    body[data-theme="ocean"] { --theme-accent: #22d3ee; --theme-map: #083344; }
    body[data-theme="desert"] { --theme-accent: #fbbf24; --theme-map: #451a03; }
    body[data-theme="sky"] { --theme-accent: #60a5fa; --theme-map: #172554; }
    body[data-theme="storm"] { --theme-accent: #f472b6; --theme-map: #500724; }
    body[data-theme="forest"] { --theme-accent: #4ade80; --theme-map: #052e16; }
    body[data-theme="volcano"] { --theme-accent: #fb7185; --theme-map: #7f1d1d; }
    body[data-theme="moon"] { --theme-accent: #c4b5fd; --theme-map: #1e1b4b; }
    body[data-theme="aurora"] { --theme-accent: #2dd4bf; --theme-map: #134e4a; }
    #game-map { background: linear-gradient(180deg, var(--theme-map), #0f172a 70%); }
    #grid-board { border-color: var(--theme-accent); box-shadow: 0 0 18px color-mix(in srgb, var(--theme-accent) 35%, transparent); }
    #home-screen { background: radial-gradient(circle at top, var(--theme-map), #020617 65%); }
    #home-card { border-color: var(--theme-accent); }
    #grid-board .grid-cell { background-image: radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--theme-accent) 16%, transparent), transparent 65%); }
    .tile-art { width: 82%; height: 82%; display: inline-flex; align-items: center; justify-content: center; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
    .tile-art svg { width: 100%; height: 100%; }
    .collectible-marker { display: inline-flex; width: 20px; height: 20px; }
    .collectible-marker .tile-art { width: 100%; height: 100%; }
    .world-complete-banner { margin-top: 8px; padding: 9px; border: 1px solid var(--theme-accent); border-radius: 14px; background: linear-gradient(120deg, var(--theme-map), #0f172a); color: #cffafe; font-size: 13px; font-weight: 800; box-shadow: 0 0 16px color-mix(in srgb, var(--theme-accent) 30%, transparent); }
    .world-complete-banner .world-medal { font-size: 26px; display: block; line-height: 1; margin-bottom: 4px; }
    .tile-exit { filter: drop-shadow(0 0 7px #fbbf24); animation: beaconPulse 1.8s ease-in-out infinite; }
    .tile-crystal, .tile-battery, .tile-tool { animation: itemFloat 2s ease-in-out infinite; }
    @keyframes beaconPulse { 50% { filter: drop-shadow(0 0 16px #fbbf24); transform: scale(1.08); } }
    @keyframes itemFloat { 50% { transform: translateY(-3px); } }
    @media (prefers-reduced-motion: reduce) { .tile-art { animation: none !important; } }
    #home-skin-preview { filter: var(--skin-filter, none); }
    .home-picker { display: grid; grid-template-columns: 40px minmax(0,1fr) 40px; align-items: center; gap: 6px; }
    .home-picker button { height: 44px; border-radius: 12px; background: #1e293b; border: 1px solid #475569; color: #e2e8f0; font-size: 22px; }
    .home-picker button:active { background: #334155; transform: scale(.95); }
    .home-picker-display { height: 44px; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 3px 8px; border: 1px solid #475569; border-radius: 12px; background: #020617; }
    .home-picker-display strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
    .home-diagram { width: 38px; height: 38px; flex: none; border-radius: 8px; overflow: hidden; }
    .mini-map { display: grid; gap: 1px; padding: 2px; background: #0f172a; }
    .mini-map span { border-radius: 2px; background: #334155; }
    .mini-map .wall { background: #64748b; } .mini-map .item { background: #facc15; }
    .mini-map .start { background: #34d399; } .mini-map .exit { background: #fb923c; }
    .theme-diagram { display: grid; place-items: center; font-size: 23px; border: 1px solid rgba(255,255,255,.3); }
    .skin-diagram { padding: 2px; filter: var(--skin-filter, none); }
    .world-choice-grid, .choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
    .picker-card { min-height: 74px; border: 1px solid #475569; border-radius: 14px; background: #0f172a; color: #e2e8f0; padding: 7px; display: flex; align-items: center; gap: 8px; text-align: left; }
    .picker-card:disabled { opacity: .43; cursor: not-allowed; }
    .picker-card:not(:disabled):active { transform: scale(.97); }
    .picker-card .art { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; font-size: 25px; overflow: hidden; }
    .picker-card .art svg { width: 38px; height: 38px; }
    .picker-card .caption { min-width: 0; font-size: 11px; font-weight: 800; line-height: 1.2; }
    .picker-card .sub { display: block; color: #94a3b8; font-size: 10px; margin-top: 3px; }
    .picker-card.selected { border-color: #34d399; box-shadow: inset 0 0 0 1px #34d399; }
    .choice-wallet { margin: -7px 0 9px; color: #fcd34d; font-size: 12px; font-weight: 800; }
    .choice-status { min-height: 18px; margin-top: 8px; color: #93c5fd; font-size: 11px; font-weight: 700; text-align: center; }
    #choice-grid { max-height: calc(100dvh - 155px); overflow-y: auto; }
    @media (max-height: 600px) { .picker-card { min-height: 62px; } .picker-card .art { width: 34px; height: 34px; font-size: 20px; } }

    /* Custom Scrollbar Styles */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      background: #0F172A;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb {
      background: #334155;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #475569;
    }

    @media (max-width: 1023px) {
      html, body { width: 100%; height: 100% !important; overflow: hidden !important; overscroll-behavior: none; }
      body { height: 100dvh !important; min-height: 0; }
      header { padding: 4px 8px !important; gap: 3px !important; }
      header > div:first-child { transform: scale(.78); transform-origin: left center; height: 34px; }
      #game-layout { display: block; overflow: hidden !important; flex: 1 1 auto; min-height: 0; }
      #game-map, #game-workbench { width: 100%; height: 100%; min-height: 0; overflow: hidden !important; }
      body.mobile-map #game-workbench, body.mobile-code #game-map { display: none !important; }
      #game-map { gap: 4px; padding: 7px; justify-content: space-between; }
      #map-stage { min-height: 0; margin: 0; padding: 0; flex: 1 1 auto; }
      #game-workbench { padding: 7px 9px; justify-content: space-between; }
      #game-workbench > div:first-child { min-height: 0; display: flex; flex-direction: column; }
      #program-workspace { min-height: 0; max-height: none; height: min(23dvh, 142px); overflow: hidden; padding: 4px; gap: 3px; }
      #grid-board { gap: 3px; padding: 5px; }
      #grid-board .grid-cell { width: min(10.8vw, 8.2dvh, 46px); height: min(10.8vw, 8.2dvh, 46px); }
      #command-palette button { min-height: 46px; }
      #game-workbench button, #game-map button, header button { touch-action: manipulation; }
      #program-workspace button { min-width: 34px; min-height: 40px; }
      #program-workspace > div { min-height: 48px; padding: 3px 5px; }
      #game-mode-select { min-height: 34px; max-width: 100%; }
      #track-controls { width: 100%; overflow: hidden; justify-content: space-between; }
      #track-controls button { min-height: 30px; white-space: nowrap; flex: 1 1 0; justify-content: center; padding: 2px; font-size: 10px; }
      #top-tools { width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 2px; }
      #top-tools > div { padding: 3px 5px; }
      #top-tools button { min-width: 30px; min-height: 30px; padding: 4px; }
      #mobile-nav { display: flex; height: 52px; flex: none; }
      #mobile-nav button { flex: 1; min-height: 48px; font-size: 12px; font-weight: 800; white-space: nowrap; }
      #mobile-nav button i { margin-right: 4px; }
      #mobile-nav button[aria-selected="true"] { color: #fbbf24; background: #1e293b; }
      #mission-panel { padding: 7px; }
      #mission-panel p { line-height: 1.15; margin-top: 2px; }
      #robot-panel { padding: 6px; gap: 3px; }
      #robot-ability-desc { display: none; }
      #program-pager { display: flex; }
      #game-workbench .mt-3, #game-workbench .mt-3\.5 { margin-top: 6px; }
      #debug-hint-box { position: fixed; bottom: 12px; width: calc(100vw - 24px); }
      #item-progress { font-size: 10px; }
      #item-progress-icons { font-size: 13px; }
      #home-card { max-height: calc(100dvh - 24px); }
    }

    @media (max-width: 380px) {
      #grid-board .grid-cell { width: min(10.5vw, 7.8dvh, 40px); height: min(10.5vw, 7.8dvh, 40px); }
      #command-palette button { padding: 7px; }
    }

    @media (max-width: 1023px) and (max-height: 650px) {
      #mission-panel { flex: none; min-height: 0; padding: 5px; gap: 2px; }
      #mission-panel p, #world-badge, #game-mode-select { display: none; }
      #item-progress { margin-top: 1px; }
      #mission-panel > div:last-child { width: 100%; }
      #hint-button { flex: none; min-height: 28px; padding: 3px 5px; }
      #map-stage { min-height: 0; }
      #robot-panel { display: none !important; }
      #grid-board .grid-cell { width: min(9.6vw, 6.8dvh, 34px); height: min(9.6vw, 6.8dvh, 34px); }
    }