@charset "UTF-8";
/* =====================================================================
   DESIGN TOKENS — the only place raw colours, radii, shadows, z-indexes
   and shell dimensions are allowed to appear.

   --td-*  = TrustDice shell. Every value is traceable to official evidence;
             the source screenshot + coordinate for each one is recorded in
             docs/TRUSTDICE-OFFICIAL-UI-AUDIT.md §2 and docs/DESIGN-SYSTEM.md.
             Do NOT edit these from memory, from a third-party screenshot or
             from a generic "casino" palette.
   --pachi-* = pachinko campaign layer. These are this project's own arcade
             accents and are deliberately NOT presented as TrustDice values.
   ===================================================================== */
:root {
  /* ---------------------------------------------------------------
     TrustDice shell — surfaces
     td-header-sidebar-desktop-logged-out.png unless noted
     --------------------------------------------------------------- */
  --td-bg-canvas:     #260234;   /* (2400,1300) + (1600,300); mobile #260235 */
  --td-bg-sidebar:    #33064a;   /* rows y1300–1460, x2–505 */
  --td-bg-header:     #330645;   /* cols x1300 & x2500, y0–112 */
  --td-surface-1:     #3b075a;   /* sidebar tab pill, col x300 y17–80 */
  --td-surface-2:     #420764;   /* sidebar search field, col x300 y116–208 */
  --td-surface-3:     #4b1d66;   /* mobile drawer field, td-mobile-navigation-open.png */
  --td-border-subtle: #501a71;   /* header hairline, col x1300 y112–113 */

  /* ---------------------------------------------------------------
     TrustDice shell — text
     --------------------------------------------------------------- */
  --td-text-primary:   #ffffff;  /* 登録 / ログイン / nav labels */
  --td-text-secondary: #9372a6;  /* search placeholder glyphs, x113–378 y148–178 */

  /* ---------------------------------------------------------------
     TrustDice shell — primary action (登録)
     Measured flat, NOT a gradient: 8 vertical samples inside the desktop
     button and 7 inside the mobile button return one colour. The two
     gradient tokens intentionally hold the same value so the contract stays
     stable if TrustDice ever ships a real gradient.
     --------------------------------------------------------------- */
  --td-primary-start:  #fd716f;  /* mobile capture; desktop capture #ff7170 */
  --td-primary-end:    #fd716f;
  --td-primary-hover:  #f4595a;  /* LP ADAPTATION — hover is not observable (audit §4.1) */
  --td-primary-text:   #ffffff;

  /* Secondary / outline (ログイン): transparent fill, coral border at ~50%.
     Border colour measured #993C5C = 50/50 composite of #330645 over #FD716F. */
  --td-secondary-border: rgba(253, 113, 111, .5);

  /* ---------------------------------------------------------------
     TrustDice brand accents
     accent-1 from the supplied official logo SVG gradient stop;
     accent-2 cross-checked against the sampled #C578FF lavender.
     --------------------------------------------------------------- */
  --td-brand-accent-1: #813cfb;
  --td-brand-accent-2: #c578ff;

  /* ---------------------------------------------------------------
     Pachinko campaign layer — this project's own arcade accents.
     Not TrustDice values. Used for badges, trims, glow, dividers,
     campaign banners and selected CTA framing only.
     --------------------------------------------------------------- */
  --pachi-gold:           #ffc72c;
  --pachi-gold-light:     #ffe08a;
  --pachi-orange:         #ff8a00;
  --pachi-red:            #e6002e;
  --pachi-magenta:        #ff2e88;
  --pachi-cyan:           #22e0ff;
  --pachi-blue:           #2a6bff;

  /* Phase 3 — metallic display system for the campaign headline hierarchy. */
  --pachi-gold-highlight: #fffdf0;
  --pachi-gold-core:      #ffdc3d;   /* bright yellow core (Phase 4) */
  --pachi-gold-warm:      #ffa61a;   /* warm gold lower edge */
  /* Headline accent. Phase 5: a SOLID vivid pachinko yellow, not a metallic
     ramp. Every gradient attempt read as bronze/champagne once antialiasing
     mixed the lower stops into thin CJK strokes, so the gradient is gone and
     this one value is the whole treatment. */
  --pachi-headline-yellow:   #ffe33d;
  --pachi-headline-fallback: #ffe33d;
  --pachi-gold-base:      #f7c33a;
  --pachi-gold-shadow:    #a35a06;
  --pachi-spectrum: linear-gradient(
    100deg,
    var(--pachi-magenta) 0%,
    var(--pachi-gold) 34%,
    var(--pachi-cyan) 68%,
    var(--pachi-magenta) 100%
  );

  /* ---------------------------------------------------------------
     Phase 5.2 — section environments.

     Phase 5.1 introduced brighter tokens but kept assigning the same deep plum
     to almost every section, so the page still read as one long dark block.
     Phase 5.2 gives each section its own environment and uses the plum as
     contrast and rest rather than as the default.

     The scrolling rhythm is: bright → light → warm → light → trust → bright
     finale → dark footer. The primary action stays TrustDice coral throughout;
     yellow, cyan and magenta are highlights, never button identities.
     --------------------------------------------------------------- */
  --plum-950: #280037;
  --plum-900: #330045;
  --plum-800: #3d075b;

  --campaign-purple:        #6b1fd6;
  --campaign-purple-bright: #8f46ff;
  --campaign-violet:        #a968ff;
  --campaign-magenta:       #ec2b91;

  --digital-blue: #2257e6;
  --digital-cyan: #18cffa;
  --sky-blue:     #36aef4;

  --pachi-yellow: #ffe33d;
  --pachi-orange: #ff9f1c;
  --pachi-red-hot: #f32854;

  --surface-cream:    #fff9ee;
  --surface-lavender: #efe4ff;
  --surface-lilac:    #f8f2ff;
  --surface-white:    #ffffff;

  --text-dark: #1c1024;
  --text-plum: #350047;

  /* Kept as aliases so Phase 5.1 rules keep resolving to the same colours. */
  --color-plum-deep:        var(--plum-950);
  --color-plum-main:        var(--plum-800);
  --color-campaign-purple:  var(--campaign-purple);
  --color-purple-bright:    var(--campaign-purple-bright);
  --color-violet-highlight: var(--campaign-violet);
  --color-cyan-accent:      var(--digital-cyan);
  --color-pachi-yellow:     var(--pachi-yellow);
  --color-pachi-orange:     var(--pachi-orange);

  /* ---------------------------------------------------------------
     Compact mobile rhythm (Phase 5.2). One scale, used by every section,
     so "make mobile tighter" is four numbers rather than forty.
     --------------------------------------------------------------- */
  /* Phase 5.8D: now an alias of the shared vertical step (see the page
     container block below) rather than its own independent value. */
  --section-padding-y: var(--section-pad-y);
  --section-padding-x: clamp(14px, 4vw, 20px);
  /* Phase 5.8H: was clamp(12px, 3.5vw, 18px) (-17%). */
  --card-padding:      clamp(7px, 2.4vw, 13px);

  /* --- Phase 5.8I: character sizes that hold their DESKTOP PROPORTION ------
     Each guide is sized so `characterHeight / sectionHeight` on a phone stays
     within 0.85-1.15x the same ratio measured at 1440px. These two are shared
     because a LANE elsewhere in the layout is derived from them (the final-CTA
     content inset and the gameplay media inset), and a lane computed from a
     stale copy of the height is how characters end up overlapping content.
       0.467 = the final-CTA guide's intrinsic width/height
       0.706 = the gameplay guide's intrinsic width/height */
  --fc-guide-h: clamp(185px, 44vw, 190px);
  --gp-guide-w: calc(clamp(200px, 58vw, 235px) * 0.706);
  /* The how-to guide's height, shared so `.howto__intro` can size a lane that
     CONTAINS her instead of letting her rise into the ribbon heading. */
  /* Redefined per breakpoint below; `.guide--howto`, the intro's min-height and
     the intro's left lane ALL derive from this one value, so the lane can never
     be sized for a different figure than the one standing in it. */
  /* Phase 6.5: mobile floor 145 -> 176. At 390 she measured 74x169 against
     the gameplay reference's 160x226; the lane derives from this token, so
     raising it moves the lane with her and Step 1 still cannot be pushed. */
  --howto-guide-h: clamp(176px, 54vw, 210px);
  /* The short band the final-CTA ambient mascot stands in below the button.
     Both the section's bottom padding and her offset derive from it, so the
     band can never be sized for a different figure than the one in it. */
  --fc-mascot-band: 58px;
  /* Phase 5.8L: the mobile final CTA's decorative foot band. It holds BOTH
     characters now — the guide at the left, the ambient mascot at the right —
     because removing the character lane from `.final-cta__inner` left no safe
     horizontal space beside a full-width button. Sized to fit a recognisable
     figure rather than a sticker, and occupied rather than empty. */
  /* Phase 6.5: 124 -> 170. At 390 the final-CTA guide measured 58x124 — a
     sticker next to the gameplay reference. The section's bottom padding is
     computed from this same token (sections.css), so the band grows with her
     and she still cannot reach the button above. */
  --fc-band-mobile: 170px;
  /* `--content-gap` moved into the shared page-container block below (Phase
     5.8D) so there is exactly one definition of it. */

  /* Lineup stage + the single machine-card shell.
     Phase 4.1 dropped the alternating light bay: every cabinet now sits on the
     same deep-plum card, and only the type accent differs. */
  --pachi-stage-bg:   #14001d;
  --pachi-dark-card:  #2b0a3d;

  /* Light content cards used by the calmer modules (how-to / features /
     proof / FAQ). Contained cards on the TrustDice canvas — never a
     full-bleed corporate-LP theme. */
  --card-bg:          #ffffff;
  --card-bg-2:        #f7f4ec;
  --card-border:      #ded8c8;
  --card-text:        #16161f;
  --card-text-muted:  #4a4a5e;

  /* ---------------------------------------------------------------
     Phase 5.7 — registered-player badge (compact stamp) + lineup
     showcase. Reusable custom properties so both pull from one named
     palette instead of one-off literals scattered through sections.css.
     --------------------------------------------------------------- */
  --badge-magenta:   #ff2f7e;
  --badge-coral:     #ff7a3d;
  --badge-plum-edge: #3a0a4a;
  --badge-rotate:    -6deg;

  --lineup-violet:        #7a2fe0;
  --lineup-violet-bright: #9b4bff;
  --lineup-magenta:       #ec2b91;
  --lineup-cyan:          #22e0ff;
  --lineup-coral:         #ff5b6b;
  --lineup-gold:          #ffc72c;

  /* ---------------------------------------------------------------
     Focus, radii, shadows
     --------------------------------------------------------------- */
  --focus-ring: 3px solid var(--pachi-cyan);   /* LP ADAPTATION (audit §4.1) */
  --focus-offset: 2px;

  --radius-sm: 8px;    /* audited button corner: 7.0/7.3 px measured (audit §4.6) */
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-card: 0 6px 18px rgba(0, 0, 0, .35);
  --shadow-cta:  0 8px 22px rgba(253, 113, 111, .28);

  /* ---------------------------------------------------------------
     Page dimensions

     Phase 5 removed the application shell, so there is no rail width, no rail
     offset and no bottom-bar height any more. The header is static and the
     page is one column at every width.
     --------------------------------------------------------------- */
  --header-height: 54px;

  /* ---------------------------------------------------------------
     GLOBAL PAGE CONTAINER — Phase 5.5

     One authoritative horizontal alignment system for the whole page: every
     foreground component (header, hero copy, badge, gameplay, the machine
     strip's visible viewport, lineup, how-to, 選ばれる理由, testimonials,
     FAQ, final CTA, footer) shares this single max width and this single
     fluid gutter via `.container` (utilities.css). Decorative full-bleed
     backgrounds/rays are unaffected — only foreground content is bound by it.
     `--content-max-width` / `--gutter` are kept as aliases so every existing
     rule that already references them (`.container`, breakpoint overrides)
     keeps working unchanged. --------------------------------------------- */
  /* Phase 5.8D — ONE shared width + spacing system. Before this, sections
     tuned their own max-widths and paddings independently, which is what made
     the page read as a stack of separately designed pieces. Every foreground
     component now resolves to one of these four widths and one gutter.

     Measured gutters: 18px at 320-390, ~20px at 414, ~37px at 768, ~49px at
     1024, 64px at 1440 — inside the 16-20 / 28-40 / 48-72 targets. */
  --page-gutter: clamp(18px, 4.8vw, 64px);

  /* The four content widths. `--content-wide` is the page's outer limit; the
     others are deliberate narrower measures for specific content kinds. */
  --content-wide: 1160px;   /* section shells, card grids, wide media   */
  --content-grid: 1160px;   /* card grids (alias — same edge as above)  */
  --content-copy: 820px;    /* centred running copy: hero, section leads */
  --content-narrow: 620px;  /* single-column prose / capped CTA blocks   */
  /* Phase 6.0: the blog's long-form reading measure. 760px is ~40 Japanese
     characters per line at the article body size — comfortable for continuous
     reading, and deliberately narrower than `--content-copy` (820px), which is
     tuned for short centred marketing lines rather than paragraphs. */
  --content-read: 760px;

  /* =====================================================================
     Vertical rhythm — the shared DENSITY SCALE (retuned in Phase 5.8H).

     Four steps, and every section band on the page resolves to one of them.
     Phase 5.8H made the whole page read one step more compact by changing
     these four numbers rather than by hunting through sections.css: the old
     values are in the comments, and the reduction is 15-22% at every step.

       old --section-pad-y         clamp(40px, 7.4vw, 72px)   -> -19%
       old --section-pad-y-compact clamp(28px, 5vw,   48px)   -> -18%
       old --content-gap           clamp(14px, 2.4vw, 24px)   -> -21%

     `-tight` and `-mid` are new. They exist because .gameplay, .howto, .faq
     and .features each carried their own hand-written padding shorthand; they
     now reference a step instead, so the next density pass is again four
     numbers. Nothing uses CSS zoom or a page transform — this is all real
     sizing. */
  --section-pad-y: clamp(20px, 4.8vw, 42px);
  --section-pad-y-compact: clamp(14px, 3.4vw, 32px);
  --section-pad-y-tight: clamp(13px, 2.9vw, 26px);
  --section-pad-y-mid: clamp(18px, 3.8vw, 32px);
  --content-gap: clamp(8px, 1.6vw, 16px);

  /* Two more shared steps for INSIDE a section, added in Phase 5.8H so the
     heading-to-content gap and the card-grid gap stop being magic numbers
     repeated per component.
       --head-gap  was a flat 16px on .section-head          -> -13 to -38%
       --card-gap  was a flat 14px on the lineup grid        -> -14 to -43% */
  --head-gap: clamp(5px, 1.5vw, 9px);
  --card-gap: clamp(5px, 1.2vw, 9px);

  /* --- Phase 5.8H: the three-across how-to card -----------------------
     The step module is a row of three cards and two arrows at EVERY width,
     320px included, so at 320 each card is ~83px wide instead of ~284px.
     These are the mobile values; the 768px block in sections.css overrides
     the same names once the cards are wide again. Grouped here so the whole
     compact-card exception is one readable block.

     This component is a DELIBERATE exception to the page's 14px minimum for
     supporting copy — the complete three-column overview was chosen over
     full-width readable cards. No copy is truncated, clamped or hidden: the
     text is all present, wraps naturally, and is fully available to
     assistive technology at any zoom level. */
  --step-gap:          clamp(3px, 1.2vw, 6px);   /* between columns        */
  --step-inner-gap:    clamp(3px, 1.2vw, 7px);   /* badge / shot / body    */
  --step-pad:          clamp(6px, 2.2vw, 10px);
  --step-radius:       clamp(8px, 2.6vw, 12px);
  --step-border:       clamp(1px, .5vw, 2px);
  --step-badge:        clamp(1.75rem, 1.4rem + 1.5vw, 2rem);   /* 28-32px  */
  --step-badge-fs:     clamp(.82rem, .7rem + .6vw, .98rem);
  --step-title-fs:     clamp(.75rem, .3rem + 2.6vw, .88rem);   /* 12-14px  */
  --step-text-fs:      clamp(.66rem, .32rem + 1.9vw, .75rem);  /* 10.5-12px */
  --step-shot-h:       clamp(56px, 18vw, 86px);
  --step-shot-border:  clamp(1.5px, .6vw, 3px);
  --step-arrow:        clamp(10px, 3.2vw, 13px);               /* 10-16px  */
  --step-arrow-w:      clamp(3px, .9vw, 4px);

  /* Back-compat aliases: every existing rule that references
     `--content-max-width` / `--gutter` / `--content-max` keeps working. */
  --content-max: var(--content-wide);
  --content-max-width: var(--content-wide);
  --gutter: var(--page-gutter);

  /* CTA heights: 40px is the audited official button height. lg/xl are LP
     sizes for in-page section CTAs (audit §4.5) — same fill/radius/label. */
  --cta-height:    40px;
  --cta-height-lg: 46px;
  --cta-height-xl: 50px;

  /* ---------------------------------------------------------------
     Layout, type, motion, layers
     --------------------------------------------------------------- */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
             "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  --ease: cubic-bezier(.2, .7, .3, 1);

  --z-header: 100;
  --z-skip: 200;
}

@media (min-width: 768px) {
  :root { --header-height: 60px; }
}

/* Phase 5.8I: the how-to guide's height per breakpoint. One token, so the
   lane and the containing block follow her automatically. */
@media (min-width: 768px)  { :root { --howto-guide-h: clamp(196px, 27vw, 224px); } }
@media (min-width: 1024px) { :root { --howto-guide-h: clamp(200px, 15.6vw, 225px); } }