:root { font-family: 'Microsoft JhengHei', 'PingFang TC', system-ui, sans-serif; color: #34452d; background: #e8efdf; --green: #32853c; --safe: env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; }
body { margin: 0; height: 100dvh; overflow: hidden; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible, summary:focus-visible { outline: 3px solid #1268b8; outline-offset: 3px; }
button:disabled { cursor: default; }
#app { position: relative; width: min(100%, 520px); height: 100dvh; margin: auto; background: #c8eea4; box-shadow: 0 0 40px #4a633b16; overflow: hidden; }
.screen { display: none; height: 100%; }
.screen.active { display: flex; flex-direction: column; }
#screen-home { align-items:center; justify-content:safe center; text-align:center; padding:24px 20px calc(12px + var(--safe)); overflow-y:auto; gap:14px; }
.home-brand { position: relative; display: flex; flex-direction: column; align-items: center; }
.home-logo { width: 210px; height: auto; filter: drop-shadow(0 4px 3px #243b4840); }
.ribbon { background: #f8d55b; border: 2px solid #6b501a; padding: 4px 16px; border-radius: 30px; font-size: 13px; font-weight: 900; margin-top: -6px; }
.home-char { width: 144px; height: 150px; object-fit: contain; margin-bottom: -8px; border-radius: 26px; }
h1 { font-size:clamp(21px,5vw,27px); line-height:1.3; margin:0; letter-spacing:1px; }
.home-tagline { line-height: 1.7; font-size: 14px; margin: 0; color: #49625a; }
.btn { padding: 12px 20px; border-radius: 14px; border: 2px solid #fff; font-weight: 850; font-size: 15px; min-height: 46px; }
.btn:active { transform: translateY(2px); }
.primary { background: linear-gradient(#64c973, #368e42); color: white; box-shadow: 0 4px 0 #286c32; }
#btn-play { width:100%; font-size:19px; min-height:52px; }
.secondary { background: #fff9e9; border-color: #b8c6b4; }
.home-start { width:min(100%,330px); margin-top:4px; }
.home-start p { font-size:12px; line-height:18px; margin:10px 0 0; color:#63804d; }
.home-new { min-height:44px; padding:0 9px; margin-top:2px; font-size:12px; color:#567044; }
.circle-entry { width:min(100%,330px); flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid #96ad78; border-radius:14px; background:#f7f9dd; text-align:left; box-shadow:0 2px 0 #9ab780; }
.circle-entry > span:nth-child(2) { flex:1; }
.circle-entry b { display:block; font-size:15px; }
.circle-entry small { display:block; font-size:11px; margin-top:3px; color:#6a7853; }
.circle-entry-seal { display:grid; place-items:center; width:35px; height:35px; flex:0 0 35px; border:2px solid #a84c37; color:#a84c37; border-radius:50%; font-size:22px; font-weight:900; transform:rotate(-12deg); }
#screen-home footer { display:flex; gap:9px; align-items:center; justify-content:center; margin-top:2px; }
#screen-home footer .text-btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 6px; font-size:12px; color:#567044; text-decoration:none; }
.reset-progress { color:#8b7a5e; font-size:11px; min-height:44px; }
.char-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.char-btn { border: 2px solid transparent; border-radius: 10px; background: #fff9; padding: 5px; font-size: 11px; }
.char-btn img { width: 45px; height: 48px; object-fit: contain; display: block; margin: auto; }
.char-btn.active { border-color: #4a9b54; background: #f4fff1; }
footer { font-size: 11px; line-height: 1.8; color: #526852; }
footer small { display: block; opacity: .7; }
.text-btn { background: none; border: 0; padding: 3px 0; font-size: inherit; text-decoration: underline; }
#screen-game { padding: 4px 10px calc(8px + var(--safe)); overflow-y: auto; gap: 4px; }
.game-toolbar { display:flex; align-items:center; justify-content:space-between; flex:0 0 44px; padding:0 3px; gap:8px; }
.mini-brand { display:flex; flex-direction:column; align-items:flex-start; gap:2px; white-space:nowrap; }
.mini-brand > b { color:#365b35; font-size:17px; font-weight:900; letter-spacing:1px; line-height:21px; }
.mini-brand small { background:#e5f3ce; color:#657e4c; border-radius:5px; padding:1px 5px; font-size:9px; font-weight:600; line-height:14px; letter-spacing:.5px; }
.game-toolbar > div { display:flex; gap:4px; }
.ui-icon { display:block; width:24px; height:24px; flex-shrink:0; }
.icon-btn { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; padding:0; margin:0; border-radius:13px; background:#f8fbe9; border:1px solid #a9bf8d; color:#587442; box-shadow:0 2px 0 #9ab77b; }
.icon-btn .ui-icon { width:21px; height:21px; }
.icon-btn:active { transform:translateY(1px); box-shadow:0 1px 0 #9ab77b; }
@media (hover:hover) { .icon-btn:hover { background:#fffdf0; border-color:#76995c; } }
.stage { display: flex; align-items: center; gap: 12px; flex: 0 0 80px; padding: 0 8px; min-width: 0; }
.stage > img { width: 67px; height: 82px; object-fit: contain; align-self: end; background: #ffffeb; border: 2px solid #94ac75; border-radius: 15px; }
.speech { position: relative; flex: 1; min-width: 0; background: #ffffea; border: 2px solid #6d8055; border-radius: 16px; padding: 9px 12px; box-shadow: 0 3px 0 #8fab6b; line-height: 1.45; }
.speech::before { content: ''; position: absolute; left: -7px; top: 40%; width: 10px; height: 10px; background: #ffffea; border-left: 2px solid #6d8055; border-bottom: 2px solid #6d8055; transform: rotate(45deg); }
.speech strong { font-size: 14px; }
.speech p { font-size: 12px; margin: 3px 0 0; color: #657261; }
.speech.talking { animation: speech-pop .24s ease-out; }
.run-status { flex: 0 0 auto; padding: 0 12px; }
.run-status > div:first-child { display: flex; justify-content: space-between; align-items: center; gap:8px; font-size: 11px; line-height:17px; }
.run-meta { display:flex; align-items:center; justify-content:flex-end; gap:9px; min-width:0; white-space:nowrap; }
.run-rate { color:#687f52; font-size:10px; overflow:hidden; text-overflow:ellipsis; }
.run-rate:not(:empty)::after { content:'·'; margin-left:9px; color:#88a66b; }
#hud-progress { color: #366b42; font-size: 13px; }
#hud-remain { color: #66735d; flex-shrink:0; }
.progress-track { position: relative; height: 4px; background: #a4cc7b; border-radius: 5px; margin-top: 3px; overflow: hidden; }
.progress-track > i { display: block; background: #6bb75a; height: 100%; width: 0; transition: width .2s ease-out; }
.progress-ticks { display: none; }
#board-tip { display: none; margin: 4px 0 0; color: #5e7257; font-size: 11px; text-align: center; min-height: 16px; }
.run-status.has-tip #board-tip { display: block; }
.board-wrap { flex: 1 1 310px; min-height: 280px; position: relative; border: 0; background: transparent; overflow: hidden; }
.board-wrap::before, .board-wrap::after { content: ''; position: absolute; width: 21px; height: 11px; border: 2px solid #88b45a; border-width: 0 2px 0 0; border-radius: 60% 40%; transform: rotate(-22deg); pointer-events: none; }
.board-wrap::before { left: 5px; top: 44%; box-shadow: -5px 3px 0 -3px #88b45a; }
.board-wrap::after { right: 7px; bottom: 12%; transform: rotate(22deg); }
#board { position: absolute; transform-origin: 0 0; }
.tile, .tray-card, .stash-slot, .fx-card { background:#fffdf0; border:1.5px solid #8ea279; border-radius:9px; box-shadow:0 2px 0 #9ab382,0 3px 3px #4c633021; }
.tile { position:absolute; padding:0; width:64px; height:80px; overflow:hidden; transition:background-color .12s,border-color .12s; }
.card-face { position:absolute; inset:0; display:grid; grid-template-rows:minmax(0,1fr) 14px; justify-items:center; gap:4px; padding:4px 5px 3px; pointer-events:none; }
.card-art { width:100%; height:100%; min-height:0; display:flex; justify-content:center; overflow:hidden; }
.card-icon { display:block; width:100%; height:100%; max-width:42px; overflow:hidden; mix-blend-mode:multiply; }
.card-name { display:block; width:100%; text-align:center; font-size:12px; font-weight:850; color:#4a5138; line-height:14px; white-space:nowrap; }
/* Compensate the whole face once, so the icon and caption share one layout. */
.tile .card-face { bottom:auto; height:calc(100% / var(--counter-y,1.25)); transform:scaleY(var(--counter-y,1.25)); transform-origin:50% 0; }
.tile.blocked { background:#d0dbc1; border-color:#a0b18c; box-shadow:0 2px 0 #93a77e; pointer-events:none; }
.tile.blocked .card-art { opacity:.6; filter:saturate(.65); }
.tile.blocked .card-name { color:#78856a; }
.tile.clickable { background:#fffdf0; }
.tile.clickable:active .card-art { translate: 0 2px; }
.tile.finishable, .tile.tutorial-hint { background:#f5fadf; border-color:#79ad58; }
@media (hover:hover) { .tile.clickable:hover { border-color:#679451; } }
.stash-bar { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; gap: 7px; padding: 3px; background: #fff7; border-radius: 10px; }
.stash-bar.is-empty { display: none; }
.stash-label { font-size: 11px; }
.stash-slot { position: relative; width: 44px; height: 47px; padding: 0; }
.stash-slot .card-face { grid-template-rows:minmax(0,1fr) 11px; gap:2px; padding:3px 2px 2px; }
.stash-slot .card-name { font-size:9px; line-height:11px; }
.tray-section { flex: 0 0 auto; padding: 0 2px; }
.tray-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; margin: 2px 2px 3px; gap: 4px; }
.tray-head strong { white-space: nowrap; }
#tray-count { color: #46874b; margin-left: 4px; }
#tray-hint { color: #597252; font-size: 10px; text-align: right; }
.tray-head[data-tight="true"] #tray-hint { color:#b74431; font-weight:700; }
.tray { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); height: clamp(59px, 17vw, 66px); gap: 3px; padding: 5px; border: 2px solid #756341; border-radius: 7px; background: #bda479; box-shadow: 0 4px 0 #8b754f; }
.tray-slot { position: relative; height: 100%; min-height: 0; background: #d1bb8c; border: 1px solid #a58c61; border-radius: 3px; box-shadow: inset 0 2px 0 #bda477; }
.tray-card { position: absolute; inset: -1px; }
.tray-card .card-face { grid-template-rows:minmax(0,1fr) 11px; gap:2px; padding:3px 2px 2px; }
.tray-card .card-name { font-size:10px; line-height:11px; }
.tray-slot.pair { box-shadow: 0 0 0 2px #9cee83; }
.tray.near-full { border-color: #d95c3d; }
.pressure-line { --mood:#be5346; display:flex; align-items:center; gap:6px; min-height:25px; padding:3px 8px; margin:5px 0 0; border:1px solid #dfb4a7; border-radius:9px; background:#fff4ed; color:#8d4b3e; }
#pressure-face { display:flex; color:var(--mood); }
#pressure-face .ui-icon { width:16px; height:16px; stroke-width:1.9; }
.pressure-label { font-size:10px; white-space:nowrap; }
#pressure-value { color:var(--mood); font-size:10px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pressure-track { flex:1; height:7px; min-width:24px; margin:0 2px; border-radius:5px; background:#f0d8cb; overflow:hidden; }
.pressure-track i { display:block; height:100%; background:linear-gradient(90deg,#ef9a82,var(--mood)); border-radius:5px; transition:width .18s,background .18s; }
#pressure-state { min-width:36px; color:var(--mood); font-size:10px; font-weight:800; text-align:right; white-space:nowrap; }
.pressure-line[data-state="rising"] { --mood:#bd4233; background:#fff0e8; border-color:#db9b88; }
.pressure-line[data-state="rising"] .pressure-track { background:#f0cbbc; }
.pressure-line[data-state="danger"] { --mood:#ae2424; background:#ffeae5; border-color:#d36b5c; }
.pressure-line[data-state="danger"] .pressure-track { background:#ecb8ac; }
.pressure-line[data-enabled="false"] { --mood:#777b68; background:#f1f2e8; border-color:#bdc5ad; color:#777b68; }
.pressure-line[data-enabled="false"] .pressure-track { background:#dce1d1; }
.tools { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; flex:0 0 auto; padding:3px 2px 2px; }
.tool-btn { --tool-art-size:40px; position:relative; min-width:0; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; height:60px; padding:1px 2px 2px; background:linear-gradient(#fffdf0,#f1f4df); color:#506a3f; border:1px solid #a6b98a; border-radius:13px; box-shadow:0 3px 0 #9db47e; }
.tool-symbol { display:grid; place-items:center; width:44px; height:var(--tool-art-size,48px); flex:0 0 var(--tool-art-size,48px); min-width:0; min-height:0; }
.tool-art { display:block; width:var(--tool-art-size,48px); height:var(--tool-art-size,48px); max-width:100%; object-fit:contain; pointer-events:none; user-select:none; }
.tool-btn .tool-copy { display:block; text-align:center; max-width:100%; }
.tool-btn b { display:block; font-size:11px; font-weight:800; line-height:14px; white-space:nowrap; }
.tool-btn small { display:none; }
.tool-btn:disabled { color:#869175; border-color:#b5c49f; box-shadow:0 2px 0 #adbd94; background:#eaf0da; }
.tool-btn:disabled .tool-symbol { opacity:.8; }
.tool-btn:disabled .badge { color:#8c967b; background:#e8eddc; border-color:#c4ceb2; }
.tool-btn:active:not(:disabled) { transform:translateY(2px); box-shadow:0 1px 0 #9db47e; }
@media (hover:hover) { .tool-btn:hover:not(:disabled) { background:#fffef5; border-color:#7c9f62; } }
.badge { position:absolute; top:4px; right:5px; min-width:17px; padding:0 3px; line-height:16px; text-align:center; font-style:normal; background:#f2f6e6; color:#66804d; border:1px solid #c2ceaa; border-radius:6px; font-size:10px; font-weight:750; }
.modal-overlay { display: none; position: absolute; inset: 0; z-index: 100; background: #182c3b9c; padding: 16px; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.modal-overlay.show { display: flex; }
.modal { width: min(100%, 400px); max-height: 95%; overflow-y: auto; border-radius: 20px; border: 3px solid #fffdf1; background: #fff8e6; padding: 22px 20px; text-align: center; box-shadow: 0 8px 30px #112a4055; }
.modal h2 { margin: 5px 0 10px; font-size: 24px; color: #345a3c; }
.modal p { font-size: 13px; line-height: 1.6; color: #66735f; margin: 8px 0 16px; }
.modal .btn { width: 100%; margin-top: 7px; }
.modal .button-row { display: flex; gap: 6px; }
.modal .button-row .btn { font-size: 12px; padding: 9px 5px; }
.result-kicker { letter-spacing: 3px; color: #748162; font-size: 11px; }
.result-number { font-size: 60px; font-weight: 900; color: #428143; line-height: 1.1; margin: 12px 0; }
.result-number small { font-size: 23px; }
.result-stats { background: #edf0d5; padding: 10px; border-radius: 10px; font-size: 12px; line-height: 1.8; }
.toast { position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%); max-width: 90%; width: max-content; padding: 8px 14px; border-radius: 12px; color: white; background: #29472de8; font-size: 12px; opacity: 0; pointer-events: none; z-index: 130; transition: opacity .15s; }
.toast.show { opacity: 1; }
.match-fx { display: none; position: absolute; left: 50%; bottom: 175px; transform: translateX(-50%); z-index: 50; pointer-events: none; text-align: center; font-weight: 900; color: #347b3d; text-shadow: 0 1px #fff; }
.match-fx.show { display: block; animation: match-pop .65s ease-out both; }
.match-fx img { width: 35px; height: 44px; margin: 0 2px; filter: drop-shadow(0 2px 2px #4a623c40); }
.fx-card { position: relative; display: inline-block; width: 38px; height: 44px; margin: 0 2px 6px; }
.fx-card .card-face { grid-template-rows:minmax(0,1fr) 10px; gap:2px; padding:2px; }
.fx-card .card-name { font-size:9px; line-height:10px; }
.match-fx strong { display: block; background: #fff8e9ed; padding: 4px 12px; border-radius: 14px; white-space: nowrap; font-size: 14px; }
.share-preview { width: min(100%, 220px); height: auto; border-radius: 12px; }
@keyframes speech-pop { from { transform: scale(.98); } to { transform: scale(1); } }
@keyframes match-pop { 0% { opacity: 0; translate: 0 8px; scale: .85; } 20% { opacity: 1; scale: 1.08; } 65% { opacity: 1; } 100% { opacity: 0; translate: 0 -25px; scale: 1; } }
@media (min-height: 780px) { .board-wrap { flex-basis: 380px; } }
@media (max-height: 700px) { #screen-game { overflow-y:auto; gap:2px; padding-bottom:calc(4px + var(--safe)); } .board-wrap { flex:0 0 361px; } .stage { flex-basis:54px; } .stage > img { width:50px; height:54px; } .speech { padding:6px 10px; } .speech strong { font-size:13px; } .speech p { font-size:11px; } .tools { padding-top:2px; } .tool-btn { --tool-art-size:36px; height:57px; padding:1px 2px 2px; } .tray { height:58px; } .pressure-line { margin-top:4px; min-height:24px; padding-block:2px; } .home-char { height:95px; } #screen-home { gap:9px; } .home-logo { width:165px; } }
@media (max-width: 360px) { #screen-game { padding-inline:2px; scrollbar-width:none; } .game-toolbar { padding-inline:2px; } .game-toolbar > div { gap:2px; } .mini-brand > b { font-size:16px; letter-spacing:.5px; } .mini-brand small { padding-inline:3px; letter-spacing:0; } .stage { gap:8px; padding-inline:3px; } .speech { padding:8px; } .speech strong { font-size:13px; } .speech p { font-size:11px; } .tools { gap:5px; } .tool-btn b { font-size:10px; } .badge { right:4px; } .run-status { padding-inline:6px; } .run-rate { font-size:9px; } .run-meta { gap:5px; } .run-rate:not(:empty)::after { margin-left:5px; } #tray-hint { max-width:145px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .match-fx.show { opacity: 1; } }

/* Optional satirical shorts, using the same portraits and tool illustrations. */
.theater-entry { display:flex; align-items:center; gap:10px; width:100%; min-height:64px; margin-top:12px; padding:10px; border:1px dashed #9eaa7c; background:#fff8df; border-radius:12px; text-align:left; }
.theater-entry b,.theater-entry small { display:block; }
.theater-entry b { font-size:13px; }.theater-entry small { font-size:11px; margin-top:4px; color:#786b4d; }
.theater-entry-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#b34d37; color:#fff7da; padding-left:2px; }
.theater-entry:disabled { opacity:.5; }
.reward-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.reward-choices button { display:flex; flex-direction:column; align-items:center; gap:7px; min-height:116px; padding:10px 3px; border:1px solid #a9b38c; border-radius:12px; background:#fffbed; }
.reward-choices .tool-symbol { --tool-art-size:48px; }.reward-choices b { font-size:12px; }.reward-choices small { font-size:10px; color:#6a765d; }
.theater-stage { position:relative; height:230px; overflow:hidden; isolation:isolate; border-radius:14px; border:1px solid #9ba987; background:radial-gradient(ellipse at 55% 20%,#f6f0cf,#d8dfbf 70%); }
.theater-stage::before { content:''; position:absolute; inset:0 0 auto; height:15px; background:repeating-linear-gradient(90deg,#a34332 0 18px,#ba5540 18px 38px); border-bottom:4px solid #e3bd65; }
.theater-stage::after { content:''; position:absolute; bottom:0; left:0; right:0; height:30px; background:#8a6d4e; border-top:5px solid #aa8c64; z-index:-1; }
.theater-onair { position:absolute; top:24px; left:12px; font-size:10px; letter-spacing:2px; color:#8e4937; }
.theater-speaker { position:absolute; left:10px; bottom:17px; width:104px; height:160px; object-fit:contain; mix-blend-mode:multiply; transform-origin:center bottom; animation:press-bob .48s ease-in-out infinite alternate; }
.theater-papers { position:absolute; right:30px; top:76px; width:115px; height:100px; }
.theater-papers i { position:absolute; display:grid; place-items:center; width:83px; height:94px; background:#fffdf0; border:1px solid #a4aa8c; border-radius:4px; font-size:13px; font-style:normal; font-weight:700; box-shadow:0 3px 0 #0001; transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s; }
.theater-papers i:nth-child(1) { transform:translate(-14px,10px) rotate(-13deg); }.theater-papers i:nth-child(2) { transform:translate(6px,0) rotate(6deg); }.theater-papers i:nth-child(3) { transform:translate(20px,19px) rotate(15deg); opacity:0; }
.theater-stage[data-scene="1"] .theater-papers i:nth-child(1) { transform:translate(35px,-10px) rotate(25deg); }
.theater-stage[data-scene="1"] .theater-papers i:nth-child(2) { transform:translate(-25px,22px) rotate(-15deg); }
.theater-stage[data-scene="1"] .theater-papers i:nth-child(3) { opacity:1; transform:translate(5px,2px) rotate(3deg); }
.theater-stage[data-scene="2"] .theater-papers i { transform:translate(8px,12px) rotate(0); }.theater-stage[data-scene="2"] .theater-papers i:nth-child(3) { opacity:1; }
.theater-prop { position:absolute; width:80px; height:80px; right:8px; bottom:25px; --tool-art-size:80px; transform-origin:center; transition:transform .5s cubic-bezier(.2,1.4,.3,1); }
.theater-stage[data-scene="1"][data-tool="undo"] .theater-prop { transform:rotate(-160deg); }.theater-stage[data-scene="1"][data-tool="stash"] .theater-prop { transform:translate(-20px,-30px) scale(1.15); }.theater-stage[data-scene="1"][data-tool="shuffle"] .theater-prop { transform:rotate(180deg) scale(1.1); }
.theater-stamp { position:absolute; left:50%; top:47%; width:140px; padding:7px 3px; border:4px double #ad4434; color:#ad4434; background:#fff6deed; font-size:24px; transform:translate(-50%,-50%) rotate(-14deg) scale(1.8); opacity:0; transition:opacity .15s,transform .22s cubic-bezier(.2,1.4,.4,1); }
.theater-stage[data-scene="2"] .theater-stamp { opacity:1; transform:translate(-50%,-50%) rotate(-14deg) scale(1); }
.theater-line { min-height:43px; margin:12px 0 7px !important; font-size:14px !important; font-weight:700; color:#5f5941 !important; }
.theater-progress { height:5px; border-radius:5px; background:#dce1cc; overflow:hidden; }.theater-progress i { display:block; height:100%; background:#ab4b37; width:0; }
@keyframes press-bob { to { transform:rotate(3deg) translateY(-3px); } }

/* One brief overlay per successful tool transaction; board hit targets stay still. */
.tool-fx { position:absolute; inset:0; z-index:45; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; opacity:0; }
.tool-fx.show { opacity:1; animation:tool-fade .95s both; }
.tool-fx > span { display:grid; place-items:center; width:94px; height:94px; --tool-art-size:84px; border-radius:50%; background:#fff8e8e8; box-shadow:0 0 0 9px #fff9e42e; }
.tool-fx strong { margin-top:10px; padding:5px 17px; border:3px double #a34332; background:#fff8e8f2; color:#a34332; border-radius:4px; font-size:25px; transform:rotate(-9deg); }
.tool-fx small { margin-top:12px; padding:6px 12px; background:#fffbe8ef; border-radius:20px; font-size:13px; font-weight:700; }
.tool-fx.show[data-tool="undo"] > span { animation:tool-rewind .65s ease-out; }.tool-fx.show[data-tool="shuffle"] > span { animation:tool-spin .7s ease-out; }
.tool-fx.show[data-tool="stash"] > span { animation:tool-box .7s cubic-bezier(.2,1.3,.4,1); }.tool-fx.show[data-tool="bomb"] strong { animation:tool-stamp .35s cubic-bezier(.2,1.4,.4,1); }
.tool-fx.show[data-tool="freeze"] { background:radial-gradient(ellipse,transparent 25%,#c2eeef77); }.tool-fx[data-tool="freeze"] > span { background:#e3f7f7; }
.tool-fx-papers { position:absolute; top:40%; left:50%; width:0; height:0; }.tool-fx-papers i { position:absolute; width:28px; height:36px; border:1px solid #abaf8c; background:#fffbe9; border-radius:3px; opacity:0; }
.tool-fx.show .tool-fx-papers i { animation:paper-fly .8s ease-out; --fly:-105px; }.tool-fx.show .tool-fx-papers i:nth-child(2) { --fly:90px; animation-delay:.06s; }.tool-fx.show .tool-fx-papers i:nth-child(3) { --fly:20px; animation-delay:.13s; }
@keyframes tool-fade { 0% { opacity:0; } 12%,74% { opacity:1; } 100% { opacity:0; } }@keyframes tool-rewind { from { transform:rotate(150deg) scale(.6); } to { transform:rotate(0) scale(1); } }@keyframes tool-spin { from { transform:rotate(-270deg) scale(.6); } to { transform:rotate(0) scale(1); } }@keyframes tool-box { 0% { transform:translateY(-25px) scale(1.2); } 55% { transform:translateY(5px) scale(.9); } 100% { transform:none; } }@keyframes tool-stamp { from { transform:rotate(-9deg) scale(2); opacity:0; } to { transform:rotate(-9deg) scale(1); opacity:1; } }@keyframes paper-fly { 0% { transform:translate(0,20px) rotate(0); opacity:0; } 35% { opacity:1; } 100% { transform:translate(var(--fly),-100px) rotate(50deg); opacity:0; } }

.circle-yard { border:1px solid #a1b28b; border-radius:16px; min-height:170px; overflow:hidden; background:radial-gradient(ellipse at center 120%,#e6dfb3 40%,#e4efc9 41%); padding:14px 9px 0; }
.circle-sign { display:inline-block; padding:5px 12px; border:2px solid #8f7953; border-radius:6px; background:#fff9dd; box-shadow:0 3px #a4aa7d; color:#766342; font-size:12px; letter-spacing:1px; transform:rotate(-2deg); }
.circle-members { display:flex; justify-content:center; align-items:flex-end; gap:3px; min-height:126px; }.circle-member { min-width:0; width:16%; padding-bottom:6px; }.circle-member img { width:100%; height:85px; object-fit:contain; mix-blend-mode:multiply; }.circle-member:nth-child(even) img { height:95px; }.circle-member span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; color:#696547; }
.circle-empty-chair { display:flex; flex-direction:column; align-items:center; gap:8px; color:#817455; font-size:12px; padding:17px 0; }.circle-empty-chair i { display:block; width:42px; height:42px; border:5px solid #a58a5a; border-bottom-width:10px; border-radius:9px 9px 0 0; box-shadow:0 13px 0 -6px #a58a5a; }
.honor-card { position:relative; margin:14px 0; padding:13px 15px; display:grid; grid-template-columns:1fr auto; gap:3px 10px; border:1px solid #c8b98d; border-radius:12px; background:#fff8df; text-align:left; overflow:hidden; }
.honor-card strong { font-size:16px; }.honor-card > b { grid-column:2; grid-row:1/3; align-self:center; font-size:30px; color:#a14b35; }.honor-card b small { font-size:12px; }.honor-card > span:last-child { grid-column:1/-1; color:#7a7155; font-size:10px; line-height:1.6; }
.honor-seal { width:fit-content; color:#a34b36; font-size:10px; font-weight:900; letter-spacing:2px; }.honor-result:empty { display:none; }.honor-result .honor-card { animation:honor-arrive .5s cubic-bezier(.2,1.3,.3,1); }
.circle-board-title { display:flex; align-items:center; justify-content:space-between; margin-top:15px; }.circle-board-title h3 { font-size:15px; margin:0; }.circle-board-title .text-btn { min-height:44px; font-size:11px; }
.circle-ranking { list-style:none; padding:0; margin:0; text-align:left; }.circle-ranking li { display:flex; gap:10px; align-items:center; padding:10px 8px; border-top:1px solid #d8dfc6; }.circle-ranking li.is-me { background:#e9efd5; border-radius:9px; }.circle-ranking li > b { width:21px; font-size:17px; color:#8c7650; }.circle-ranking li > span { min-width:0; flex:1; }.circle-ranking strong { display:block; overflow-wrap:anywhere; font-size:13px; }.circle-ranking span small { display:block; font-size:10px; color:#7a836a; margin-top:3px; }.circle-ranking em { font-style:normal; font-size:21px; color:#99613a; }.circle-ranking em small { font-size:11px; }
.circle-empty { padding:20px 5px; font-size:13px; line-height:1.8; }.circle-name { display:block; text-align:left; font-size:12px; }.circle-name input { display:block; width:100%; min-height:48px; margin-top:8px; padding:10px; font:inherit; font-size:16px; border:1px solid #b2bd9e; border-radius:9px; background:#fffdf0; }
@keyframes honor-arrive { from { opacity:0; transform:rotate(-5deg) scale(1.08); } to { opacity:1; transform:none; } }
.circle-member img { animation:circle-idle 2.4s ease-in-out infinite; }.circle-member:nth-child(even) img { animation-delay:-1.2s; }
@keyframes circle-idle { 50% { transform:translateY(-3px) rotate(2deg); } }
@media(prefers-reduced-motion:reduce) { .tool-fx.show { opacity:1; } .theater-speaker { transform:none; } }

#screen-game { scrollbar-width: none; }
#screen-game::-webkit-scrollbar { display: none; width: 0; height: 0; }
.extra-tools { display: grid; gap: 10px; margin-top: 16px; }
.extra-tools button { display: flex; align-items: center; text-align: left; gap: 12px; min-height: 74px; padding: 10px; border: 1px solid #adb98b; border-radius: 12px; background: #eff2d7; }
.extra-tools button span { flex: 1; }
.extra-tools button .tool-symbol { --tool-art-size:48px; flex:0 0 48px; width:48px; height:48px; }
.extra-tools b,.extra-tools small { display: block; }
.extra-tools small { font-size: 11px; color: #61704d; margin-top: 5px; }
.extra-tools button:disabled { opacity: .5; }
#board.targeting .tile { cursor: crosshair; pointer-events: auto; border-color: #bc4f31; }
#board.is-peeking .tile.peek-top { opacity: .17; }
#board.is-peeking .tile.blocked { background:#fffdf0; }
#board.is-peeking .tile.blocked .card-art { opacity:1; filter:none; }
#board.is-peeking .tile.blocked .card-name { color:#4a5138; }
.modal h3 { font-size: 14px; text-align: left; margin: 20px 0 9px; color: #456638; }
.modal .verification-note { margin: 12px 0 2px; font-size: 12px; color: #3c7142; }
.modal .rate-note { font-size: 11px; margin: 6px 0 12px; }
.modal .rate-note:empty { display:none; }
.data-label { background: #e5eacb; border-radius: 6px; padding: 5px; font-size: 11px !important; }
.audio-mixer { text-align: left; }
.audio-mixer label { display: block; font-size: 13px; margin-top: 22px; font-weight: 700; }
.audio-mixer output { float: right; color: #6b7b51; }
.audio-mixer input { display: block; width: 100%; height: 36px; accent-color: #4c9045; margin-top: 4px; }
.audio-mixer p { font-size: 11px; }
#music-preview audio { max-width: 100%; display: block; }
#music-preview a,.challenge-link { display: block; font-size: 11px; color: #4b7544; margin: 10px 0; }
.share-preview { width: min(100%, 290px); border-radius: 3px; box-shadow: 0 3px 9px #33482530; }
@media (max-width:360px) { .modal { padding:18px 13px; } }

.warmup-guide { display:none; }
#screen-game[data-board="warmup"] { background:radial-gradient(ellipse at 50% 42%,#e9f5c566,transparent 68%); }
[data-board="warmup"] .warmup-guide { display:block; position:absolute; top:var(--guide-top,10px); left:0; right:0; z-index:2; text-align:center; pointer-events:none; }
.warmup-guide strong { display:block; font-size:18px; line-height:26px; color:#3e6538; letter-spacing:1px; }
.warmup-guide span { display:block; font-size:11px; line-height:18px; color:#658351; margin-top:3px; }
[data-board="warmup"] #board { z-index:1; }
[data-board="warmup"] .board-wrap::before { width:auto; height:auto; inset:78px 6px 6px; border:0; border-radius:48% 48% 43% 43%; transform:none; background:linear-gradient(#e9f5c550,#a8d47e30); box-shadow:none; }
[data-board="warmup"] .board-wrap::after { opacity:.4; }
#screen-game[data-board="warmup"] #board-tip,#screen-game[data-board="warmup"] #run-rate { display:none; }
[data-board="warmup"] .tile.blocked { background:#dce6cb; border-color:#a7b796; }
[data-board="warmup"] .tray { background:#c6ae82; border-color:#8e7a53; box-shadow:0 3px 0 #9a865e; }
@media (max-height:620px) {
  #screen-home { padding-top:16px; gap:8px; }
  #screen-home.has-resume { gap:6px; }
  .has-resume .home-char { height:75px; }
  .has-resume .home-logo { width:145px; }
  #screen-game[data-board="warmup"] .board-wrap { flex:1 1 280px; min-height:260px; --guide-space:52px; }
  [data-board="warmup"] .warmup-guide strong { font-size:16px; line-height:24px; }
  [data-board="warmup"] .warmup-guide span { line-height:16px; margin-top:2px; }
  [data-board="warmup"] .stage { flex-basis:54px; }
  [data-board="warmup"] .stage > img { height:50px; width:42px; }
  [data-board="warmup"] .tray { height:54px; }
  [data-board="warmup"] .tool-btn { --tool-art-size:30px; height:50px; gap:0; padding:1px 2px 2px; }
  [data-board="warmup"] .tool-symbol { width:36px; }
}