/* SENSA site — shared styles for game pages and legal pages.
   Layout: same off-kilter showroom as the landing. Narrow reading column for legal, a two-column hero for games. */
:root{
  --void:#050A08;
  --ink:#0A1A16;
  --green:#0F3D34;
  --line:#1D453C;
  --fire:#FF6A00;
  --hot:#FF8A3D;
  --bone:#ECE8DF;
  --mist:#93A9A2;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
  --nav-h:60px; /* sticky menu height on these pages; base.css uses it for anchor targets */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--void);color:var(--bone);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);text-wrap:balance}
:focus-visible{outline:2px dashed var(--fire);outline-offset:4px;border-radius:10px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.note{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--fire);max-width:26ch;transform:rotate(-2.5deg);display:inline-block}
.note::after{content:" — M.R.";color:var(--mist)}

/* nav */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--void)}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:rgba(5,10,8,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:22px;height:var(--nav-h);font-size:13px}
.nav .logo img{display:block;height:30px;width:auto}
.nav-links{display:flex;gap:20px;color:var(--mist);margin-left:auto}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--bone)}
.lang{font-family:var(--mono);font-size:11px;display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px}
.lang a{padding:3px 9px;border-radius:999px;color:var(--mist)}
.lang a.on{background:var(--bone);color:var(--void);font-weight:700}

/* buttons */
.btn{position:relative;display:inline-block;font-weight:700;font-size:14px;padding:15px 26px;background:var(--fire);color:#140700;border-radius:999px;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--bone);z-index:-1;transform:translateX(-104%);border-radius:999px;transition:transform .45s cubic-bezier(.22,.8,.3,1)}
.btn:hover::before{transform:translateX(0)}
.lnk{font-weight:700;font-size:14px;border-bottom:1px solid var(--mist);padding-bottom:2px;transition:border-color .2s,letter-spacing .25s}
.lnk:hover{border-color:var(--fire);letter-spacing:.03em}
.crumbs{font-family:var(--mono);font-size:12px;color:var(--mist);letter-spacing:.06em}
.crumbs a:hover{color:var(--bone)}

/* game hero */
.g-hero{position:relative;overflow:hidden;padding-block:56px 72px;background:radial-gradient(60% 90% at 80% 30%,var(--accent-glow,var(--green)),transparent 70%)}
.g-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.g-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.g-title{display:flex;align-items:center;gap:18px}
.g-title img{width:72px;height:72px;border-radius:18px;flex:none;object-fit:cover}
.g-title h1{font-weight:900;font-size:clamp(44px,7vw,88px);line-height:.9;letter-spacing:-.03em}
.g-title .lockup{width:auto;height:clamp(60px,9vw,96px);border-radius:0}
.genre{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.g-line{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.4vw,28px);line-height:1.2;max-width:24ch}
.g-line b{color:var(--fire);font-weight:800}
.g-sub{color:var(--mist);max-width:52ch}
.cta{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:20px;margin-top:6px}
.facts div{padding:14px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.facts div:last-child{border-right:0}
.facts span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--mist);text-transform:uppercase}
.facts b{font-family:var(--display);font-weight:800;font-size:clamp(16px,1.8vw,22px);font-variant-numeric:tabular-nums;white-space:nowrap}
.g-art{position:relative;aspect-ratio:4/5;max-width:100%;border-radius:32px;overflow:hidden;transform:rotate(1.6deg);border:1px solid var(--line);display:grid;place-items:center;isolation:isolate}
.g-art .badge{position:absolute;left:16px;top:16px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--fire);color:#140700;padding:6px 12px;border-radius:999px;transform:rotate(-3deg)}
.g-art .cap{position:absolute;right:16px;bottom:14px;font-family:var(--mono);font-size:11px;color:var(--mist)}

