

:root {
  
  --bg-900:        #140c09;   
  --bg-800:        #1c110c;   
  --bg-700:        #2a1712;   
  --bg-600:        #3a221a;   

  --parchment-100: #ddb67e;   
  --parchment-200: #c9a46b;   
  --parchment-300: #a07f50;   

  
  --text-primary:   #efe4cf;  
  --text-secondary: #b8a58b;  
  --text-on-light:  #1d0f07;  
  --text-on-light-muted: #241708; 
  --accent-on-light:   #3d0908; 
  --ornament-on-light: #3d2d0b; 

  
  --crimson-500: #9c1f1a;     
  --crimson-600: #7e1614;     
  --crimson-300: #d64a3f;     
  --crimson-200: #e05f50;     
  
  
  --rust-400:    #b04a2c;     
  --rust-300:    #c25a36;     
  --rust-250:    #d06a44;     
  --rust-200:    #cf7f5f;     
  --rust-600:    #7a2711;     
  --rust-glow-rgb: 153 58 31; 

  
  --brass-400: #c9a24a;       
  --brass-300: #e3c06a;       
  --brass-ink: #7d5f1c;       

  
  
  --bg-900-rgb:     20 12 9;
  --bg-800-rgb:     28 17 12;
  --bg-700-rgb:     42 23 18;
  --brass-400-rgb:  201 162 74;
  --brass-300-rgb:  227 192 106;
  --crimson-500-rgb:156 31 26;
  --highlight-rgb:  255 252 244;
  --shadow-rgb:     0 0 0;

  
  --ink:        var(--text-primary);
  --ink-muted:  var(--text-secondary);
  --accent:     var(--crimson-200);
  --ornament:   var(--brass-400);
  --ornament-hi:var(--brass-300);
  --rule:       var(--bg-600);
  --rule-hi:    rgb(var(--brass-400-rgb) / 0.12);   
  --focus-ring: var(--brass-300);
  --focus-halo: var(--bg-900);

  
  --card-fill:   var(--bg-800);
  --card-radius: 8px;
  --card-shadow: 0 2px 4px rgb(var(--shadow-rgb) / .4), 0 14px 34px rgb(var(--shadow-rgb) / .6);
  --frame-shadow:0 3px 8px rgb(var(--shadow-rgb) / .45), 0 22px 48px rgb(var(--shadow-rgb) / .55);
  --lift-shadow: 0 4px 10px rgb(var(--shadow-rgb) / .45), 0 26px 60px rgb(var(--shadow-rgb) / .66);

  
  --font-display: "Solmoe KimDaeGeon", "Solmoe Fallback", "Solmoe Fallback Times", Georgia, "Times New Roman", serif;
  --font-body:    "Onest", "Onest Fallback", "Onest Fallback Arial", system-ui, -apple-system, "Segoe UI", sans-serif;
  
  --font-ko:      "Solmoe KimDaeGeon", "Malgun Gothic", "Apple SD Gothic Neo",
                  "Noto Sans KR", "Nanum Gothic", sans-serif;

  --track-display: 0.06em;    
  --track-micro:   0.18em;    

  --fs-micro: 0.75rem;                              
  --fs-sm:    0.875rem;                             
  --fs-body:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lede:  clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --fs-h3:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h2:    clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);   
  --fs-ghost: clamp(3rem, 1.6rem + 6.6vw, 8.5rem);       
  --fs-hero:  clamp(3rem, 1.4rem + 8.2vw, 9rem);

  --lh-body:  1.65;
  --lh-tight: 1.04;
  --measure:  68ch;

  
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10:128px; --sp-11:160px;

  --gutter:      clamp(20px, 5vw, 56px);
  --shell:       1440px;   
  
  --split-text:  36rem;
  --split-gap:   calc(clamp(14px, 3.2vw, 46px) + clamp(16px, 1.5vw, 24px));   
  --render-room: calc(var(--stage-render-h) * 1.1964 * .46);
  --section-pad: clamp(40px, 4.5vw, 80px);   
  --tear-h:      clamp(48px, 8vw, 128px);
  --render-overlap: 12%;         
  --stage-render-h: clamp(300px, 26vw, 450px);   
  --kit-slot: clamp(46px, 13vw, 58px);   
  
  --slot: 32px;
  
  --socket: 53px;
  --socket-frame: url("../assets/theme/4acdc09560c1c1eb.png");
  --slot-frame: url("../assets/theme/23240739b030043a.svg");
  
  --slot-frame-2: url("../assets/theme/23c90f8f2bf0de27.svg");
  --slot-frame-3: url("../assets/theme/1c75958a0ee5c21e.svg");
  
  --btn-rim:        #9a846b;
  --btn-inset:      #312b24;
  --btn-fill:       #221d1a;
  --btn-fill-over:  #3a322a;
  --btn-fill-down:  #15110f;
  --btn-text:       #d6cdbd;
  --btn-text-on:    #f3ecdf;
  --btn-grain: url("../assets/theme/5bcdf54daeb34c12.svg");
  --ember-rgb:    218 110 52;    
  --slot-top:     #211a14;       
  --slot-bottom:  #0a0806;       
  --slot-edge:    rgb(var(--brass-400-rgb) / .22);
  --slot-glow-gear-rgb:  var(--brass-300-rgb);     
  --slot-glow-shop-rgb:  208 106 68;               
  --slot-glow-boost-rgb: var(--highlight-rgb);
  --clip-edge-y: clamp(18px, 2.4vw, 34px);   
  --clip-edge-x: clamp(24px, 3.4vw, 50px);
  
  --gem-garnet-rgb:   240 150 40;
  --gem-onyx-rgb:     160 160 172;
  --gem-diamond-rgb:  232 238 248;
  --gem-ruby-rgb:     232 44 64;
  --gem-jade-rgb:     96 206 72;
  --gem-sapphire-rgb: 44 172 240;
  --note-fill:   rgb(var(--bg-900-rgb) / .45);          
  --note-border: rgb(var(--brass-400-rgb) / .22);

  
  --tip-bg:     rgb(10 8 6 / .92);
  --tip-border: rgb(214 204 184 / .38);
  
  --tip-frame: url("../assets/theme/13b22c4111579d9b.svg");
  --tip-text:   #e8e3d8;     
  --tip-name:   #f7d54c;     
  --tip-stat:   #dbe6ff;     
  --tip-bonus:  #9fe3bd;     
  --tip-neg:    #ff7a68;     
  
  --frame-key-tl: url("../assets/theme/b4e54be77c0c609d.svg");
  --frame-key-tr: url("../assets/theme/99649951e4b2de1b.svg");
  --frame-key-bl: url("../assets/theme/82d65c0aac1339d7.svg");
  --frame-key-br: url("../assets/theme/a2c94d1cbdc6d636.svg");
  --frame-key-tl-light: url("../assets/theme/d2c04396b7e950de.svg");
  --frame-key-tr-light: url("../assets/theme/3291bc47fe39d25f.svg");
  --frame-key-bl-light: url("../assets/theme/8681342820f9b1f5.svg");
  --frame-key-br-light: url("../assets/theme/3cc2ed0b5ae03937.svg");
  --font-game:  Tahoma, Verdana, "Segoe UI", sans-serif;   
  --solo-shift: clamp(0px, 6vw, 130px);   

  
  
  --scene:            url("../assets/theme/562ff979443c73c2.webp");       
  --scene-tile:       url("../assets/theme/0549db5c2003c497.webp");         
  --scene-light:      url("../assets/theme/51bad353fb290012.webp"); 
  --scene-light-tile: url("../assets/theme/459ac09df767d9ff.webp");
  --scene-opacity:       .45;   
  --scene-light-opacity: .6;    

  
  
  --title-rust: var(--rust-250);
  --title-glow: 0 3px 10px rgb(var(--rust-glow-rgb) / .75);
  --knot: url("../assets/theme/9c8cc1df25a01ee9.svg");
  
  
  --cursor:       url("../assets/theme/9fb1ba4b474cd922.png") 0 0, default;
  --cursor-hover: url("../assets/theme/934a1cf222e45580.png") 0 0, pointer;
  --knot-end: url("../assets/theme/3d8d4fd4c9115a09.svg");
  
  --knot-end-r: url("../assets/theme/996eda9eb42b9906.svg");

  
  
  --pattern:      url("../assets/theme/608c9a0f9874b425.webp");
  --pattern-size: 240px auto;

  
  --ui-glow: rgb(var(--brass-400-rgb) / .30);

  
  --scrollbar-thumb:       rgb(var(--brass-400-rgb) / .42);
  --scrollbar-thumb-hover: rgb(var(--brass-400-rgb) / .72);
  --scrollbar-track:       transparent;

  
  
  --ink-sprite: url("../assets/theme/4bb5e2a07e955f74.webp");
  --ink-sprite-b: url("../assets/theme/bae4dcb5c6d4ee3d.webp");   

  
  --brush-block: url("../assets/theme/e130a633b2b4b4fd.webp");
  --brush-slice: 106;
  
  --brush-disc: url("../assets/theme/e21175deed00215d.webp");
  
  --brush-bleed-y: var(--brush-edge-y);
  --brush-bleed-x: var(--brush-edge-x);
  --brush-pad-y:   var(--sp-4);
  --brush-pad-x:   clamp(var(--sp-4), 1.8vw, var(--sp-5));
  --brush-edge-y: 24px;
  --brush-edge-x: clamp(14px, 3.2vw, 46px);
  --wash: rgb(var(--bg-900-rgb) / .62);

  
  --ground-shade: linear-gradient(180deg, rgb(var(--bg-900-rgb) / .1), rgb(var(--bg-900-rgb) / .42));   
  --ground-tint:  linear-gradient(180deg, #e8d8c2, #f2e9dc);   
  --ink-frames: 40;

  
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);      
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --dur-ink:   1000ms;        
  --dur-liquify: 1000ms;      
  --dur-fast:  140ms;
  --dur-base:  260ms;
  --dur-slow:  620ms;
  --dur-reveal: 800ms;        

  
  --z-base: 0;  --z-raise: 10; --z-tear: 20; --z-chrome: 40;
  --z-nav:  60; --z-skip: 100;
}


