/* 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; }
@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; }
.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-stage { position:relative; display:grid; place-items:center; height:180px; overflow:hidden; border:1px solid #a9b38c; border-radius:12px; background:#e5eacb; }
.short-stage img { width:115px; height:115px; object-fit:contain; animation:debate 1s ease-in-out infinite alternate; }
.short-stage b { position:absolute; right:12px; bottom:15px; padding:5px 10px; border:3px double #a34b37; color:#a34b37; background:#fff8df; transform:rotate(-9deg); font-size:20px; }
.short-stage { display:flex; justify-content:center; gap:16px; }
.short-stage .short-actor { width:110px; height:155px; }
.short-topic { display:grid; justify-items:center; gap:4px; }
.short-topic img { width:80px; height:80px; }
.short-topic strong { font-size:13px; }
.short-line { min-height:44px; }
.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; }
@keyframes debate { from { transform:rotate(-4deg) } to { transform:rotate(4deg) translateY(-3px) } }
@media(max-width:360px) { .speech strong { font-size:11px; } .speech p { font-size:10.5px; } }
@media(prefers-reduced-motion:reduce) { .short-stage img { animation:none; } }

/* Chapter props use actual gag faces; captions stay at native scale. */
.chapter-tool-fx { position:absolute; left:18px; right:18px; height:120px; z-index:45; pointer-events:none; display:none; }
.chapter-tool-fx.show { display:block; }
.chapter-tool-scene { display:flex; align-items:center; gap:8px; height:100%; padding:5px 12px 5px 3px; background:#fffbedf2; border:2px solid #acb88e; border-radius:18px; box-shadow:0 4px 0 #5c704d30; }
.chapter-fx-actor { width:76px; height:106px; object-fit:contain; flex:0 0 auto; animation:chapter-actor .35s ease-out; }
.chapter-fx-props { position:relative; display:flex; gap:3px; align-items:center; justify-content:center; min-width:54px; }
.chapter-fx-card { display:grid; justify-items:center; width:46px; flex:0 0 46px; padding:4px 1px; background:#ffffef; border:1px solid #bdc59d; border-radius:7px; }
.chapter-fx-card img { width:40px; height:40px; object-fit:contain; }
.chapter-fx-card b { font-size:10px; line-height:14px; font-weight:700; white-space:nowrap; }
.chapter-fx-copy { min-width:0; flex:1; text-align:center; }
.chapter-fx-copy small { display:block; color:#7f8769; font-size:9px; line-height:14px; }
.chapter-fx-copy strong { display:block; margin-top:4px; color:var(--topic); font-size:15px; line-height:20px; font-weight:900; }
.chapter-tool-fx[data-tool="stash"] .chapter-fx-props { padding-bottom:9px; }
.chapter-tool-fx[data-tool="stash"] .chapter-fx-props::after { content:''; position:absolute; bottom:0; left:-3px; right:-3px; height:15px; background:#c2ac7e; border:1px solid #8b784f; border-radius:2px 2px 6px 6px; }
.chapter-tool-fx[data-tool="bomb"] .chapter-fx-card img { animation:chapter-debunk .5s ease-out; }
.chapter-tool-fx[data-tool="stash"] .chapter-fx-card img { animation:chapter-file .55s ease-out; }
.chapter-tool-fx[data-tool="shuffle"] .chapter-fx-card img { animation:chapter-reorder .6s ease-out; }
.chapter-tool-fx[data-tool="shuffle"] .chapter-fx-card:nth-child(2) img { animation-direction:reverse; }
.chapter-tray-burst { position:absolute; pointer-events:none; }
.chapter-tray-burst i { position:absolute; width:7px; height:10px; border:1px solid #fff7df; border-radius:2px; background:var(--topic); }
@keyframes chapter-actor { from { transform:translateX(-12px) rotate(-8deg); } to { transform:none; } }
@keyframes chapter-debunk { 0% { transform:rotate(-13deg) scale(1.15); } 45% { transform:rotate(10deg); } 100% { transform:none; } }
@keyframes chapter-file { from { transform:translateY(-25px); } 65% { transform:translateY(5px); } to { transform:none; } }
@keyframes chapter-reorder { 0% { transform:translateX(-14px) rotate(-18deg); } 50% { transform:translateX(14px) rotate(18deg); } 100% { transform:none; } }
@media(max-width:360px) {
  .chapter-tool-fx { left:9px; right:9px; }
  .chapter-tool-scene { padding-right:6px; gap:5px; }
  .chapter-fx-actor { width:57px; }
  .chapter-fx-card { width:39px; flex-basis:39px; }
  .chapter-fx-card img { width:34px; height:34px; }
  .chapter-fx-card b { font-size:9px; }
  .chapter-fx-copy strong { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
  .chapter-tool-fx img { animation:none!important; }
}