/* Twistbloom: Hex Gem Puzzle - game page, v3: a dark, cozy room at night.
   Near-black bottle green, gems that glow like lamplight, warm amber, a little grain. Slow and gentle only.
   Every big drawing answers a touch. One family: Jost. Loaded after style.css (reset, entrances, Play links). */

@font-face{font-family:"Jost";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/jost-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/jost-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* the gem colours can ease from one to the next */
@property --face{syntax:"<color>";inherits:true;initial-value:#888}
@property --edge{syntax:"<color>";inherits:true;initial-value:#555}

.tb{
  --night:#0a1411; --velvet:#0e1c17; --brick:#150f0d; --pine:#0e1d18; --deep:#070e0c;
  --ink:#ece4d2; --soft:#b9b4a3; --amber:#f2a64a; --amber-ink:#1c1307;
  --paper:var(--night);
  --accent:var(--amber); --accent-ink:var(--amber-ink);
  --bg:var(--night); --surface:#13231d; --muted:var(--soft);
  --font-tb:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --step-h1:clamp(3.5rem,2rem + 5.8vw,8.75rem);
  --step-h2:clamp(1.75rem,1.2rem + 2.5vw,3.5rem);
  --slow:cubic-bezier(.45,.05,.3,1);
  color-scheme:dark;
  background:var(--night);color:var(--ink);font-family:var(--font-tb);font-weight:400;font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem)
}
.tb ::selection{background:var(--amber);color:var(--amber-ink)}
.tb :focus-visible{outline:3px solid var(--amber);outline-offset:4px}
.tb h1,.tb h2{font-family:var(--font-tb);font-weight:400}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- the room: grain, a dim vignette, lamplight and slow motes, over everything and untouchable ---------- */
/* taste-skill-ignore: the owner asked for a dim, lamplit room; the vignette and lamp glows are that mood */
.tb::before{content:"";position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.5;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.5) 100%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .75 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.16'/></svg>")} /* taste-skill-ignore */
.tb-air{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
/* taste-skill-ignore: lamplight */
.tb-air::before{content:"";position:absolute;inset:0;background:radial-gradient(45% 40% at 12% 12%,rgba(242,166,74,.09),transparent 70%),radial-gradient(40% 40% at 92% 88%,rgba(214,122,60,.07),transparent 70%)} /* taste-skill-ignore */
.tb-air i{position:absolute;left:var(--x);bottom:-12px;width:3px;height:3px;border-radius:50%;background:#f4c27a;opacity:0}
.tb-air i:nth-child(1){--x:6%;--d:34s;--w:-4s}.tb-air i:nth-child(2){--x:15%;--d:42s;--w:-19s}.tb-air i:nth-child(3){--x:24%;--d:30s;--w:-11s}
.tb-air i:nth-child(4){--x:33%;--d:46s;--w:-30s}.tb-air i:nth-child(5){--x:44%;--d:38s;--w:-7s}.tb-air i:nth-child(6){--x:53%;--d:32s;--w:-22s}
.tb-air i:nth-child(7){--x:61%;--d:44s;--w:-14s}.tb-air i:nth-child(8){--x:70%;--d:36s;--w:-27s}.tb-air i:nth-child(9){--x:78%;--d:40s;--w:-2s}
.tb-air i:nth-child(10){--x:86%;--d:31s;--w:-17s}.tb-air i:nth-child(11){--x:93%;--d:48s;--w:-35s}.tb-air i:nth-child(12){--x:49%;--d:52s;--w:-24s}
@media (prefers-reduced-motion:no-preference){
  .tb-air i{animation:mote var(--d) linear var(--w) infinite}
  .tb-air::before{animation:lamp 11s ease-in-out infinite alternate}
}
@keyframes mote{0%{transform:translate(0,0);opacity:0}8%{opacity:.55}60%{opacity:.35}100%{transform:translate(28px,-104vh);opacity:0}}
@keyframes lamp{from{opacity:.75}to{opacity:1}}

/* gem colours: deep, lit from inside */
.c-ruby{--face:#f2707e;--edge:#b9404e}
.c-amber{--face:#f5a24b;--edge:#bd7425}
.c-citrine{--face:#f1cf5d;--edge:#b99a27}
.c-jade{--face:#54c789;--edge:#2f8f5c}
.c-sapphire{--face:#6a9be8;--edge:#3f69b8}
.c-amethyst{--face:#a98af0;--edge:#7653c0}
.tn{transition:--face 700ms ease,--edge 700ms ease}
#gem .e{fill:var(--edge)}
#gem .f{fill:var(--face)}
#gem .h{fill:#fff;fill-opacity:.42}
#star .se{fill:#8d9a9a}
#star .sf{fill:#e9eeec}
#star .petals{fill:#fff}
#star .core{fill:#f2a64a}

/* the glow round a gem: brighter under a finger or a pointer */
.aura{opacity:.5;transform-box:fill-box;transform-origin:50% 50%;transition:opacity 500ms ease,transform 700ms var(--slow);pointer-events:none}
.tn{transform-box:fill-box;transform-origin:50% 50%;cursor:pointer}
@media (hover:hover) and (pointer:fine){.tn:hover .aura{opacity:1;transform:scale(1.15)}}
.flare .aura{animation:flare 1400ms ease-out}
@keyframes flare{0%{opacity:.5;transform:scale(1)}25%{opacity:1;transform:scale(1.3)}100%{opacity:.5;transform:scale(1)}}
.tb svg{overflow:visible}

/* ---------- header ---------- */
.tb-bar{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem var(--margin);color:var(--header-ink,var(--ink));background:var(--header-bg,var(--night));transition:color 600ms ease,background-color 600ms ease}
.tb-bar .mark{font-weight:500;text-decoration:none;letter-spacing:-.01em;min-height:44px;display:inline-flex;align-items:center}
.tb-bar nav{display:flex;gap:clamp(1.25rem,3vw,2.5rem);align-items:center}
.tb-bar nav a{min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em;text-decoration-thickness:.07em;transition:text-decoration-color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.tb-bar nav a:hover{text-decoration-color:currentColor}}

/* ---------- the Google Play slot: lamplit amber ---------- */
.play-badge{display:inline-flex;align-items:center;gap:1.1rem;min-width:min(100%,17rem);min-height:5rem;padding:.85rem 1.75rem .85rem 1.5rem;background:var(--amber);color:var(--amber-ink);text-decoration:none;border-radius:.75rem;transition:transform var(--t-press) var(--ease-out),background-color 400ms ease}
.play-badge .play-mark{flex:none;width:2.1rem;height:auto;fill:currentColor}
.play-badge .label{display:block;max-width:11rem;font-size:1.375rem;line-height:1.15;font-weight:500;text-wrap:balance}
.play-badge.disabled{cursor:default}
.play-badge.disabled:active{transform:none}
.play-badge:not(.disabled):active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.play-badge:not(.disabled):hover{background:#ffbb63}}

/* ---------- hero ---------- */
.tb-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center;min-height:100svh;padding:7rem var(--margin) 5rem;background:var(--night);overflow:hidden}
.hero-copy{grid-column:1/7}
.tb-hero h1{font-size:var(--step-h1);line-height:.95;letter-spacing:-.035em}
.tb-hero .lede{margin-top:2rem;max-width:26ch;font-size:clamp(1.25rem,1.05rem + .75vw,1.75rem);line-height:1.35;color:var(--ink)}
.tb-hero .play-badge{margin-top:2.75rem}
.hero-art{grid-column:7/13;touch-action:manipulation}
.hero-art svg{width:100%;height:auto}
.px{will-change:transform}
.fl{transform-box:fill-box;transform-origin:50% 50%}
.hero-art .tn{transform:rotate(var(--a,0deg));transition:transform 1100ms var(--slow),--face 700ms ease,--edge 700ms ease}
@media (max-width:48rem){
  .tb-hero{display:block;min-height:auto;padding:6.5rem var(--margin) 4rem}
  .hero-art{margin:3.5rem auto 0;width:min(100%,26rem)}
}
@media (prefers-reduced-motion:no-preference){
  .fl{animation:drift 13s var(--slow) infinite alternate}
  .fl.d2{animation-duration:15s;animation-delay:-3s}.fl.d3{animation-duration:12s;animation-delay:-6s}.fl.d4{animation-duration:16s;animation-delay:-9s}
  .fl.d5{animation-duration:14s;animation-delay:-2s}.fl.d6{animation-duration:17s;animation-delay:-7s}.fl.d7{animation-duration:12.5s;animation-delay:-4s}.fl.d8{animation-duration:15.5s;animation-delay:-10s}
}
@keyframes drift{from{transform:translateY(-7px)}to{transform:translateY(9px)}}

/* ---------- press once ---------- */
.tb-turn{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center;min-height:100svh;padding:7rem var(--margin);background:var(--velvet);overflow:hidden}
.turn-copy{grid-column:1/6;position:relative;z-index:1}
.tb-turn h2,.tb-burst h2,.tb-bloom h2,.tb-close h2{font-size:var(--step-h2);line-height:1.06;letter-spacing:-.02em}
.tb-turn h2 .word{display:inline-block;color:var(--amber)}
.turn-copy p,.burst-head p,.bloom-copy p,.close-copy p{margin-top:1.5rem;max-width:34ch;line-height:1.6;color:var(--soft)}
.turn-copy .hint{margin-top:1.75rem;font-weight:500;color:var(--ink)}
.triad{grid-column:6/13;justify-self:center;position:relative;width:min(100%,78svh);aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.triad .spin{position:absolute;inset:0;transform:rotate(var(--rot,0deg));transition:transform 1400ms var(--slow)}
.triad .g{position:absolute;width:52%;height:45.03%}
.triad .g svg{width:100%;height:100%;transform:rotate(calc(var(--rot,0deg) * -1));transition:transform 1400ms var(--slow)}
.triad .g1{left:-2%;top:27.5%}
.triad .g2{left:37%;top:5%}
.triad .g3{left:37%;top:50%}
.triad .pivot{position:absolute;left:50%;top:50%;width:3.5%;aspect-ratio:1;margin:-1.75% 0 0 -1.75%;border-radius:50%;background:var(--ink);opacity:.8}
.triad:focus-visible{outline:3px solid var(--amber);outline-offset:-8px}
@media (hover:hover) and (pointer:fine){.triad:hover .aura{opacity:1;transform:scale(1.12)}.triad:hover .spin{transform:rotate(calc(var(--rot,0deg) + 6deg))}.triad:hover .g svg{transform:rotate(calc(var(--rot,0deg) * -1 - 6deg))}}
.triad:active .aura{opacity:1}
@media (max-width:48rem){
  .tb-turn{display:block;min-height:auto;padding:6rem var(--margin) 5rem}
  .triad{display:block;width:min(88%,24rem);margin:3rem auto 0}
}
@media (prefers-reduced-motion:reduce){.triad .spin,.triad .g svg{transition-duration:1ms}}

/* ---------- three of a colour: a small board you can really play ---------- */
.tb-burst{padding:clamp(6rem,11vw,10rem) var(--margin);background:var(--night)}
.burst-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end}
.burst-head h2{grid-column:1/7}
.burst-head p{grid-column:9/13;margin-top:0;max-width:32ch}
.tb-burst .scene{display:block;width:min(100%,60rem,calc(72svh * 640 / 420));height:auto;margin:clamp(1.5rem,3vw,2.5rem) auto 0;touch-action:manipulation;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.tb-burst .scene:focus-visible{outline-offset:8px}
.scene-hint{margin-top:1.5rem;color:var(--soft)}
.tb-burst .scene-hint{width:min(100%,60rem);margin:1.5rem auto 0}
.cell .gi{transform-box:fill-box;transform-origin:50% 50%}
.cell.lit .aura{opacity:1;transform:scale(1.2)}
.cell.hint .aura{animation:hint 2.6s ease-in-out infinite}
@keyframes hint{50%{opacity:1;transform:scale(1.25)}}
.sp{fill:var(--face);pointer-events:none}
.pivot-dot{fill:var(--ink);opacity:0;transition:opacity 300ms ease;pointer-events:none}
.pivot-dot.on{opacity:.75}
@media (max-width:48rem){
  .burst-head{display:block}
  .burst-head p{margin-top:1.5rem}
  .tb-burst .scene-hint{margin-top:1rem}
}

/* ---------- a Starflower blooms: ring the gem, and it opens ---------- */
.tb-bloom{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center;min-height:100svh;padding:clamp(5rem,9vw,8rem) var(--margin);background:var(--brick);overflow:hidden}
.tb-bloom .scene{grid-column:1/8;width:100%;max-height:82svh;height:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.bloom-copy{grid-column:9/13}
.bloom-copy .scene-hint{color:var(--amber)}
.ob{transform-box:fill-box;transform-origin:50% 50%}
.scene .ob,.scene .core-gem,.scene .star-gem{outline:none}
.scene .ob:focus-visible .tn,.scene .core-gem:focus-visible .tn{filter:brightness(1.25)}
.halo{opacity:0;transform-box:fill-box;transform-origin:50% 50%;pointer-events:none}
.core-gem{transform-box:fill-box;transform-origin:50% 50%}
.star-gem{transform-box:fill-box;transform-origin:50% 50%;opacity:0;transform:scale(.7);pointer-events:none;cursor:pointer}
.ready .ob,.ready .core-gem,.ready .star-gem{transition:transform 1400ms var(--slow),opacity 1000ms ease}
.bloomed .core-gem{opacity:0;pointer-events:none}
.bloomed .star-gem{opacity:1;transform:scale(1);pointer-events:auto}
.bloomed .halo{opacity:.9}
.ready .halo{transition:opacity 1600ms ease}
.bloomed .o1{transform:translate(-9px,5px)}.bloomed .o2{transform:translate(-9px,-5px)}.bloomed .o3{transform:translate(0,10px)}.bloomed .o4{transform:translate(0,-10px)}.bloomed .o5{transform:translate(9px,5px)}.bloomed .o6{transform:translate(9px,-5px)}
@media (prefers-reduced-motion:no-preference){.ready.bloomed .halo{animation:halo 5s ease-in-out infinite alternate}}
@keyframes halo{from{transform:scale(.92)}to{transform:scale(1.06)}}
@media (max-width:48rem){
  .tb-bloom{display:block;min-height:auto;padding:6rem var(--margin) 5rem}
  .tb-bloom .scene{display:block;max-width:26rem;margin:0 auto 3rem}
}

/* ---------- close ---------- */
.tb-close{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center;min-height:80svh;padding:clamp(6rem,10vw,9rem) var(--margin);background:var(--pine)}
.close-copy{grid-column:1/7}
.close-play{grid-column:8/13}
.app-icon{width:5.5rem;height:5.5rem;border-radius:1.25rem;margin-bottom:2.5rem}
.tb-close .fine{margin-top:1.75rem;max-width:38ch;line-height:1.6;font-size:1rem;color:var(--soft)}
@media (max-width:48rem){
  .tb-close{display:block;min-height:auto;padding:6rem var(--margin) 5rem}
  .close-play{margin-top:3rem}
}

/* ---------- footer ---------- */
.tb-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:2.5rem;align-items:start;padding:clamp(4rem,7vw,6rem) var(--margin) 2.5rem;background:var(--deep);color:var(--ink)}
.tb-foot .name{grid-column:1/6;font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);line-height:1.1;letter-spacing:-.02em}
.tb-foot .name span{display:block;margin-top:.35rem;font-size:1rem;letter-spacing:0;color:var(--soft)}
.tb-foot ul{grid-column:8/13;display:grid;gap:.25rem;list-style:none;margin:0;padding:0}
.tb-foot ul a{display:inline-flex;align-items:center;min-height:44px;font-size:1.125rem;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em;text-decoration-thickness:.07em;transition:text-decoration-color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.tb-foot ul a:hover{text-decoration-color:currentColor}}
.tb-foot .legal{grid-column:1/-1;margin-top:2rem;font-size:.9375rem;color:var(--soft);max-width:none}
@media (max-width:48rem){
  .tb-foot{display:block}
  .tb-foot ul{margin-top:2rem}
  .tb-foot .legal{margin-top:2.5rem}
}

/* ---------- Twistbloom legal pages: the light touch (shared with privacy and terms) ---------- */
.tb-band{background:#2fc46b;color:#0f1a1d}
.tb-band .band-name{font-family:"Jost",system-ui,sans-serif;font-weight:700;text-transform:uppercase}
.doc-tb .doc-side h1{font-family:"Jost",system-ui,sans-serif;text-transform:none;letter-spacing:-.01em;font-weight:700}