/* 別府湯けむり大亨 — UI styles (UI agent). Hiroshige palette used flat; Zen Maru Gothic + Dela Gothic One.
Layout: one phone-shaped column (max 430px, full height, safe-area aware); on wide screens a bokashi
backdrop with title art sits behind it. O2O views use these variables too. */
:root {
--night: #14263D;
--prussian: #22436B;
--prussian-2: #2C5482;
--paper: #F1E9D6;
--paper-deep: #E2D6BC;
--deep: #E2D6BC;
--sage: #A7B49A;
--sage-dark: #7F8F74;
--ochre: #D6A85A;
--vermilion: #D9553F;
--cobalt: #2F6FD6;
--ink: #1E2A3A;
--steam: #FFFFFF;
--bamboo: #C9A253;
--sky2: #6F8FAE;
--sky3: #E9DFC8;
--text-on-night: #EDE4D0;
--muted-on-night: #A9B4C2;
--muted: #5B6676;
--font-display: "Dela Gothic One", "Hiragino Sans", "PingFang HK", "Noto Sans TC", sans-serif;
--font-ui: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "PingFang HK", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
--radius: 14px;
--safe-t: env(safe-area-inset-top, 0px);
--safe-b: env(safe-area-inset-bottom, 0px);
--safe-l: env(safe-area-inset-left, 0px);
--safe-r: env(safe-area-inset-right, 0px);
color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
/* standalone index.html: the page owns the safe areas (the artifact host pads :root itself) */
html.standalone body { padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); }
body {
background: var(--night);
color: var(--ink);
font-family: var(--font-ui);
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
/* ---------------------------------------------------------------- desktop backdrop */
#backdrop { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: #0D1526; }
.bd-sky { position: absolute; inset: -32px; background: #0D1526 url("assets/art-px/title.png") center / cover no-repeat;
image-rendering: pixelated; filter: blur(18px) brightness(.44) saturate(1.1); transform: scale(1.06); }
.bd-steam i { position: absolute; bottom: 14vh; width: 70px; height: 70px; border-radius: 50%; background: rgba(255,255,255,.32); filter: blur(12px); animation: bdRise 9s linear infinite; }
@keyframes bdRise { 0% { transform: translateY(0) scale(.5); opacity: 0; } 15% { opacity: .65; } 100% { transform: translateY(-46vh) scale(2.4); opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-8px); } }
/* ---------------------------------------------------------------- phone column */
.app {
position: relative; margin: 0 auto; width: 100%; max-width: 430px; height: 100%;
overflow: hidden; background: var(--paper-deep);
}
@media (min-width: 700px) and (min-height: 600px) {
body { display: grid; place-items: center; }
.app { width: 412px; max-width: 412px; height: min(calc(100vh - 32px), 884px); margin: 0;
border-radius: 30px; box-shadow: 0 0 0 10px var(--ink), 0 30px 80px rgba(0,0,0,.65); }
}
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
/* shared bits */
.logo { font-family: var(--font-display); font-weight: 400; line-height: 1.08; color: var(--paper); text-shadow: 0 3px 0 var(--ink); }
.logo span, .logo-ty { color: var(--ochre); }
.kicker { font-weight: 900; font-size: 12px; letter-spacing: .1em; color: var(--ochre); }
.muted { color: var(--muted); font-size: 13px; line-height: 1.6; }
.small { font-size: 12px; }
.pad { padding: 0 16px 8px; }
.empty { padding: 32px 20px; text-align: center; color: var(--muted); }
.coin { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--ochre); box-shadow: inset 0 0 0 2px var(--ink); flex: 0 0 auto; }
.coin.big { width: 30px; height: 30px; box-shadow: inset 0 0 0 3px var(--ink); }
.star-ico { display: inline-block; width: 14px; height: 14px; background: var(--ochre); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); flex: 0 0 auto; }
.tag { display: inline-block; font-size: 10px; font-weight: 900; background: var(--ochre); color: var(--ink); padding: 2px 8px; border-radius: 99px; }
.badge { font-size: 11px; font-weight: 900; background: var(--vermilion); color: var(--paper); padding: 3px 9px; border-radius: 99px; }
.btn { border: 0; border-radius: 14px; padding: 12px 16px; font-weight: 900; font-size: 15px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .08s; }
.btn:active:not(:disabled) { transform: translateY(2px); }
.btn.primary { background: var(--vermilion); color: var(--paper); box-shadow: 0 4px 0 var(--ink); }
.btn.primary:active { box-shadow: 0 2px 0 var(--ink); }
.btn.big { font-size: 19px; min-height: 56px; width: 100%; font-family: var(--font-ui); letter-spacing: .06em; }
.btn.ghost { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.small { min-height: 38px; font-size: 13px; padding: 8px 12px; }
.btn:disabled { opacity: .45; }
.link { background: none; border: 0; color: var(--prussian); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; font-size: 13px; padding: 8px 4px; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 0; background: rgba(241,233,214,.14); color: var(--paper); font-weight: 900; font-size: 15px; display: grid; place-items: center; flex: 0 0 auto; }
.icon-btn.back { font-size: 28px; line-height: 1; padding-bottom: 4px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg { display: flex; background: rgba(30,42,58,.12); border-radius: 12px; padding: 3px; gap: 3px; }
.seg-btn { flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 8px 6px; font-weight: 700; font-size: 13px; min-height: 38px; }
.seg-btn.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
/* sprite holders */
.g-img { display: inline-grid; place-items: end center; width: 40px; height: 40px; flex: 0 0 auto; }
.g-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.g-img.g-fallback { place-items: center; border-radius: 50%; background: var(--prussian); color: var(--paper); font-weight: 900; box-shadow: inset 0 0 0 2px var(--ink); font-size: 14px; }
.g-fallback.g-umi { background: var(--cobalt); } .g-fallback.g-bozu { background: #8C8C88; } .g-fallback.g-kamado { background: #E0662F; }
.g-fallback.g-purin { background: #7E8B3A; } .g-fallback.g-chino { background: var(--vermilion); } .g-fallback.g-tatsu { background: #2E9E8F; }
.g-fallback.g-shiro { background: #EEF3F2; color: var(--ink); }
/* screen header + scroll area + bottom nav */
.scr-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px; background: var(--prussian); color: var(--paper); flex: 0 0 auto; }
.scr-head h2 { flex: 1; font-size: 18px; font-weight: 900; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-gap { width: 40px; flex: 0 0 auto; }
.head-stat, .bank { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-size: 15px; min-width: 40px; justify-content: flex-end; }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 16px; }
.bottom-nav { flex: 0 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--prussian); padding: 6px 4px 6px; }
.nav-btn { border: 0; background: transparent; color: var(--paper); display: grid; justify-items: center; gap: 3px; font-size: 12px; font-weight: 700; padding: 4px 0; min-height: 52px; }
.nav-ico { width: 30px; height: 30px; border-radius: 50%; background: var(--paper); color: var(--vermilion); font-weight: 900; display: grid; place-items: center; font-size: 15px; box-shadow: inset 0 0 0 2px var(--ink); }
/* ---------------------------------------------------------------- loading */
.screen-loading { background: linear-gradient(180deg, var(--night), var(--prussian) 60%, var(--sky2)); justify-content: center; align-items: center; color: var(--paper); }
.load-inner { width: min(300px, 80%); display: grid; gap: 16px; justify-items: center; text-align: center; }
.seal { width: 64px; height: 64px; border-radius: 14px; background: var(--vermilion); color: var(--paper); font-family: var(--font-display); font-size: 34px; display: grid; place-items: center; box-shadow: inset 0 0 0 4px var(--paper), 0 0 0 3px var(--vermilion); transform: rotate(-6deg); }
.screen-loading .logo { font-size: 34px; }
.load-bar { width: 100%; height: 10px; border-radius: 99px; background: rgba(255,255,255,.2); overflow: hidden; }
.load-bar i { display: block; height: 100%; width: 0; background: var(--ochre); border-radius: 99px; transition: width .25s; }
.load-text { font-size: 13px; color: var(--muted-on-night); font-weight: 700; }
.load-tip { font-size: 13px; line-height: 1.6; color: var(--text-on-night); min-height: 3.2em; }
/* ---------------------------------------------------------------- title */
.screen-title { background: linear-gradient(180deg, var(--night) 0%, var(--prussian) 34%, var(--sky2) 62%, var(--sky3) 100%); color: var(--paper); }
.title-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.title-mtn { position: absolute; left: -10%; right: -10%; bottom: 25%; height: 34%; background: var(--prussian); opacity: .55; clip-path: polygon(0 100%, 0 70%, 18% 52%, 34% 30%, 52% 6%, 64% 14%, 78% 40%, 100% 62%, 100% 100%); }
.title-mtn::after { content: ""; position: absolute; inset: 0; }
.title-steam i { position: absolute; bottom: 30%; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.55); filter: blur(6px); animation: bdRise 7s linear infinite; }
.title-steam i:nth-child(1) { left: 10%; } .title-steam i:nth-child(2) { left: 30%; animation-delay: -2s; } .title-steam i:nth-child(3) { left: 52%; animation-delay: -4s; }
.title-steam i:nth-child(4) { left: 72%; animation-delay: -1s; } .title-steam i:nth-child(5) { left: 88%; animation-delay: -5s; }
.title-main { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 24px 0; gap: 10px; }
.logo.big { font-size: clamp(40px, 13vw, 54px); }
.title-sub { font-weight: 700; font-size: 14px; line-height: 1.6; max-width: 300px; color: var(--paper); text-shadow: 0 1px 0 rgba(30,42,58,.6); }
.title-cast { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin-top: 10px; height: 130px; }
.title-cast .cast { width: 86px; height: 96px; animation: bob 3s ease-in-out infinite; }
.title-cast .cast.main { width: 120px; height: 130px; animation-delay: -1.2s; }
.title-cast .cast:last-child { animation-delay: -2s; }
.title-actions { position: relative; display: grid; gap: 10px; padding: 14px 20px 8px; background: linear-gradient(180deg, transparent, rgba(226,214,188,.85) 30%); }
.title-actions .btn.ghost { background: rgba(241,233,214,.92); }
.title-lang { background: rgba(30,42,58,.14); color: var(--ink); }
.title-foot { position: relative; font-size: 10.5px; color: var(--muted); text-align: center; padding: 4px 20px 10px; background: rgba(226,214,188,.85); }
/* ---------------------------------------------------------------- map */
.screen-map { background: var(--paper-deep); }
.world-wrap { padding: 12px 12px 4px; }
.world { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: inset 0 0 0 3px var(--ink), 0 3px 0 var(--ink); background: var(--paper-deep); }
.w-name { font: 900 11px var(--font-ui); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.w-num { font: 400 11px var(--font-display); fill: var(--paper); }
.w-sea { font: 700 10px var(--font-ui); fill: var(--paper); opacity: .8; }
.w-mtn { font: 700 10px var(--font-ui); fill: var(--paper); }
.w-area.locked .w-name { fill: var(--muted); }
.w-steam { fill: none; stroke: var(--steam); stroke-width: 2.5; stroke-linecap: round; opacity: .9; animation: wsteam 2.4s ease-in-out infinite; }
@keyframes wsteam { 0% { transform: translateY(2px); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(-6px); opacity: 0; } }
.chapters { display: grid; gap: 12px; padding: 8px 12px; }
.chapter { background: var(--paper); border-radius: 16px; box-shadow: inset 0 0 0 2px var(--ink), 0 3px 0 var(--ink); padding: 12px; display: grid; gap: 10px; }
.chapter.locked { background: #D8CEB8; }
.ch-head { display: flex; align-items: center; gap: 10px; }
.ch-no { width: 34px; height: 34px; border-radius: 10px; background: var(--ch); color: var(--paper); font-family: var(--font-display); font-size: 18px; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--ink); flex: 0 0 auto; }
.chapter.locked .ch-no { background: #B9B2A4; }
.ch-txt { flex: 1; min-width: 0; display: grid; }
.ch-txt b { font-size: 15px; font-weight: 900; }
.ch-txt small { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.ch-stars { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 13px; }
.ch-lock { font-size: 12px; font-weight: 700; color: var(--muted); }
.days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.day-node { border: 0; background: var(--paper-deep); border-radius: 12px; padding: 8px 4px; display: grid; justify-items: center; gap: 3px; min-height: 76px; box-shadow: inset 0 0 0 2px var(--ink); position: relative; }
.day-node.suggest { background: var(--ochre); box-shadow: inset 0 0 0 3px var(--ink), 0 3px 0 var(--ink); }
.day-node.locked { opacity: .55; }
.dn-day { font-weight: 900; font-size: 13px; }
.dn-area { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.day-node.suggest .dn-area { color: var(--ink); }
.dn-done { font-size: 9.5px; font-weight: 900; background: var(--sage); border-radius: 99px; padding: 0 6px; }
.lock-ico { width: 14px; height: 16px; border-radius: 3px; background: var(--muted); position: relative; margin-top: 6px; }
.lock-ico::before { content: ""; position: absolute; left: 2px; right: 2px; top: -7px; height: 9px; border: 2px solid var(--muted); border-bottom: 0; border-radius: 6px 6px 0 0; }
.pips { display: inline-flex; gap: 2px; }
.pips i { width: 14px; height: 14px; background: rgba(30,42,58,.22); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.pips i.on { background: var(--vermilion); }
/* ---------------------------------------------------------------- pre-day */
.screen-preday { background: var(--paper-deep); }
.pre { display: grid; gap: 12px; padding: 12px; align-content: start; }
.pre h3 { font-size: 14px; font-weight: 900; margin-bottom: 6px; }
.pre-hero { display: flex; align-items: center; gap: 12px; background: var(--prussian); color: var(--paper); border-radius: 16px; padding: 14px; box-shadow: inset 0 -6px 0 var(--ch); }
.pre-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.15; margin: 2px 0; overflow-wrap: anywhere; }
.pre-hero > div:last-child { min-width: 0; }
.pre-cast:empty { display: none; }
.pre-hero .muted { color: var(--muted-on-night); font-size: 12px; }
.pre-cast { display: flex; align-items: flex-end; }
.pre-img { width: 58px; height: 64px; }
.pre-img + .pre-img { margin-left: -14px; }
.mech-card, .goals, .today, .support, .set-row.card { background: var(--paper); border-radius: 14px; padding: 12px; box-shadow: inset 0 0 0 2px var(--ink); }
.mech-card { display: grid; gap: 6px; justify-items: start; }
.mech-card b { font-size: 15px; }
.mech-card p { font-size: 13px; line-height: 1.6; }
.goal { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed rgba(30,42,58,.2); font-size: 13.5px; font-weight: 700; }
.goal:first-of-type { border-top: 0; }
.goal-n { font-family: var(--font-display); font-size: 12px; color: var(--vermilion); }
.best { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--muted); font-weight: 700; }
.relaxed-note { font-size: 12.5px; font-weight: 700; background: var(--sage); border-radius: 10px; padding: 6px 10px; margin-bottom: 4px; }
.today p { font-size: 13px; line-height: 1.6; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { border: 0; background: var(--paper-deep); border-radius: 12px; padding: 6px 10px 6px 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; min-height: 48px; box-shadow: inset 0 0 0 2px rgba(30,42,58,.3); }
.chip.on { background: var(--ochre); box-shadow: inset 0 0 0 3px var(--ink); }
.chip-img { width: 36px; height: 36px; }
.chip-none { width: 36px; height: 36px; display: grid; place-items: center; font-weight: 900; }
.pre-foot { padding: 10px 16px 12px; background: var(--paper-deep); box-shadow: 0 -1px 0 rgba(30,42,58,.15); }
/* settings rows / switch */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.set-row.col { flex-direction: column; align-items: stretch; }
.set-txt { display: grid; gap: 2px; min-width: 0; }
.set-txt b { font-size: 14.5px; }
.set-txt small { font-size: 12px; color: var(--muted); line-height: 1.5; }
.switch { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 99px; background: #B9B2A4; position: relative; flex: 0 0 auto; cursor: pointer; transition: background .2s; box-shadow: inset 0 0 0 2px var(--ink); margin: 0; }
.switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); transition: transform .2s; }
.switch:checked { background: var(--sage-dark); }
.switch:checked::after { transform: translateX(20px); }
.set-note { font-size: 12px; color: var(--muted); line-height: 1.5; padding: 4px 0; }
/* ---------------------------------------------------------------- play */
.screen-play { background: var(--paper-deep); }
.hud { position: relative; background: var(--prussian); color: var(--paper); padding: 6px 10px 10px; display: grid; gap: 5px; flex: 0 0 auto; z-index: 2; max-height: 76px; }
.hud-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 38px; }
.place { font-weight: 900; font-size: 14px; line-height: 1.15; min-width: 0; flex: 1 1 0; display: grid; }
.place > span, .place small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place small { font-weight: 700; opacity: .8; font-size: 13px; }
.clock { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 24px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.pill { font-family: var(--font-ui); font-weight: 900; font-size: 13px; background: var(--ochre); color: var(--ink); padding: 2px 9px; border-radius: 99px; }
.pill[data-phase="noon"] { background: #F1C76E; } .pill[data-phase="evening"] { background: var(--vermilion); color: var(--paper); } .pill[data-phase="night"] { background: var(--night); color: var(--ochre); box-shadow: inset 0 0 0 1.5px var(--ochre); }
.coins { font-family: var(--font-display); font-size: 22px; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 1 1 0; }
.coins .coin { width: 18px; height: 18px; }
.coins.bump { animation: bump .3s ease-out; }
@keyframes bump { 40% { transform: scale(1.18); } }
.hud .icon-btn { width: 44px; height: 38px; margin-right: -4px; }
.bars { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; height: 17px; }
.num { font-variant-numeric: tabular-nums; min-width: 26px; text-align: right; }
.meter { height: 12px; border-radius: 99px; background: rgba(255,255,255,.18); overflow: hidden; }
.meter i { display: block; height: 100%; width: 100%; background: var(--sage); border-radius: 99px; transition: width .4s ease, background .3s; }
.meter[data-level="mid"] i { background: var(--ochre); }
.meter[data-level="low"] i { background: var(--vermilion); }
.meter.hit i { background: var(--vermilion); }
/* day progress is the HUD's bottom edge: costs no height */
.day { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 4fr 6fr 3fr 3fr; gap: 2px; }
.day span { height: 4px; background: rgba(255,255,255,.2); position: relative; overflow: hidden; }
.day span i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ochre); }
.board { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: pointer; }
.board-layer { position: absolute; inset: 0; pointer-events: none; }
.cursor { position: absolute; left: 0; top: 0; border-radius: 9px; box-shadow: inset 0 0 0 3px var(--vermilion), 0 0 0 2px rgba(241,233,214,.8); transition: transform .06s linear; }
.cursor canvas { width: 100%; height: 100%; display: block; }
.vent-mode .cursor { box-shadow: inset 0 0 0 3px var(--cobalt); }
.callouts { position: absolute; left: 10px; right: 10px; top: 6px; display: grid; gap: 6px; justify-items: center; }
.callout { pointer-events: auto; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 13px; line-height: 1.45; padding: 7px 12px; border-radius: 12px; box-shadow: 0 3px 0 rgba(0,0,0,.25); max-width: 100%; text-align: center; animation: callIn .25s ease-out; transition: opacity .35s, transform .35s; }
.callout.out { opacity: 0; transform: translateY(-6px); }
.callout.tut { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), 0 3px 0 var(--ink); }
.callout.tut::before { content: "♨ "; color: var(--vermilion); }
.callout.phase { font-family: var(--font-display); font-weight: 400; font-size: 16px; background: var(--prussian); }
.callout.phase-evening { background: var(--vermilion); } .callout.phase-night { background: var(--night); color: var(--ochre); }
.callout.warn, .callout.bus { background: var(--vermilion); }
.callout.good { background: var(--sage-dark); }
@keyframes callIn { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
.qte { pointer-events: auto; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); border: 0; border-radius: 99px; background: var(--vermilion); color: var(--paper); padding: 12px 26px; display: grid; justify-items: center; box-shadow: 0 0 0 4px var(--paper), 0 0 0 7px var(--ink); animation: pulse .5s ease-in-out infinite alternate; }
.qte b { font-family: var(--font-display); font-weight: 400; font-size: 22px; }
.qte small { font-size: 13px; font-weight: 700; }
@keyframes pulse { to { transform: translateX(-50%) scale(1.08); } }
.board-notice { position: absolute; inset: 30% 20px auto; background: var(--paper); border-radius: 14px; padding: 16px; font-weight: 700; font-size: 14px; line-height: 1.6; text-align: center; box-shadow: inset 0 0 0 2px var(--ink), 0 4px 0 var(--ink); pointer-events: auto; }
.tray { background: var(--prussian); padding: 14px 12px 10px; display: flex; align-items: center; flex: 0 0 auto; z-index: 2; }
.queue { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; }
.slot { width: 64px; height: 64px; border-radius: 12px; background: var(--paper); flex: 0 0 auto; display: grid; place-items: center; position: relative; border: 0; padding: 0; }
.slot canvas { width: 56px; height: 56px; display: block; }
.slot.next { width: 80px; height: 80px; box-shadow: 0 0 0 4px var(--ochre); }
.slot.next canvas { width: 72px; height: 72px; }
.slot.next.pop canvas { animation: pop .12s ease-out; }
@keyframes pop { 0% { transform: scale(.8); } 70% { transform: scale(1.05); } }
.slot.next .lock { position: absolute; inset: 0; border-radius: 12px; background: rgba(30,42,58,.45); opacity: 0; transition: opacity .1s; }
.slot.next.locked .lock { opacity: 1; }
.slot .tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 13px; line-height: 1.2; padding: 1px 9px; white-space: nowrap; z-index: 1; }
.queue .rest { display: flex; gap: 8px; flex: 1; min-width: 0; overflow: hidden; align-items: center; }
.queue .rest .slot { flex: 0 0 64px; height: 64px; opacity: .85; }
.queue .rest .slot:nth-child(n+3) { opacity: .6; }
@media (max-width: 400px) { .queue .rest .slot:nth-child(4) { display: none; } }
.slot.empty { opacity: .25 !important; }
/* ---------------------------------------------------------------- results (over the play board) */
.screen-results { background: linear-gradient(180deg, rgba(20,38,61,.55), rgba(20,38,61,.88) 45%, rgba(20,38,61,.96)); justify-content: flex-start; align-items: stretch; padding: 12px 12px 24px; z-index: 3; overflow-y: auto; }
.res-card { margin: 0 auto; width: 100%; background: var(--paper); border-radius: 22px; padding: 14px 14px 14px; display: grid; gap: 8px; box-shadow: inset 0 0 0 3px var(--ink), 0 5px 0 var(--ink); text-align: center; animation: rise .35s ease-out; }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }
.res-card h1 { font-family: var(--font-display); font-weight: 400; font-size: 28px; color: var(--vermilion); margin: 0; line-height: 1.15; }
.res-coin-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -2px 0; }
.res-coins { font-family: var(--font-display); font-weight: 400; font-size: 32px; font-variant-numeric: tabular-nums; line-height: 1; }
.res-stars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 2px 0; }
.res-star { display: grid; justify-items: center; gap: 3px; }
.res-star small { font-size: 10.5px; font-weight: 800; line-height: 1.25; color: var(--muted); }
.big-star { width: 40px; height: 40px; background: rgba(30,42,58,.15); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transition: background .2s; }
.res-star.on .big-star { background: var(--ochre); animation: starIn .45s cubic-bezier(.2,1.6,.4,1); }
.res-star.on small { color: var(--ink); }
.res-star.off .big-star { background: rgba(30,42,58,.25); }
@keyframes starIn { 0% { transform: scale(2.2) rotate(-25deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.res-stamps { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.res-stamps:empty { display: none; }
.stamp-wrap { display: grid; justify-items: center; gap: 4px; }
.stamp-wrap small { font-size: 11px; font-weight: 900; color: var(--vermilion); }
.stamp-seal { width: 78px; height: 78px; border-radius: 50%; border: 4px solid var(--vermilion); color: var(--vermilion); display: grid; place-items: center; font-weight: 900; font-size: 13px; line-height: 1.2; padding: 8px; text-align: center; background: rgba(217,85,63,.06); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--vermilion); transform: scale(2.6) rotate(-18deg); opacity: 0; }
.stamp-seal.press { animation: stampPress .42s cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes stampPress { 0% { transform: scale(2.6) rotate(-18deg); opacity: 0; } 60% { transform: scale(.92) rotate(-8deg); opacity: 1; } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }
.trivia { text-align: left; background: var(--paper-deep); border-radius: 14px; padding: 12px; display: grid; gap: 6px; justify-items: start; box-shadow: inset 0 0 0 2px var(--ink); animation: rise .3s ease-out; }
.trivia b { font-size: 15px; }
.trivia p { font-size: 13px; line-height: 1.65; }
.unlock-note { font-weight: 900; font-size: 13px; background: var(--ochre); border-radius: 10px; padding: 6px; }
.res-actions { display: grid; gap: 10px; animation: rise .25s ease-out; }
.small-links { gap: 4px; }
.small-links .link { justify-self: center; }
/* ---------------------------------------------------------------- shop */
.screen-shop { background: var(--paper-deep); }
.shop-list { display: grid; gap: 10px; padding: 0 12px; }
.shop-sub { font-size: 14px; font-weight: 900; margin-top: 8px; }
.shop-item { display: flex; align-items: center; gap: 10px; background: var(--paper); border-radius: 14px; padding: 10px; box-shadow: inset 0 0 0 2px var(--ink); }
.shop-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--prussian); color: var(--paper); font-weight: 900; display: grid; place-items: center; flex: 0 0 auto; }
.shop-img { width: 44px; height: 44px; }
.shop-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.shop-txt b { font-size: 14.5px; }
.shop-txt small { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.lv { display: flex; gap: 3px; margin-top: 2px; }
.lv i { width: 16px; height: 6px; border-radius: 3px; background: rgba(30,42,58,.18); }
.lv i.on { background: var(--sage-dark); }
.btn.buy { background: var(--ochre); color: var(--ink); min-height: 40px; padding: 6px 12px; font-family: var(--font-display); font-weight: 400; font-size: 14px; box-shadow: 0 3px 0 var(--ink); }
.btn.buy > span { display: inline-flex; align-items: center; gap: 5px; }
.maxed { font-weight: 900; font-size: 12px; color: var(--sage-dark); padding: 0 8px; }
/* ---------------------------------------------------------------- modals & panels */
#modals { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.modal { position: absolute; inset: 0; background: rgba(20,38,61,.6); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 12px 12px; pointer-events: auto; opacity: 0; transition: opacity .15s; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.modal.in { opacity: 1; }
.modal-card { width: 100%; max-width: 380px; max-height: 100%; margin: auto 0; overflow-y: auto; background: var(--paper); border-radius: 20px; padding: 14px 14px; box-shadow: inset 0 0 0 3px var(--ink), 0 5px 0 var(--ink); transform: translateY(14px); transition: transform .18s; }
.modal.in .modal-card { transform: none; }
.modal-title { font-size: 20px; font-weight: 900; text-align: center; margin-bottom: 10px; }
.modal-body { display: grid; gap: 8px; }
.modal-body > p { font-size: 14px; line-height: 1.6; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.modal-actions.col { flex-direction: column; }
.modal-actions.col .btn { width: 100%; }
.settings .set-row + .set-row { border-top: 1px dashed rgba(30,42,58,.2); }
.noon-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.noon-opt { border: 0; background: var(--paper-deep); border-radius: 16px; padding: 14px 10px; display: grid; justify-items: center; gap: 6px; text-align: center; box-shadow: inset 0 0 0 2px var(--ink), 0 4px 0 var(--ink); min-height: 140px; align-content: start; }
.noon-opt:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--ink), 0 2px 0 var(--ink); }
.noon-ico { width: 42px; height: 42px; border-radius: 50%; background: var(--vermilion); color: var(--paper); font-family: var(--font-display); font-size: 20px; display: grid; place-items: center; }
.noon-opt b { font-size: 15px; }
.noon-opt small { font-size: 12px; color: var(--muted); line-height: 1.45; }
.mech .tag { justify-self: center; }
.share-img { width: 100%; border-radius: 12px; box-shadow: 0 0 0 2px var(--ink); }
.panel { position: absolute; inset: 0; background: var(--paper-deep); display: flex; flex-direction: column; pointer-events: auto; transform: translateY(16px); opacity: 0; transition: transform .2s, opacity .2s; }
.panel.in { transform: none; opacity: 1; }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px; background: var(--prussian); color: var(--paper); flex: 0 0 auto; }
.panel-head h2 { flex: 1; font-size: 18px; font-weight: 900; text-align: center; padding-right: 40px; }
.panel-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; position: relative; }
.toast { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: var(--ink); color: var(--paper); font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 99px; z-index: 20; max-width: calc(100% - 32px); text-align: center; pointer-events: none; }
.toast.in { animation: callIn .2s ease-out; }
.notices { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 30; display: grid; gap: 6px; pointer-events: none; }
.notice { pointer-events: auto; display: flex; align-items: flex-start; gap: 8px; background: #FFF4D6; color: var(--ink); border-radius: 12px; padding: 8px 8px 8px 12px; font-size: 12px; line-height: 1.5; font-weight: 700; box-shadow: inset 0 0 0 2px var(--ochre); }
.notice span { flex: 1; }
.notice-x { border: 0; background: transparent; font-size: 18px; line-height: 1; padding: 0 4px; }
body:not([data-scene="title"]) .notices { display: none; }
.notices { top: 10px; bottom: auto; }
/* small phones */
@media (max-width: 370px) {
.clock { font-size: 21px; } .coins { font-size: 19px; }
.place { font-size: 13px; }
.queue, .queue .rest { gap: 7px; }
.nav-btn { font-size: 11px; }
}
@media (max-height: 700px) {
.hud { gap: 4px; padding-bottom: 6px; }
.tray { gap: 6px; padding-top: 8px; }
.title-cast { height: 96px; } .title-cast .cast { width: 64px; height: 72px; } .title-cast .cast.main { width: 90px; height: 96px; }
}
/* reduced motion: OS setting or the in-game toggle */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
.pause-ico { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; display: block; }
.shop-intro { padding-top: 12px; }
.tut-cell { position: absolute; border-radius: 9px; box-shadow: inset 0 0 0 3px var(--ochre); background: rgba(214,168,90,.22); animation: tutPulse .8s ease-in-out infinite alternate; pointer-events: none; }
@keyframes tutPulse { to { background: rgba(214,168,90,.05); } }
/* O2O pages draw their own header inside the panel */
.panel.o2o-host > .panel-head { display: none; }
/* v1.3 day card: goals + the day's one new mechanic, auto-dismissing */
.daycard .modal-card { text-align: center; position: relative; overflow: hidden; padding-bottom: 20px; }
.daycard .kicker { font-size: 13px; }
.dc-goals { text-align: left; margin: 4px 0; }
.dc-goals .goal { font-size: 15px; }
.dc-mech { display: grid; gap: 6px; justify-items: center; background: var(--paper-deep); border-radius: 14px; padding: 12px; box-shadow: inset 0 0 0 2px var(--ink); }
.dc-mech b { font-size: 17px; }
.dc-mech p { font-size: 14px; line-height: 1.55; }
.dc-tap { font-size: 13px; color: var(--muted); font-weight: 700; }
.dc-timer { position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: var(--ochre); transform-origin: left; animation: dcTimer linear forwards; }
@keyframes dcTimer { to { transform: scaleX(0); } }
@media (max-height: 760px) {
.tray { padding-top: 12px; padding-bottom: 8px; }
.slot.next { width: 72px; height: 72px; } .slot.next canvas { width: 64px; height: 64px; }
.slot, .queue .rest .slot { height: 60px; width: 60px; flex-basis: 60px; }
}
.logo-ty { display: block; white-space: nowrap; }
/* ---------------------------------------------------------------- v1.4: feature-gated controls + tasks */
.tray { flex-direction: column; align-items: stretch; gap: 10px; max-height: none; }
.tray .queue { min-height: 80px; }
.slot.hold { background: transparent; box-shadow: inset 0 0 0 2px rgba(241,233,214,.55); cursor: pointer; touch-action: manipulation; }
.slot.hold:active { background: rgba(241,233,214,.15); }
.slot.hold .tag { background: var(--paper); }
.skills { display: flex; gap: 8px; }
.skill { flex: 1 1 0; min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 8px; background: var(--paper); color: var(--ink); border: 0; border-radius: 12px; padding: 4px 10px 4px 4px; font: 900 14px var(--font-ui); text-align: left; position: relative; touch-action: manipulation; }
.skill:active:not(:disabled) { transform: translateY(1px); }
.skill .sk-txt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-ring { --cd: 0; width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
background: conic-gradient(rgba(30,42,58,.55) calc(var(--cd) * 360deg), var(--ochre) 0); padding: 3px; }
.sk-ring .sk-img { width: 34px; height: 34px; border-radius: 50%; background: var(--paper); overflow: hidden; }
.skill.cooling .sk-img { filter: grayscale(.8); opacity: .7; }
.skill .cd { margin-left: auto; font-family: var(--font-display); font-size: 15px; color: var(--muted); }
.skill .ico { width: 40px; height: 40px; border-radius: 50%; background: var(--cobalt); display: grid; place-items: center; color: var(--paper); font-weight: 900; font-size: 15px; flex: 0 0 auto; }
.skill .vent-n { margin-left: auto; font-family: var(--font-display); font-size: 15px; }
.skill.vent.on { background: var(--ochre); box-shadow: inset 0 0 0 3px var(--ink); }
.skill:disabled { opacity: .45; }
.vent-mode #board { box-shadow: inset 0 0 0 4px var(--cobalt); }
/* live task line in the sky band */
.tasks { position: absolute; left: 6px; right: 6px; top: 4px; height: 28px; display: flex; align-items: center; gap: 6px; overflow: hidden;
background: rgba(20,38,61,.78); color: var(--paper); border-radius: 99px; padding: 0 10px 0 6px; font-size: 13px; font-weight: 700; pointer-events: none; transition: opacity .2s; }
.callout-on .tasks { opacity: 0; }
.tasks-star { font-family: var(--font-display); font-size: 12px; color: var(--ink); background: var(--ochre); border-radius: 99px; padding: 1px 7px; flex: 0 0 auto; }
.chip-task { display: inline-flex; align-items: center; gap: 4px; min-width: 0; flex: 1 1 0; white-space: nowrap; }
.chip-task b { flex: 0 0 auto; color: var(--muted-on-night); }
.chip-task .ct-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chip-task small { flex: 0 0 auto; font-size: 13px; color: var(--ochre); font-variant-numeric: tabular-nums; }
.chip-task.t-done b, .chip-task.t-holding b { color: #9FD08A; }
.chip-task.t-done .ct-txt { opacity: .75; }
.chip-task.t-failed b { color: var(--vermilion); }
.tasks.tick { animation: tick .5s ease-out; }
@keyframes tick { 30% { background: rgba(127,143,116,.95); } }
/* task rows: day card, pre-day, results */
.goal-multi { align-items: start; }
.goal-tasks { display: grid; gap: 4px; }
.goal-tasks small { font-size: 13px; color: var(--muted); font-weight: 700; }
.task { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; text-align: left; }
.task-mark { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: rgba(30,42,58,.12); }
.task.t-done .task-mark, .task.t-holding .task-mark { background: var(--sage-dark); color: var(--paper); }
.task.t-failed .task-mark { background: var(--vermilion); color: var(--paper); }
.task-val { font-family: var(--font-display); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.res-tasks { display: grid; gap: 6px; background: var(--paper-deep); border-radius: 12px; padding: 10px 12px; box-shadow: inset 0 0 0 2px rgba(30,42,58,.2); text-align: left; }
.res-tasks > b { font-size: 13px; color: var(--muted); }
.dc-mech-item { display: grid; gap: 4px; justify-items: center; }
.dc-mech-item + .dc-mech-item { border-top: 1px dashed rgba(30,42,58,.25); padding-top: 8px; }
/* action buttons inline at the end of the piece row */
.skills.inline { flex: 0 0 auto; gap: 8px; margin-left: auto; }
.skills.inline .skill { flex: 0 0 52px; width: 52px; height: 52px; min-height: 52px; padding: 0; justify-content: center; border-radius: 50%; }
.skills.inline .sk-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skills.inline .sk-ring { width: 48px; height: 48px; }
.skills.inline .sk-ring .sk-img { width: 42px; height: 42px; }
.skills.inline .skill .cd { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; color: var(--paper); text-shadow: 0 1px 2px var(--ink); font-size: 16px; }
.skills.inline .skill .ico { width: 48px; height: 48px; font-size: 17px; }
.skills.inline .skill .vent-n { position: absolute; right: -4px; top: -6px; margin: 0; background: var(--paper); color: var(--ink); border-radius: 99px; padding: 0 5px; font-size: 13px; box-shadow: 0 0 0 2px var(--ink); }
.chip-task.mini { flex: 0 0 auto; }
.chip-task.focus { flex: 1 1 auto; }
.chip-task + .chip-task { padding-left: 6px; border-left: 1px solid rgba(241,233,214,.25); }
/* ---------------------------------------------------------------- v1.5: story, spring essence */
.story-modal { background: linear-gradient(180deg, rgba(20,38,61,.92), rgba(34,67,107,.92)); }
.story-modal .modal-card { background: var(--paper); text-align: center; padding: 18px 18px 14px; max-width: 390px; }
.story-modal .modal-title { display: none; }
.story-art { height: 190px; display: grid; place-items: end center; }
.story-god { width: 170px; height: 186px; animation: bob 3s ease-in-out infinite; }
.story-chapter .story-art, .story-finale .story-art { height: 150px; }
.story-chapter .story-god, .story-finale .story-god { width: 130px; height: 146px; }
.story-text { font-size: 18px; line-height: 1.7; font-weight: 700; text-align: left; min-height: 5.1em; margin: 10px 2px 6px; }
.story-text.in { animation: callIn .3s ease-out; }
.story-dots { display: flex; justify-content: center; gap: 6px; min-height: 8px; }
.story-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(30,42,58,.2); }
.story-dots i.on { background: var(--vermilion); }
.story-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.story-actions .story-next { margin-left: auto; min-width: 140px; }
.story-skip { font-size: 15px; }
.title-settings { justify-self: center; color: var(--ink); font-size: 14px; }
.res-essence { display: grid; gap: 6px; text-align: left; }
.res-essence > b, .dc-wants p { font-size: 13px; color: var(--muted); }
.ess-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ess-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--paper-deep); border-radius: 12px; padding: 2px 10px 2px 2px; box-shadow: inset 0 0 0 2px rgba(30,42,58,.2); }
.ess-chip canvas.drop { width: 36px; height: 36px; }
.ess-txt { display: grid; line-height: 1.15; }
.ess-txt small { font-size: 12px; font-weight: 700; color: var(--muted); }
.ess-txt b { font-family: var(--font-display); font-weight: 400; font-size: 16px; }
.drop-fb { width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: inline-grid; place-items: center; color: var(--paper); font-weight: 900; font-size: 13px; box-shadow: inset 0 0 0 2px var(--ink); flex: 0 0 auto; }
.drop-fb { transform: none; border-radius: 50%; }
.dc-wants { display: grid; gap: 6px; background: var(--paper-deep); border-radius: 12px; padding: 8px 10px; text-align: left; }
.dc-wants p { font-size: 14px; color: var(--ink); font-weight: 700; line-height: 1.5; }
.want-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; }
.bottom-nav { grid-template-columns: repeat(6, 1fr); }
/* ================================================================ v1.6 pixel-art restyle
Pixel icons below are generated from ASCII art (crisp SVG data URIs); frames use 4 one-sided box-shadows
(notched = stepped corners) plus a hard drop shadow; nothing is rounded. */
:root {
--px-coin: url("data:image/svg+xml,");
--px-star: url("data:image/svg+xml,");
--px-pause: url("data:image/svg+xml,");
--px-lock: url("data:image/svg+xml,");
--px-up: url("data:image/svg+xml,");
--px-stamp: url("data:image/svg+xml,");
--px-drop: url("data:image/svg+xml,");
--px-book: url("data:image/svg+xml,");
--px-coupon: url("data:image/svg+xml,");
--px-gear: url("data:image/svg+xml,");
--px-back: url("data:image/svg+xml,");
--px-star0: url("data:image/svg+xml,");
}
:root {
--ink: #1B2340;
--font-px: "DotGothic16", "Noto Sans TC", "PingFang HK", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
--font-display: var(--font-px);
--px-shadow: rgba(10, 14, 34, .45);
--frame: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink);
--frame-drop: var(--frame), 0 6px 0 0 var(--px-shadow);
--radius: 0;
}
img, canvas { image-rendering: pixelated; }
#game { image-rendering: auto; }
.g-img.px img { image-rendering: pixelated; width: 100%; height: 100%; } /* native ~40px pixel frames scale up to the slot */
/* no rounded corners anywhere in the chrome */
.app *:not(.drop-fb):not(.stamp-seal) { border-radius: 0 !important; }
/* type: DotGothic16 for numbers, clock, titles and short labels */
.logo, .clock, .coins, .pill, .scr-head h2, .panel-head h2, .kicker, .btn, .day-node, .ch-no, .ch-stars, .head-stat, .bank,
.res-card h1, .res-coins, .res-star small, .tag, .badge, .nav-btn, .num, .task-val, .ess-txt b, .goal-n, .modal-title,
.dc-tap, .story-actions .btn, .noon-opt b, .shop-txt b, .seg-btn, .slot .tag, .callout.phase, .qte b, .tasks-star, .chip-task small,
.w-num, .w-name, .w-mtn, .w-sea, .dn-day, .lv, .maxed, .skill .cd, .vent-n, .bars > span:first-child, .place {
font-family: var(--font-px);
font-weight: 400;
letter-spacing: .02em;
}
/* chunky pixel logo: stepped ink outline + drop */
.logo { color: var(--paper); text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink), 0 7px 0 var(--ink); }
.logo.big { font-size: clamp(46px, 15vw, 64px); line-height: 1.08; }
.logo { -webkit-text-stroke: 3px currentColor; paint-order: stroke fill; }
.g-img.g-fallback { max-width: 64px; max-height: 64px; margin: auto; }
.logo span, .logo-ty { color: #F2C14E; }
/* frames */
.chapter, .day-node, .modal-card, .mech-card, .goals, .today, .support, .set-row.card, .res-card, .trivia, .shop-item,
.res-tasks, .dc-mech, .dc-wants, .ess-chip, .notice, .callout, .board-notice, .pre-hero, .noon-opt, .chip, .panel-head .icon-btn,
.world, .seg, .toast, .slot, .skill, .qte, .tasks {
box-shadow: var(--frame-drop) !important;
}
.chapter, .modal-card, .res-card { box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), 0 8px 0 0 var(--px-shadow) !important; }
.chapters { gap: 18px; padding: 12px 16px; }
.world-wrap { padding: 14px 16px 8px; }
.world { background: #E8D7A8; }
.w-terrain { image-rendering: pixelated; }
.w-name { font-size: 12px; fill: var(--ink); stroke: #F1E9D6; stroke-width: 3px; paint-order: stroke; }
.w-num { font-size: 13px; fill: #fff; }
.w-mtn { font-size: 11px; fill: #F1E9D6; }
.w-sea { font-size: 11px; fill: #F1E9D6; }
.w-steam { stroke-linecap: square; stroke-width: 3; }
/* buttons: hard shadow + 2px pressed offset */
.btn { box-shadow: var(--frame), 0 6px 0 0 var(--ink) !important; transition: none; }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: var(--frame), 0 2px 0 0 var(--ink) !important; }
.btn.primary { background: #D9453A; box-shadow: var(--frame), inset 0 3px 0 0 rgba(255,255,255,.28), inset 0 -4px 0 0 rgba(0,0,0,.22), 0 6px 0 0 var(--ink) !important; }
.btn.primary:active:not(:disabled) { box-shadow: var(--frame), inset 0 3px 0 0 rgba(255,255,255,.28), inset 0 -4px 0 0 rgba(0,0,0,.22), 0 2px 0 0 var(--ink) !important; }
.btn.ghost { background: #F4EBD6; box-shadow: var(--frame), inset 0 -3px 0 0 #D8C9A4, 0 6px 0 0 var(--ink) !important; }
.btn.big { font-size: 22px; min-height: 58px; letter-spacing: .12em; }
.btn.buy { box-shadow: var(--frame), inset 0 -3px 0 0 #B88A3A, 0 5px 0 0 var(--ink) !important; }
.icon-btn { background: #2D5486; box-shadow: 0 -2px 0 0 #6F8FAE, 0 2px 0 0 #0F1A33, -2px 0 0 0 #6F8FAE, 2px 0 0 0 #0F1A33; }
.icon-btn:active { transform: translateY(2px); }
.link { font-family: var(--font-ui); }
/* pixel icons */
.coin { background: var(--px-coin) center / contain no-repeat !important; box-shadow: none !important; image-rendering: pixelated; }
.coins .coin { width: 22px; height: 22px; }
.coin.big { width: 40px; height: 40px; }
.pause-ico { width: 14px; height: 14px; border: 0; background: var(--px-pause) center / contain no-repeat; image-rendering: pixelated; }
.star-ico { clip-path: none; background: var(--px-star) center / contain no-repeat; width: 18px; height: 18px; }
.pips i { clip-path: none; width: 16px; height: 16px; background: var(--px-star0) center / contain no-repeat; opacity: .55; }
.pips i.on { background: var(--px-star) center / contain no-repeat; opacity: 1; }
.lock-ico { width: 18px; height: 18px; background: var(--px-lock) center / contain no-repeat; margin-top: 4px; }
.lock-ico::before { display: none; }
.big-star { clip-path: none; width: 60px; height: 60px; background: var(--px-star0) center / contain no-repeat !important; opacity: .6; }
.res-star.on .big-star { background: var(--px-star) center / contain no-repeat !important; opacity: 1; animation: pxStar .5s steps(5) both; }
.res-star.off .big-star { opacity: .55; }
@keyframes pxStar { 0% { transform: scale(2.4); opacity: 0; } 40% { transform: scale(1.4); opacity: 1; } 70% { transform: scale(.9); } 100% { transform: scale(1); } }
.nav-ico { width: 34px; height: 34px; background: transparent center / contain no-repeat; box-shadow: none; color: transparent; }
.ico-up { background-image: var(--px-up); } .ico-stamp { background-image: var(--px-stamp); } .ico-drop { background-image: var(--px-drop); }
.ico-book { background-image: var(--px-book); } .ico-coupon { background-image: var(--px-coupon); } .ico-gear { background-image: var(--px-gear); }
.nav-btn { font-size: 12px; gap: 4px; }
.nav-btn:active .nav-ico { transform: translateY(2px); }
.bottom-nav { background: #1E3A63; box-shadow: 0 -3px 0 0 var(--ink); }
/* header + HUD */
.scr-head { background: #1E3A63; box-shadow: 0 3px 0 0 var(--ink); position: relative; z-index: 1; }
.scr-head h2 { font-size: 22px; text-shadow: 2px 2px 0 var(--ink); }
.hud { background: #1E3A63; box-shadow: 0 3px 0 0 var(--ink); }
.clock { font-size: 28px; text-shadow: 2px 2px 0 var(--ink); }
.coins { font-size: 24px; text-shadow: 2px 2px 0 var(--ink); }
.pill { box-shadow: var(--frame); padding: 0 7px; }
.meter { height: 12px; background: #0F1A33; box-shadow: var(--frame); }
.meter i { background: repeating-linear-gradient(90deg, var(--sage) 0 10px, #95A487 10px 12px); transition: width .4s steps(8); }
.meter[data-level="mid"] i { background: repeating-linear-gradient(90deg, var(--ochre) 0 10px, #B88A3A 10px 12px); }
.meter[data-level="low"] i, .meter.hit i { background: repeating-linear-gradient(90deg, var(--vermilion) 0 10px, #A63E2E 10px 12px); }
.tray { background: #1E3A63; box-shadow: 0 -3px 0 0 var(--ink); }
.slot { background: #F4EBD6; box-shadow: var(--frame), inset 0 -3px 0 0 #D8C9A4 !important; }
.slot.next { background: #FFF4D8; box-shadow: 0 -3px 0 0 #F2C14E, 0 3px 0 0 #F2C14E, -3px 0 0 0 #F2C14E, 3px 0 0 0 #F2C14E, 0 7px 0 0 var(--ink) !important; }
.slot.hold { background: rgba(241,233,214,.12); box-shadow: 0 -2px 0 0 #A9B4C2, 0 2px 0 0 #A9B4C2, -2px 0 0 0 #A9B4C2, 2px 0 0 0 #A9B4C2 !important; }
.queue .rest .slot { background: #C9CCD3; }
.slot .tag { box-shadow: var(--frame); top: -12px; }
.skill { background: #F4EBD6; }
.skills.inline .skill { box-shadow: var(--frame-drop) !important; }
.sk-ring { background: conic-gradient(rgba(27,35,64,.65) calc(var(--cd) * 360deg), #F2C14E 0); }
.tasks { background: rgba(20,27,58,.88); }
.callout { background: var(--ink); }
.callout.tut { background: #FFF4D8; }
.cursor { box-shadow: 0 -3px 0 0 var(--vermilion), 0 3px 0 0 var(--vermilion), -3px 0 0 0 var(--vermilion), 3px 0 0 0 var(--vermilion); }
/* map chapter cards & day nodes like map.png */
.chapter { background: #F4EBD6; }
.chapter.locked { background: #E2D8C2; }
.ch-no { font-size: 22px; box-shadow: var(--frame), 0 3px 0 0 var(--px-shadow); }
.ch-txt b { font-family: var(--font-px); font-weight: 400; font-size: 18px; }
.ch-stars { font-size: 18px; }
.day-node { background: #EFE5CD; box-shadow: var(--frame), inset 0 -3px 0 0 #D8C9A4 !important; }
.day-node.suggest { background: #E8B54A; box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), 0 6px 0 0 var(--px-shadow) !important; }
.day-node.locked { opacity: .7; background: #E0D9C8; }
.dn-day { font-size: 15px; }
/* title like title.png: full-bleed pixel scene, gods on the rooftop */
.screen-title { background: #141B3A; }
.title-sky { inset: 0; }
.title-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.title-mtn { display: none; }
.title-steam i { border-radius: 0 !important; filter: none; width: 14px; height: 14px; background: rgba(232,230,238,.7); box-shadow: 6px -6px 0 0 rgba(232,230,238,.5), -6px -12px 0 0 rgba(232,230,238,.35); animation-timing-function: steps(14); }
.title-main { justify-content: flex-start; padding-top: 34px; gap: 8px; }
.title-main .kicker { font-size: 15px; color: #F2C14E; text-shadow: 2px 2px 0 var(--ink); }
.title-main .kicker::before, .title-main .kicker::after { content: "＝"; margin: 0 6px; color: #D6A85A; }
.title-sub { font-size: 14px; text-shadow: 2px 2px 0 var(--ink); background: rgba(20,27,58,.55); padding: 4px 8px; }
.title-cast { margin-top: auto; height: 120px; align-items: flex-end; }
.title-cast .cast { width: 96px; height: 104px; }
.title-cast .cast.main { width: 104px; height: 112px; }
.title-actions { background: linear-gradient(180deg, transparent, rgba(20,27,58,.7) 25%); padding-top: 18px; }
.title-actions .btn.ghost { background: #F4EBD6; }
.title-lang { background: #E2D8C2; box-shadow: var(--frame-drop) !important; }
.title-settings, .title-credits, .screen-title .foot-dot { color: #F1E9D6; text-shadow: 0 2px 3px rgba(0, 0, 0, .85); font-weight: 900; }
.title-foot { background: rgba(20,27,58,.85); color: #A9B4C2; }
/* results like results.png */
.screen-results { background: linear-gradient(180deg, rgba(20,27,58,.65), rgba(20,27,58,.92) 45%); }
.res-card { background: #F4EBD6; }
.res-card h1 { font-size: 28px; color: #D9453A; text-shadow: 2px 2px 0 var(--ink); }
.res-coins { font-size: 34px; }
.stamp-seal { border-radius: 50% !important; }
.task-mark { box-shadow: var(--frame); }
.task.t-done .task-mark { background: #4F8A4B; }
.task.t-failed .task-mark { background: #D9453A; }
/* modals, story */
.modal { background: rgba(14,20,44,.7); }
.modal-card { background: #F4EBD6; }
.story-modal { background: rgba(14,20,44,.92); }
.story-modal .modal-card { background: #F4EBD6; }
.story-god { image-rendering: pixelated; }
.story-text { font-size: 18px; }
.story-dots i { width: 10px; height: 10px; border-radius: 0 !important; }
.switch { border-radius: 0; box-shadow: var(--frame); }
.switch::after { border-radius: 0; box-shadow: var(--frame); }
.panel-head { background: #1E3A63; box-shadow: 0 3px 0 0 var(--ink); }
.pill { padding: 2px 6px 1px; line-height: 1.2; font-size: 15px; }
.btn, .scr-head h2, .ch-txt b, .dn-day, .res-card h1, .clock, .coins, .modal-title, .noon-opt b { -webkit-text-stroke: .6px currentColor; }
.clock .pill, .btn .coin, .btn small { -webkit-text-stroke: 0; }
/* v2.0 HUD (GDD §14.5): the income goal bar shares the satisfaction row; hidden for the old v1.5 days */
.goal-only { display: none; }
.hud.v2 .goal-only { display: block; }
.hud.v2 .bars { grid-template-columns: auto 1fr auto auto 56px auto; gap: 6px; }
.hud.v2 .bars > span:not(.coin):not(.num) { font-size: 11px; opacity: .85; }
.hud.v2 #goalNum { min-width: 46px; text-align: left; }
/* v2.2: no satisfaction for now — the goal bar takes the whole row */
.hud.v2 .sat-part { display: none !important; }
.hud.v2 .bars { grid-template-columns: auto 1fr auto; }
.meter.gold i { background: repeating-linear-gradient(90deg, var(--ochre) 0 10px, #B88A3A 10px 12px); }
.meter.gold.done i { background: repeating-linear-gradient(90deg, #FFD76A 0 10px, #E8B84A 10px 12px); }
.meter.gold.done { animation: goalpulse 1s steps(2) 3; }
@keyframes goalpulse { 50% { box-shadow: 0 0 0 3px #FFD76A; } }
/* v2.0: fast-forward button over the sky band, smash skill mode */
.speed-btn { pointer-events: auto; position: absolute; top: 6px; right: 6px; z-index: 3; min-width: 46px; height: 30px; padding: 0 8px; border: 0; background: var(--paper); color: var(--ink); font: 400 17px var(--font-display); box-shadow: 0 0 0 2px var(--ink), 0 3px 0 2px var(--ink); cursor: pointer; touch-action: manipulation; }
.speed-btn[data-speed="2"] { background: #F2C14E; }
.speed-btn[data-speed="3"] { background: var(--vermilion); color: var(--paper); }
.speed-btn:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }
.skill.smash.on { box-shadow: 0 0 0 3px #F2C14E, 0 0 0 5px var(--ink); }
.screen-play.smash-mode #game { cursor: crosshair; }
/* ================================================================ v2.1 秘技 / 過版 (GDD §14.11) */
/* confetti */
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; }
.confetti i { position: absolute; top: -16px; animation: cfFall var(--d) linear var(--w) forwards; image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(30,42,58,.5); }
.confetti.burst i { top: 46%; animation: cfBurst var(--d) cubic-bezier(.2,.7,.4,1) var(--w) forwards; }
@keyframes cfFall { to { transform: translate(var(--dx), 110vh) rotate(var(--r)); } }
@keyframes cfBurst { 0% { transform: translate(0,0) scale(.4); } 30% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) * .3)); } 100% { transform: translate(calc(var(--dx) * 1.3), 70vh) rotate(var(--r)); opacity: .9; } }
/* fighting-game cut-in */
.cutin { position: absolute; inset: 0; z-index: 70; pointer-events: auto; overflow: hidden; --c1: var(--vermilion); --c2: #FFE3A3; }
.cutin.ci-gold { --c1: #C88A1E; --c2: #FFF2B0; }
.cutin.ci-dragon { --c1: var(--cobalt); --c2: #DDEBFF; }
.ci-dim { position: absolute; inset: 0; background: rgba(10,16,28,.55); animation: ciDim 1.15s ease-out forwards; }
.ci-band { position: absolute; left: -10%; right: -10%; top: 34%; height: 150px; background: var(--c1); transform: skewY(-8deg) translateX(-120%);
box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink), 0 -11px 0 var(--c2), 0 11px 0 var(--c2); animation: ciBand 1.15s cubic-bezier(.2,.9,.3,1) forwards; overflow: hidden; }
.ci-lines { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.35) 34px 38px, transparent 38px 70px, rgba(255,255,255,.18) 70px 72px);
animation: ciLines .25s linear infinite; }
.ci-oni { position: absolute; right: 13%; bottom: -6px; width: 150px; height: 150px; transform: skewY(8deg) translateX(160%); animation: ciOni 1.15s cubic-bezier(.2,.9,.3,1) forwards; }
.ci-oni img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(4px 0 0 var(--ink)) drop-shadow(-4px 0 0 var(--ink)) drop-shadow(0 4px 0 var(--ink)); }
.ci-txt { position: absolute; left: 14%; top: 50%; transform: skewY(8deg) translateY(-50%) scale(2.6); opacity: 0; color: #fff; animation: ciTxt 1.15s ease-out forwards; display: grid; gap: 2px; }
.ci-txt small { font: 900 14px var(--font-ui); letter-spacing: .3em; color: var(--c2); }
.ci-txt b { font: 400 34px/1.05 var(--font-display); text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); max-width: 230px; }
:lang(en) .ci-txt b, :lang(ja) .ci-txt b { font-size: 28px; }
.ci-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: ciFlash 1.15s linear forwards; }
@keyframes ciDim { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ciBand { 0% { transform: skewY(-8deg) translateX(-120%); } 22%, 82% { transform: skewY(-8deg) translateX(0); } 100% { transform: skewY(-8deg) translateX(120%); } }
@keyframes ciOni { 0%, 10% { transform: skewY(8deg) translateX(160%); } 32% { transform: skewY(8deg) translateX(-6%) scale(1.08); } 40%, 82% { transform: skewY(8deg) translateX(0); } 100% { transform: skewY(8deg) translateX(-260%); } }
@keyframes ciTxt { 0%, 26% { opacity: 0; transform: skewY(8deg) translateY(-50%) scale(2.6); } 38% { opacity: 1; transform: skewY(8deg) translateY(-50%) scale(.92); } 44%, 82% { opacity: 1; transform: skewY(8deg) translateY(-50%) scale(1); } 100% { opacity: 0; transform: skewY(8deg) translateY(-50%) scale(1) translateX(-60%); } }
@keyframes ciLines { to { background-position: -72px 0; } }
@keyframes ciFlash { 0%, 80% { opacity: 0; } 86% { opacity: .95; } 100% { opacity: 0; } }
/* day-start banner */
.stage-banner { position: absolute; inset: 0; z-index: 55; display: grid; place-items: center; pointer-events: none; }
.sb-band { width: 100%; background: var(--ink); color: var(--paper); text-align: center; padding: 14px 10px 16px; display: grid; gap: 4px;
box-shadow: 0 -4px 0 var(--ochre), 0 4px 0 var(--ochre); animation: sbIn 1.5s cubic-bezier(.2,.9,.3,1) forwards; }
.sb-band small { font: 900 15px var(--font-ui); letter-spacing: .12em; color: var(--ochre); }
.sb-band em { font: 700 13px var(--font-ui); font-style: normal; color: var(--muted-on-night); }
.sb-band b { font: 400 48px/1.1 var(--font-display); color: #fff; text-shadow: 4px 4px 0 var(--vermilion); animation: sbGo 1.5s ease-out forwards; }
@keyframes sbIn { 0% { transform: scaleY(0); opacity: 0; } 12%, 82% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0); opacity: 0; } }
@keyframes sbGo { 0%, 20% { transform: scale(3); opacity: 0; } 34% { transform: scale(.9); opacity: 1; } 40%, 100% { transform: scale(1); opacity: 1; } }
/* mid-day goal stamp */
.goal-stamp { position: absolute; left: 0; right: 0; top: 26%; z-index: 55; display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.gs-seal { background: var(--ochre); color: var(--ink); padding: 12px 22px; box-shadow: 0 0 0 4px var(--ink), 0 0 0 8px #FFF2B0, 0 0 0 11px var(--ink); transform: scale(3) rotate(-8deg); opacity: 0; animation: gsIn 1.9s cubic-bezier(.3,1.5,.5,1) forwards; }
.gs-seal b { font: 400 34px var(--font-display); }
.gs-sub { background: var(--ink); color: #FFF2B0; font: 900 14px var(--font-ui); padding: 4px 12px; opacity: 0; animation: gsSub 1.9s ease-out forwards; }
@keyframes gsIn { 0% { transform: scale(3) rotate(-8deg); opacity: 0; } 18% { transform: scale(.94) rotate(-4deg); opacity: 1; } 24%, 85% { transform: scale(1) rotate(-4deg); opacity: 1; } 100% { transform: scale(1.1) rotate(-4deg); opacity: 0; } }
@keyframes gsSub { 0%, 25% { opacity: 0; transform: translateY(8px); } 35%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* day-clear seal */
.clear-stamp { position: absolute; inset: 0; z-index: 56; display: grid; place-content: center; justify-items: center; gap: 12px; pointer-events: none; background: rgba(10,16,28,.0); animation: csDim 2.3s ease-out forwards; }
.cs-top { background: var(--ink); color: var(--paper); font: 900 16px var(--font-ui); letter-spacing: .2em; padding: 6px 16px; animation: csTop 2.3s ease-out forwards; }
.cs-seal { width: 210px; height: 210px; border-radius: 50% !important; display: grid; place-items: center; background: rgba(241,233,214,.92); color: var(--vermilion);
box-shadow: inset 0 0 0 8px var(--vermilion), inset 0 0 0 13px rgba(241,233,214,.92), inset 0 0 0 17px var(--vermilion), 0 6px 0 var(--ink); transform: scale(3.2) rotate(-14deg); opacity: 0; animation: csSeal 2.3s cubic-bezier(.3,1.4,.5,1) forwards; }
.cs-seal b { font: 400 44px/1 var(--font-display); text-shadow: 2px 2px 0 rgba(30,42,58,.25); }
.cs-perfect .cs-seal { color: #B8860B; box-shadow: inset 0 0 0 8px #D6A85A, inset 0 0 0 13px #FFF7DA, inset 0 0 0 17px #D6A85A, 0 6px 0 var(--ink); background: #FFF7DA; }
.cs-early .cs-seal { color: var(--prussian); box-shadow: inset 0 0 0 8px var(--prussian), inset 0 0 0 13px rgba(241,233,214,.92), inset 0 0 0 17px var(--prussian), 0 6px 0 var(--ink); }
.cs-early .cs-seal b { font-size: 34px; }
.cs-sub { color: var(--paper); font: 900 15px var(--font-ui); text-shadow: 0 2px 0 var(--ink); }
@keyframes csDim { 0% { background: rgba(10,16,28,0); } 20%, 85% { background: rgba(10,16,28,.45); } 100% { background: rgba(10,16,28,.2); } }
@keyframes csTop { 0% { opacity: 0; transform: translateY(-10px); } 12%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes csSeal { 0%, 20% { transform: scale(3.2) rotate(-14deg); opacity: 0; } 30% { transform: scale(.92) rotate(-10deg); opacity: 1; } 36%, 90% { transform: scale(1) rotate(-10deg); opacity: 1; } 100% { transform: scale(1.05) rotate(-10deg); opacity: 0; } }
/* chapter clear */
.chapter-clear { position: absolute; inset: 0; z-index: 65; display: grid; place-items: center; background: rgba(10,16,28,.82); overflow: hidden; }
.cc-rays { position: absolute; left: 50%; top: 40%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50% !important;
background: repeating-conic-gradient(rgba(214,168,90,.28) 0 10deg, transparent 10deg 20deg); animation: ccSpin 14s linear infinite; }
@keyframes ccSpin { to { transform: rotate(360deg); } }
.cc-card { position: relative; margin: 16px; background: var(--paper); padding: 18px 16px; display: grid; gap: 12px; text-align: center; justify-items: center;
box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), 0 8px 0 0 rgba(0,0,0,.3); animation: rise .45s cubic-bezier(.2,1.4,.4,1); }
.cc-card h1 { font: 400 32px/1.15 var(--font-display); color: var(--vermilion); text-shadow: 3px 3px 0 var(--ink); }
.cc-oni { display: flex; gap: 18px; }
.cc-g { width: 76px; height: 76px; animation: ccHop .6s ease-in-out infinite alternate; }
.cc-g.b { animation-delay: .3s; }
.cc-g img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
@keyframes ccHop { from { transform: translateY(0); } to { transform: translateY(-14px); } }
.cc-stamps { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cc-seal.press { animation-delay: calc(.5s + var(--i) * .25s); }
.cc-next { display: grid; gap: 2px; background: var(--ink); color: var(--paper); padding: 8px 14px; animation: ccNext 1.6s ease-out; }
.cc-next small { color: var(--ochre); font-weight: 900; font-size: 12px; letter-spacing: .1em; }
.cc-next b { font: 400 20px var(--font-display); }
@keyframes ccNext { 0%, 60% { opacity: 0; transform: scale(.6); } 80% { opacity: 1; transform: scale(1.1); } 100% { transform: none; } }
.cc-go { width: 100%; }
/* HUD 秘技 button + fever */
.skill.hs { background: var(--ink); color: var(--paper); }
.skill.hs .hs-ring { --k0: 0; --k1: 0; --k2: 0; width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; position: relative;
background: conic-gradient(var(--ochre) 0 calc(var(--k0) * 120deg), rgba(241,233,214,.2) 0 120deg, var(--ochre) 120deg calc(120deg + var(--k1) * 120deg), rgba(241,233,214,.2) 0 240deg, var(--ochre) 240deg calc(240deg + var(--k2) * 120deg), rgba(241,233,214,.2) 0);
border-radius: 50% !important; }
.skill.hs .hs-ring::after { content: ""; position: absolute; inset: 5px; background: var(--ink); border-radius: 50% !important; }
/* v2.1.1: three clear segments (gaps), a bar row under the ring, gold face + ×N badge once ONE bar is full */
.skill.hs .hs-ring { --on: var(--ochre); --off: rgba(241,233,214,.22);
background: conic-gradient(var(--on) 0 calc(var(--k0) * 114deg), var(--off) 0 114deg, var(--ink) 0 120deg,
var(--on) 120deg calc(120deg + var(--k1) * 114deg), var(--off) 0 234deg, var(--ink) 0 240deg,
var(--on) 240deg calc(240deg + var(--k2) * 114deg), var(--off) 0 354deg, var(--ink) 0); }
.skill.hs .hs-bars { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); display: flex; gap: 2px; z-index: 2; pointer-events: none; }
.skill.hs .hs-bars i { width: 10px; height: 5px; background: linear-gradient(90deg, #FFF2B0 calc(var(--f, 0) * 100%), rgba(241,233,214,.25) 0); box-shadow: 0 0 0 1px var(--ink); }
.skills:not(.inline) .skill.hs .hs-bars { position: static; transform: none; }
.skill.hs.ready { background: #D6A85A; color: var(--ink); }
.skill.hs.ready .hs-ring::after { background: #FFF2B0; }
.skill.hs.ready .hs-ring b { color: var(--vermilion); }
.skill.hs.ready .hs-ring { --on: var(--vermilion); --off: rgba(30,42,58,.25); }
.skill.hs .hs-n { background: var(--vermilion) !important; color: #fff !important; }
.skill.hs .hs-ring b { position: relative; z-index: 1; font: 400 16px var(--font-display); color: var(--paper); }
.skill.hs.ready { animation: hsReady 1s ease-in-out infinite; }
.skill.hs.ready .hs-ring b { color: var(--ochre); }
@keyframes hsReady { 0%, 100% { box-shadow: 0 0 0 0 rgba(214,168,90,.0); transform: none; } 50% { box-shadow: 0 0 0 4px rgba(214,168,90,.8); transform: translateY(-2px); } }
.skills.inline .skill.hs .hs-ring { width: 48px; height: 48px; }
.fever-badge { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); z-index: 6; background: #D6A85A; color: var(--ink); font: 400 15px var(--font-display); padding: 3px 12px; box-shadow: 0 0 0 3px var(--ink); pointer-events: none; animation: feverPulse .5s ease-in-out infinite alternate; }
.fever-badge i { display: block; height: 4px; margin-top: 2px; background: var(--ink); transform-origin: left; }
@keyframes feverPulse { to { transform: translateX(-50%) scale(1.07); } }
.fever #board { box-shadow: inset 0 0 0 4px #D6A85A, inset 0 0 22px rgba(214,168,90,.6); }
/* 秘技 picker */
.hs-picker { position: absolute; inset: 0; z-index: 50; }
.hs-scrim { position: absolute; inset: 0; background: rgba(10,16,28,.5); }
.hs-panel { position: absolute; left: 10px; right: 10px; bottom: var(--bottom, 120px); background: var(--paper); padding: 10px; display: grid; gap: 8px; animation: rise .2s ease-out;
box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), 0 7px 0 0 rgba(0,0,0,.3); }
.hs-title { font: 900 13px var(--font-ui); color: var(--muted); }
.hs-opt { display: flex; align-items: center; gap: 10px; text-align: left; border: 0; padding: 8px 10px; background: var(--vermilion); color: #fff; box-shadow: inset 0 0 0 3px var(--ink), 0 3px 0 var(--ink); }
.hs-opt.hs-gold { background: #C88A1E; } .hs-opt.hs-dragon { background: var(--cobalt); }
.hs-opt.off { background: var(--paper-deep); color: var(--muted); box-shadow: inset 0 0 0 2px rgba(30,42,58,.3); }
.hs-opt:active:not(.off) { transform: translateY(2px); box-shadow: inset 0 0 0 3px var(--ink), 0 1px 0 var(--ink); }
.hs-pips { display: grid; gap: 3px; flex: 0 0 auto; }
.hs-pips i { width: 12px; height: 8px; background: rgba(30,42,58,.25); box-shadow: 0 0 0 1px var(--ink); }
.hs-pips i.on { background: #FFF2B0; }
.hs-txt { display: grid; gap: 2px; min-width: 0; }
.hs-txt b { font: 400 18px var(--font-display); }
.hs-txt small { font-size: 12px; font-weight: 700; line-height: 1.35; opacity: .95; }
.hs-cancel { justify-self: stretch; }
/* results v2.1: rank, journey track, ki carry */
.res-rank { font: 400 15px var(--font-display); color: var(--ink); background: var(--ochre); justify-self: center; padding: 3px 14px; box-shadow: 0 0 0 3px var(--ink); animation: starIn .45s cubic-bezier(.2,1.6,.4,1); }
.res-star.on .big-star { animation: pxStar .5s steps(5) both, starSlam .45s cubic-bezier(.2,1.8,.4,1); }
@keyframes starSlam { 0% { transform: scale(2.6); } 60% { transform: scale(.85); } 100% { transform: scale(1); } }
.res-card.shake { animation: resShake .25s linear; }
@keyframes resShake { 0%, 100% { transform: none; } 25% { transform: translate(-4px, 2px); } 50% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, -2px); } }
.res-track { display: grid; gap: 4px; }
.res-track > small { font-size: 12px; color: var(--muted); font-weight: 700; text-align: left; }
.trk { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.trk i { flex: 1 1 0; height: 12px; background: var(--paper-deep); box-shadow: 0 0 0 2px rgba(30,42,58,.35); position: relative; }
.trk i.done { background: var(--sage-dark); }
.trk i.star3 { background: var(--ochre); }
.trk i.cur { background: var(--vermilion); box-shadow: 0 0 0 2px var(--ink); }
.trk i.nxt { animation: trkNext .7s ease-in-out infinite alternate; }
.trk i.nxt::after { content: attr(data-l); position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font: 400 10px var(--font-display); color: var(--vermilion); }
.trk i.ch { margin-left: 6px; }
@keyframes trkNext { to { background: rgba(217,85,63,.45); } }
.res-ki { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); flex-wrap: wrap; }
.res-ki .hs-pips { display: flex; }
.res-dojo { background: var(--ink); color: #FFF2B0; font-weight: 900; font-size: 13px; padding: 6px 10px; border: 0; animation: hsReady 1s ease-in-out infinite; }
/* 秘技道場 */
.dojo-sec { font: 900 13px var(--font-ui); color: var(--muted-on-night); margin: 10px 0 4px; }
.dojo-card { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; background: var(--paper); padding: 10px; margin-bottom: 8px;
box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); }
.dojo-card.owned { background: #FFF7DA; }
.dojo-prev { width: 64px; height: 64px; position: relative; overflow: hidden; background: var(--night); box-shadow: inset 0 0 0 2px var(--ink); }
.dojo-prev i { position: absolute; display: block; }
.dp-geyser i { bottom: 0; width: 10px; background: #fff; animation: dpGeyser 1.2s ease-out infinite; }
.dp-geyser i:nth-child(1) { left: 10px; animation-delay: 0s; } .dp-geyser i:nth-child(2) { left: 27px; animation-delay: .2s; } .dp-geyser i:nth-child(3) { left: 44px; animation-delay: .4s; }
@keyframes dpGeyser { 0% { height: 0; opacity: 1; } 60% { height: 60px; opacity: 1; } 100% { height: 64px; opacity: 0; } }
.dp-gold i { width: 8px; height: 8px; background: #D6A85A; box-shadow: 0 0 0 1px var(--ink); top: -10px; animation: dpGold 1s linear infinite; }
.dp-gold i:nth-child(1) { left: 8px; } .dp-gold i:nth-child(2) { left: 28px; animation-delay: .35s; } .dp-gold i:nth-child(3) { left: 46px; animation-delay: .7s; }
@keyframes dpGold { to { transform: translateY(80px); } }
.dp-dragon i { width: 12px; height: 12px; background: #DDEBFF; box-shadow: 0 0 0 1px var(--cobalt); top: 26px; left: -14px; animation: dpDragon 1.4s linear infinite; }
.dp-dragon i:nth-child(1) { width: 16px; height: 16px; background: #fff; } .dp-dragon i:nth-child(2) { animation-delay: .12s; } .dp-dragon i:nth-child(3) { animation-delay: .24s; } .dp-dragon i:nth-child(4) { animation-delay: .36s; }
@keyframes dpDragon { 0% { transform: translate(0, 0); } 25% { transform: translate(22px, -16px); } 50% { transform: translate(44px, 0); } 75% { transform: translate(66px, 16px); } 100% { transform: translate(92px, 0); } }
.dp-jar i { left: 16px; bottom: 6px; width: 32px; height: 40px; background: var(--sage-dark); box-shadow: 0 0 0 2px var(--ink); }
.dp-jar i:nth-child(2) { left: 22px; bottom: 10px; width: 20px; height: 8px; background: #D6A85A; animation: dpFill 1.6s steps(4) infinite; transform-origin: bottom; }
@keyframes dpFill { from { height: 4px; } to { height: 30px; } }
.dp-amp i { left: 28px; bottom: 0; width: 8px; height: 30px; background: #D6A85A; animation: dpAmp .5s ease-in-out infinite alternate; }
.dp-amp i:nth-child(2) { left: 12px; height: 20px; animation-delay: .15s; } .dp-amp i:nth-child(3) { left: 44px; height: 24px; animation-delay: .3s; }
@keyframes dpAmp { to { height: 56px; } }
.dojo-txt { display: grid; gap: 2px; min-width: 0; }
.dojo-txt b { font: 400 17px var(--font-display); }
.dojo-txt small { font-size: 12px; line-height: 1.35; color: var(--muted); font-weight: 700; }
.dojo-card .lv { display: flex; gap: 3px; } .dojo-card .lv i { width: 12px; height: 6px; background: rgba(30,42,58,.2); } .dojo-card .lv i.on { background: var(--ochre); }
.dojo-card .maxed { font-weight: 900; font-size: 12px; color: var(--sage-dark); }
.dojo-card.learned { animation: starIn .5s cubic-bezier(.2,1.6,.4,1); }
/* day-1 coach */
.coach { position: absolute; inset: 0; z-index: 45; pointer-events: none; }
.coach.block { pointer-events: auto; }
.coach-hole { position: absolute; box-shadow: 0 0 0 9999px rgba(10,16,28,.62); border-radius: 8px !important; transition: all .3s ease; outline: 3px solid var(--ochre); outline-offset: 2px; animation: coachPulse 1s ease-in-out infinite alternate; }
.coach-hole.none { box-shadow: 0 0 0 9999px rgba(10,16,28,.55); outline: 0; width: 0 !important; height: 0 !important; }
@keyframes coachPulse { to { outline-offset: 6px; } }
.coach-finger { position: absolute; width: 34px; height: 34px; font-size: 30px; line-height: 1; transition: left .3s, top .3s; animation: coachTap .8s ease-in-out infinite; filter: drop-shadow(2px 2px 0 var(--ink)); pointer-events: none; }
.coach-finger.hold { animation: coachHold 1.2s ease-in-out infinite; }
.coach-finger.hold::after { content: attr(data-hold); position: absolute; left: 28px; top: 2px; white-space: nowrap; font: 900 11px var(--font-ui); background: var(--vermilion); color: var(--paper); padding: 2px 7px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--ink), 0 2px 0 var(--ink); }
@keyframes coachTap { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-4px, -8px); } }
@keyframes coachHold { 0%, 15% { transform: translate(0, -10px) scale(1.06); } 30%, 82% { transform: translate(-2px, 2px) scale(.88); } 100% { transform: translate(0, -10px) scale(1.06); } }
.coach-bubble { position: absolute; left: 12px; right: 12px; display: flex; gap: 10px; align-items: flex-start; background: var(--paper); padding: 10px 12px; pointer-events: auto;
box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), 0 7px 0 0 rgba(0,0,0,.3); animation: rise .25s ease-out; transition: top .3s; }
.coach-bubble .g-img { width: 48px; height: 48px; flex: 0 0 auto; }
.coach-bubble .g-img img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.coach-bubble p { font-weight: 700; font-size: 14px; line-height: 1.5; color: var(--ink); }
.coach-bubble .cb-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 8px; }
.coach-bubble .cb-tap { font: 400 12px var(--font-display); color: var(--vermilion); animation: feverPulse .6s ease-in-out infinite alternate; }
.coach-bubble .cb-skip { border: 0; background: none; font-size: 12px; font-weight: 700; color: var(--muted); text-decoration: underline; padding: 4px; }
.coach-bubble .cb-n { font: 400 11px var(--font-display); color: var(--muted); }
.dojo-card .maxed.locked { color: var(--muted); }
.res-newmove { display: grid; gap: 2px; background: var(--vermilion); color: #fff; padding: 8px 12px; box-shadow: 0 0 0 3px var(--ink); animation: starIn .5s cubic-bezier(.2,1.6,.4,1); }
.res-newmove small { font-weight: 900; font-size: 12px; color: #FFF2B0; letter-spacing: .1em; }
.res-newmove b { font: 400 22px var(--font-display); }
.res-newmove span { font-size: 12px; font-weight: 700; line-height: 1.4; }
/* v2.1.3 picker states: ready / short (charging) / locked must never look alike */
.hs-opt { position: relative; }
.hs-opt.short { opacity: .62; filter: saturate(.7); }
.hs-opt.short.off { background: var(--vermilion); color: #fff; box-shadow: inset 0 0 0 3px var(--ink); }
.hs-opt.hs-gold.short.off { background: #C88A1E; } .hs-opt.hs-dragon.short.off { background: var(--cobalt); }
.hs-opt.locked.off { background: #3A4250; color: #C9CED6; box-shadow: inset 0 0 0 2px #1B2340; background-image: repeating-linear-gradient(135deg, transparent 0 10px, rgba(0,0,0,.18) 10px 20px); }
.hs-opt.locked .hs-txt small { color: #FFD27A; }
.hs-lock { width: 28px; flex: 0 0 auto; font-size: 22px; text-align: center; }
.hs-cost { display: grid; gap: 3px; flex: 0 0 auto; width: 14px; }
.hs-cost i { width: 14px; height: 9px; background: rgba(0,0,0,.3); box-shadow: 0 0 0 1px var(--ink); }
.hs-cost i.on { background: #FFF2B0; }
.hs-prog { display: block; height: 6px; margin-top: 3px; background: rgba(0,0,0,.3); box-shadow: 0 0 0 1px var(--ink); }
.hs-prog i { display: block; height: 100%; background: #FFF2B0; }
.hs-go { margin-left: auto; flex: 0 0 auto; background: #FFF2B0; color: var(--ink); font: 400 15px var(--font-display); padding: 4px 10px; box-shadow: 0 0 0 2px var(--ink); animation: hsGo .6s ease-in-out infinite alternate; }
@keyframes hsGo { to { transform: scale(1.1); } }
.hs-opt.ready { box-shadow: inset 0 0 0 3px var(--ink), 0 3px 0 var(--ink), 0 0 0 3px #FFF2B0; }
/* v2.1.4 秘技 at a glance: mini animation + icon chips */
.hs-pic { position: relative; flex: 0 0 auto; width: 58px; height: 58px; }
.hs-pic .dojo-prev { width: 58px; height: 58px; }
.hs-pic .hs-cost { position: absolute; left: 3px; right: 3px; bottom: 3px; display: flex; gap: 2px; width: auto; }
.hs-pic .hs-cost i { flex: 1; height: 6px; width: auto; }
.hs-lockbadge { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; background: rgba(20,26,40,.35); }
.hs-opt.locked .dojo-prev { filter: grayscale(.6) brightness(.85); }
.hs-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.hs-chip { display: inline-flex; align-items: center; gap: 3px; background: rgba(0,0,0,.22); padding: 2px 6px; box-shadow: 0 0 0 1px rgba(30,42,58,.5); }
.hs-chip i { font-style: normal; font-size: 14px; line-height: 1; }
.hs-chip b { font: 900 12px var(--font-ui); white-space: nowrap; }
.hs-opt .hs-txt b { font-size: 17px; }
.hs-state { font-size: 12px; font-weight: 900; color: #FFD27A; }
.hs-prog { position: relative; height: 12px; }
.hs-prog em { position: absolute; right: 4px; top: -1px; font: 400 11px var(--font-display); font-style: normal; color: var(--ink); }
.dojo-card .hs-chip { background: var(--paper-deep); color: var(--ink); }
.dojo-card .hs-chip b { font-size: 11px; }
.res-newmove { grid-template-columns: auto 1fr; align-items: center; gap: 10px; text-align: left; }
.res-newmove > div { display: grid; gap: 4px; }
.res-newmove .dojo-prev.big { width: 72px; height: 72px; }
.res-newmove .hs-chip { background: rgba(0,0,0,.25); }
/* gold preview: also a "×3" coin stack so the money effect reads instantly */
.dp-gold::after { content: "×3"; position: absolute; right: 3px; top: 2px; font: 400 13px var(--font-display); color: #FFF2B0; text-shadow: 1px 1px 0 var(--ink); }
.dp-geyser::after { content: "⚡"; position: absolute; right: 3px; top: 2px; font-size: 13px; }
.dp-dragon::after { content: "💥"; position: absolute; right: 3px; bottom: 3px; font-size: 13px; }
.dojo-prev, .hs-pic { display: block; }
.hs-opt { align-items: center; }
.hs-chip { padding: 2px 5px; }
.hs-chip i { font-size: 13px; }
/* v2.2 eruption direction arrows */
.dir-pick { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.dp-ring { position: absolute; box-shadow: inset 0 0 0 3px #FFF2B0; animation: coachPulse .6s ease-in-out infinite alternate; outline: 3px solid var(--ochre); }
.dp-arrow { position: absolute; pointer-events: auto; border: 0; padding: 0; background: rgba(20,38,61,.55); display: grid; place-items: center; touch-action: manipulation; }
.dp-arrow b { font: 400 30px var(--font-display); color: #FFF2B0; text-shadow: 2px 2px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); animation: dpNudge .5s ease-in-out infinite alternate; }
.dp-arrow.link { background: rgba(60,160,90,.6); box-shadow: inset 0 0 0 3px #9BE59B; }
.dp-arrow.link b { color: #D9FFD0; font-size: 36px; }
.dp-arrow.dN b { --nx: 0; --ny: -4px; } .dp-arrow.dS b { --nx: 0; --ny: 4px; } .dp-arrow.dE b { --nx: 4px; --ny: 0; } .dp-arrow.dW b { --nx: -4px; --ny: 0; }
@keyframes dpNudge { to { transform: translate(var(--nx), var(--ny)); } }
.dp-arrow:active b { transform: scale(.85); }
/* v2.2 game feel: flying coins / ki orbs, catch bump, 秘技 ready burst */
.fly { position: absolute; z-index: 40; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; transition: transform .55s cubic-bezier(.5,-0.3,.7,1), opacity .55s; }
.fly-coin { background: #E8B84A; box-shadow: 0 0 0 2px var(--ink), inset -3px -3px 0 #B8862A, inset 2px 2px 0 #FFF2B0; border-radius: 50% !important; }
.fly-ki { width: 12px; height: 12px; background: #FFF2B0; box-shadow: 0 0 0 2px #D9553F, 0 0 10px 3px rgba(255,210,122,.9); border-radius: 50% !important; }
.catch { animation: catchPop .25s ease-out; }
@keyframes catchPop { 50% { transform: scale(1.25); } }
.skill.hs.hs-burst { animation: hsBurst .7s cubic-bezier(.2,1.6,.4,1); }
.skill.hs.hs-burst::after { content: ""; position: absolute; inset: -6px; border-radius: 50% !important; box-shadow: 0 0 0 4px #FFF2B0, 0 0 0 9px rgba(217,85,63,.7); animation: hsRing .7s ease-out forwards; pointer-events: none; }
@keyframes hsBurst { 0% { transform: scale(1); } 30% { transform: scale(1.45) rotate(-8deg); } 60% { transform: scale(.95) rotate(4deg); } 100% { transform: none; } }
@keyframes hsRing { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.ki-ready { position: absolute; left: 50%; top: 42%; z-index: 52; pointer-events: none; transform: translate(-50%, -50%); animation: kiReady 1.5s cubic-bezier(.3,1.2,.5,1) forwards; }
.ki-ready b { display: block; white-space: nowrap; background: var(--vermilion); color: #FFF2B0; font: 400 26px var(--font-display); padding: 8px 18px; box-shadow: 0 0 0 4px var(--ink), 0 0 0 8px #FFF2B0, 0 0 0 11px var(--ink); text-shadow: 2px 2px 0 var(--ink); }
@keyframes kiReady {
0% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
15% { transform: translate(-50%, -50%) scale(.92); opacity: 1; }
22%, 60% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.2); opacity: 0; }
}
.res-newmove.reveal { animation: nmReveal .9s cubic-bezier(.2,1.5,.4,1); }
.res-newmove.reveal::after { content: ""; position: absolute; inset: 0; background: #fff; animation: nmFlash .6s ease-out forwards; pointer-events: none; }
.res-newmove { position: relative; overflow: hidden; }
@keyframes nmReveal { 0% { transform: scale(.6) rotate(-4deg); } 40% { transform: scale(1.12) rotate(2deg); } 100% { transform: none; } }
@keyframes nmFlash { from { opacity: .9; } to { opacity: 0; } }
/* v2.2 area colour */
.sb-band { background: var(--area, var(--ink)); box-shadow: 0 -4px 0 var(--ink), 0 4px 0 var(--ink), 0 -8px 0 #FFF2B0, 0 8px 0 #FFF2B0; }
.sb-band small { color: #FFF2B0; }
.sb-band em { color: #fff; opacity: .9; }
.sb-band b { text-shadow: 4px 4px 0 var(--ink); }
.screen-play .hud { box-shadow: inset 0 -4px 0 var(--area, transparent); }
.screen-play .board { background: var(--area-ground, transparent); }
/* v2.2.2 type: pixel digits + one bold Chinese face (no mixed fallback fonts inside a word) */
:root { --font-ui: "Noto Sans TC", "Zen Maru Gothic", "PingFang HK", "Hiragino Maru Gothic ProN", sans-serif; }
body { font-synthesis: none; }
.logo, .clock, .coins, .pill, .scr-head h2, .panel-head h2, .kicker, .btn, .day-node, .ch-no, .ch-stars, .head-stat, .bank,
.res-card h1, .res-coins, .res-star small, .tag, .badge, .nav-btn, .num, .task-val, .ess-txt b, .goal-n, .modal-title,
.dc-tap, .story-actions .btn, .noon-opt b, .shop-txt b, .seg-btn, .slot .tag, .callout.phase, .qte b, .tasks-star, .chip-task small,
.w-num, .w-name, .w-mtn, .w-sea, .dn-day, .lv, .maxed, .skill .cd, .vent-n, .bars > span:first-child, .place { font-weight: 900; }
.hud .place { letter-spacing: .04em; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.callout { font-weight: 900; letter-spacing: .03em; }
.hs-txt b, .dojo-txt b, .cc-card h1, .ci-txt b, .sb-band b, .gs-seal b, .cs-seal b, .ki-ready b, .res-newmove b { font-family: "Noto Sans TC", var(--font-display); font-weight: 900; }
/* v2.2.2 dojo cards: never wider than the screen; names and chips wrap */
.dojo-card { grid-template-columns: 64px minmax(0, 1fr) auto; }
.dojo-txt b { white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
.dojo-txt small { display: block; }
.dojo-card .hs-chips { margin-top: 2px; }
.dojo-card .hs-chip { max-width: 100%; }
.dojo-card .hs-chip b { white-space: normal; }
.shop-list { overflow-x: hidden; }
/* Codex skill icons (art-v22/icon_*.png) replace the CSS previews when present */
.skill-icon { display: block; width: 64px; height: 64px; image-rendering: pixelated; }
.hs-pic .skill-icon { width: 58px; height: 58px; }
.res-newmove .skill-icon { width: 72px; height: 72px; }
.hs-opt.locked .skill-icon { filter: grayscale(.6) brightness(.85); }
.dojo-card .maxed { max-width: 74px; text-align: center; font-size: 11px; line-height: 1.3; white-space: normal; }
/* ---------------------------------------------------------------- 三景 demo: stage list + end screen (src/demo/flow.js) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* ARUO brand header link & logo */
.aruo-brand-link { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: inherit;
padding: 3px 8px; border-radius: 99px; background: rgba(241, 233, 214, .92);
box-shadow: inset 0 0 0 1.5px var(--ink), 0 2px 0 rgba(27, 35, 64, .18); transition: transform .12s; }
.aruo-brand-link:hover, .aruo-brand-link:focus-visible { transform: translateY(-1px); background: #FFFDF8; }
.aruo-brand-link .aruo-presented { font-family: var(--font-display); font-size: 11px; font-weight: 900; letter-spacing: .06em; color: var(--ink); }
.aruo-brand-link.light { background: transparent !important; box-shadow: none !important; padding: 2px 4px; }
.aruo-brand-link.light:hover, .aruo-brand-link.light:focus-visible { background: transparent !important; opacity: .9; }
.aruo-brand-link.light .aruo-presented { color: #F1E9D6; text-shadow: 2px 2px 0 var(--ink), 0 0 6px rgba(0,0,0,.65); font-size: 12px; }
.aruo-logo-img { height: 15px; width: auto; display: block; object-fit: contain; image-rendering: pixelated; }
.aruo-brand-link.light .aruo-logo-img { height: 17px; filter: drop-shadow(2px 2px 0 #1B2340); }
.logo-demo { display: inline-block; font-size: 0.44em; font-weight: 900; color: #F1E9D6;
background: #D9453A; padding: 2px 7px; margin-left: 6px; vertical-align: middle;
box-shadow: 0 0 0 2px var(--ink), 2px 2px 0 var(--ink); text-shadow: 1px 1px 0 var(--ink); letter-spacing: .04em; }
.screen-map .stages-wrap { display: grid; gap: 12px; padding: 12px 12px 24px; align-content: start; }
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* Stage Row with Interactive Mini Flash Card & Rarity Flag Ribbon */
.stage-row { display: grid; grid-template-columns: 76px 1fr; align-items: stretch; gap: 12px; background: var(--paper); border-radius: 14px;
box-shadow: inset 0 0 0 2px var(--ink), 0 3px 0 var(--ink); padding: 10px 12px; position: relative; }
.stage-row.suggest { background: linear-gradient(145deg, #FBF2D8, var(--ochre)); box-shadow: inset 0 0 0 2.5px var(--ink), 0 4px 0 var(--ink); }
.stage-row.locked { opacity: .68; }
.stage-card-flag { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer;
background: rgba(27, 35, 64, .06); border-radius: 10px; padding: 5px 4px 4px; border: 1.5px dashed rgba(27, 35, 64, .25);
transition: transform .14s ease, background .14s ease; outline: none; }
.stage-card-flag:hover, .stage-card-flag:focus-visible { transform: translateY(-2px); background: rgba(255, 253, 248, .85); border-style: solid; }
.stage-card-flag .sankei-card.compact { max-width: 64px; pointer-events: none; }
.scf-ribbon { width: 100%; font-size: 9.5px; font-weight: 900; text-align: center; padding: 2px 3px; border-radius: 5px;
background: #D8D0BE; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-card-flag.r-normal .scf-ribbon { background: #F1E9D6; color: var(--ink); }
.stage-card-flag.r-silver .scf-ribbon { background: linear-gradient(135deg, #F1F5F9, #CBD5E1); color: #1B2340; }
.stage-card-flag.r-gold .scf-ribbon { background: linear-gradient(135deg, #FFF3B0, #F5D061); color: #1B2340; }
.scf-view { font-size: 9px; font-weight: 800; color: var(--muted); }
.stg-body { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; }
.stg-top-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.stg-no { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: var(--vermilion); color: var(--paper);
font-family: var(--font-display); font-size: 16px; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--ink); }
.stage-row.locked .stg-no { background: #B9B2A4; }
.stg-txt { display: grid; min-width: 0; flex: 1; text-align: left; }
.stg-txt b { font-size: 15px; font-weight: 900; line-height: 1.2; }
.stg-txt small { font-size: 11px; color: var(--muted); font-weight: 700; }
.stg-star-line { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.stg-star-num { font-family: "DotGothic16", var(--font-display); font-size: 11px; font-weight: 900; color: var(--muted); }
.stg-chase { font-size: 10.5px; font-weight: 900; padding: 2px 8px; border-radius: 99px;
background: #FFF7D6; color: #9A3412; border: 1.5px solid var(--ink); align-self: flex-start; }
.stg-chase.maxed, .stg-chase.done { background: linear-gradient(135deg, #FFF3B0, #F5D061); color: #1B2340; }
.stg-btn-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 2px; }
.stg-btn-row .btn { min-width: 92px; padding: 6px 14px; font-size: 13px; }
.stg-lock { font-size: 11.5px; color: var(--muted); font-weight: 800; padding: 4px 0; }
.stages-foot-links { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.stages-settings { justify-self: center; }
/* Star Achievement & Milestone Chase Banner */
.star-chase-banner { width: 100%; background: linear-gradient(160deg, #1B2340, #27345B); color: var(--paper);
border-radius: 14px; padding: 11px 12px 10px; box-shadow: inset 0 0 0 2px var(--ink), 0 3px 0 var(--ink);
display: grid; gap: 8px; text-align: left; }
.star-chase-banner.is-max, .star-chase-banner.all-max { background: linear-gradient(155deg, #1B2340, #3A2E14); box-shadow: inset 0 0 0 2px #F5D061, 0 3px 0 var(--ink); }
.scb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scb-title-col { display: grid; gap: 2px; }
.scb-title { font-family: var(--font-display); font-size: 13.5px; font-weight: 900; color: #F5D061; }
.scb-substat { font-size: 10.5px; color: #E2E8F0; font-weight: 800; }
.scb-big-star { display: inline-flex; align-items: baseline; gap: 3px; font-family: var(--font-display); color: #F5D061; }
.scb-big-star b { font-size: 22px; font-weight: 900; color: #FFF9D2; }
.scb-big-star span { font-size: 12.5px; color: #CBD5E1; font-weight: 800; }
.scb-bar-wrap { display: grid; gap: 8px; padding: 2px 2px 0; }
.scb-bar-track { position: relative; height: 10px; background: rgba(255, 255, 255, .14); border-radius: 99px;
border: 1.5px solid #0F172A; overflow: visible; }
.scb-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #D9553F, #F5D061);
transition: width .35s cubic-bezier(.2, .9, .3, 1); }
.scb-pip { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%;
background: #334155; border: 1.5px solid #0F172A; transform: translate(-50%, -50%); z-index: 2; }
.scb-pip.on, .scb-pip.reached { background: #F5D061; box-shadow: 0 0 6px rgba(245, 208, 97, .85); }
.scb-milestones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 2px; }
.scb-ms { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px;
padding: 5px 6px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; cursor: pointer; font-family: inherit; color: inherit; }
.scb-ms.on, .scb-ms.reached { background: rgba(245, 208, 97, .22); border-color: #F5D061; }
.scb-ms-dot, .scb-ms-tag { font-family: "DotGothic16", var(--font-display); font-size: 10.5px; font-weight: 900; color: #F5D061; }
.scb-ms small { font-size: 9.5px; font-weight: 800; color: #E2E8F0; line-height: 1.15; }
.scb-ms.on small, .scb-ms.reached small { color: #FFF9D2; }
.scb-callout { margin: 0; font-size: 11.5px; font-weight: 900; color: #FFF3B0; text-align: center;
background: rgba(15, 23, 42, .45); border-radius: 8px; padding: 5px 8px; border: 1px dashed rgba(245, 208, 97, .45); }
.screen-end { background: var(--paper-deep); overflow-y: auto; }
.end-inner { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 22px 12px 32px; }
.end-inner h1 { font-family: var(--font-display); font-size: 24px; margin: 0; }
.end-total { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 18px; margin: 0; }
.end-sub { margin: -4px 0 2px; max-width: 320px; line-height: 1.35; }
.end-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; align-items: start; }
.end-card { display: grid; justify-items: center; gap: 5px; min-width: 0; }
.end-card-tag { font-size: 10.5px; font-weight: 900; padding: 2px 8px; border-radius: 99px; background: var(--paper);
box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.end-card-tag.r-silver { background: #E2E8F0; color: #1B2340; }
.end-card-tag.r-gold { background: linear-gradient(135deg, #FFF3B0, #F5D061); color: #1B2340; }
.end-actions { display: grid; gap: 8px; width: 100%; }
.end-inner .kicker { color: var(--vermilion); }
/* ARUO Official CTA Card & Credits Modal */
.aruo-cta-card { width: 100%; background: linear-gradient(155deg, #1B2340, #27345B); color: var(--paper); border: 2px solid var(--ink);
border-radius: 14px; padding: 14px 14px 12px; box-shadow: 0 3px 0 var(--ink); display: grid; gap: 6px; text-align: left; }
.aruo-cta-logo-wrap { display: inline-flex; align-self: flex-start; padding: 2px 0; }
.aruo-cta-logo { height: 18px; width: auto; object-fit: contain; image-rendering: pixelated; }
.aruo-cta-title { margin: 2px 0 0; font-size: 15px; font-weight: 900; color: #FFF9D2; }
.aruo-cta-desc { margin: 0; font-size: 11.5px; line-height: 1.4; color: #E2E8F0; font-weight: 700; }
.aruo-cta-btn { margin-top: 4px; text-align: center; text-decoration: none; display: inline-flex; justify-content: center; align-items: center; }
.credits-modal { max-height: 90vh; overflow-y: auto; }
.credits-modal .modal-body { display: grid; gap: 10px; text-align: left; }
.credits-brand { display: grid; justify-items: center; gap: 6px; background: #FFFDF8; border: 2px solid var(--ink);
border-radius: 12px; padding: 12px; text-align: center; }
.credits-logo-link { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--vermilion); font-weight: 900; font-size: 11.5px; }
.credits-logo { height: 24px; width: auto; object-fit: contain; image-rendering: pixelated; }
.credits-sec { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
.credits-sec h3 { margin: 0; font-size: 13.5px; font-weight: 900; color: var(--vermilion); border-bottom: 1.5px dashed #B9B2A4; padding-bottom: 4px; }
.credits-dl { margin: 0; display: grid; gap: 5px; font-size: 11.5px; }
.credits-dl div { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.credits-dl dt { color: var(--muted); font-weight: 800; }
.credits-dl dd { margin: 0; font-weight: 900; color: var(--ink); text-align: right; }
.credits-dl a { color: var(--vermilion); font-weight: 900; text-decoration: underline; }
.credits-copy-bold { margin: 0; font-size: 12px; font-weight: 900; color: var(--ink); }
.credits-copy-p { margin: 0; font-size: 11px; line-height: 1.42; color: var(--muted); font-weight: 700; }
/* ---------------------------------------------------------------- 三景 demo M2: flash cards, reveal & album (src/demo/cards.js) */
.title-album-top { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 6;
background: rgba(241, 233, 214, .94) !important; box-shadow: inset 0 0 0 2px var(--ink), 0 2px 0 var(--ink); }
.sankei-card { --rx: 0deg; --ry: 0deg; --hx: 50%; --hy: 50%; --holo-angle: 125deg;
position: relative; width: 100%; max-width: 240px; aspect-ratio: 5 / 7; perspective: 900px;
cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: pan-y; outline: none; }
.sankei-card.compact { max-width: 118px; }
.sankei-card.is-tilting { touch-action: none; }
.sc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
transform: rotateX(var(--rx)) rotateY(var(--ry));
transition: transform .42s cubic-bezier(.22, .9, .3, 1); }
.sankei-card.is-tilting .sc-inner { transition: transform .06s linear; }
.sankei-card.is-flipped .sc-inner { transform: rotateX(var(--rx)) rotateY(calc(180deg + var(--ry))); }
.sc-face { position: absolute; inset: 0; border-radius: 10px; overflow: hidden;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
box-shadow: 0 5px 0 var(--ink), 0 8px 18px rgba(20, 38, 61, .28); }
.sankei-card.r-gold .sc-face { box-shadow: 0 5px 0 var(--ink), 0 0 18px rgba(245, 208, 97, .65); }
.sc-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
/* 3-Tier Flash Card Foil Overlays (1★ 反光 / 2★ 銀閃 / 3★ 幻彩金閃) */
.sc-shine { position: absolute; inset: 0; pointer-events: none; transition: opacity .2s; }
.sankei-card.r-normal .sc-shine {
opacity: .55;
mix-blend-mode: screen;
background: linear-gradient(115deg,
transparent 34%,
rgba(255, 255, 255, .18) 44%,
rgba(255, 255, 255, .62) 50%,
rgba(255, 255, 255, .18) 56%,
transparent 66%);
background-size: 240% 240%;
background-position: var(--hx) var(--hy);
animation: normalGlossSweep 4.5s ease-in-out infinite alternate;
}
.sankei-card.r-silver .sc-Face,
.sankei-card.r-silver .sc-face { box-shadow: 0 5px 0 var(--ink), 0 0 14px rgba(186, 230, 253, .65); }
.sankei-card.r-silver .sc-shine {
opacity: .78;
mix-blend-mode: hard-light;
background:
radial-gradient(circle at var(--hx) var(--hy), rgba(240, 249, 255, .72), transparent 52%),
repeating-linear-gradient(var(--holo-angle),
rgba(255, 255, 255, .05) 0%,
rgba(226, 232, 240, .55) 12%,
rgba(186, 230, 253, .75) 24%,
rgba(255, 255, 255, .85) 32%,
rgba(148, 163, 184, .45) 44%,
rgba(255, 255, 255, .05) 56%);
background-size: 180% 180%, 210% 210%;
background-position: var(--hx) var(--hy), var(--hx) var(--hy);
animation: silverFoilSweep 3.8s ease-in-out infinite alternate;
}
.sankei-card.r-gold .sc-shine {
opacity: .76;
mix-blend-mode: color-dodge;
background:
radial-gradient(circle at var(--hx) var(--hy), rgba(255, 255, 220, .75), transparent 55%),
repeating-linear-gradient(var(--holo-angle),
rgba(255, 90, 90, .38) 0%,
rgba(255, 210, 80, .42) 14%,
rgba(90, 240, 170, .38) 28%,
rgba(90, 190, 255, .42) 42%,
rgba(220, 110, 255, .38) 56%,
rgba(255, 90, 90, .38) 70%);
background-size: 180% 180%, 220% 220%;
background-position: var(--hx) var(--hy), var(--hx) var(--hy);
animation: holoDrift 5s ease-in-out infinite alternate;
}
.sankei-card.is-tilting .sc-shine { opacity: .92; animation: none; }
@keyframes normalGlossSweep {
0% { background-position: 15% 15%; }
100% { background-position: 85% 85%; }
}
@keyframes silverFoilSweep {
0% { background-position: 20% 25%, 15% 20%; }
100% { background-position: 80% 75%, 85% 80%; }
}
@keyframes holoDrift {
0% { background-position: 25% 25%, 20% 30%; }
100% { background-position: 75% 75%, 80% 70%; }
}
.sc-sparkles { position: absolute; inset: 0; pointer-events: none; }
.sc-sparkles i { position: absolute; width: 6px; height: 6px; background: #FFF9D2;
box-shadow: 0 0 0 1.5px #1B2340, 0 0 8px #FFD700; transform: rotate(45deg);
animation: cardSparkle 1.8s ease-in-out infinite; }
.sc-sparkles.silver i { width: 5px; height: 5px; background: #F8FAFC;
box-shadow: 0 0 0 1.5px #1B2340, 0 0 8px #38BDF8; }
.sc-sparkles i:nth-child(1) { top: 14%; left: 16%; animation-delay: 0s; }
.sc-sparkles i:nth-child(2) { top: 22%; right: 14%; animation-delay: .45s; }
.sc-sparkles i:nth-child(3) { bottom: 26%; left: 18%; animation-delay: .9s; }
.sc-sparkles i:nth-child(4) { bottom: 18%; right: 16%; animation-delay: 1.35s; }
@keyframes cardSparkle {
0%, 100% { transform: rotate(45deg) scale(.55); opacity: .45; }
50% { transform: rotate(45deg) scale(1.15); opacity: 1; }
}
/* 3-Tier Flash Card Progression Strip (.card-tier-guide) */
.card-tier-guide { width: 100%; background: #1B2340; color: #F1E9D6; border: 2px solid var(--ink);
border-radius: 10px; padding: 6px 8px; display: grid; gap: 4px; text-align: center; margin: 2px 0;
box-shadow: 0 2px 0 var(--ink); }
.ctg-steps { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.ctg-step { font-size: 10px; font-weight: 900; padding: 2px 8px; border-radius: 99px;
background: rgba(255, 255, 255, .1); color: #94A3B8; border: 1.5px solid rgba(255, 255, 255, .2); }
.ctg-step.active { opacity: 1; transform: scale(1.04); box-shadow: 0 2px 0 #0F172A; border-color: #FFFDF8; }
.ctg-step.r-normal.active { background: #F1E9D6; color: #1B2340; }
.ctg-step.r-silver.active { background: linear-gradient(135deg, #FFFFFF, #BAE6FD); color: #0F172A; }
.ctg-step.r-gold.active { background: linear-gradient(135deg, #FFF3B0, #F5D061); color: #1B2340; }
.ctg-arrow { font-size: 10px; font-weight: 900; color: #94A3B8; }
.ctg-hint { margin: 0; font-size: 10.5px; font-weight: 800; color: #FFF3B0; line-height: 1.3; }
/* Card Back (GDD §4.4) */
.sc-back { transform: rotateY(180deg); background: #1B2340; padding: 6px; display: flex; }
.sankei-card.r-gold .sc-back { background: linear-gradient(145deg, #D6A85A, #8C6218); }
.sankei-card.r-silver .sc-back { background: linear-gradient(145deg, #CBD5E1, #64748B); }
.sc-back-frame { flex: 1; background: var(--paper); border: 2px solid #1B2340; border-radius: 6px;
padding: 10px 10px 8px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; color: var(--ink); }
.sc-back-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; border-bottom: 2px solid #1B2340; padding-bottom: 5px; }
.sc-aruo-badge, .sc-aruo-link { background: var(--vermilion); color: var(--paper); font-family: var(--font-display); font-size: 10px;
padding: 3px 7px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #1B2340; letter-spacing: .08em; display: inline-flex; align-items: center; text-decoration: none; }
.sc-aruo-logo { height: 11px; width: auto; display: block; object-fit: contain; image-rendering: pixelated; }
.sc-back-head small { font-size: 9.5px; color: var(--muted); font-weight: 800; }
.sc-back-title { text-align: center; padding: 4px 0 2px; }
.sc-back-title small { display: block; font-size: 10px; color: var(--muted); font-weight: 800; }
.sc-back-title h3 { margin: 2px 0 4px; font-family: var(--font-display); font-size: 15px; line-height: 1.2; }
.sc-rarity-pill { display: inline-block; font-size: 10px; font-weight: 900; padding: 1px 8px; border-radius: 99px;
background: #E8DEC8; border: 1.5px solid #1B2340; }
.sc-rarity-pill.r-silver { background: #E2E8F0; }
.sc-rarity-pill.r-gold { background: #F5D061; }
.sc-trivia-box { background: #FBF7EC; border: 1.5px solid #1B2340; border-radius: 6px; padding: 7px 8px; my: 2px; }
.sc-trivia-tag { display: inline-block; font-size: 9.5px; font-weight: 900; color: var(--vermilion); margin-bottom: 3px; }
.sc-trivia-box p { margin: 0; font-size: 11px; line-height: 1.42; font-weight: 700; color: var(--ink); }
.sc-meta { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 6px; font-size: 10px; border-top: 1.5px dashed #B9B2A4; padding-top: 5px; }
.sc-meta div { display: flex; justify-content: space-between; gap: 4px; }
.sc-meta .sc-serial-row { grid-column: 1 / -1; }
.sc-meta dt { color: var(--muted); font-weight: 700; }
.sc-meta dd { margin: 0; font-weight: 900; font-family: "DotGothic16", var(--font-ui); }
/* Locked Card Slot */
.sankei-card.is-locked { background: #22304A; border-radius: 10px; box-shadow: inset 0 0 0 2px #1B2340, 0 4px 0 #1B2340;
display: grid; place-items: center; color: var(--paper); opacity: .75; }
.sc-locked-inner { display: grid; place-items: center; gap: 6px; padding: 10px; text-align: center; }
.sc-lock-seal { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); border: 2px dashed rgba(241,233,214,.45);
display: grid; place-items: center; font-family: var(--font-display); font-size: 16px; }
.sc-locked-inner small { font-size: 10.5px; opacity: .8; }
/* Card Reveal on Results Screen (GDD §4.5) */
.res-card-slot { width: 100%; display: grid; place-items: center; margin: 2px 0; }
.card-reveal { display: grid; justify-items: center; gap: 6px; width: 100%; padding: 4px 2px; }
.cr-kicker { margin: 0; font-size: 11px; font-weight: 900; color: var(--vermilion); letter-spacing: .05em; }
.cr-stage { position: relative; display: grid; place-items: center; width: min(232px, 66vw); aspect-ratio: 5 / 7;
transform: translateY(20px) scale(.82); opacity: 0; transition: transform .42s cubic-bezier(.2, .9, .3, 1.15), opacity .3s; }
.card-reveal.fly-in .cr-stage { transform: translateY(0) scale(1); opacity: 1; }
.cr-stage .sankei-card { max-width: min(232px, 66vw); z-index: 2; }
.cr-flash { position: absolute; inset: -12px; border-radius: 16px; background: #FFF9E6; opacity: 0; pointer-events: none; z-index: 3; }
.card-reveal.flipped .cr-flash { animation: cardFlash .55s ease-out; }
@keyframes cardFlash {
0% { opacity: .92; transform: scale(.95); }
100% { opacity: 0; transform: scale(1.22); }
}
.cr-rays { position: absolute; width: min(290px, 82vw); height: min(290px, 82vw); border-radius: 50%; pointer-events: none; z-index: 1;
background: repeating-conic-gradient(from 0deg, rgba(245, 208, 97, .42) 0deg 12deg, transparent 12deg 24deg);
mask-image: radial-gradient(circle, #000 30%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
opacity: 0; animation: spinRays 10s linear infinite; }
.card-reveal.flipped .cr-rays { opacity: 1; transition: opacity .35s; }
@keyframes spinRays { to { transform: rotate(360deg); } }
.cr-status { display: grid; justify-items: center; gap: 5px; width: 100%; }
.cr-status-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cr-status-txt { display: inline-flex; align-items: center; justify-content: center; min-height: 28px;
font-size: 11.5px; font-weight: 900; padding: 3px 12px; border-radius: 6px;
background: var(--ochre); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), 0 2px 0 var(--ink); }
.cr-status.r-silver .cr-status-txt { background: #E2E8F0; color: #0F172A; }
.cr-status.r-gold .cr-status-txt { background: #F5D061; }
.cr-share-btn { min-height: 28px !important; padding: 3px 10px !important; font-size: 11.5px !important; }
.cr-hint { font-size: 10px; color: var(--muted); font-weight: 700; }
/* Card Album & Inspect Modals */
.album-modal, .card-inspect-modal, .share-modal, .rewards-modal, .pin-modal { max-height: 100%; overflow-y: auto; padding: 10px 12px; }
.album-modal .modal-title, .card-inspect-modal .modal-title, .rewards-modal .modal-title { font-size: 17px; margin-bottom: 4px; }
.album-modal .modal-body, .card-inspect-modal .modal-body { gap: 4px; }
.album-meta-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 2px; }
.album-meta-top p { margin: 0; text-align: left; flex: 1; font-size: 11px; line-height: 1.25; }
.album-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 2px; }
.album-thumb { display: grid; justify-items: center; gap: 1px; padding: 4px 3px; border-radius: 8px;
background: var(--paper-deep); border: 2px solid var(--ink); cursor: pointer; font-family: inherit; }
.album-thumb.active { background: var(--ochre); box-shadow: 0 2px 0 var(--ink); transform: translateY(-1px); }
.album-thumb .at-no { width: 17px; height: 17px; border-radius: 5px; background: var(--vermilion); color: var(--paper);
font-family: var(--font-display); font-size: 10px; display: grid; place-items: center; }
.album-thumb b { font-size: 11px; line-height: 1.15; }
.album-thumb small { font-size: 9.5px; color: var(--muted); font-weight: 800; line-height: 1.15; }
.album-stage, .inspect-stage { display: grid; justify-items: center; gap: 5px; padding: 2px 0; }
.album-stage .sankei-card, .inspect-stage .sankei-card { max-width: min(232px, 66vw); }
.album-stage-bar { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.album-stage-bar .btn.small { min-height: 28px; padding: 3px 10px; font-size: 11.5px; }
.album-modal .card-tier-guide, .card-inspect-modal .card-tier-guide { padding: 4px 6px; gap: 2px; margin: 0; }
.inspect-hint { text-align: center; margin: 0 0 2px; font-size: 11px !important; }
#btnAlbumShareAll { min-height: 30px; padding: 4px 10px; font-size: 12px; width: 100%; }
.album-modal .modal-actions, .card-inspect-modal .modal-actions, .rewards-modal .modal-actions { margin-top: 2px; }
.album-modal .modal-actions .btn, .card-inspect-modal .modal-actions .btn, .rewards-modal .modal-actions .btn { min-height: 34px; padding: 4px 14px; font-size: 13px; }
/* Traveler Name Input & Passport Mock-up Preview (GDD §4.4, §5.3) */
.traveler-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; padding: 4px 8px; margin: 1px 0; font-size: 11.5px; font-weight: 900; }
.traveler-input { width: 136px; padding: 3px 7px; border: 1.5px solid var(--ink); border-radius: 6px;
background: #FFFDF8; font-family: inherit; font-size: 12px; font-weight: 800; color: var(--ink); text-align: right; }
.passport-preview { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px; width: 100%;
background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; padding: 5px 8px; text-align: left;
box-shadow: 0 2px 0 var(--ink); margin: 1px 0; }
.passport-preview.ready { background: linear-gradient(135deg, #FFF7D6, #F5D061); }
.passport-img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.passport-txt { display: grid; gap: 1px; }
.passport-txt b { font-size: 11.5px; font-weight: 900; line-height: 1.2; }
.passport-txt small { font-size: 10px; color: var(--muted); line-height: 1.25; font-weight: 700; }
.passport-prog { font-family: var(--font-display); font-size: 10.5px; color: var(--vermilion); }
/* ---------------------------------------------------------------- 三景 demo M3: share poster & local DEMO rewards (src/demo/rewards.js) */
.share-preview-wrap { display: grid; place-items: center; background: #14263D; border: 2px solid var(--ink); border-radius: 12px;
padding: 8px; margin-bottom: 4px; }
.share-preview-img { display: block; max-width: 100%; max-height: 58vh; width: auto; height: auto; border-radius: 8px;
box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.share-status, .share-hint { text-align: center; margin: 2px 0; }
.share-actions-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 6px 0; }
.end-share-all { width: 100%; }
/* Promotion text block under share preview image (GDD / Haro update) */
.share-promo-card { width: 100%; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px;
padding: 8px 10px; box-shadow: 0 2px 0 var(--ink); margin: 4px 0 2px; display: grid; gap: 3px; text-align: left; }
.share-promo-head { display: flex; align-items: center; gap: 6px; }
.share-promo-badge { background: var(--vermilion); color: var(--paper); font-family: var(--font-display); font-size: 10px;
padding: 1px 6px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--ink); letter-spacing: .05em; }
.share-promo-title-link { font-family: var(--font-display); font-size: 14.5px; font-weight: 900; color: var(--ink);
text-decoration: underline; text-decoration-color: var(--vermilion); text-decoration-thickness: 2px; }
.share-promo-sub { margin: 0; font-size: 11px; font-weight: 700; color: var(--muted); line-height: 1.35; }
.share-promo-link-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 900;
color: #1D4ED8; word-break: break-all; text-decoration: underline; padding: 1px 0; }
.end-rewards-sec { width: 100%; display: grid; gap: 8px; margin-top: 4px; text-align: left; }
.end-sec-title { font-family: var(--font-display); font-size: 18px; margin: 0; text-align: center; }
.end-sec-sub { margin: -2px 0 4px; text-align: center; line-height: 1.35; }
.rewards-sub { margin: 0 0 8px; line-height: 1.35; }
.rewards-list { display: grid; gap: 10px; width: 100%; }
.demo-voucher { position: relative; overflow: hidden; background: var(--paper); border: 2px solid var(--ink);
border-radius: 14px; box-shadow: 0 3px 0 var(--ink); padding: 12px 12px 10px; text-align: left; }
.demo-voucher.is-ready { background: linear-gradient(155deg, #FFFDF8, #F4EBD4); }
.demo-voucher.is-locked { opacity: .82; background: #E6DEC8; }
.demo-voucher.is-redeemed { background: #E9E2D0; }
/* Diagonal repeating DEMO watermark (GDD §5.4 mandatory) */
.demo-watermark { position: absolute; inset: -40%; pointer-events: none; z-index: 1;
display: flex; flex-direction: column; justify-content: space-around; gap: 18px;
transform: rotate(-18deg); opacity: .13; user-select: none; -webkit-user-select: none; }
.demo-watermark span { white-space: nowrap; font-size: 11px; font-weight: 900; color: #D9553F; letter-spacing: .08em; }
.dv-content { position: relative; z-index: 2; display: grid; gap: 8px; }
.dv-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dv-badge { background: var(--vermilion); color: var(--paper); font-family: var(--font-display); font-size: 11px;
padding: 2px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.dv-status { font-size: 10.5px; font-weight: 900; padding: 2px 8px; border-radius: 99px;
background: var(--paper-deep); border: 1.5px solid var(--ink); }
.dv-status.is-ready { background: #D1D5DB; color: #374151; border-color: #6B7280; }
.dv-status.is-redeemed { background: #CBD5E1; color: #334155; }
.dv-main { display: flex; align-items: center; gap: 10px; }
.dv-art { width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.dv-txt { display: grid; gap: 2px; min-width: 0; }
.dv-txt h3 { margin: 0; font-size: 15px; font-weight: 900; line-height: 1.25; }
.dv-desc { margin: 0; font-size: 12.5px; font-weight: 800; color: var(--ink); }
.dv-req { font-size: 10.5px; color: var(--muted); font-weight: 700; }
.dv-ticket { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px;
background: #F3F4F6; border: 1.5px dashed #9CA3AF; border-radius: 10px; padding: 8px; }
.voucher-qr { width: 84px; height: 84px; border: 1.5px solid #9CA3AF; border-radius: 6px; image-rendering: pixelated; }
.voucher-qr.is-demo-grey { filter: grayscale(100%) opacity(.68); background: #E5E7EB; }
.dv-ticket-meta { display: grid; gap: 4px; min-width: 0; }
.dv-ticket-meta small { display: block; font-size: 10px; color: var(--muted); font-weight: 700; }
.dv-code { display: inline-block; font-family: "DotGothic16", monospace; font-size: 15px; font-weight: 900;
color: #6B7280; letter-spacing: .05em; background: #E5E7EB; padding: 2px 6px; border-radius: 4px; border: 1px solid #9CA3AF; }
.dv-exp { font-family: "DotGothic16", var(--font-ui); font-size: 12px; font-weight: 900; color: #6B7280; }
.dv-redeemed-note { font-size: 10.5px; font-weight: 900; color: var(--vermilion); }
.dv-actions { display: flex; justify-content: flex-end; }
.dv-actions .btn { width: 100%; }
.btn-demo-grey, .btn-demo-grey:disabled { background: #D1D5DB !important; color: #4B5563 !important; border-color: #6B7280 !important;
box-shadow: inset 0 0 0 2px #6B7280, 0 2px 0 #6B7280 !important; filter: grayscale(100%); opacity: .78 !important;
cursor: not-allowed !important; transform: none !important; }
/* Mandatory fixed disclaimer line at bottom of every voucher (GDD §5.4) */
.voucher-disclaimer { margin: 2px 0 0; padding-top: 5px; border-top: 1px solid rgba(27, 35, 64, .18);
font-size: 10px; line-height: 1.35; font-weight: 800; color: #7C2D12; text-align: center; }
/* Redeemed Stamp Seal Animation (GDD §5.5) */
.voucher-seal { position: absolute; right: 16px; top: 44px; z-index: 3; width: 76px; height: 76px;
border-radius: 50%; border: 4px double #C9302C; background: rgba(255, 248, 240, .88);
color: #C9302C; display: grid; place-items: center; transform: rotate(-16deg) scale(1);
box-shadow: 0 2px 6px rgba(0,0,0,.2); pointer-events: none; }
.voucher-seal span { font-family: var(--font-display); font-size: 15px; font-weight: 900; letter-spacing: .04em;
border: 1.5px solid #C9302C; padding: 2px 6px; border-radius: 4px; }
.voucher-seal.press { animation: stampPress .42s cubic-bezier(.2, .9, .3, 1.25); }
@keyframes stampPress {
0% { transform: rotate(-28deg) scale(2.1); opacity: 0; }
70% { transform: rotate(-14deg) scale(.92); opacity: 1; }
100% { transform: rotate(-16deg) scale(1); opacity: 1; }
}
/* Staff PIN Modal (GDD §5.5) */
.pin-modal .modal-body { position: relative; overflow: hidden; }
.pin-body-inner { position: relative; z-index: 2; display: grid; gap: 8px; justify-items: center; text-align: center; }
.pin-voucher-name { font-size: 14px; font-weight: 900; }
.pin-voucher-code { font-family: "DotGothic16", monospace; font-size: 14px; font-weight: 900; color: var(--vermilion);
background: var(--paper-deep); padding: 2px 8px; border-radius: 6px; border: 1.5px solid var(--ink); }
.pin-demo-hint { margin: 0; font-size: 11px; font-weight: 900; color: var(--cobalt); }
.pin-input { width: 160px; padding: 8px 12px; font-family: "DotGothic16", monospace; font-size: 24px; font-weight: 900;
letter-spacing: .32em; text-align: center; border: 2px solid var(--ink); border-radius: 10px; background: #FFFDF8; color: var(--ink); }
.pin-error { margin: 0; font-size: 11.5px; font-weight: 900; color: #C9302C; }