/* The shipped simplified UI owns the game HUD, cards, tray and tools.
   This chapter adds the character-select home, four-character labels and short. */
#screen-home { background:linear-gradient(180deg,#c1dfff 0%,#d7eeee 36%,#d8edbd 72%,#c8e69e 100%); gap:8px; padding:18px 20px calc(12px + var(--safe)); overflow-x:hidden; }
#screen-home .home-logo { width:min(76vw,270px); }
#screen-home .ribbon { font-size:12px; padding:4px 16px; border-radius:12px; }
.character-selector { --character-width:clamp(208px,66vw,264px); --character-height:324px; width:calc(100% + 40px); flex:0 0 auto; }
.character-track { position:relative; display:flex; align-items:center; gap:16px; width:100%; min-width:0; height:calc(var(--character-height) + 30px); padding:12px max(0px,calc((100% - var(--character-width))/2)) 18px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; touch-action:pan-x pan-y; cursor:grab; }
.character-track::-webkit-scrollbar { display:none; }
.character-track.is-dragging { scroll-snap-type:none; cursor:grabbing; user-select:none; }
.character-slide { flex:0 0 var(--character-width); min-width:0; height:var(--character-height); scroll-snap-align:center; scroll-snap-stop:always; }
.character-card { --distance:1; position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:8px; width:100%; height:100%; padding:14px; border:2px solid #b5c6a0; border-radius:23px; background:linear-gradient(155deg,#fffdf0,#edf5db); box-shadow:0 5px 0 #91aa7938,0 9px 18px #4f755512; transform:translateY(calc(var(--distance)*7px)) scale(calc(1 - var(--distance)*.08)); opacity:calc(1 - var(--distance)*.34); cursor:grab; user-select:none; -webkit-user-select:none; }
.character-card::before { content:''; position:absolute; inset:5px; border:1px solid #fffefa; border-radius:17px; pointer-events:none; }
.character-slide.is-selected .character-card { border-color:#6f985c; box-shadow:0 5px 0 #7f9f633f,0 10px 22px #48724d1a; }
.character-card:focus-visible { outline:3px solid #467c52; outline-offset:3px; }
.character-card-head { display:flex; justify-content:flex-end; align-items:center; position:relative; z-index:1; }
.character-status { padding:3px 8px; border-radius:7px; background:#e1ebca; color:#6f7f60; font-size:9px; font-weight:700; letter-spacing:.5px; }
.character-card[data-playable="true"] .character-status { color:#6e602d; background:#f5e6a7; }
.character-art { position:relative; display:block; min-height:0; }
.character-art::after { content:''; position:absolute; left:24%; right:24%; bottom:1px; height:10px; border-radius:50%; background:#778d4d1c; }
.character-art img { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.character-caption { position:relative; display:grid; justify-items:center; gap:2px; }
.character-caption b { font-size:18px; line-height:25px; letter-spacing:1px; color:#3e6044; }
.character-pagination { display:flex; justify-content:center; align-items:center; gap:15px; min-height:22px; color:#839573; font-size:10px; letter-spacing:.5px; }
.chapter-info { min-height:36px; }
.chapter-info .home-tagline { white-space:pre-line; }
#screen-home .chapter-info h1 { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#screen-home .home-tagline { font-size:11px; line-height:18px; }
#screen-home .home-start { margin-top:1px; }
#screen-home #start { width:100%; min-height:48px; font-size:17px; }
#screen-home #start:disabled { color:#879273; background:#eaf0d8; border-color:#b8c6a0; box-shadow:0 3px 0 #aaba8e; cursor:default; }
#screen-home .home-start .home-new { min-height:32px; margin-top:5px; }
.asset-loading { position:absolute; inset:0; z-index:250; display:grid; place-items:center; padding:24px; background:radial-gradient(ellipse at 50% 38%,#e4f5ce 0%,#d4efb5 50%,#c8eea4 100%); }
.asset-loading[hidden] { display:none; }
.asset-loading-card { width:min(100%,240px); text-align:center; color:#375d30; }
.asset-loading-logo { display:block; width:100%; height:auto; margin:0 auto 32px; }
.asset-loading-card strong { display:block; margin-bottom:20px; font-size:20px; line-height:28px; font-weight:800; letter-spacing:3px; }
.asset-loading-card progress { display:block; appearance:none; -webkit-appearance:none; width:100%; height:13px; overflow:hidden; padding:2px; border:1px solid #91b874; border-radius:20px; background:#eef7db; box-shadow:0 2px 0 #9fc27f50; }
.asset-loading-card progress::-webkit-progress-bar { background:#d0e5b6; border-radius:20px; }
.asset-loading-card progress::-webkit-progress-value { border-radius:20px; background:linear-gradient(180deg,#86b75e,#639548); transition:width .18s ease-out; }
.asset-loading-card progress::-moz-progress-bar { border-radius:20px; background:linear-gradient(180deg,#86b75e,#639548); }
.asset-loading-card p { min-height:18px; margin:9px 0 0; color:#567744; font-size:12px; line-height:18px; font-variant-numeric:tabular-nums; letter-spacing:1px; }
.asset-loading-card button { min-width:112px; min-height:44px; margin-top:28px; color:#55734a; font-size:12px; text-decoration:none; }
.asset-loading-card button:focus-visible { outline:2px solid #4f7b3b; outline-offset:2px; border-radius:12px; }
@media(prefers-reduced-motion:reduce) { .asset-loading-card progress::-webkit-progress-value { transition:none; } }
@media(max-height:760px) {
  #screen-home { gap:5px; padding-top:13px; }
  #screen-home .home-logo { width:220px; }
  .character-selector { --character-height:270px; }
}
@media(max-height:620px) {
  #screen-home { gap:4px; padding:10px 16px calc(8px + var(--safe)); }
  #screen-home .home-logo { width:150px; }
  #screen-home .ribbon { font-size:10px; padding:3px 13px; }
  .character-selector { --character-height:192px; width:calc(100% + 32px); }
  .character-track { gap:12px; }
  .character-card { padding:10px 12px; gap:4px; border-radius:19px; }
  .character-card::before { border-radius:14px; }
  .character-caption b { font-size:17px; line-height:20px; }
  .character-pagination { min-height:18px; font-size:9px; }
  #screen-home .home-tagline { font-size:10px; line-height:15px; }
  .chapter-info { min-height:30px; }
  #screen-home #start { min-height:44px; font-size:15px; }
  #screen-home .home-start .home-new { min-height:26px; margin-top:3px; }
  #screen-home footer .text-btn { min-height:28px; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .character-card { transform:none; } }
.tile.blocked .card-name { visibility:hidden; }
.tile .card-name { font-weight:700; letter-spacing:0; }
.card-name, .chapter-fx-card b { color:#2f713b; }
/* User-supplied v4 art retains its white plate; blend it into each card state. */
.card-art, .chapter-fx-card img, .short-topic img, .reward-options img { mix-blend-mode:multiply; }
.tray-card .card-name, .motion-card .card-name { font-size:9px; letter-spacing:0; }
.stash-slot .card-name { font-size:9px; letter-spacing:0; }
.speech strong { font-size:12px; }
.speech p { font-size:11px; }
/* Keep new gag text at native size from its first frame; scaling blurs small type. */
.speech.talking { animation:none; }
.pressure-line[data-mode="remaining"] { --mood:#bb3f32; color:var(--mood); background:#fff1e9; border-color:#dfac9c; }
.pressure-line[data-mode="remaining"] .pressure-track { background:#f2dfcf; }
.pressure-line[data-mode="remaining"] .pressure-track i { background:var(--mood); }
.pressure-line[data-mode="remaining"][data-state="loosening"] { --mood:#b56a28; background:#fff5e6; border-color:#dfc198; }
.pressure-line[data-mode="remaining"][data-state="cooling"] { --mood:#8b7e2d; background:#fffbe7; border-color:#d9d09b; }
.pressure-line[data-mode="remaining"][data-state="settling"], .pressure-line[data-mode="remaining"][data-state="clear"] { --mood:#4b8042; background:#f0f7e7; border-color:#b3c99b; }
.result-seal { margin:14px 0; font-size:26px; font-weight:800; color:#588044; letter-spacing:2px; }
.result-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; text-align:center; }
.result-stats b { display:block; font-size:21px; }
.chapter-ranks { list-style:none; padding:0; margin:0; text-align:left; }
.chapter-ranks li { display:flex; align-items:center; gap:9px; min-height:61px; border-top:1px solid #dce1c9; }
.chapter-rank { width:14px; flex:0 0 14px; color:#9a8255; font-size:13px; text-align:center; }
.chapter-ranks img { width:36px; height:48px; object-fit:contain; }
.chapter-rank-name { flex:1; min-width:0; }
.chapter-rank-name b { display:block; font-size:12px; }
.chapter-rank-name small { display:block; margin-top:4px; font-size:10px; color:#788267; }
.chapter-rank-count { flex:0 0 auto; min-width:42px; text-align:right; }
.chapter-rank-count b { display:block; font-size:22px; line-height:25px; color:#557c3c; font-variant-numeric:tabular-nums; }
.chapter-rank-count small { display:block; font-size:10px; color:#7d896d; }
.modal .chapter-circle-rule { margin:10px 0 0; font-size:10px; }
#character-board .subtle { margin:3px 0 0; color:#8c937d; }
.modal:has(.chapter-ranks) { padding-top:16px; padding-bottom:16px; }
.modal:has(.chapter-ranks) > p:empty { display:none; }
.modal:has(.chapter-ranks) .modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.modal:has(.chapter-ranks) .modal-actions .btn { min-height:44px; margin-top:8px; font-size:12px; padding:10px 6px; }
@media(max-height:620px) {
  .chapter-ranks li { min-height:49px; gap:6px; }
  .chapter-ranks img { width:28px; height:39px; }
  .modal:has(.chapter-ranks) { padding:12px 13px; }
  .modal:has(.chapter-ranks) h2 { font-size:21px; margin-bottom:4px; }
  .modal #character-board-status { font-size:11px; margin:5px 0 9px; }
}
.help { padding-left:19px; text-align:left; font-size:12px; line-height:1.9; }
.reward-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.reward-options button { display:grid; justify-items:center; gap:8px; padding:12px 4px; border:1px solid #a9b38c; border-radius:12px; background:#fffbed; font-size:11px; }
.reward-options img { width:46px; height:46px; object-fit:contain; }
.short-progress { height:6px; background:#dce1cc; border-radius:8px; overflow:hidden; }
.short-progress i { display:block; height:100%; width:0; background:#a94b37; }
.subtle { font-size:10px!important; }
.chapter-share-summary { display:flex; align-items:center; gap:12px; margin:14px 0; padding:12px; border:1px solid #bfcca8; border-radius:12px; background:#f4f5de; text-align:left; }
.chapter-share-summary img { width:56px; height:60px; object-fit:contain; }
.chapter-share-summary b { display:block; color:#587a42; font-size:18px; }
.chapter-share-summary span { display:block; margin-top:5px; color:#7b8468; font-size:11px; }
.chapter-share-link { display:block; width:100%; box-sizing:border-box; padding:10px; border:1px solid #b9c59d; border-radius:8px; background:#fffef4; color:#72815f; font:11px/1.5 system-ui,sans-serif; }
@media(max-width:360px) { .speech strong { font-size:11px; } .speech p { font-size:10.5px; } }

.reaction-avatar { position:relative; flex:0 0 67px; width:67px; height:82px; align-self:end; background:#ffffeb; border:2px solid #94ac75; border-radius:15px; }
.reaction-avatar > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; border-radius:13px; }
.reaction-avatar .avatar-ko { opacity:0; transform-origin:50% 67%; }
.reaction-avatar[data-reaction="ko"].is-hit #char-img { opacity:0; }
.reaction-avatar[data-reaction="ko"].is-hit .avatar-ko { opacity:1; animation:avatar-ko-hit 1.1s ease-out both; }
.reaction-avatar[data-reaction="stun"].is-hit #char-img { animation:avatar-ko-hit 1.1s ease-out both; }
.avatar-stars { position:absolute; left:-4px; right:-4px; top:-8px; height:27px; pointer-events:none; opacity:0; z-index:3; }
.avatar-stars i { position:absolute; color:#ffe56b; font:900 21px/25px sans-serif; text-shadow:1px 1px #997933,-1px -1px #997933,1px -1px #997933,-1px 1px #997933; font-style:normal; }
.avatar-stars i:nth-child(1){left:0;top:5px}.avatar-stars i:nth-child(2){left:27px;top:-4px}.avatar-stars i:nth-child(3){right:0;top:5px}
.reaction-avatar.is-hit .avatar-stars { animation:avatar-ko-stars 1.1s ease-out both; }
@keyframes avatar-ko-hit {0%{transform:translateY(0) rotate(-10deg) scale(.94)}12%{transform:translate(3px,-3px) rotate(10deg) scale(1.06)}26%{transform:translate(-2px,1px) rotate(-6deg)}42%{transform:rotate(3deg)}72%{transform:rotate(-2deg)}100%{transform:none}}
@keyframes avatar-ko-stars {0%{opacity:0;transform:translateY(4px) scale(.5)}16%{opacity:1;transform:translateY(-2px) rotate(-9deg) scale(1)}45%{opacity:1;transform:rotate(9deg)}75%{opacity:1;transform:rotate(-6deg)}100%{opacity:0;transform:translateY(-5px)}}
@media(max-height:700px){.reaction-avatar{flex-basis:50px;width:50px;height:54px}.avatar-stars i{font-size:16px}.avatar-stars i:nth-child(2){left:18px}}
@media(prefers-reduced-motion:reduce){.reaction-avatar.is-hit .avatar-ko{animation:none}.reaction-avatar.is-hit .avatar-stars{animation:none;opacity:1}}
#btn-audio { position:relative; transition:background-color .12s,color .12s,border-color .12s; }
#btn-audio[aria-pressed="true"] { background:#4b8340; color:#fffde9; border-color:#32652e; box-shadow:0 2px 0 #32652e; }
#btn-audio[aria-pressed="false"] { background:#e5e8df; color:#626b60; border-color:#a8afa0; box-shadow:0 2px 0 #a4ae99; }
#btn-audio .audio-off-slash { display:none; position:absolute; left:50%; top:50%; width:26px; border-top:2.5px solid currentColor; transform:translate(-50%,-50%) rotate(-45deg); pointer-events:none; }
#btn-audio[aria-pressed="false"] .audio-off-slash { display:block; }
#btn-audio:focus-visible { outline:3px solid #f0bf42; outline-offset:3px; }
@media(prefers-reduced-motion:reduce){#btn-audio{transition:none}}
.film-sound { display:block; min-height:44px; margin:3px auto 7px; padding:7px 16px; border:1px solid #afbf94; border-radius:99px; color:#406a39; background:#e8f4d4; font-size:12px; }
.film-sound[aria-pressed="false"] { background:#e8eade; color:#6d7461; }
@media(prefers-reduced-motion:reduce){.reaction-avatar[data-reaction="stun"].is-hit #char-img{animation:none}}