tokengolf 0.4.2 → 0.4.3

package/CLAUDE.md

@@ -38,10 +38,10 @@ A Node.js CLI tool that wraps Claude Code sessions with game mechanics. Users de
 ### Model as Character Class
 | Class | Model | Difficulty | Feel |
 |-------|-------|------------|------|
-| 🏹 Rogue | Haiku | Hard | Glass cannon. Must prompt precisely. |
-| ⚔️ Fighter | Sonnet | Normal | Balanced. The default run. |
-| 🧙 Warlock | Opus | Easy | Powerful but expensive. |
-| ⚜️ Paladin | Opus (plan mode) | Calculated | Strategic planner. Thinks before acting. |
+| 🏹 Rogue | Haiku | Nightmare | Glass cannon. Must prompt precisely. |
+| ⚔️ Fighter | Sonnet | Standard | Balanced. The default run. |
+| 🧙 Warlock | Opus | Casual | Powerful but expensive. |
+| ⚜️ Paladin | Opus (plan mode) | Tactical | Strategic planner. Thinks before acting. |
 
 ### Budget Tiers
 | Tier | Spend | Emoji |

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Josh Eche
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cli.js

@@ -575,28 +575,28 @@ var init_score = __esm({
         name: "Haiku",
         label: "Rogue",
         emoji: "\u{1F3F9}",
-        difficulty: "Hard",
+        difficulty: "Nightmare",
         color: "red"
       },
       sonnet: {
         name: "Sonnet",
         label: "Fighter",
         emoji: "\u2694\uFE0F",
-        difficulty: "Normal",
+        difficulty: "Standard",
         color: "cyan"
       },
       opusplan: {
         name: "Paladin",
         label: "Paladin",
         emoji: "\u269C\uFE0F",
-        difficulty: "Calculated",
+        difficulty: "Tactical",
         color: "yellow"
       },
       opus: {
         name: "Opus",
         label: "Warlock",
         emoji: "\u{1F9D9}",
-        difficulty: "Easy",
+        difficulty: "Casual",
         color: "magenta"
       }
     };
