/* LUNATIDE — interface. Dream palette: midnight violet, moon gold, tide teal. */
:root {
  --ink: #1a1030; --violet: #2b1b5e; --deep: #150d33; --gold: #ffd84d; --gold2: #ffb13d; --teal: #7ffff4; --pink: #ff8fc8; --cream: #fff6e6;
  --btn: 1;
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px);
  --font: "Trebuchet MS", "Nunito", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b1446; color: var(--cream); font-family: var(--font); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; touch-action: none; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
button { font: inherit; color: inherit; }

/* ── loading ── */
#loading { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 18px; background: radial-gradient(circle at 50% 40%, #3b2a7a, #120c33); transition: opacity .6s; }
#loading.gone { opacity: 0; pointer-events: none; }
#loading p { letter-spacing: .08em; opacity: .85; text-align: center; padding: 0 20px; }
.moonspin { width: 54px; height: 54px; border-radius: 50%; box-shadow: inset -12px -4px 0 0 var(--gold); animation: spin 1.4s linear infinite; filter: drop-shadow(0 0 12px #ffd84d88); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── HUD ── */
#hud { position: fixed; left: 0; right: 0; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: flex-start; padding: calc(8px + var(--st)) calc(12px + var(--sr)) 0 calc(12px + var(--sl)); pointer-events: none; opacity: 0; transform: translateY(-12px); transition: opacity .35s, transform .35s; }
body.playing #hud { opacity: 1; transform: none; }
#hudL, #hudR { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
#hudR { align-items: flex-end; padding-right: 56px; }
#hudC { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#shards, #stones, #lives { background: rgba(21, 13, 51, .55); border-radius: 14px; padding: 3px 9px; }
#stones, #lives { align-self: flex-start; }
#lives { align-self: flex-end; }
#hearts { display: flex; gap: 3px; }
#hearts i { width: clamp(22px, 3.4vw, 30px); display: block; filter: drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 0 1px var(--ink)); transition: transform .25s; }
#hearts i svg { width: 100%; display: block; }
#hearts i.on path { fill: #ff4f8a; stroke: var(--ink); stroke-width: 1.6; }
#hearts i.off path { fill: #3a2a5e; stroke: var(--ink); stroke-width: 1.6; }
#hearts.low i.on { animation: beat .7s infinite; }
@keyframes beat { 50% { transform: scale(1.18); } }
#stones, #lives { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: clamp(16px, 2.6vw, 22px); text-shadow: 0 2px 0 var(--ink), 0 0 3px var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink); }
#stones.pulse span { animation: pulse .3s; display: inline-block; }
@keyframes pulse { 40% { transform: scale(1.35); color: var(--teal); } }
.gem { width: 16px; height: 22px; background: linear-gradient(135deg, #bffffa, #3ccfd0); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); filter: drop-shadow(0 0 4px #7ffff4); }
.face { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 36% 45%, #3a1c6e 0 9%, transparent 10%), radial-gradient(circle at 64% 45%, #3a1c6e 0 9%, transparent 10%), linear-gradient(#2d6fd6 0 30%, #f6ead2 30%); border: 2px solid var(--ink); }
#shards { display: flex; gap: 4px; }
#shards i { width: clamp(18px, 2.8vw, 24px); display: block; }
#shards i svg { width: 100%; display: block; }
#shards i path { fill: rgba(40, 24, 80, .7); stroke: rgba(255, 240, 200, .45); stroke-width: 1.4; }
#shards i.on path { fill: var(--gold); stroke: var(--ink); filter: drop-shadow(0 0 4px #ffe27a); }
#shards i.pop { animation: pop .6s; }
@keyframes pop { 30% { transform: scale(1.8) rotate(-20deg); } }
#bossbar { display: none; flex-direction: column; align-items: center; gap: 3px; }
#bossbar.show { display: flex; }
#bossbar b { font-size: 12px; letter-spacing: .2em; color: #ffb3e6; text-shadow: 0 2px 0 var(--ink); }
#bossbar .track { width: clamp(160px, 30vw, 300px); height: 12px; border-radius: 8px; background: #2a1450; border: 2px solid var(--ink); overflow: hidden; box-shadow: 0 0 10px #d08cff66; }
#bossbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff5a8a, #d08cff); transition: width .5s cubic-bezier(.3, 1.6, .5, 1); }

#pauseBtn { position: fixed; z-index: 12; top: calc(8px + var(--st)); right: calc(10px + var(--sr)); width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: rgba(43, 27, 94, .75); font-size: 14px; letter-spacing: -2px; display: none; box-shadow: 0 3px 0 var(--ink); }
body.playing #pauseBtn { display: block; }

#tip { position: fixed; z-index: 11; left: 50%; bottom: calc(18px + var(--sb)); transform: translate(-50%, 20px); max-width: min(620px, 82vw); padding: 10px 18px; border-radius: 16px; background: rgba(21, 13, 51, .82); border: 2px solid #8b6fe0; box-shadow: 0 4px 0 var(--ink), 0 0 20px #8b6fe055; font-size: clamp(13px, 2.1vw, 17px); line-height: 1.35; text-align: center; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; }
#tip.show { opacity: 1; transform: translate(-50%, 0); }
body.touch #tip { bottom: auto; top: calc(62px + var(--st)); max-width: min(520px, 56vw); }
.key { display: inline-block; min-width: 1.6em; padding: 0 .35em; margin: 0 .1em; border-radius: 6px; background: var(--gold); color: var(--ink); font-weight: 900; box-shadow: 0 2px 0 #a8741a; }

#banner { position: fixed; z-index: 13; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.6); font-size: clamp(26px, 5.6vw, 52px); font-weight: 900; text-align: center; letter-spacing: .04em; color: var(--gold); text-shadow: 0 4px 0 var(--ink), 0 0 3px var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 0 24px #ffd84d99; opacity: 0; transition: opacity .3s, transform .45s cubic-bezier(.3, 1.8, .5, 1); pointer-events: none; white-space: nowrap; }
#banner small { display: block; font-size: .38em; letter-spacing: .3em; color: var(--cream); }
#banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#banner.small { font-size: clamp(18px, 3.2vw, 28px); top: 30%; color: var(--cream); white-space: normal; max-width: 86vw; }
#banner.boss { color: #ffb3e6; font-size: clamp(30px, 6.5vw, 64px); }

#stagecard { position: fixed; z-index: 13; left: calc(0px + var(--sl)); top: 56%; padding: 12px 40px 12px calc(24px + var(--sl)); background: linear-gradient(90deg, rgba(43, 27, 94, .95), rgba(43, 27, 94, 0)); border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: translateX(-110%); pointer-events: none; }
#stagecard small { display: block; letter-spacing: .3em; font-size: 12px; color: var(--teal); }
#stagecard b { font-size: clamp(22px, 4vw, 36px); color: var(--cream); text-shadow: 0 3px 0 var(--ink); }
#stagecard.show { animation: card 3.2s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes card { 0% { transform: translateX(-110%); } 15%, 80% { transform: none; opacity: 1; } 100% { transform: translateX(-20%); opacity: 0; } }
#fps { position: fixed; z-index: 30; left: calc(8px + var(--sl)); bottom: calc(4px + var(--sb)); font: 11px monospace; opacity: .7; }

/* ── touch controls ── */
#touch { position: fixed; inset: 0; z-index: 9; pointer-events: none; display: none; }
body.touch.playing #touch { display: block; }
#stickZone { position: absolute; left: 0; top: 22%; bottom: 0; width: 48%; pointer-events: auto; touch-action: none; }
#stickZone .ghost { position: absolute; left: calc(40px + var(--sl)); bottom: calc(40px + var(--sb)); width: calc(120px * var(--btn)); height: calc(120px * var(--btn)); border-radius: 50%; border: 2px dashed rgba(255, 246, 230, .25); display: grid; place-content: center; font-size: 10px; letter-spacing: .15em; color: rgba(255, 246, 230, .4); transition: opacity .3s; }
#stickBase { position: absolute; left: 0; top: 0; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 60%, transparent 70%); border: 2px solid rgba(255, 246, 230, .35); opacity: 0; transition: opacity .15s; }
#stickBase.on { opacity: 1; }
#stickBase.on ~ .ghost { opacity: 0; }
#stickKnob { position: absolute; left: 42px; top: 42px; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c9b8ff 60%, #8b6fe0); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
#btnZone { position: absolute; right: 0; bottom: 0; width: 44%; height: 62%; pointer-events: auto; touch-action: none; }
.tbtn { position: absolute; width: calc(86px * var(--btn)); height: calc(86px * var(--btn)); border-radius: 50%; display: grid; place-content: center; justify-items: center; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink), inset 0 -6px 0 rgba(0, 0, 0, .18); font-weight: 900; transition: transform .06s, box-shadow .06s; opacity: .9; }
.tbtn span { font-size: calc(30px * var(--btn)); line-height: 1; color: var(--ink); }
.tbtn small { font-size: calc(9px * var(--btn)); letter-spacing: .12em; color: var(--ink); opacity: .75; }
.tbtn.down { transform: translateY(4px) scale(.94); box-shadow: 0 1px 0 var(--ink), inset 0 -2px 0 rgba(0, 0, 0, .18); filter: brightness(1.15); }
#btnA { right: calc(22px + var(--sr)); bottom: calc(26px + var(--sb)); background: radial-gradient(circle at 35% 30%, #fff5c2, var(--gold) 55%, var(--gold2)); }
#btnB { right: calc(22px + var(--sr) + 100px * var(--btn)); bottom: calc(26px + var(--sb) + 52px * var(--btn)); background: radial-gradient(circle at 35% 30%, #e6fffd, var(--teal) 55%, #3ccfd0); }
body.swap #stickZone { left: auto; right: 0; }
body.swap #stickZone .ghost { left: auto; right: calc(40px + var(--sr)); }
body.swap #btnZone { right: auto; left: 0; }
body.swap #btnA { right: auto; left: calc(22px + var(--sl) + 100px * var(--btn)); }
body.swap #btnB { right: auto; left: calc(22px + var(--sl)); }

/* ── panels ── */
.panel { position: fixed; inset: 0; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 2vh, 16px); padding: calc(12px + var(--st)) calc(16px + var(--sr)) calc(12px + var(--sb)) calc(16px + var(--sl)); }
.panel.show { display: flex; animation: panelIn .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes panelIn { from { opacity: 0; transform: scale(.94); } }
.panel.card { background: radial-gradient(ellipse at center, rgba(21, 13, 51, .82), rgba(21, 13, 51, .6)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.panel h2 { margin: 0; font-size: clamp(26px, 5vw, 42px); color: var(--gold); text-shadow: 0 4px 0 var(--ink), 0 0 3px var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink); letter-spacing: .04em; }
.menu { display: flex; flex-direction: column; gap: clamp(5px, 1.3vh, 10px); width: min(340px, 86vw); }
.mi { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: clamp(38px, 8.5vh, 50px); padding: 4px 18px; border-radius: 26px; border: 3px solid var(--ink); background: linear-gradient(#4a36a0, #33237a); box-shadow: 0 4px 0 var(--ink); font-size: clamp(15px, 2.6vw, 19px); font-weight: 800; letter-spacing: .03em; cursor: pointer; transition: transform .12s, background .12s; outline: none; }
.mi.sel { background: linear-gradient(#ffe57a, var(--gold2)); color: var(--ink); transform: scale(1.04); }
.mi.sel::before { content: '☾'; position: absolute; left: 14px; font-size: 1.1em; animation: bob 1s infinite ease-in-out; }
@keyframes bob { 50% { transform: translateY(-3px); } }
.mi:active { transform: scale(.97); }
.opts { width: min(440px, 90vw); max-height: 70vh; overflow-y: auto; padding: 4px; }
.opts .mi { justify-content: space-between; min-height: 40px; font-size: 15px; }
.opts .mi.sel::before { display: none; }
.slider .bar { flex: 1; height: 10px; border-radius: 6px; background: rgba(0, 0, 0, .35); overflow: hidden; margin: 0 8px; border: 2px solid var(--ink); }
.slider .bar i { display: block; height: 100%; background: var(--teal); }
.mi.sel .bar i { background: var(--violet); }
.val { min-width: 60px; text-align: right; }
.info { margin: 0; opacity: .85; text-align: center; font-size: 14px; line-height: 1.5; }

/* title */
#title { justify-content: space-evenly; background: linear-gradient(180deg, rgba(14, 10, 51, .55), rgba(14, 10, 51, 0) 45%, rgba(14, 10, 51, .45)); }
.logo { position: relative; text-align: center; }
.logo h1 { margin: 0; font-size: clamp(42px, 12vmin, 104px); font-weight: 900; letter-spacing: .06em; line-height: 1; }
.logo h1 span { display: inline-block; color: var(--gold); background: linear-gradient(#fff6c8 10%, var(--gold) 50%, #ff9e5a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 5px 0 var(--ink)) drop-shadow(0 0 2px var(--ink)) drop-shadow(0 0 18px #d08cff88); animation: wave 3s ease-in-out infinite; }
.logo h1 span:nth-child(2) { animation-delay: .1s; } .logo h1 span:nth-child(3) { animation-delay: .2s; } .logo h1 span:nth-child(4) { animation-delay: .3s; }
.logo h1 span:nth-child(5) { animation-delay: .4s; } .logo h1 span:nth-child(6) { animation-delay: .5s; } .logo h1 span:nth-child(7) { animation-delay: .6s; } .logo h1 span:nth-child(8) { animation-delay: .7s; }
@keyframes wave { 50% { transform: translateY(-6px) rotate(-2deg); } }
.logo .sub { margin: 4px 0 0; letter-spacing: .38em; font-size: clamp(11px, 2vmin, 15px); color: var(--teal); text-shadow: 0 2px 0 var(--ink); text-transform: uppercase; }
.logo-moon { position: absolute; right: -8%; top: -30%; width: clamp(40px, 11vmin, 80px); height: clamp(40px, 11vmin, 80px); border-radius: 50%; box-shadow: inset calc(-1 * clamp(10px, 3vmin, 22px)) -4px 0 0 var(--gold); filter: drop-shadow(0 0 16px #ffd84daa); animation: bob 3s infinite ease-in-out; }
.best { margin: 0; font-size: 12px; opacity: .75; min-height: 1em; }
.by { margin: 0; font-size: 12px; letter-spacing: .12em; opacity: .7; }
.by b { color: var(--pink); }
/* landscape phones: logo left, menu right */
@media (orientation: landscape) and (max-height: 520px) {
  #title { flex-direction: row; flex-wrap: wrap; align-content: center; column-gap: 6vw; }
  #title .logo { flex-basis: 44%; }
  #title .menu { width: min(300px, 40vw); }
  #title .best, #title .by { flex-basis: 100%; text-align: center; }
  .panel.card { flex-direction: row; flex-wrap: wrap; align-content: center; column-gap: 5vw; }
  .panel.card h2 { flex-basis: 100%; text-align: center; font-size: 26px; }
  .panel.card .info { flex-basis: 30%; }
  #pause .menu { display: grid; grid-template-columns: 1fr 1fr; width: min(520px, 62vw); }
  #options .opts { display: grid; grid-template-columns: 1fr 1fr; width: min(720px, 94vw); max-height: 62vh; }
  #clear #clearRows, #ending #endRows { display: grid; grid-template-columns: repeat(2, auto); column-gap: 26px; }
  .story { flex-basis: 100%; }
  .mi { min-height: 36px; }
}

/* tallies */
.trow { display: flex; justify-content: space-between; gap: 30px; min-width: min(300px, 80vw); padding: 6px 4px; border-bottom: 1px dashed rgba(255, 246, 230, .25); font-size: 17px; opacity: 0; animation: rowIn .4s forwards; }
.trow b { color: var(--gold); }
@keyframes rowIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
.rank { font-size: 64px; font-weight: 900; color: var(--gold); text-align: center; text-shadow: 0 5px 0 var(--ink), 0 0 20px #ffd84d; opacity: 0; animation: rankIn .5s 1.3s cubic-bezier(.2, 1.8, .4, 1) forwards; }
@keyframes rankIn { from { opacity: 0; transform: scale(3) rotate(-15deg); } to { opacity: 1; transform: none; } }
#clearRows { display: flex; flex-direction: column; align-items: center; }
.story, .credits { max-width: 560px; text-align: center; line-height: 1.55; margin: 0; }
.credits { font-size: 13px; opacity: .8; }
.credits b { color: var(--pink); }
#howtoRows { width: min(560px, 92vw); max-height: 60vh; overflow-y: auto; }
.hrow { display: flex; gap: 14px; padding: 6px 0; border-bottom: 1px dashed rgba(255, 246, 230, .2); }
.hrow b { min-width: 130px; color: var(--gold); }
.hint { font-size: 13px; opacity: .85; line-height: 1.5; }

#rotate { position: fixed; z-index: 40; left: 50%; top: calc(10px + var(--st)); transform: translateX(-50%); padding: 8px 14px; border-radius: 14px; background: rgba(21, 13, 51, .9); border: 2px solid var(--gold); font-size: 13px; display: none; pointer-events: none; white-space: nowrap; }
body.touch.portrait #rotate { display: block; animation: fadeOut 1s 5s forwards; }
@keyframes fadeOut { to { opacity: 0; } }
/* portrait: controls shrink and the touch zones share the bottom */
body.portrait #btnZone { height: 40%; }
body.portrait #stickZone { top: 55%; }
body.portrait #hudR { padding-right: 52px; }
body.portrait #hudL, body.portrait #hudR { min-width: 0; }

#flash { position: fixed; inset: 0; z-index: 25; background: #fff; opacity: 0; pointer-events: none; }
#fade { position: fixed; inset: 0; z-index: 45; background: #0e0a28; opacity: 0; pointer-events: none; transition: opacity .42s; }
#fade.on { opacity: 1; }
body:not(.touch) .fsbtn { display: flex; }
@media (display-mode: fullscreen), (display-mode: standalone) { .fsbtn { display: none !important; } }

/* story prologue */
#story { background: radial-gradient(ellipse at center, rgba(14, 10, 40, .72), rgba(14, 10, 40, .9)); }
#story .storymoon { width: 56px; height: 56px; border-radius: 50%; box-shadow: inset -14px -4px 0 0 var(--gold); filter: drop-shadow(0 0 16px #ffd84daa); animation: bob 3s infinite ease-in-out; flex-basis: auto !important; }
#storyText { max-width: 620px; margin: 0; font-size: clamp(17px, 3.2vw, 24px); line-height: 1.55; text-align: center; text-shadow: 0 2px 0 var(--ink); flex-basis: 100%; }
#storyText b { color: var(--gold); }
#storyText i { color: var(--teal); }
#storyText.in { animation: storyIn .6s ease-out; }
@keyframes storyIn { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
#storyDots { display: flex; gap: 8px; justify-content: center; flex-basis: 100%; }
#storyDots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 246, 230, .3); }
#storyDots i.on { background: var(--gold); }
.menu.row { flex-direction: row; justify-content: center; width: min(420px, 90vw); }
.menu.row .mi { flex: 1; }

/* ── boot: the Odaroo & Co. cartridge (js/intro.js) ─────────────────────────────────────────────
   The SAME opening Inkville plays, copied from its css/home.css (#introSplash, #introBoot, .ib-*,
   #introLogo, .odc-tile) and css/base.css (.ickrig). Keep the two in step: if Inkville's boot
   changes, this block and js/intro.js change with it. Only the sizing differs — Lunatide is played
   sideways, so --ibs is set from the window by js/intro.js to fit a landscape phone. */
@font-face { font-family: 'LTPixel'; src: url('fonts/PressStart2P-Regular.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'LTDot'; src: url('fonts/DotGothic16-intro.woff2') format('woff2'); font-display: block; } /* only タップしてロード */
#intro { --ibs: 1; position: fixed; inset: 0; z-index: 60; display: none; background: #05040a; overflow: hidden; touch-action: none;
  align-items: center; justify-content: center; font-family: 'LTPixel', 'Courier New', monospace; }
#intro.show { display: flex; }
#intro::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .6; background: repeating-linear-gradient(0deg, #0000 0 2px, #ffffff0d 2px 4px); }
#intro.fadeout { animation: introFade 1s ease-in forwards; pointer-events: none; }
@keyframes introFade { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
/* the boot column: cartridge, arrow, handheld, hint */
#introBoot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; perspective: 420px; }
.ib-cart { width: calc(76px * var(--ibs)); height: calc(76px * var(--ibs)); filter: drop-shadow(0 0 8px #ffffff99); position: relative; z-index: 2; animation: cartFloat 2.4s ease-in-out infinite; }
.ib-arrow { width: calc(44px * var(--ibs)); height: calc(40px * var(--ibs)); margin: calc(3px * var(--ibs)) 0; filter: drop-shadow(0 0 6px #ffffffcc); animation: arrDown 1.1s ease-in infinite; }
.ib-arrow svg { width: 100%; height: 100%; display: block; }
@keyframes arrDown { 0% { transform: translateY(-6px); opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
.ib-gb { width: calc(104px * var(--ibs)); height: calc(168px * var(--ibs)); position: relative; filter: drop-shadow(0 6px 16px #000a); transform-style: preserve-3d; transform-origin: 50% 30%; }
.ib-gb .gbface { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ib-gb .gbface svg { width: 100%; height: 100%; display: block; }
.ib-gb .gbback { transform: rotateY(180deg); }
.ib-hint { --ibEN: min(calc(21.6px * var(--ibs)), 6vw); --ibJP: calc(var(--ibEN) * 1.489);
  margin-top: calc(9px * var(--ibs)); font-size: var(--ibEN); color: #eef2f6; letter-spacing: .11em; text-align: center; white-space: nowrap;
  width: calc(var(--ibEN) * 12.4); animation: hintPulse 1.3s ease-in-out infinite; }
.ib-hint span { display: block; font-family: 'LTDot', 'LTPixel', monospace; font-size: var(--ibJP); color: #9aa7bb; margin-top: calc(6px * var(--ibs)); letter-spacing: .025em; }
@keyframes cartFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hintPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.ib-cart.loading { animation: cartLoad .52s ease-in forwards !important; }
@keyframes cartLoad { 0% { transform: translateY(0); } 55% { transform: translateY(calc(48px * var(--ibs))) scale(.96); } 100% { transform: translateY(calc(66px * var(--ibs))) scale(.88); opacity: .1; } }
.ib-gb.flip360 { animation: gbFlip .55s linear 1; }
@keyframes gbFlip { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
#introBoot.zoomin .ib-gb { animation: gbZoom .82s cubic-bezier(.55, 0, .85, .36) 1 forwards; }
@keyframes gbZoom { 0% { transform: scale(1); } 100% { transform: scale(12); } }
#introBoot.zoomin { animation: bootDark .82s ease-in 1 forwards; }
@keyframes bootDark { 0% { opacity: 1; filter: brightness(1); } 55% { opacity: 1; filter: brightness(.55); } 100% { opacity: 0; filter: brightness(0); } }
/* the glitch cart: a shell turning in 3D, the ink drop flat and still over its axis (Inkville's .ickrig) */
.ickrig { position: absolute; inset: 0; perspective: 340px; }
.ick-spin { position: absolute; inset: 0; transform-style: preserve-3d; animation: ickSpin 3.6s linear infinite, ickJolt 4.7s steps(1) infinite; }
@keyframes ickSpin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@keyframes ickJolt { 0%, 90%, 100% { translate: 0 0; } 92% { translate: 2px -1px; } 94% { translate: -3px 1px; } 96% { translate: 1px 0; } }
.ick-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ick-back { transform: rotateY(180deg); }
.ick-face svg { width: 100%; height: 100%; display: block; animation: ickRGB 1.1s steps(2) infinite; }
@keyframes ickRGB { 0%, 100% { filter: drop-shadow(0 0 4px #bfe6ff88); } 30% { filter: drop-shadow(-1.6px 0 #e2426b) drop-shadow(1.6px 0 #37d8f0); } 55% { filter: drop-shadow(1.6px 0 #37d8f0); } 80% { filter: drop-shadow(0 0 4px #bfe6ff88); } }
.ick-shine { opacity: .3; animation: ickShine 2.4s ease-in-out infinite; }
@keyframes ickShine { 0%, 100% { transform: translateX(0); opacity: .15; } 50% { transform: translateX(20px); opacity: .7; } }
.ick-drop { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ick-drop svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 6px #bfe6ff88); }
.ickrig.seat .ick-spin { animation: none !important; }
.ickrig.seat .ick-face svg { animation: none !important; filter: drop-shadow(0 0 4px #bfe6ff88) !important; }
/* the studio mark: nine pixel tiles, O D A / R O O / & C O. */
#introCard { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: flex; align-items: center; justify-content: center; }
#intro.fadeout #introCard { animation: presOut .9s ease-in forwards; }
@keyframes presOut { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.03); opacity: 0; } }
#introLogo { --odct: clamp(32px, min(13.1vmin, 16vh), 65px); display: grid; grid-template-columns: repeat(3, var(--odct)); grid-auto-rows: var(--odct); gap: calc(var(--odct) * .13); perspective: 800px; }
.odc-tile { position: relative; opacity: 0; background: #0d1018; border: calc(var(--odct) * .075) solid #eef2f8; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 calc(var(--odct) * .045) #0d1018, 0 0 calc(var(--odct) * .22) #9fd0ff33; }
.odc-tile span { position: relative; font-size: calc(var(--odct) * .46); line-height: 1; color: #eef2f8; text-shadow: calc(var(--odct) * .035) calc(var(--odct) * .035) 0 #05040a; transform: translateY(calc(var(--odct) * .02)); }
.odc-tile i { position: absolute; left: 100%; bottom: 0; font-style: normal; font-size: .62em; margin-left: .06em; }
#introLogo.show .odc-tile { animation: odcTileIn .34s steps(3) forwards; animation-delay: calc(var(--i) * 32ms); }
@keyframes odcTileIn { 0% { opacity: 0; transform: scale(.55); filter: brightness(3); } 55% { opacity: 1; transform: scale(1.1); filter: brightness(1.8); } 100% { opacity: 1; transform: scale(1); filter: none; } }
#introLogo.show .odc-tile.spin { animation: odcFlip .38s cubic-bezier(.45, .05, .3, 1) forwards; }
@keyframes odcFlip {
  0% { opacity: 1; transform: rotateY(0deg); background-color: #0d1018; box-shadow: inset 0 0 0 calc(var(--odct) * .045) #0d1018; }
  24.9% { opacity: 1; transform: rotateY(90deg); background-color: #0d1018; box-shadow: inset 0 0 0 calc(var(--odct) * .045) #0d1018; }
  25% { opacity: 1; transform: rotateY(90deg); background-color: #4CAF50; box-shadow: inset 0 0 0 calc(var(--odct) * .045) #4CAF50; }
  100% { opacity: 1; transform: rotateY(360deg); background-color: #4CAF50; box-shadow: inset 0 0 0 calc(var(--odct) * .045) #4CAF50; } }
#introLogo.show .odc-tile.inv { animation: odcInv .7s steps(1) forwards; }
@keyframes odcInv {
  0% { opacity: 1; background-color: #eef2f8; box-shadow: inset 0 0 0 calc(var(--odct) * .045) #eef2f8; }
  8% { opacity: 1; background-color: #4CAF50; box-shadow: inset 0 0 0 calc(var(--odct) * .045) #4CAF50; }
  16%, 100% { opacity: 1; background-color: #eef2f8; box-shadow: inset 0 0 0 calc(var(--odct) * .045) #eef2f8; } }
#introLogo.show .odc-tile.inv span { color: #0d1018; text-shadow: none; }
@media (prefers-reduced-motion: reduce) { .ick-spin, .ick-face svg, .ick-shine, .ib-cart, .ib-arrow, .ib-hint { animation: none !important; } }