.ground-light {
  --ink:        var(--text-on-light);
  --ink-muted:  var(--text-on-light-muted);
  --accent:     var(--accent-on-light);    
  --ornament:   var(--ornament-on-light);  
  --ornament-hi:var(--accent-on-light);
  --rule:       rgb(var(--bg-900-rgb) / 0.30);
  --rule-hi:    rgb(var(--highlight-rgb) / 0.30);
  --focus-ring: var(--accent-on-light);
  --focus-halo: var(--parchment-100);
  --title-rust: var(--rust-600);
  --title-glow: 0 2px 8px rgb(var(--rust-glow-rgb) / .25);
  --ui-glow: rgb(var(--highlight-rgb) / .55);
  --wash: rgb(var(--highlight-rgb) / .34);
  --note-fill:   rgb(var(--highlight-rgb) / .34);
  --note-border: rgb(var(--bg-900-rgb) / .16);
  --card-fill:  var(--parchment-200);
  --card-shadow:0 2px 4px rgb(var(--bg-900-rgb) / .18), 0 14px 34px rgb(var(--bg-900-rgb) / .26);
  --frame-shadow:0 3px 8px rgb(var(--bg-900-rgb) / .22), 0 22px 48px rgb(var(--bg-900-rgb) / .30);
  --lift-shadow:0 4px 10px rgb(var(--bg-900-rgb) / .24), 0 26px 60px rgb(var(--bg-900-rgb) / .34);
}
.ground-dark { color-scheme: dark; }