@@ -2024,10 +2024,13 @@ import React, { useState } from "react";
 import { Box, Text, useApp } from "ink";
 import { TextInput, Select, ConfirmInput } from "@inkjs/ui";
 var MODEL_OPTIONS = [
-  { label: "\u2694\uFE0F  Sonnet  \u2014 Balanced. The default run.  [Normal]", value: "claude-sonnet-4-6" },
-  { label: "\u{1F3F9} Haiku   \u2014 Glass cannon. Hard mode.     [Hard]", value: "claude-haiku-4-5-20251001" },
-  { label: "\u269C\uFE0F  Paladin \u2014 Opus plans, Sonnet executes. [Calculated]", value: "opusplan" },
-  { label: "\u{1F9D9} Opus    \u2014 Powerful but expensive.      [Easy]", value: "claude-opus-4-6" }
+  { label: "\u2694\uFE0F  Sonnet  \u2014 Balanced. The default run.  [Standard]", value: "claude-sonnet-4-6" },
+  {
+    label: "\u{1F3F9} Haiku   \u2014 Glass cannon. Hard mode.     [Nightmare]",
+    value: "claude-haiku-4-5-20251001"
+  },
+  { label: "\u269C\uFE0F  Paladin \u2014 Opus plans, Sonnet executes. [Tactical]", value: "opusplan" },
+  { label: "\u{1F9D9} Opus    \u2014 Powerful but expensive.      [Casual]", value: "claude-opus-4-6" }
 ];
 var EFFORT_OPTIONS_BASE = [
   { label: "\u2696\uFE0F  Medium \u2014 Balanced (Anthropic recommended for Sonnet)", value: "medium" },

package/docs/index.html

@@ -3,12 +3,17 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script>
+      const stored = localStorage.getItem('tg-theme');
+      const theme = stored || (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+      document.documentElement.setAttribute('data-theme', theme);
+    </script>
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⛳</text></svg>">
-    <title>TokenGolf: Every token matters.</title>
+    <title>TokenGolf | Every token matters.</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600&family=Source+Sans+3:wght@400;600;700&display=swap"
       rel="stylesheet"
     />
     <meta
@@ -19,13 +24,13 @@
     <!-- Open Graph -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://josheche.github.io/tokengolf/" />
-    <meta property="og:title" content="TokenGolf: Every token matters." />
+    <meta property="og:title" content="TokenGolf | Every token matters." />
     <meta property="og:description" content="TokenGolf turns Claude Code sessions into a game. Track token efficiency, earn achievements, and level up your prompting skills." />
     <meta property="og:image" content="https://josheche.github.io/tokengolf/assets/tokengolf-bg-min.jpg" />
 
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="TokenGolf: Every token matters." />
+    <meta name="twitter:title" content="TokenGolf | Every token matters." />
     <meta name="twitter:description" content="TokenGolf turns Claude Code sessions into a game. Track token efficiency, earn achievements, and level up your prompting skills." />
     <meta name="twitter:image" content="https://josheche.github.io/tokengolf/assets/tokengolf-bg-min.jpg" />
 
@@ -61,26 +66,69 @@
         padding: 0;
       }
 
+      /* ── Dark: painting at dusk — warm charcoal, not cold blue ── */
       :root {
-        --bg: #0d1117;
-        --card: #161b22;
-        --border: #30363d;
-        --text: #e6edf3;
-        --muted: #8b949e;
-        --green: #3fb950;
-        --green-dim: #238636;
-        --cyan: #79c0ff;
-        --magenta: #d2a8ff;
-        --yellow: #e3b341;
-        --red: #f85149;
-        --orange: #ffa657;
+        --bg: #1a1812;
+        --card: #23211a;
+        --border: #3d3828;
+        --text: #e8dcc4;
+        --muted: #9a9180;
+        --green: #6bb54a;
+        --green-dim: #4a8a32;
+        --cyan: #7cb8d4;
+        --magenta: #c8a0e0;
+        --yellow: #d4a840;
+        --red: #e05848;
+        --orange: #d4884a;
+        --hero-overlay-top: rgba(26,24,18,0.5);
+        --hero-overlay-mid: rgba(26,24,18,0.4);
+        --hero-overlay-bot: rgba(26,24,18,0.95);
+        --hero-text: #f2ead6;
+        --hero-eyebrow-color: #6bb54a;
+        --install-bg: rgba(26,24,18,0.5);
+        --install-border: rgba(232,220,196,0.18);
+        --term-bg: #161410;
+        --term-header-bg: #1e1c16;
+        --tab-bar-bg: #141210;
+        --badge-flow-bg: #1e2e1a;
+        --badge-rogue-bg: #2c1c30;
+        --death-border: #3d2020;
+      }
+
+      /* ── Light: golden hour — warm cream, ochre, sage ── */
+      [data-theme="light"] {
+        --bg: #f2ead6;
+        --card: #f8f4e8;
+        --border: #d4c8a8;
+        --text: #2a2618;
+        --muted: #6e6450;
+        --green: #4a7a2a;
+        --green-dim: #5a8a38;
+        --cyan: #2a6e9a;
+        --magenta: #7a4a9a;
+        --yellow: #8a6a10;
+        --red: #b03020;
+        --orange: #9a5a18;
+        --hero-overlay-top: rgba(242,234,214,0.15);
+        --hero-overlay-mid: rgba(242,234,214,0.08);
+        --hero-overlay-bot: rgba(242,234,214,0.93);
+        --hero-text: #2a2618;
+        --hero-eyebrow-color: #4a7a2a;
+        --install-bg: rgba(248,244,232,0.8);
+        --install-border: rgba(42,38,24,0.12);
+        --term-bg: #ece4d0;
+        --term-header-bg: #e2dac4;
+        --tab-bar-bg: #e2dac4;
+        --badge-flow-bg: #d4e8c8;
+        --badge-rogue-bg: #e4d4f0;
+        --death-border: #e8c0b8;
       }
 
       body {
         background: var(--bg);
         color: var(--text);
         font-family:
-          -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+          "Source Sans 3", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
         line-height: 1.6;
       }
 
@@ -166,9 +214,9 @@
         inset: 0;
         background: linear-gradient(
           to bottom,
-          rgba(0, 0, 0, 0.55) 0%,
-          rgba(0, 0, 0, 0.45) 40%,
-          rgba(13, 17, 23, 0.95) 100%
+          var(--hero-overlay-top) 0%,
+          var(--hero-overlay-mid) 40%,
+          var(--hero-overlay-bot) 100%
         );
       }
 