/* sections */
.sec{padding-block:88px}
.sec + .sec{border-top:1px solid var(--line)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:36px}
.sec-head h2{font-weight:800;font-size:clamp(28px,4vw,46px);line-height:1.02;letter-spacing:-.02em}
.sec-head h2 .dim{color:var(--mist);font-weight:300}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s}
.step{position:relative;background:var(--ink);border:1px solid var(--line);border-radius:22px;padding:22px 20px 24px;display:flex;flex-direction:column;gap:8px;min-width:0}
.step:nth-child(2){transform:translateY(14px)}
.step:nth-child(4){transform:translateY(8px) rotate(.6deg)}
.step::before{counter-increment:s;content:counter(s);font-family:var(--display);font-weight:900;font-size:34px;line-height:1;color:var(--fire)}
.step b{font-family:var(--display);font-weight:500;font-size:17px}
.step p{color:var(--mist);font-size:15px}
.two{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:start}
.prose{display:flex;flex-direction:column;gap:16px;color:var(--mist);max-width:60ch}
.prose b,.prose strong{color:var(--bone);font-weight:700}
.prose code,.mono{font-family:var(--mono);font-size:.88em;color:var(--bone);background:rgba(255,255,255,.05);padding:2px 6px;border-radius:6px}
.sheet{border:1px solid var(--line);border-radius:22px;overflow:hidden}
.sheet h3{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);font-weight:400;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--ink)}
.sheet dl{margin:0}
.sheet dl div{display:flex;justify-content:space-between;gap:16px;padding:13px 20px;border-bottom:1px solid var(--line);font-size:15px}
.sheet dl div:last-child{border-bottom:0}
.sheet dt{color:var(--mist)}
.sheet dd{margin:0;font-family:var(--mono);font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.sheet dd.wip{color:var(--fire)}
table.ranks{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:22px}
table.ranks th,table.ranks td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
table.ranks th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);font-weight:400;background:var(--ink)}
table.ranks tr:last-child td{border-bottom:0}
table.ranks td:first-child{font-family:var(--display);font-weight:500}
table.ranks td.x{font-family:var(--display);font-weight:800;color:var(--fire)}
.feats{display:flex;flex-wrap:wrap;gap:10px}
.feats span{font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--bone)}
.feats span i{font-style:normal;color:var(--fire);margin-right:6px}
.ask{background:var(--green);border-radius:36px;margin-inline:max(10px,env(safe-area-inset-left,0px));}
.ask .wrap{padding-block:64px;display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between}
.ask h2{font-weight:800;font-size:clamp(26px,3.6vw,42px);line-height:1.05;letter-spacing:-.02em;max-width:18ch}
.ask p{color:#C3D2CD;max-width:46ch;margin-top:10px}
.mail{font-family:var(--display);font-weight:800;font-size:clamp(18px,2.6vw,30px);user-select:all;word-break:break-all}
.mail i{font-style:normal;color:var(--fire)}
.copy{background:none;border:1px solid rgba(236,232,223,.4);color:var(--bone);font-family:var(--mono);font-size:12px;padding:9px 16px;border-radius:999px;cursor:pointer;margin-top:10px}
.copy:hover{border-color:var(--fire)}
.others{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.other{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:20px;background:var(--ink);transition:transform .3s cubic-bezier(.3,1.4,.5,1),border-color .2s;min-width:0}
.other:hover{transform:translateY(-3px) rotate(-.5deg);border-color:rgba(255,106,0,.55)}
.other img{width:52px;height:52px;border-radius:14px;flex:none;object-fit:cover;background:var(--void)}
.other b{font-family:var(--display);font-weight:800;font-size:18px;display:block}
.other span{font-family:var(--mono);font-size:11px;color:var(--mist)}

/* legal */
.legal{padding-block:56px 96px}
.legal .wrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px}
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--nav-h) + 24px);align-self:start;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--mist)}
.toc a:hover{color:var(--bone)}
.toc b{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;margin-bottom:6px}
.doc{font-variant-ligatures:none;font-feature-settings:"calt" 0,"liga" 0;max-width:68ch;display:flex;flex-direction:column;gap:18px;color:#C9D3CF}
.doc h1{font-weight:800;font-size:clamp(32px,5vw,56px);line-height:1;letter-spacing:-.02em;color:var(--bone)}
.doc h2{font-weight:500;font-size:22px;color:var(--bone);margin-top:22px;scroll-margin-top:calc(var(--nav-h) + 30px)}
.doc ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.doc a{color:var(--hot);border-bottom:1px solid rgba(255,138,61,.4)}
.doc .meta{font-family:var(--mono);font-size:12px;color:var(--mist)}
.ph{background:rgba(255,106,0,.16);color:var(--hot);border-radius:6px;padding:1px 6px;font-family:var(--mono);font-size:.85em}
.draft{border:1px dashed var(--fire);border-radius:16px;padding:14px 16px;font-size:14px;color:var(--bone);background:rgba(255,106,0,.06)}
.draft b{color:var(--fire)}

/* footer */
.foot{border-top:1px solid var(--line);padding-block:30px;font-size:13px;color:var(--mist);margin-top:60px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot nav a:hover{color:var(--bone)}
.foot .age{display:inline-grid;place-items:center;width:34px;height:34px;border:1.5px solid var(--fire);border-radius:50%;color:var(--bone);font-family:var(--display);font-weight:800;font-size:11px;margin-right:10px;vertical-align:middle}
.foot .co{font-family:var(--mono);font-size:12px}

@media (max-width:960px){
  .g-hero .wrap,.two{grid-template-columns:1fr}
  .g-art{aspect-ratio:16/11;transform:rotate(1deg)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .others{grid-template-columns:1fr}
  .legal .wrap{grid-template-columns:1fr;gap:28px}
  .toc{position:static;flex-direction:row;flex-wrap:wrap;gap:8px 16px}
  .toc b{width:100%}
}
@media (max-width:620px){
  .nav-links{display:none}
  .nav .lang{margin-left:auto}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts div:nth-child(2){border-right:0}
  .facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .steps{grid-template-columns:1fr}
  .step:nth-child(n){transform:none}
  .ask{border-radius:24px;margin-inline:8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* build 2026-10-26: art captions get their own strip instead of sitting on the art; the declared RTP gets a breakdown line */
.g-art{padding-bottom:44px}
.g-art .cap{bottom:16px}
@media (max-width:960px){.a-pulse .px{margin-top:22%}.a-mines .mgrid{width:min(52%,250px)}}
.a-amp .sum{bottom:40px}
.facts small{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--mist);margin-top:2px}
/* build 2026-10-27: emerald S mark */
a.logo{display:flex;flex-direction:row;align-items:center;gap:7px}a.logo img.logo-mark,a.logo img.logo-word{display:block;height:30px;width:auto}a.logo img.logo-mark{filter:brightness(1.45) saturate(1.15)}
@media (max-width:560px){table.ranks th,table.ranks td{white-space:normal;padding:12px 12px}}
@media (max-width:400px){table.ranks th,table.ranks td{padding:12px 6px}table.ranks th:first-child,table.ranks td:first-child{padding-left:14px}}

/* build 2026-11-02: hero title and fact values follow the width of their own column / cell, not the viewport.
   In two columns the column is half the viewport, so 7vw / 1.8vw overran it: "AmpRush" is one word (~6.1em) plus the
   72px mark and 18px gap; "Any time", "25,000×" ran past the cell padding. Fallbacks first, container units second. */
.g-copy{container-type:inline-size}
.g-title h1{font-size:clamp(44px,7vw,88px);font-size:max(32px,min(clamp(44px,7vw,88px),calc((100cqi - 90px) / 6.3)))}
.facts{container-type:inline-size;--cols:4}
/* a value gets the width of one cell minus its padding and border; the widest value ("96.5–97%", "5,000,000") is ~6.3em.
   The container is the whole row, not the cell: containment on the cell would switch off its subgrid below. */
.facts b{font-size:min(clamp(16px,1.8vw,22px),calc((100cqi / var(--cols) - 34px) / 6.6))}
@media (max-width:620px){.facts{--cols:2}}
/* build 2026-11-02: label / value / note sit on shared rows, so a label that wraps ("Max multiplier" at 1024)
   does not push its value below the values of the other cells */
@supports (grid-template-rows:subgrid){.facts>div{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;row-gap:2px}}
/* build 2026-11-02: one line under the facts row when a cell is "—" (Mines Rise) */
.facts-note{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--mist);margin-top:-12px}
/* build 2026-11-02: when the hero column is narrow (two-column hero at ~1024, column 468px) the four facts go 2×2
   instead of shrinking the values to ~12px; at 1280 the column is 556px and they stay in one row */
@container (max-width:520px){.facts{grid-template-columns:repeat(2,minmax(0,1fr));--cols:2}.facts>div:nth-child(2){border-right:0}.facts>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}