game kit page: four 6×3 applets (trinkets, tokens, card decks, dice sets) with applet grid; tarot fan modal with coverflow, sessionStorage position memory, and 403 guard on locked decks; unlocked_decks M2M on User with backfill migration; game kit icon wrap fix; tarot_deck.html moved to gameboard/ per template dir convention (now documented in CLAUDE.md); FTs 6–13, 2 new ITs; 360 passing [log Co-Authored-By: Claude Sonnet 4.6]

src/static_src/scss/_applets.scss

@@ -219,3 +219,4 @@
 #id_game_applets_container      { @extend %applets-grid; }
 #id_wallet_applets_container    { @extend %applets-grid; }
 #id_billboard_applets_container { @extend %applets-grid; }
+#id_game_kit_applets_container  { @extend %applets-grid; }

src/static_src/scss/_game-kit.scss

@@ -115,3 +115,149 @@
     font-size: 0.7rem;
     color: rgba(var(--secUser), 0.4);
 }
+
+// ── Game Kit page ────────────────────────────────────────────────────────────
+
+#id_game_kit_applets_container section {
+    display: flex;
+    flex-direction: column;
+
+    h2 { flex-shrink: 0; }
+    .gk-items { flex: 1; overflow-y: auto; }
+}
+
+.gk-items {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+}
+
+.gk-deck-card,
+.gk-trinket-card,
+.gk-token-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    border: 0.1rem solid rgba(var(--secUser), 0.3);
+    cursor: pointer;
+    font-size: 1.5rem;
+    min-width: 6rem;
+    text-align: center;
+    transition: border-color 0.15s;
+
+    span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
+    small { font-size: 0.6rem; opacity: 0.5; }
+
+    &:hover { border-color: rgba(var(--secUser), 0.8); }
+}
+
+.gk-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    border: 0.1rem dashed rgba(var(--secUser), 0.2);
+    font-size: 1.5rem;
+    min-width: 6rem;
+    text-align: center;
+    opacity: 0.4;
+
+    span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
+}
+
+.gk-empty {
+    font-size: 0.8rem;
+    opacity: 0.45;
+}
+
+// ── Tarot fan modal ──────────────────────────────────────────────────────────
+
+#id_tarot_fan_dialog {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: rgba(0, 0, 0, 0.88);
+    overflow: hidden;
+
+    &::backdrop { display: none; } // Dialog IS the backdrop
+}
+
+.tarot-fan-wrap {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    perspective: 900px;
+}
+
+.tarot-fan {
+    position: relative;
+    width: 220px;
+    height: 340px;
+}
+
+.fan-card {
+    position: absolute;
+    inset: 0;
+    width: 220px;
+    height: 340px;
+    border-radius: 0.75rem;
+    background: rgba(var(--priUser), 1);
+    border: 0.1rem solid rgba(var(--secUser), 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.25s ease, opacity 0.25s ease;
+    transform-style: preserve-3d;
+
+    &--active {
+        border-color: rgba(var(--secUser), 1);
+        box-shadow: 0 0 2rem rgba(var(--secUser), 0.3);
+    }
+}
+
+.fan-card-face {
+    padding: 1.25rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    .fan-card-number { font-size: 0.65rem; opacity: 0.5; }
+    .fan-card-name   { font-size: 0.95rem; font-weight: bold; margin: 0; }
+    .fan-card-arcana { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.6; }
+    .fan-card-correspondence { font-size: 0.6rem; opacity: 0.45; font-style: italic; }
+}
+
+.fan-nav {
+    position: absolute;
+    z-index: 20;
+    font-size: 3rem;
+    line-height: 1;
+    background: none;
+    border: none;
+    color: rgba(var(--secUser), 0.6);
+    cursor: pointer;
+    padding: 1rem;
+    transition: color 0.15s;
+    pointer-events: auto;
+
+    &:hover { color: rgba(var(--secUser), 1); }
+    &--prev { left: 1rem; }
+    &--next { right: 1rem; }
+}