@@ -179,7 +227,7 @@
 
       .hero-eyebrow {
         font-family: "SF Mono", "Cascadia Mono", monospace;
-        color: #6ee87a;
+        color: var(--hero-eyebrow-color);
         font-size: 2.5rem;
         letter-spacing: 0.1em;
         text-transform: uppercase;
@@ -187,7 +235,7 @@
       }
 
       .hero h1 {
-        font-family: "Libre Baskerville", Georgia, serif;
+        font-family: "Cormorant Garamond", Georgia, serif;
         font-size: clamp(3rem, 10vw, 6rem);
         font-weight: 700;
         letter-spacing: 0.02em;
@@ -199,13 +247,13 @@
       }
 
       .hero h1 span {
-        color: #ffffff;
-        -webkit-text-fill-color: #ffffff;
+        color: var(--hero-text);
+        -webkit-text-fill-color: var(--hero-text);
       }
 
       .hero-tagline {
         font-size: clamp(1rem, 3vw, 1.4rem);
-        color: rgba(255, 255, 255, 0.92);
+        color: var(--hero-text);
         font-style: italic;
         margin-bottom: 1.25rem;
         text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
@@ -213,7 +261,7 @@
 
       .hero-sub {
         font-size: 1.05rem;
-        color: rgba(255, 255, 255, 0.85);
+        color: var(--hero-text);
         max-width: 540px;
         margin-bottom: 2.5rem;
         text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
@@ -224,10 +272,10 @@
         display: flex;
         align-items: center;
         gap: 0;
-        background: rgba(13, 17, 23, 0.45);
+        background: var(--install-bg);
         backdrop-filter: blur(12px) saturate(1.2);
         -webkit-backdrop-filter: blur(12px) saturate(1.2);
-        border: 1px solid rgba(255, 255, 255, 0.18);
+        border: 1px solid var(--install-border);
         border-radius: 9999px;
         padding: 0.4rem 0.4rem 0.4rem 1.25rem;
         max-width: 420px;
@@ -253,7 +301,7 @@
 
       .copy-btn {
         background: var(--green);
-        color: #0d1117;
+        color: var(--bg);
         border: none;
         border-radius: 9999px;
         padding: 0.45rem 1rem;
@@ -267,14 +315,14 @@
       }
 
       .copy-btn:hover {
-        background: #52d765;
+        background: #7cc85a;
       }
       .copy-btn:active {
         transform: scale(0.97);
       }
       .copy-btn.copied {
         background: var(--green-dim);
-        color: #e6edf3;
+        color: var(--hero-text);
       }
 
       .hero-links {
@@ -286,7 +334,7 @@
       }
 
       .hero-links a {
-        color: rgba(255, 255, 255, 0.9);
+        color: var(--hero-text);
         display: flex;
         align-items: center;
         gap: 0.4rem;
@@ -372,11 +420,11 @@
       }
 
       .badge-flow {
-        background: #1f3a2a;
+        background: var(--badge-flow-bg);
         color: var(--green);
       }
       .badge-rogue {
-        background: #2d1b30;
+        background: var(--badge-rogue-bg);
         color: var(--magenta);
       }
 
@@ -424,19 +472,19 @@
         font-size: 1.4rem;
       }
 
-      .difficulty-hard {
+      .difficulty-nightmare {
         color: var(--red);
         font-weight: 600;
       }
-      .difficulty-normal {
+      .difficulty-standard {
         color: var(--yellow);
         font-weight: 600;
       }
-      .difficulty-easy {
+      .difficulty-casual {
         color: var(--green);
         font-weight: 600;
       }
-      .difficulty-calculated {
+      .difficulty-tactical {
         color: var(--magenta);
         font-weight: 600;
       }
@@ -474,38 +522,6 @@
       }
 
       /* ── CLI Commands ── */
-      .cli-block {
-        overflow: hidden;
-      }
-
-      .cli-block-header {
-        background: #1c2128;
-        padding: 0.6rem 1rem;
-        font-size: 0.78rem;
-        color: var(--muted);
-        font-family: "SF Mono", monospace;
-        border-bottom: 1px solid var(--border);
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-      }
-
-      .cli-block-header::before {
-        content: "●  ●  ●";
-        color: #30363d;
-        font-size: 0.65rem;
-        letter-spacing: 0.2em;
-      }
-
-      .cli-block pre {
-        padding: 1.5rem;
-        overflow-x: auto;
-        font-family:
-          "SF Mono", "Cascadia Mono", "Fira Code", "Consolas", monospace;
-        font-size: 0.88rem;
-        line-height: 1.8;
-      }
-
       .cli-block .cmd {
         color: var(--cyan);
       }
@@ -542,19 +558,19 @@
       .tier-amount {
         color: var(--muted);
         font-size: 0.82rem;
-        font-family: monospace;
       }
 
       .achievement-card.death {
-        border-color: #3d1f1f;
+        border-color: var(--death-border);
       }
 
       .tab-btn[aria-selected="true"].tab-death {
         background: var(--red);
-        box-shadow: 0 2px 16px rgba(248, 81, 73, 0.3);
+        color: #f2ead6;
+        box-shadow: 0 2px 16px rgba(224, 88, 72, 0.3);
       }
 
-      .tab-btn.tab-death:hover {
+      .tab-btn.tab-death:not([aria-selected="true"]):hover {
         color: var(--red);
       }
 
@@ -583,7 +599,7 @@
         display: flex;
         gap: 0.25rem;
         margin-bottom: 2rem;
-        background: #0a0e14;
+        background: var(--tab-bar-bg);
         border: 1px solid var(--border);
         border-radius: 10px;
         padding: 0.3rem;
@@ -601,20 +617,20 @@
         border-radius: 7px;
         cursor: pointer;
         transition: color 0.2s, background 0.2s, box-shadow 0.2s;
-        font-family: "SF Mono", "Cascadia Mono", monospace;
         white-space: nowrap;
-        letter-spacing: -0.01em;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
       }
 
       .tab-btn:hover {
         color: var(--text);
-        background: rgba(48, 54, 61, 0.45);
+        background: rgba(61, 56, 40, 0.25);
       }
 
       .tab-btn[aria-selected="true"] {
-        color: #0d1117;
+        color: #f2ead6;
         background: var(--cyan);
-        box-shadow: 0 2px 16px rgba(121, 192, 255, 0.3);
+        box-shadow: 0 2px 16px rgba(124, 184, 212, 0.3);
       }
 
       .tab-panel {
@@ -668,7 +684,7 @@
       /* ── Terminal chrome ── */
       .term {
         position: relative;
-        background: #0c1017;
+        background: var(--term-bg);
         border: 1px solid var(--border);
         border-radius: 10px;
         overflow: hidden;
@@ -696,42 +712,42 @@
 
       /* Glow variants */
       .term[data-glow="cyan"] {
-        box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(121,192,255,0.06);
+        box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(124,184,212,0.06);
       }
       .term[data-glow="cyan"]:hover {
-        border-color: rgba(121,192,255,0.35);
-        box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(121,192,255,0.12);
+        border-color: rgba(124,184,212,0.35);
+        box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(124,184,212,0.12);
       }
       .term[data-glow="yellow"] {
-        box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(227,179,65,0.06);
+        box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(212,168,64,0.06);
       }
       .term[data-glow="yellow"]:hover {
-        border-color: rgba(227,179,65,0.35);
-        box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(227,179,65,0.12);
+        border-color: rgba(212,168,64,0.35);
+        box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(212,168,64,0.12);
       }
       .term[data-glow="red"] {
-        box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(248,81,73,0.06);
+        box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(224,88,72,0.06);
       }
       .term[data-glow="red"]:hover {
-        border-color: rgba(248,81,73,0.35);
-        box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(248,81,73,0.12);
+        border-color: rgba(224,88,72,0.35);
+        box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(224,88,72,0.12);
       }
       .term[data-glow="green"] {
-        box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(63,185,80,0.06);
+        box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 48px rgba(107,181,74,0.06);
       }
       .term[data-glow="green"]:hover {
-        border-color: rgba(63,185,80,0.35);
-        box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(63,185,80,0.12);
+        border-color: rgba(107,181,74,0.35);
+        box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 72px rgba(107,181,74,0.12);
       }
 
       /* Header bar */
       .term-header {
-        background: #13181f;
+        background: var(--term-header-bg);
         padding: 0.6rem 0.9rem;
         font-size: 0.75rem;
         color: var(--muted);
         font-family: "SF Mono", "Cascadia Mono", monospace;
-        border-bottom: 1px solid rgba(48, 54, 61, 0.6);
+        border-bottom: 1px solid var(--border);
         display: flex;
         align-items: center;
         gap: 0.65rem;
@@ -807,9 +823,127 @@
         justify-content: center;
         margin-top: 0.75rem;
       }
+
+      /* ── Theme toggle ── */
+      .theme-toggle {
+        position: fixed;
+        top: 1rem;
+        right: 1rem;
+        z-index: 100;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        border: 1px solid var(--border);
+        background: var(--card);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.1rem;
+        transition: background 0.2s, border-color 0.2s;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+        line-height: 1;
+        padding: 0;
+      }
+
+      .theme-toggle:hover {
+        border-color: var(--muted);
+      }
+
+      /* Sun visible in dark mode (click to go light) */
+      .theme-icon-moon { display: none; }
+      .theme-icon-sun { display: inline; }
+      [data-theme="light"] .theme-icon-sun { display: none; }
+      [data-theme="light"] .theme-icon-moon { display: inline; }
+
+      /* ── Light mode targeted overrides ── */
+      [data-theme="light"] .card {
+        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
+      }
+
+      [data-theme="light"] .term::after {
+        background: repeating-linear-gradient(
+          0deg,
+          transparent 0px,
+          transparent 2px,
+          rgba(0,0,0,0.018) 2px,
+          rgba(0,0,0,0.018) 4px
+        );
+      }
+
+      [data-theme="light"] .term {
+        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+      }
+
+      [data-theme="light"] .term[data-glow="cyan"] {
+        box-shadow: 0 2px 12px rgba(42,38,24,0.06), 0 0 24px rgba(42,110,154,0.06);
+      }
+      [data-theme="light"] .term[data-glow="cyan"]:hover {
+        border-color: rgba(42,110,154,0.3);
+        box-shadow: 0 2px 16px rgba(42,38,24,0.06), 0 0 36px rgba(42,110,154,0.1);
+      }
+      [data-theme="light"] .term[data-glow="yellow"] {
+        box-shadow: 0 2px 12px rgba(42,38,24,0.06), 0 0 24px rgba(138,106,16,0.08);
+      }
+      [data-theme="light"] .term[data-glow="yellow"]:hover {
+        border-color: rgba(138,106,16,0.3);
+        box-shadow: 0 2px 16px rgba(42,38,24,0.06), 0 0 36px rgba(138,106,16,0.12);
+      }
+      [data-theme="light"] .term[data-glow="red"] {
+        box-shadow: 0 2px 12px rgba(42,38,24,0.06), 0 0 24px rgba(176,48,32,0.06);
+      }
+      [data-theme="light"] .term[data-glow="red"]:hover {
+        border-color: rgba(176,48,32,0.3);
+        box-shadow: 0 2px 16px rgba(42,38,24,0.06), 0 0 36px rgba(176,48,32,0.1);
+      }
+      [data-theme="light"] .term[data-glow="green"] {
+        box-shadow: 0 2px 12px rgba(42,38,24,0.06), 0 0 24px rgba(74,122,42,0.06);
+      }
+      [data-theme="light"] .term[data-glow="green"]:hover {
+        border-color: rgba(74,122,42,0.3);
+        box-shadow: 0 2px 16px rgba(42,38,24,0.06), 0 0 36px rgba(74,122,42,0.1);
+      }
+
+      [data-theme="light"] .hero h1 {
+        text-shadow:
+          0 2px 16px rgba(242,234,214,0.5),
+          0 1px 3px rgba(242,234,214,0.3);
+      }
+
+      [data-theme="light"] .hero-eyebrow {
+        text-shadow: 0 1px 8px rgba(242,234,214,0.6);
+      }
+
+      [data-theme="light"] .hero-tagline {
+        text-shadow: 0 1px 8px rgba(242,234,214,0.6);
+      }
+
+      [data-theme="light"] .hero-sub {
+        text-shadow: 0 1px 6px rgba(242,234,214,0.5);
+      }
+
+      [data-theme="light"] .copy-btn {
+        color: #f2ead6;
+      }
+      [data-theme="light"] .copy-btn:hover {
+        background: #5a8a38;
+      }
+
+      [data-theme="light"] .install-box {
+        box-shadow: 0 4px 24px rgba(0,0,0,0.08);
+      }
+
+      [data-theme="light"] .tab-btn[aria-selected="true"] {
+        color: #f2ead6;
+      }
     </style>
   </head>
   <body>
+    <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
+      <span class="theme-icon-sun">☀️</span>
+      <span class="theme-icon-moon">🌙</span>
+    </button>
+
     <!-- ── Hero ── -->
     <div class="hero">
       <div class="hero-eyebrow">⛳</div>
@@ -910,32 +1044,32 @@
         <tbody>
           <tr>
             <td><span class="class-emoji">🏹</span> <strong>Rogue</strong></td>
-            <td class="mono">claude-haiku-4-5</td>
-            <td class="difficulty-hard">Hard</td>
+            <td>Haiku</td>
+            <td class="difficulty-nightmare">Nightmare</td>
             <td>Glass cannon. Must prompt precisely.</td>
           </tr>
           <tr>
             <td>
               <span class="class-emoji">⚔️</span> <strong>Fighter</strong>
             </td>
-            <td class="mono">claude-sonnet-4-6</td>
-            <td class="difficulty-normal">Normal</td>
+            <td>Sonnet</td>
+            <td class="difficulty-standard">Standard</td>
             <td>Balanced. The default run.</td>
           </tr>
           <tr>
             <td>
               <span class="class-emoji">🧙</span> <strong>Warlock</strong>
             </td>
-            <td class="mono">claude-opus-4-6</td>
-            <td class="difficulty-easy">Easy</td>
+            <td>Opus</td>
+            <td class="difficulty-casual">Casual</td>
             <td>Powerful but expensive.</td>
           </tr>
           <tr>
             <td>
               <span class="class-emoji">⚜️</span> <strong>Paladin</strong>
             </td>
-            <td class="mono">claude-opus-4-6 (plan mode)</td>
-            <td class="difficulty-calculated">Calculated</td>
+            <td>Opusplan</td>
+            <td class="difficulty-tactical">Tactical</td>
             <td>Strategic planner. Thinks before acting.</td>
           </tr>
         </tbody>
@@ -1578,8 +1712,8 @@
     <!-- ── CLI Commands ── -->
     <section id="cli">
       <h2><span>⌨️</span>CLI Commands</h2>
-      <div class="card cli-block">
-        <div class="cli-block-header">terminal</div>
+      <div class="term cli-block" data-glow="cyan">
+        <div class="term-header">terminal</div>
         <pre>
 <span class="comment"># Install</span>
 <span class="dollar">$</span> <span class="cmd">npm install -g tokengolf</span>
@@ -1636,6 +1770,18 @@
         });
       });
 
+      /* ── Theme toggle ── */
+      document.getElementById('theme-toggle').addEventListener('click', () => {
+        const next = document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
+        document.documentElement.setAttribute('data-theme', next);
+        localStorage.setItem('tg-theme', next);
+      });
+      matchMedia('(prefers-color-scheme: light)').addEventListener('change', e => {
+        if (!localStorage.getItem('tg-theme')) {
+          document.documentElement.setAttribute('data-theme', e.matches ? 'light' : 'dark');
+        }
+      });
+
       function copyInstall() {
         const cmd = document.getElementById("install-cmd").value;
         const btn = document.getElementById("copy-btn");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokengolf",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Gamify your Claude Code sessions. Flow mode tracks you. Roguelike mode trains you.",
   "type": "module",
   "bin": {
@@ -36,5 +36,6 @@
   },
   "engines": {
     "node": ">=18.0.0"
-  }
+  },
+  "license": "MIT"
 }

package/src/components/StartRun.js

@@ -5,10 +5,13 @@ import { setCurrentRun } from '../lib/state.js';
 import { getModelClass, getEffortLevel, getModelBudgets, FLOORS } from '../lib/score.js';
 
 const MODEL_OPTIONS = [
-  { label: '⚔️  Sonnet  — Balanced. The default run.  [Normal]', value: 'claude-sonnet-4-6' },
-  { label: '🏹 Haiku   — Glass cannon. Hard mode.     [Hard]', value: 'claude-haiku-4-5-20251001' },
-  { label: '⚜️  Paladin — Opus plans, Sonnet executes. [Calculated]', value: 'opusplan' },
-  { label: '🧙 Opus    — Powerful but expensive.      [Easy]', value: 'claude-opus-4-6' },
+  { label: '⚔️  Sonnet  — Balanced. The default run.  [Standard]', value: 'claude-sonnet-4-6' },
+  {
+    label: '🏹 Haiku   — Glass cannon. Hard mode.     [Nightmare]',
+    value: 'claude-haiku-4-5-20251001',
+  },
+  { label: '⚜️  Paladin — Opus plans, Sonnet executes. [Tactical]', value: 'opusplan' },
+  { label: '🧙 Opus    — Powerful but expensive.      [Casual]', value: 'claude-opus-4-6' },
 ];
 
 const EFFORT_OPTIONS_BASE = [

package/src/lib/score.js

@@ -37,28 +37,28 @@ export const MODEL_CLASSES = {
     name: 'Haiku',
     label: 'Rogue',
     emoji: '🏹',
-    difficulty: 'Hard',
+    difficulty: 'Nightmare',
     color: 'red',
   },
   sonnet: {
     name: 'Sonnet',
     label: 'Fighter',
     emoji: '⚔️',
-    difficulty: 'Normal',
+    difficulty: 'Standard',
     color: 'cyan',
   },
   opusplan: {
     name: 'Paladin',
     label: 'Paladin',
     emoji: '⚜️',
-    difficulty: 'Calculated',
+    difficulty: 'Tactical',
     color: 'yellow',
   },
   opus: {
     name: 'Opus',
     label: 'Warlock',
     emoji: '🧙',
-    difficulty: 'Easy',
+    difficulty: 'Casual',
     color: 'magenta',
   },
 };