:root {
  --ink: #121014; --ink2: #1b1722; --ink3: #262033; --line: #3a3148; --cream: #fff6ec; --muted: #b9adb8;
  --coral: #e58b70; --coral2: #d5755c; --sakura: #fab2a8; --gold: #ffd36e; --mint: #9ff0c8; --sky: #8fd3ff; --lilac: #c7a8ff;
  --font: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--cream); font-family: var(--font); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
body { display: flex; justify-content: center; }
button, select, textarea, .button { font: inherit; color: inherit; }
button, .button { background: var(--ink3); border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; cursor: pointer; font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; touch-action: manipulation; transition: transform .06s, background .15s; }
button:hover:not(:disabled), .button:hover { background: var(--hover, #30283f); }
button:active:not(:disabled) { transform: scale(.96); }
button:disabled { opacity: .45; cursor: default; }
button.big { background: var(--coral); border-color: var(--coral2); color: var(--ink); }
button.big:hover:not(:disabled) { background: #f09a80; }
button.link { background: none; border: 0; padding: 0; color: var(--sakura); text-decoration: underline; font-weight: 700; }
button.wide { width: 100%; margin: 6px 0 2px; }
button.danger { border-color: #7a3a3a; color: #ffb3b3; }
small { font-weight: 600; }
.hint { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 6px 2px; }
canvas.icon { display: inline-block; vertical-align: middle; flex: none; }

#app { width: 100%; max-width: 540px; height: 100dvh; display: flex; flex-direction: column; background: var(--ink2); position: relative; overflow: hidden; }
#top { position: relative; display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "clock wallet sound lang" "owata owata owata owata"; gap: 4px 10px; padding: 8px 10px 6px; background: var(--ink); border-bottom: 1px solid var(--line); }
#clock { grid-area: clock; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
#clock b { font-size: 22px; font-weight: 900; color: var(--sakura); letter-spacing: .02em; }
#clock span { font-size: 13px; color: var(--muted); font-weight: 700; }
#wallet { grid-area: wallet; display: flex; justify-content: flex-end; gap: 10px; font-weight: 800; font-size: 15px; }
#wallet span { display: inline-flex; align-items: center; gap: 3px; }
/* language switch, top right; above the first 10-pull sheet too (#overlay is z 30) so a newcomer can switch before choosing */
#langBtn { grid-area: lang; align-self: center; position: relative; z-index: 31; padding: 2px 9px; font-size: 12px; font-weight: 800; border-radius: 99px; border-width: 1.5px; white-space: nowrap; }
/* sound, next to the language switch: one tap opens BGM / effects (above the first 10-pull sheet too) */
#soundBtn { grid-area: sound; align-self: center; position: relative; z-index: 31; padding: 2px 7px; font-size: 13px; border-radius: 99px; border-width: 1.5px; line-height: 1.3; }
#soundMenu { position: absolute; right: 10px; top: 40px; z-index: 33; display: grid; gap: 6px; padding: 10px; min-width: 180px; background: var(--ink); border: 1.5px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
#soundMenu button { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-weight: 800; font-size: 14px; padding: 8px 12px; border-radius: 10px; }
#soundMenu button b { font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--ink3); color: var(--muted); }
#soundMenu button.on b { background: var(--coral); color: #fff; }
#owata { grid-area: owata; }
#owata .bar, .bar { height: 8px; background: var(--ink3); border-radius: 99px; overflow: hidden; }
#owata .bar i, .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--coral), var(--sakura), var(--gold)); border-radius: 99px; transition: width .4s; }
#owataText { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-top: 3px; }
#owataText b { font-weight: 900; }
#owataText span { color: var(--muted); font-weight: 700; text-align: right; }

#ticker { display: flex; gap: 10px; align-items: center; padding: 4px 10px; font-size: 12px; background: #1a1526; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
#ticker .who { color: var(--mint); font-weight: 800; flex: none; }
#ticker .msg { overflow: hidden; text-overflow: ellipsis; color: var(--cream); animation: tick .5s ease-out; }
@keyframes tick { from { opacity: 0; transform: translateY(6px); } }

#stage { position: relative; flex: none; aspect-ratio: 480 / 300; width: 100%; background: #000; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#cv { width: 100%; height: 100%; display: block; }
#stageUi { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
#stageUi > * { pointer-events: auto; }
#buffs { font-size: 11px; font-weight: 800; color: var(--sky); text-shadow: 0 1px 2px #000; white-space: pre; }
button.boss { flex-direction: column; gap: 0; padding: 6px 12px; min-width: 132px; background: rgba(18,16,20,.85); border-color: var(--coral2); line-height: 1.2; }
button.boss b { font-size: 15px; font-weight: 900; }
button.boss small { font-size: 11px; color: var(--muted); }
button.boss.go { background: var(--coral); color: var(--ink); animation: pulse 1.2s infinite; }
button.boss.go small { color: var(--ink); }
button.boss.cleared:not(.go) { border-color: var(--line); }
button.boss.fighting { border-color: #ff6b6b; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(229,139,112,.25); } }

#areas { display: flex; gap: 6px; padding: 6px 8px; overflow-x: auto; background: var(--ink); border-bottom: 1px solid var(--line); scrollbar-width: none; flex: none; }
#areas::-webkit-scrollbar { display: none; }
#areas button { flex: none; flex-direction: column; gap: 0; padding: 4px 10px; min-width: 76px; position: relative; line-height: 1.15; }
#areas button b { font-size: 15px; font-weight: 900; }
#areas button small { font-size: 10px; color: var(--muted); white-space: nowrap; }
#areas button.on { background: var(--coral); border-color: var(--coral2); color: var(--ink); }
#areas button.on small { color: var(--ink); }
#areas button i { position: absolute; top: 1px; right: 5px; font-style: normal; font-size: 10px; color: var(--mint); }
#areas button.on i { color: var(--ink); }
#areas button.dream { border-color: var(--lilac); }
#areas button.locked { border-style: dashed; }

#panel { flex: 1; overflow-y: auto; padding: 8px 10px 16px; -webkit-overflow-scrolling: touch; }
#tabs { display: grid; grid-template-columns: repeat(5, 1fr) 48px; background: var(--ink); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); flex: none; }
#tabs button { border: 0; border-radius: 0; background: none; flex-direction: column; gap: 0; padding: 6px 0 7px; position: relative; color: var(--muted); }
#tabs button b { font-size: 18px; line-height: 1.1; }
#tabs button span { font-size: 11px; }
#tabs button.on { color: var(--sakura); background: var(--ink2); }
#tabs button.dot::after { content: ""; position: absolute; top: 6px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px var(--ink); }

/* gear */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 8px; }
.stats div { background: var(--ink3); border-radius: 10px; padding: 5px 4px; text-align: center; min-width: 0; }
.stats small { display: block; font-size: 10px; color: var(--muted); }
.stats b { font-size: 13px; font-weight: 900; white-space: nowrap; display: inline-flex; align-items: center; }
.tiers { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 6px; scrollbar-width: none; }
.tiers button { padding: 4px 9px; font-size: 12px; flex: none; }
.tiers button.on { background: var(--sakura); color: var(--ink); border-color: var(--sakura); }
.mats { display: grid; gap: 4px; margin-bottom: 8px; }
.mats > div { display: flex; align-items: center; gap: 6px; background: var(--ink3); border-radius: 10px; padding: 4px 8px; }
.mats > div > span { flex: 1; position: relative; display: flex; flex-direction: column; font-size: 12px; padding-bottom: 5px; }
.mats > div > span i { position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--sakura); }
.mats > div.max span i { background: var(--gold); }
.mats > div.max small { color: var(--gold); font-weight: 900; }
.mats small { color: var(--muted); }
.gear { display: flex; align-items: center; gap: 8px; background: var(--ink3); border: 2px solid var(--line); border-radius: 14px; padding: 8px; margin-bottom: 6px; }
.gear.maxed { border-color: #6b5a2a; background: #2a2433; }
.gear .body { flex: 1; min-width: 0; }
.gear header { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.gear header b { font-size: 14px; font-weight: 900; }
.gear p { margin: 2px 0; font-size: 12px; color: var(--muted); }
.gear p b { color: var(--cream); }
.gear .cost { display: flex; flex-wrap: wrap; gap: 3px 8px; color: var(--cream); font-weight: 800; }
.gear .cost span { display: inline-flex; align-items: center; gap: 2px; }
.gear .cost span.short { color: #ff9d9d; }
.gear .cost em { font-style: normal; font-size: 10px; margin-left: 2px; color: #ff9d9d; }
.gear .cost .done { color: var(--gold); }
.gear > button { flex-direction: column; gap: 0; min-width: 62px; background: var(--coral); border-color: var(--coral2); color: var(--ink); }
.gear > button small { font-size: 9px; }
.gear > button:disabled { background: var(--ink3); color: var(--cream); border-color: var(--line); }
.dots { color: var(--gold); font-size: 11px; letter-spacing: 1px; }
.dots i { color: var(--line); font-style: normal; }
.dots.none { color: var(--muted); letter-spacing: 0; }

/* gacha */
.gacha-hero { text-align: center; padding: 12px 6px; }
.gacha-hero h2 { margin: 6px 0; }
.gacha-hero p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.gacha-top { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.gacha-top .cans { display: flex; align-items: center; gap: 4px; font-size: 22px; font-weight: 900; }
.gacha-top .cans small { font-size: 11px; color: var(--muted); }
.gacha-top .pity { flex: 1; }
.gacha-top .pity small { font-size: 11px; color: var(--muted); }
.pull-row { display: flex; gap: 8px; justify-content: center; margin: 8px 0; flex-wrap: wrap; }
.pull-row button { flex-direction: column; gap: 0; min-width: 110px; }
.pull-row button small { font-size: 10px; display: inline-flex; align-items: center; gap: 2px; }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; background: var(--ink3); border-radius: 10px; padding: 6px 8px; }
.buy span { flex: 1; display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-weight: 700; }
.buy button { padding: 4px 10px; font-size: 12px; }
.rates { font-size: 11px; color: var(--muted); text-align: center; }
.fxsum { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.fxsum span { font-size: 11px; background: #2c2440; border-radius: 99px; padding: 2px 8px; color: var(--mint); font-weight: 800; }
.petlist { display: grid; gap: 4px; }
.pcard { display: flex; align-items: center; gap: 8px; background: var(--ink3); border-radius: 12px; padding: 5px 8px; border-left: 4px solid var(--line); }
.pcard b { font-size: 13px; }
.pcard small { display: block; font-size: 11px; color: var(--muted); }
.r-N { border-color: #c9c1b8 !important; } .r-R { border-color: #8fd3ff !important; } .r-SR { border-color: #c7a8ff !important; } .r-SSR { border-color: #ffd36e !important; } .r-UR { border-color: #ff8fb8 !important; }
.stars { color: var(--gold); font-size: 11px; letter-spacing: -1px; }
.stars i { color: var(--line); font-style: normal; }
.exchange h3 { font-size: 14px; margin: 10px 0 4px; }
.petgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.petgrid button { flex-direction: column; gap: 0; padding: 4px; border-width: 2px; }
.petgrid small { font-size: 9px; }

/* book */
.owata-big h2 { margin: 2px 0; font-size: 16px; }
.owata-big h2 b { font-size: 26px; color: var(--sakura); }
.owata-big p { margin: 2px 0 6px; font-size: 12px; color: var(--muted); }
.owata-big .parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.owata-big .parts small { font-size: 11px; color: var(--muted); }
.owata-big .parts b { display: block; font-size: 13px; }
.book .row { margin: 8px 0; }
.book .row header { font-size: 12px; font-weight: 800; color: var(--sakura); margin-bottom: 3px; }
.book .row.locked header { color: var(--muted); }
.book .cells { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.book .cells.pets { grid-template-columns: repeat(8, 1fr); }
.cell { background: var(--ink3); border-radius: 8px; display: flex; flex-direction: column; align-items: center; padding: 2px 0; min-width: 0; border: 1px solid transparent; }
.cell.s2 { border-color: #6b5a2a; background: #2e2736; }
.cell span { line-height: 1; }
.cell .stars { font-size: 8px; }
.cell small { font-size: 8px; color: var(--muted); white-space: nowrap; overflow: hidden; max-width: 100%; }
.cell canvas.icon { width: 30px !important; height: 30px !important; }

/* world */
.me { background: var(--ink3); border-radius: 12px; padding: 8px; font-size: 13px; }
.namepick { display: flex; gap: 4px; margin-top: 6px; }
.namepick select { flex: 1; background: var(--ink2); border: 1px solid var(--line); border-radius: 8px; padding: 4px; min-width: 0; }
.offline { margin: 12px 0; padding: 14px; text-align: center; background: var(--ink3); border-radius: 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.worldstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 8px 0; }
.worldstats div { background: var(--ink3); border-radius: 10px; padding: 6px; text-align: center; }
.worldstats .wide { grid-column: 1 / -1; }
.worldstats b { display: block; font-size: 20px; font-weight: 900; color: var(--mint); }
.worldstats small { font-size: 10px; color: var(--muted); }
/* 夜の広場 (chat) */
.square { margin: 8px 0; background: var(--ink2); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.square.off { background: none; border: 0; padding: 0; }
.square.off button { width: 100%; }
.square h3 { display: flex; align-items: baseline; gap: 6px; font-size: 14px; margin: 0 0 6px; }
.square h3 small { flex: 1; font-size: 10px; color: var(--muted); font-weight: 400; }
.square h3 .mini { padding: 2px 8px; font-size: 11px; border-width: 1px; border-radius: 8px; }
.chatlog { height: 160px; overflow-y: auto; background: var(--ink); border-radius: 10px; padding: 6px 8px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.chatlog .line { margin: 3px 0; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.chatlog time { color: var(--muted); font-size: 10px; margin-right: 5px; }
.chatlog b { color: var(--sky); font-size: 11px; margin-right: 6px; }
.chatlog .mine b { color: var(--sakura); }
.chatlog .sys { color: var(--gold); }
.chatlog .sys b { color: var(--gold); }
.chatlog .lab { opacity: .7; }
.chatlog .lab small { color: var(--muted); font-size: 10px; margin-left: 4px; }
.chatlog .phrase { color: var(--mint); }
.chatlog .stamp { display: inline-flex; align-items: center; gap: 3px; font-size: 22px; line-height: 1; vertical-align: middle; }
.chatlog .stamp small { font-size: 11px; color: var(--cream); font-weight: 800; }
.chatlog .rep { padding: 0 4px; margin-left: 4px; font-size: 10px; border: 0; background: none; box-shadow: none; opacity: .45; }
.chatlog .rep:hover { opacity: 1; }
.square .stamps { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin: 6px 0 4px; }
.square .stamps button { padding: 4px 0; font-size: 20px; border-width: 1px; border-radius: 10px; }
.square .phrases { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.square .phrases button { flex: none; padding: 4px 9px; font-size: 12px; border-width: 1px; border-radius: 99px; white-space: nowrap; }
.square .say { display: flex; gap: 4px; margin-top: 4px; }
.square .say input { flex: 1; min-width: 0; background: var(--ink); color: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 8px; font-size: 16px; }
.square .say button { flex: none; background: var(--coral2); border-color: var(--coral); }
.chatstatus { min-height: 1em; margin: 4px 2px 0; font-size: 12px; color: var(--sakura); }
.dist h3, .feed h3 { font-size: 13px; margin: 10px 0 4px; }
.dist div { display: grid; grid-template-columns: 130px 1fr 28px; align-items: center; gap: 6px; font-size: 11px; margin: 2px 0; }
.dist div i { height: 8px; background: var(--lilac); border-radius: 4px; min-width: 2px; }
.dist div.mine span, .dist div.mine b { color: var(--sakura); font-weight: 900; }
.dist div.mine i { background: var(--sakura); }
.dist b { text-align: right; }
.feed p { margin: 3px 0; font-size: 12px; line-height: 1.5; }
.feed time { color: var(--muted); font-size: 10px; margin-right: 6px; }
.ranks { margin-top: 10px; }
.ranks ol { margin: 4px 0; padding-left: 26px; font-size: 13px; }
.ranks li { padding: 3px 0; border-bottom: 1px solid var(--ink3); }
.ranks li span { display: inline-block; width: 64%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ranks li b { float: right; }
.ranks li.mine { color: var(--sakura); font-weight: 900; }

/* menu */
.menu { display: grid; gap: 6px; }
.menu > button, .menu > a { justify-content: flex-start; flex-wrap: wrap; }
.menu > button small { width: 100%; font-size: 10px; color: var(--muted); padding-left: 22px; text-align: left; }
.menu .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* overlay */
#overlay { position: fixed; inset: 0; background: rgba(8,6,12,.72); display: flex; align-items: center; justify-content: center; z-index: 30; padding: 12px; }
#overlay[hidden] { display: none; }
.sheet { width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto; background: var(--ink2); border: 2px solid var(--line); border-radius: 18px; padding: 14px; text-align: center; animation: pop .25s ease-out; }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
.sheet h2 { margin: 2px 0 10px; font-size: 19px; display: flex; flex-direction: column; gap: 2px; }
.sheet h2 small { font-size: 12px; color: var(--sakura); }
.sheet h2.ending { font-size: 22px; color: var(--sakura); }
.reveal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.reveal .pcard { flex-direction: column; gap: 0; padding: 4px 2px; border-left: 0; border-top: 4px solid; animation: flip .35s both; min-width: 0; }
.reveal .pcard b { font-size: 12px; }
.reveal .pcard small { font-size: 9px; line-height: 1.2; min-height: 2.4em; overflow: hidden; }
.reveal .pcard em { font-style: normal; font-size: 10px; color: var(--gold); font-weight: 900; }
.reveal .pcard.new em { color: var(--mint); }
.reveal .r-SSR { background: #3a3120; } .reveal .r-UR { background: #3d2335; box-shadow: 0 0 12px rgba(255,143,184,.6); }
@keyframes flip { from { transform: rotateY(90deg); opacity: 0; } }
.best { font-size: 14px; }
.gains { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 13px; }
.gains li { background: var(--ink3); border-radius: 8px; padding: 6px; display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.prose { text-align: left; font-size: 12.5px; line-height: 1.7; color: #e9dfe4; }
.toggle { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; margin: 10px 0 4px; }
.toggle input { width: 20px; height: 20px; accent-color: var(--coral); }
.status { font-size: 12px; color: var(--mint); min-height: 1.2em; }
textarea { width: 100%; background: var(--ink); border: 2px solid var(--line); border-radius: 10px; padding: 8px; color: var(--cream); resize: vertical; }
#shareCanvas { width: 100%; height: auto; border-radius: 10px; margin: 8px 0; border: 1px solid var(--line); }

/* dolphin: an old-school gray dialog */
#dolphin { position: fixed; right: 12px; bottom: 76px; z-index: 40; animation: slidein .45s cubic-bezier(.2,1.4,.4,1); }
#dolphin[hidden] { display: none; }
@keyframes slidein { from { transform: translateY(40px) scale(.8); opacity: 0; } }
.win98 { width: 300px; background: #c3c3c3; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 2px 2px 0 #000, 0 10px 30px rgba(0,0,0,.5); font-family: "MS UI Gothic", "Meiryo", var(--font); font-size: 13px; }
.win98 .titlebar { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; padding: 2px 3px 2px 6px; font-weight: 700; font-size: 12px; }
.win98 .titlebar button { background: #c3c3c3; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; border-radius: 0; padding: 0 5px; line-height: 1.1; font-size: 12px; }
.win98 .body { display: flex; align-items: center; gap: 4px; padding: 8px; }
.win98 canvas { width: 104px; height: 104px; flex: none; }
.win98 .bubble { background: #ffffe1; border: 1px solid #000; border-radius: 10px; padding: 6px 8px; position: relative; }
.win98 .bubble p { margin: 2px 0; line-height: 1.45; }
.win98 .bubble .offer { font-weight: 700; color: #000080; }
.win98 .buttons { display: flex; gap: 6px; justify-content: center; padding: 0 8px 6px; }
.win98 .buttons button { background: #c3c3c3; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; border-radius: 0; padding: 3px 8px; font-weight: 400; font-size: 12px; }
.win98 .buttons button:first-child { outline: 1px dotted #000; outline-offset: -5px; font-weight: 700; }
.win98 .buttons button:active { border-color: #404040 #fff #fff #404040; }
.win98 .off { display: block; text-align: center; padding-bottom: 6px; }
.win98 .off .link { color: #000080; font-size: 11px; }

/* toasts */
#toasts { position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 25; display: flex; flex-direction: column-reverse; gap: 6px; align-items: center; pointer-events: none; width: min(92vw, 460px); }
.toast { background: rgba(18,16,20,.94); border: 2px solid var(--line); border-radius: 12px; padding: 7px 12px; font-size: 13px; font-weight: 700; text-align: center; animation: pop .25s ease-out; transition: opacity .4s, transform .4s; }
.toast.out { opacity: 0; transform: translateY(-8px); }
.toast.big { border-color: var(--coral); font-size: 14px; line-height: 1.6; }
.toast.gold { border-color: var(--gold); color: var(--gold); }
.toast.star { border-color: var(--sakura); }
.toast small { color: var(--muted); margin-left: 4px; }
.fatal { position: fixed; inset: auto 0 0 0; max-height: 40vh; overflow: auto; background: #300; color: #fcc; font-size: 11px; padding: 8px; z-index: 99; white-space: pre-wrap; }

@media (min-height: 860px) { #clock b { font-size: 24px; } }
@media (max-width: 380px) { .stats { grid-template-columns: repeat(3, 1fr); } .book .cells { grid-template-columns: repeat(5, 1fr); } .dist div { grid-template-columns: 100px 1fr 24px; } }

/* v2: runs, cards, decisions */
#stageUi { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.hubinfo { font-size: 11px; font-weight: 800; background: rgba(18,16,20,.75); border-radius: 8px; padding: 3px 8px; color: var(--mint); }
.hubinfo.warn { color: #ffb3b3; }
button.go { flex-direction: column; gap: 0; padding: 8px 22px; font-size: 18px; font-weight: 900; box-shadow: 0 4px 0 var(--coral2), 0 0 24px rgba(229,139,112,.5); animation: pulse 1.4s infinite; }
button.go small { font-size: 11px; font-weight: 700; }
.runbtns { display: flex; gap: 6px; }
.runbtns button { padding: 4px 10px; font-size: 12px; background: rgba(18,16,20,.8); }
.runbtns button.on, .autoset button.on { background: var(--sky); color: var(--ink); border-color: var(--sky); }
.runbtns button.rest { background: #c7a8ff; color: #2a1a12; border-color: #fff6ec; font-size: 14px; padding: 6px 14px; font-weight: 900; animation: restPulse 1.6s ease-in-out infinite; }
@keyframes restPulse { 50% { transform: scale(1.06); } }
#stageOverlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(8,6,12,.55); backdrop-filter: blur(1px); padding: 6px; }
#stageOverlay[hidden] { display: none; }
.pick { width: 100%; text-align: center; }
.pick h3 { margin: 0 0 6px; font-size: 15px; text-shadow: 0 2px 4px #000; display: flex; flex-direction: column; }
.pick h3 small { font-size: 11px; color: var(--sky); }
.pick .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.card { flex-direction: column; gap: 2px; padding: 6px 4px 8px; background: linear-gradient(180deg, #2c2440, #1b1722); border: 2px solid var(--fc); border-radius: 12px; position: relative; animation: dealt .35s both; min-width: 0; }
.card:nth-child(2) { animation-delay: .07s; } .card:nth-child(3) { animation-delay: .14s; }
@keyframes dealt { from { transform: translateY(30px) rotate(-6deg) scale(.8); opacity: 0; } }
.card:hover:not(:disabled) { background: linear-gradient(180deg, #3a2f55, #231d30); transform: translateY(-3px); }
.card b { font-size: 12.5px; line-height: 1.2; }
.card .lv { font-size: 10px; color: var(--muted); } .card .lv em { color: var(--gold); font-style: normal; font-weight: 900; }
.card p { margin: 0; font-size: 10.5px; line-height: 1.35; color: #e9dfe4; font-weight: 700; }
.card .rar { position: absolute; top: 4px; right: 6px; font-size: 10px; font-weight: 900; }
.fam { display: inline-flex; align-items: center; gap: 1px; font-size: 9.5px; font-weight: 900; color: var(--fc); border: 1px solid var(--fc); border-radius: 99px; padding: 0 5px; white-space: nowrap; }
.card .fam { position: absolute; top: 4px; left: 5px; }
.decide { width: 100%; max-width: 420px; background: rgba(18,16,20,.92); border: 2px solid var(--gold); border-radius: 16px; padding: 10px; text-align: center; animation: pop .3s ease-out; }
.decide h3 { margin: 0 0 4px; color: var(--gold); font-size: 20px; }
.decide .loot { margin: 2px 0; font-weight: 800; font-size: 13px; display: flex; justify-content: center; align-items: center; gap: 2px; flex-wrap: wrap; }
.decide .risk { margin: 2px 0 6px; font-size: 12px; color: var(--mint); }
.decide .choices { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }
.decide .choices button { flex-direction: column; gap: 0; padding: 8px; font-size: 16px; }
.decide .choices small { font-size: 10.5px; }
.decide .onemore { animation: pulse 1s infinite; }
.decide .warn { margin: 6px 0 0; font-size: 11px; color: #ffb3b3; }
.pcard.wide { text-align: left; }
.pcard.wide > div { min-width: 0; }
.pcard.wide small { white-space: normal; }
.reveal.list { grid-template-columns: 1fr; gap: 4px; max-height: 46vh; overflow-y: auto; }
.reveal.list .pcard { flex-direction: row; border-top: 0; border-left: 4px solid; padding: 4px 8px; }
.reveal.list .pcard small { font-size: 11px; min-height: 0; }
.newcard { font-size: 12px; text-align: left; margin: 4px 0; }
.sheet h2.fail { color: var(--lilac); } .sheet h2.ok { color: var(--mint); }
.build { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 6px 0; }
.build span { position: relative; background: var(--ink3); border-radius: 8px; padding: 2px; }
.build i { position: absolute; right: 2px; bottom: 0; font-style: normal; font-size: 10px; font-weight: 900; color: var(--gold); }
.autoset { background: var(--ink3); border-radius: 12px; padding: 8px; }
.autoset p { margin: 2px 0 6px; }
.book .row header span { margin-left: 8px; color: var(--gold); font-size: 11px; }
#owataText b small { font-size: 11px; color: var(--muted); font-weight: 700; margin-left: 4px; }
.owata-big h2 small { font-size: 12px; color: var(--muted); }
.todo { margin: 4px 0 6px; padding-left: 18px; font-size: 12px; line-height: 1.7; }

/* grades, passives, gacha reveal */
.grade { display: inline-flex; font-size: 9.5px; font-weight: 900; color: #121014; background: var(--gc); border-radius: 5px; padding: 0 5px; margin-left: 4px; }
small.passive { color: var(--mint) !important; font-weight: 800; }
.sheet h2.tease { color: var(--gold); animation: tease 0.6s ease-in-out infinite alternate; }
@keyframes tease { to { text-shadow: 0 0 14px rgba(255,211,110,.8); } }
.gacha-stage { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; perspective: 600px; }
.gcard { position: relative; height: 112px; padding: 0; border: 0; background: none; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3,1.5,.5,1); animation: drop .45s backwards; }
@keyframes drop { from { transform: translateY(-60px) rotate(-8deg); opacity: 0; } }
.gcard .back, .gcard .front { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.gcard .back { background: repeating-linear-gradient(45deg, #fff6ec 0 6px, #fab2a8 6px 12px); border: 4px solid var(--edge, #fff6ec); box-shadow: 0 0 14px 2px var(--glow, rgba(255,255,255,.15)); }
.gcard .back i { font-style: normal; font-weight: 900; color: #d5755c; font-size: 18px; }
.gcard .front { transform: rotateY(180deg); background: #2c2440; border: 2px solid var(--line); }
.gcard .front small { font-size: 9px; line-height: 1.2; padding: 0 2px; }
.gcard .front em { font-style: normal; font-size: 10px; color: var(--gold); font-weight: 900; }
.gcard.open { transform: rotateY(180deg); }
.gcard.r-R { --glow: rgba(143,211,255,.8); --edge: #8fd3ff; } .gcard.r-SR { --glow: rgba(199,168,255,1); --edge: #c7a8ff; }
.gcard.r-SSR { --glow: rgba(255,211,110,1); --edge: #ffd36e; } .gcard.r-UR { --glow: rgba(255,143,184,1); --edge: #ff8fb8; }
.gcard.hot:not(.open) { animation: drop .45s backwards, wobble .5s .5s ease-in-out infinite alternate; }
.gcard.hot .back { box-shadow: 0 0 22px 4px var(--glow); }
.gcard.r-UR:not(.open) .back { background: linear-gradient(135deg, #ff8fb8, #ffd36e, #9ff0c8, #8fd3ff, #c7a8ff); animation: rainbow 1.2s linear infinite; background-size: 300% 300%; }
@keyframes rainbow { to { background-position: 300% 0; } }
@keyframes wobble { from { transform: rotate(-3deg); } to { transform: rotate(3deg) translateY(-3px); } }
.gcard.open.r-SSR .front { background: linear-gradient(180deg, #4a3a18, #2c2440); border-color: var(--gold); }
.gcard.open.r-UR .front { background: linear-gradient(180deg, #4d2240, #2c2440); border-color: #ff8fb8; box-shadow: 0 0 16px rgba(255,143,184,.8); }
.sheet.shake { animation: shake .4s; }
@keyframes shake { 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }
#gachaSummary { max-height: 30vh; overflow-y: auto; }
.hubinfo.pets { color: var(--gold); }
.passive-line { color: var(--mint); font-weight: 800; }

/* ── style variants (≡ → 見た目) ─────────────────────────────── */
/* B: picture book / pajama print — bright cream paper with coral piping */
[data-theme="book"] { --ink: #fbeee4; --ink2: #fff8f1; --ink3: #ffffff; --line: #efc9b9; --cream: #3a2622; --muted: #93766c; --mint: #2f9a6f; --gold: #c98a12; --sky: #2c7fb8; --lilac: #7b5cc4; }
[data-theme="book"] body { background: #f3ddd0 repeating-radial-gradient(circle at 0 0, transparent 0 14px, rgba(229,139,112,.08) 15px 16px); }
[data-theme="book"] #app { background: var(--ink2); box-shadow: 0 0 0 1px var(--line), 0 10px 40px rgba(120,60,40,.18); }
[data-theme="book"] #top, [data-theme="book"] #areas, [data-theme="book"] #tabs { background: #fff3ea; }
[data-theme="book"] #top { background-image: radial-gradient(circle, rgba(229,139,112,.18) 1.5px, transparent 2px); background-size: 14px 14px; border-bottom: 3px dashed var(--line); }
[data-theme="book"] #ticker { background: #fde7dc; color: var(--cream); }
[data-theme="book"] button, [data-theme="book"] .button { background: #fff; border-color: var(--line); box-shadow: 0 3px 0 var(--line); }
[data-theme="book"] button.big, [data-theme="book"] #areas button.on, [data-theme="book"] .gear > button:not(:disabled) { background: var(--coral); color: #fff; border-color: var(--coral2); box-shadow: 0 3px 0 var(--coral2); }
[data-theme="book"] .gear, [data-theme="book"] .mats > div, [data-theme="book"] .stats div, [data-theme="book"] .pcard, [data-theme="book"] .cell, [data-theme="book"] .me, [data-theme="book"] .worldstats div, [data-theme="book"] .buy, [data-theme="book"] .autoset { background: #fff; border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); }
[data-theme="book"] .sheet { background: #fff8f1; }
[data-theme="book"] #tabs button.on { background: #fff; color: var(--coral2); }
[data-theme="book"] .toast { background: #fff; color: var(--cream); }
[data-theme="book"] .card { background: linear-gradient(180deg, #fff, #fff3ea); }
[data-theme="book"] .decide, [data-theme="book"] .hubinfo { background: rgba(255,248,241,.95); color: var(--cream); }

/* C: retro RPG windows — black, white double borders, dot font, square corners */
[data-theme="retro"] { --ink: #000; --ink2: #000; --ink3: #000; --line: #fff; --cream: #fff; --muted: #b9b9b9; --font: "DotGothic16", "MS Gothic", monospace; }
[data-theme="retro"] * { border-radius: 0 !important; }
[data-theme="retro"] body, [data-theme="retro"] button, [data-theme="retro"] .button, [data-theme="retro"] select, [data-theme="retro"] textarea { font-family: var(--font); font-weight: 400 !important; letter-spacing: .03em; }
[data-theme="retro"] b, [data-theme="retro"] h2, [data-theme="retro"] h3 { font-weight: 400 !important; }
[data-theme="retro"] #app { background: #000; }
[data-theme="retro"] .gear, [data-theme="retro"] .mats > div, [data-theme="retro"] .stats div, [data-theme="retro"] .pcard, [data-theme="retro"] .cell, [data-theme="retro"] .me, [data-theme="retro"] .worldstats div, [data-theme="retro"] .buy, [data-theme="retro"] .autoset, [data-theme="retro"] .sheet, [data-theme="retro"] .decide, [data-theme="retro"] .toast, [data-theme="retro"] .card {
  background: #000; border: 3px double #fff; box-shadow: none; }
[data-theme="retro"] button, [data-theme="retro"] .button { background: #000; border: 2px solid #fff; }
[data-theme="retro"] button.big, [data-theme="retro"] #areas button.on, [data-theme="retro"] .gear > button:not(:disabled) { background: #fff; color: #000; }
[data-theme="retro"] #areas button.on small, [data-theme="retro"] .gear > button:not(:disabled) small { color: #000; }
[data-theme="retro"] #tabs button.on { background: #000; color: #fff; }
[data-theme="retro"] #tabs button.on span::before { content: "▶"; animation: blink 1s steps(1) infinite; margin-right: 2px; }
@keyframes blink { 50% { opacity: 0; } }
[data-theme="retro"] #owata .bar, [data-theme="retro"] .bar { border: 2px solid #fff; background: #000; height: 10px; }
[data-theme="retro"] #owata .bar i, [data-theme="retro"] .bar i { background: #fff; }
[data-theme="retro"] #clock b { color: #fff; }
[data-theme="retro"] #ticker { background: #000; border-bottom: 2px solid #fff; }
[data-theme="retro"] #top, [data-theme="retro"] #areas, [data-theme="retro"] #tabs { background: #000; border-color: #fff; }
.themes { display: grid; gap: 4px; } .row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .row3 button.on { background: var(--coral); color: var(--ink); border-color: var(--coral2); }

/* hover per style (the night colour was left on light buttons) */
[data-theme="book"] { --hover: #fde3d8; }
[data-theme="book"] button:hover:not(:disabled), [data-theme="book"] .button:hover { background: var(--hover); border-color: var(--coral); color: var(--cream); }
[data-theme="book"] button.big:hover:not(:disabled), [data-theme="book"] #areas button.on:hover, [data-theme="book"] .gear > button:hover:not(:disabled) { background: #ec9d86; color: #fff; }
[data-theme="book"] .card:hover:not(:disabled) { background: linear-gradient(180deg, #fff, #fde3d8); }
[data-theme="book"] #tabs button:hover:not(:disabled) { background: #fff; color: var(--coral2); }
[data-theme="book"] .win98 button:hover:not(:disabled) { background: #d6d6d6; color: #000; border-color: #fff #404040 #404040 #fff; }
[data-theme="retro"] { --hover: #fff; }
[data-theme="retro"] button:hover:not(:disabled), [data-theme="retro"] .button:hover { background: #fff; color: #000; }
[data-theme="retro"] .card:hover:not(:disabled) { background: #222; }

/* ?video: only the battle, filling the frame (used by demo-video/ to record the concept video) */
html[data-video] body, html[data-video] #app { background: transparent !important; box-shadow: none !important; max-width: none; height: auto; }
html[data-video] #top, html[data-video] #ticker, html[data-video] #areas, html[data-video] #panel, html[data-video] #tabs, html[data-video] #stageUi, html[data-video] #toasts, html[data-video] #dolphin { display: none !important; }
html[data-video] #stage { width: 100vw; height: 100vh; aspect-ratio: auto; overflow: hidden; }
html[data-video] #cv { width: 145vw; height: auto; transform-origin: 0 0; } /* zoom on the fence, the cat and the nearest foes */

/* v0.3 bosses: what the boss asks for, sets in progress, cards that answer it (kept compact: the overlay must fit the stage) */
#stageOverlay { overflow-y: auto; align-items: safe center; }
.pick h3 { font-size: 14px; margin-bottom: 4px; }
.pick .bossinfo { font-size: 10.5px; margin: 0 4px 6px; line-height: 1.4; color: #3a2622; background: rgba(255,248,241,.94); border-radius: 8px; padding: 3px 8px; text-align: left; }
.pick .bossinfo b { color: #d5755c; }
.pick .sets { font-size: 10px; margin: 6px 4px 0; display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: center; justify-content: center; color: #fff6ec; }
.pick .card { padding: 5px 4px 6px; }
.pick .sets .set { padding: 1px 6px; border-radius: 8px; border: 1.5px solid var(--fc); }
.pick .sets .set.on { background: var(--fc); color: #2a1a12; font-weight: 800; }
.pick .sets small { opacity: .75; margin-left: 2px; }
.card.helps { box-shadow: 0 0 0 3px #ffd36e, 0 4px 0 rgba(0,0,0,.15); }
.card .helps-tag { position: absolute; top: -9px; right: 6px; background: #ffd36e; color: #2a1a12; font-size: 10px; font-weight: 900; padding: 1px 6px; border-radius: 8px; }
.card { position: relative; }
.hubinfo.boss { font-size: 11px; line-height: 1.45; }
.hubinfo.boss b { color: #d5755c; }
.pick .card canvas.icon { width: 34px !important; height: 34px !important; }
.pick .card b { font-size: 11.5px; }
.pick .card p { font-size: 9.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pick .card .grade { font-size: 9px; }
#stageOverlay:has(.pick) { background: rgba(8,6,12,.82); }
.pick h3 { margin: 0 0 2px; }
.pick h3 { color: #fff6ec; }

/* 夢の市場 */
.market h3 { margin: 4px 0; }
.market .mhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.market .clock { font-size: 12px; } .market .clock b { font-size: 16px; color: #d5755c; }
.market .next { font-size: 11.5px; background: rgba(199,168,255,.18); border-radius: 8px; padding: 4px 8px; margin: 4px 0; }
.market h4 { margin: 12px 0 4px; font-size: 14px; display: flex; flex-direction: column; } .market h4 small { font-size: 10.5px; font-weight: 600; opacity: .75; }
.market .shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.market .shop button { display: flex; flex-direction: column; gap: 2px; padding: 6px; font-size: 11px; text-align: left; } .market .shop small { font-size: 9.5px; opacity: .8; } .market .shop span { font-weight: 800; }
.market .goods { display: flex; flex-direction: column; gap: 4px; }
.market .good { display: grid; grid-template-columns: 30px 1fr 46px 78px; grid-template-areas: "i n s p" "b b b b"; gap: 2px 6px; align-items: center; padding: 5px 6px; border-radius: 10px; background: rgba(255,255,255,.55); border: 1.5px solid #efc9b9; }
.market .good.hot { border-color: #ffd36e; box-shadow: 0 0 0 2px rgba(255,211,110,.5); }
.market .good > canvas.icon:first-child { grid-area: i; } .market .gname { grid-area: n; min-width: 0; } .market .gname small { display: block; font-size: 10px; opacity: .75; }
.market .good canvas.spark { grid-area: s; width: 46px !important; height: 26px !important; }
.market .gprice { grid-area: p; text-align: right; font-size: 12px; display: flex; flex-direction: column; } .market .gprice small { font-size: 10px; } .market .pos { color: #2f9a6f; } .market .neg { color: #d9534f; }
.market .gprice em { font-style: normal; font-size: 10px; font-weight: 900; border-radius: 6px; padding: 0 4px; } .market em.up { background: #ffd36e; color: #2a1a12; } .market em.top { background: #ff9d7a; color: #fff; } .market em.down { background: #8fd3ff; color: #2a1a12; }
.market .gbtn { grid-area: b; display: flex; gap: 4px; flex-wrap: wrap; } .market .gbtn button { padding: 3px 8px; font-size: 11px; } .market .gbtn small { margin-left: 3px; font-size: 9.5px; opacity: .75; }
.market .orders, .market .news { list-style: none; padding: 0; margin: 0; font-size: 11.5px; } .market .news li { padding: 3px 0; border-bottom: 1px dashed #efc9b9; } .market .news time { font-weight: 800; margin-right: 6px; color: #d5755c; }
.market .news li.spike { font-weight: 800; } .market .news li.crash { opacity: .85; }
/* Google login and chosen names */
.acct { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.acct > button { width: 100%; }
.acct .mini { margin-top: 6px; padding: 3px 10px; font-size: 11px; border-width: 1px; border-radius: 8px; }
.acct .say { display: flex; gap: 4px; }
.acct .say input { flex: 1; min-width: 0; background: var(--ink); color: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 8px; font-size: 16px; }
.repwhat { font-size: 11px; color: var(--muted); margin-left: 4px; }
.repwhat button { padding: 0 6px; margin-left: 3px; font-size: 11px; border-width: 1px; border-radius: 6px; }
.ranks .rep { padding: 0 4px; margin-left: 4px; font-size: 10px; border: 0; background: none; box-shadow: none; opacity: .45; }
.chatstatus.ok { color: var(--mint); }
/* 夜の行商人 */
.market .merchant { margin: 8px 0; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.6); border: 2px solid #efc9b9; }
.market .merchant.hot { border-color: #ffd36e; box-shadow: 0 0 0 3px rgba(255,211,110,.45); }
.market .merchant .say { margin: 0 0 8px; font-size: 13px; font-weight: 800; }
.market .merchant .want { display: grid; grid-template-columns: 54px 1fr auto; gap: 8px; align-items: center; }
.market .merchant .want small { display: block; font-size: 11px; opacity: .8; }
.market .merchant .mult { font-size: 30px; font-weight: 900; color: #d5755c; text-align: right; line-height: 1; }
.market .merchant .mult small { display: block; font-size: 11px; color: inherit; opacity: .8; margin-top: 2px; }
.market .merchant .row3 { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 6px; }
.market .merchant .row3 .big { display: flex; flex-direction: column; } .market .merchant .row3 small { font-size: 10.5px; font-weight: 700; }
.runbtns { flex-wrap: wrap; justify-content: flex-end; pointer-events: auto; }
.runbtns button.leave { background: rgba(18,16,20,.8); border-color: #fab2a8; color: #fab2a8; }
.market .fixed { display: flex; flex-direction: column; gap: 4px; }
.market .frow { display: grid; grid-template-columns: 26px 1fr 74px 74px; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 10px; background: rgba(255,255,255,.5); }
.market .frow small { display: block; font-size: 10px; opacity: .8; }
.market .frow button { padding: 3px 4px; font-size: 11.5px; display: flex; flex-direction: column; align-items: center; }
/* 1時間だけの差し入れ */
.market .boosts { margin: 8px 0; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.45); border: 2px dashed #efc9b9; }
.market .boosts h4 { margin: 0 0 6px; } .market .boosts h4 small { display: block; font-size: 10.5px; font-weight: 700; opacity: .8; }
.market .boffers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.market .boffer { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; text-align: center; line-height: 1.25; }
.market .boffer .bi { font-size: 22px; } .market .boffer b { font-size: 12px; } .market .boffer small { font-size: 10.5px; font-weight: 700; opacity: .85; } .market .boffer em { font-style: normal; font-size: 11px; margin-top: 2px; }
.blive { margin-top: 6px; font-size: 11.5px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.bon { padding: 2px 8px; border-radius: 99px; background: #ffe9a8; color: #3a2a12; font-weight: 800; } .bon small { font-weight: 700; opacity: .75; }
.stats + .blive, .blive { margin: 6px 0; }

/* ── gacha cards by rarity (2026-10-03: the first 10-pull is a reveal too; rarity is a badge and a finish) ── */
.gcard { height: 124px; }
.gcard .front { overflow: hidden; gap: 2px; }
.gcard .front small { font-size: 9.5px; font-weight: 800; }
.rb { font-style: normal; font-weight: 900; font-size: 10.5px; letter-spacing: .02em; padding: 0 6px; border-radius: 99px; line-height: 1.5; color: #121014; background: #d9d2c9; }
.r-R .rb { background: #8fd3ff; } .r-SR .rb { background: #c7a8ff; } .r-SSR .rb { background: linear-gradient(90deg, #ffe7a3, #ffc94a, #fff1c4); }
.r-UR .rb { background: linear-gradient(90deg, #ff8fb8, #ffd36e, #9ff0c8, #8fd3ff, #c7a8ff); background-size: 200% 100%; animation: rainbow 2s linear infinite; }
/* fronts: the same in every theme */
.gcard .front { background: #fffaf4; color: #3a3148; border: 2px solid #d9d2c9; }
.gcard.r-R .front { background: linear-gradient(180deg, #e3f5ff, #fffaf4 70%); border-color: #8fd3ff; }
.gcard.r-SR .front { background: linear-gradient(180deg, #efe6ff, #fffaf4 70%); border-color: #c7a8ff; }
.gcard.r-SR .front::before { content: '✦'; position: absolute; right: 5px; top: 3px; color: #a07ce8; font-size: 12px; }
.gcard.open.r-SSR .front { background: linear-gradient(160deg, #fff4cf, #ffd36e 45%, #ffe9a6 60%, #f4b93d); border: 2px solid #e2a32a; box-shadow: 0 0 14px rgba(255,201,74,.9); }
.gcard.open.r-UR .front { background: linear-gradient(160deg, #ffe0ee, #fff3d1 30%, #dcfff0 55%, #dff1ff 75%, #efe3ff); border: 0; box-shadow: 0 0 18px rgba(255,143,184,.95); }
.gcard.r-UR .front::before { content: ''; position: absolute; inset: 0; border-radius: 12px; padding: 3px; background: conic-gradient(from var(--a, 0deg), #ff8fb8, #ffd36e, #9ff0c8, #8fd3ff, #c7a8ff, #ff8fb8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinA 2.4s linear infinite; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spinA { to { --a: 360deg; } }
/* shine sweeping across SSR and UR */
.gcard.open.r-SSR .front::after, .gcard.open.r-UR .front::after { content: ''; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%); transform: translateX(-120%); animation: sheen 2.2s .5s ease-in-out infinite; pointer-events: none; }
@keyframes sheen { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }
/* the moment before an SSR/UR turns over, and the burst when it does */
.gcard.charge:not(.open) { animation: wobble .09s ease-in-out infinite alternate; }
.gcard.charge:not(.open) .back { box-shadow: 0 0 30px 8px var(--glow); }
.gcard.burst::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; box-shadow: 0 0 0 0 var(--glow); animation: burst .7s ease-out; pointer-events: none; transform: rotateY(180deg); }
@keyframes burst { from { box-shadow: 0 0 0 0 var(--glow); opacity: 1; } to { box-shadow: 0 0 0 70px transparent; opacity: 0; } }
.urflash { position: fixed; inset: 0; z-index: 60; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,143,184,.5) 40%, rgba(143,211,255,.25) 70%, transparent); animation: urflash .9s ease-out forwards; }
@keyframes urflash { from { opacity: 1; } to { opacity: 0; } }
.gcard.sel .front { outline: 3px solid var(--coral); outline-offset: -1px; }
/* the first 10-pull: the best card large, then the two choices */
.spot { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; margin: 8px 0 4px; padding: 8px 10px; border-radius: 14px; background: #fff; border: 2px solid #d9d2c9; text-align: left; animation: pop .25s; }
.spot.r-SSR { border-color: #e2a32a; background: linear-gradient(160deg, #fff8e0, #fff); } .spot.r-UR { border-color: #ff8fb8; background: linear-gradient(160deg, #ffeaf3, #f0f8ff); box-shadow: 0 0 12px rgba(255,143,184,.5); }
.spot .lbl { display: block; font-size: 10.5px; font-weight: 900; color: var(--coral2); }
.spot b { font-size: 15px; } .spot small { display: block; font-size: 11.5px; color: #6b5f73; line-height: 1.35; }
.first .best small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.first #gachaButtons { flex-direction: column; align-items: center; gap: 6px; }
.first #gachaButtons .go { min-width: 70%; font-size: 17px; padding: 12px 18px; }
.first #gachaButtons .again { background: none; border: 0; box-shadow: none; font-size: 12.5px; text-decoration: underline; color: var(--muted); padding: 4px 8px; }
/* 商人: how many one tap trades */
.market .qty { display: flex; align-items: center; gap: 5px; margin: 0 0 6px; font-size: 11.5px; font-weight: 800; }
.market .qty button { padding: 2px 10px; font-size: 12px; border-radius: 99px; }
.market .qty button.on { background: var(--coral); border-color: var(--coral2); color: #fff; }
/* a newly opened hour (0.3.7): NEW on its chip, a glow, and 「へ進む」 on the stage until it is visited */
#areas button.new { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,211,110,.55); animation: newhour 1.4s ease-in-out infinite; }
#areas button em, .gonew em { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 9px; font-weight: 900; color: #3a2a12; background: var(--gold); border-radius: 99px; padding: 0 5px; line-height: 1.5; }
@keyframes newhour { 50% { box-shadow: 0 0 0 5px rgba(255,211,110,.25); } }
.gonew { position: relative; display: block; margin: 0 0 6px auto; padding: 6px 12px; font-size: 13px; font-weight: 900; background: #fff4cf; border: 2px solid var(--gold); color: #3a2a12; border-radius: 12px; animation: newhour 1.4s ease-in-out infinite; }
.sheet .newhour { margin: 6px 0; padding: 6px 8px; border-radius: 10px; background: #fff4cf; color: #3a2a12; font-size: 12.5px; }