/* Shared game controls: keep layout/thumb positions in road-visual.css. */
:is(#app,#utility) button{
 --control-bg:#111111;--control-ink:#ffffff;--control-edge:#666666;--control-accent:#f347a0;
 background:var(--control-bg);color:var(--control-ink);border:1px solid var(--control-edge);
 box-shadow:inset 0 1px 0 #ffffff29,inset 0 -3px 0 #09051055,0 3px 0 #09060e;
 border-radius:5px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
 transition:filter .14s,box-shadow .14s,border-color .14s,translate .1s;
}
:is(#app,#utility) button:is(.primary,.dice-button,#next-scene,.attack),
:is(#app,#utility) .thumb-actions>button:not(.secondary),
:is(#app,#utility) .reward-actions>button:first-child{
 --control-bg:#f347a0;--control-ink:#260f20;--control-edge:#ff9dce;--control-accent:#fff1f9;
}
#app button.guard{--control-bg:#e9dce9;--control-ink:#29212f;--control-edge:#fff1fa;--control-accent:#9d2c6b}
:is(#app,#utility) button:is(.secondary,.subtle),#app .thumb-aux>button,#app .reward-aux>button{--control-bg:#111111;--control-ink:#ffffff;--control-edge:#666666}
:is(#app,#utility) button:not(:disabled):hover{
 background:var(--control-bg);color:var(--control-ink);border-color:#ffb6db;
 filter:brightness(1.14);box-shadow:inset 0 1px 0 #ffffff50,inset 0 -3px 0 #09051040,0 0 0 1px #f347a05c,0 3px 12px #f347a026;
}
:is(#app,#utility) button:not(:disabled):is(:active,.is-pressed){
 background:var(--control-bg);color:var(--control-ink);translate:0 2px;filter:brightness(1.2);
 box-shadow:inset 0 2px 6px #10071644,0 0 0 2px #ffd5eb7a;
}
:is(#app,#utility) button:focus-visible{outline:2px solid #fff1fa;outline-offset:3px;border-color:#ff8ac3;box-shadow:0 0 0 5px #f347a04d}
:is(#app,#utility) button:disabled{background:#191919;color:#888888;border-color:#444444;opacity:1;filter:none;cursor:not-allowed;box-shadow:none;translate:none}
#app :is(.action-grid,.thumb-actions,.reward-actions)>button,#app .event-choice,#app .dice-button,#app #next-scene{
 border-radius:0;clip-path:polygon(8px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
 outline-offset:-3px;border-top-width:2px;border-bottom-width:2px;
}
#app :is(.action-grid,.thumb-actions,.reward-actions)>button:not(:disabled),#app .event-choice:not(:disabled){
 background:var(--control-bg);border-left:3px solid var(--control-accent);
}
#app .event-choice{position:relative;padding-left:18px;padding-right:22px;text-align:left}
#app .event-choice::after{content:'›';position:absolute;right:8px;top:50%;translate:0 -50%;color:var(--control-accent);font-size:25px;font-weight:400;transition:translate .15s}
#app .event-choice:hover::after{translate:3px -50%}
#app .thumb-actions>.event-choice{padding:8px 22px 8px 12px;overflow:visible}
#app .thumb-actions>.event-choice strong{font-size:14px;line-height:1.4;white-space:normal;word-break:normal;overflow-wrap:normal;max-width:100%}
#app .choice-details{margin:12px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 10px;font-size:13px;line-height:1.55;text-align:left}
#app .choice-details dt{color:#ffb4d7;font-weight:700}
#app .choice-details dd{margin:0;color:#f1dfeb;overflow-wrap:break-word}
#app .action-grid.ally button{--control-accent:#f4a0c9}
#app .action-grid.ally button:nth-child(2){--control-accent:#ffdc58}
#app .action-grid.ally button:nth-child(3){--control-accent:#e7bbcf}
#app .action-grid.ally button:nth-child(4){--control-accent:#65d8df}
#app .action-grid.ally button:nth-child(5){--control-accent:#e6d37a}
#app .combat-tabs button{--control-bg:#111111;border-radius:4px 4px 0 0;border-color:#555555;box-shadow:none}
#app .combat-tabs button[aria-selected=true]{--control-bg:#000000;--control-edge:#ed73b0;color:#ffffff;box-shadow:inset 0 2px 0 #f347a0}
#app .combat-tabs button[aria-selected=true]::after{left:9px;right:9px;height:2px;background:#ff8bc6}
#app .commands nav button{--control-bg:#111111;border-radius:5px;border-color:#666666}
#app :is(.reader-panel,.brand) button{box-shadow:none;--control-bg:#111111}
#app .reward-gallery-card{background:transparent;border:0;box-shadow:none;clip-path:none}
#app .reward-gallery-card:hover{background:transparent;box-shadow:0 0 0 1px #f347a0}
#app .shop-item.selected,#utility .bag-line.selected{border-color:#f68cbf;box-shadow:inset 3px 0 #f347a0}
/* Shop: five compact rows, all visible above the unchanged thumb controls. */
body.thumb-layout #app .shop-overlay{top:12px;bottom:calc(var(--control-zone) + 12px);max-height:none;overflow:visible;padding:10px;display:flex;flex-direction:column;gap:6px;background:rgb(0 0 0 / 70%)}
body.thumb-layout #app .shop-title{margin:0}
body.thumb-layout #app .shop-title h1{font-size:17px}
body.thumb-layout #app .shop-title .eyebrow{margin-bottom:2px}
body.thumb-layout #app .shop-overlay>p{font-size:12px;line-height:1.4;margin:0}
body.thumb-layout #app .shop-overlay>.toast:not(:empty){font-size:12px;padding:4px;margin:0}
body.thumb-layout #app .shop-grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(5,minmax(0,1fr));gap:5px}
body.thumb-layout #app .shop-item{display:grid;grid-template-columns:minmax(0,1fr) 94px;grid-template-rows:auto auto;align-content:center;gap:3px 8px;padding:6px 8px;min-height:0;background:rgb(0 0 0 / 66%);border-color:#ffffff40}
body.thumb-layout #app .shop-item.selected{background:rgb(0 0 0 / 66%);border-color:#f347a0}
body.thumb-layout #app .shop-item button{background:var(--control-bg)}
body.thumb-layout .thumb-dock{background:#000000}
/* Shop controls float over the scenery; only the buttons need a solid fill. */
body.thumb-layout #app .shop-layout>.event-art{bottom:0}
body.thumb-layout #app .shop-footer.thumb-dock{background:transparent;border-top:0;pointer-events:none}
body.thumb-layout #app .shop-footer.thumb-dock .thumb-actions{pointer-events:auto}
body.thumb-layout #app .shop-footer.thumb-dock>.cash{bottom:calc(var(--thumb-bottom) + 72px);left:16px;font-size:15px;line-height:20px;margin:0;padding:2px 7px;background:rgb(0 0 0 / 70%)}
body.thumb-layout #app .shop-selected-label{bottom:calc(var(--thumb-bottom) + 72px);right:16px;line-height:20px;padding:2px 7px;background:rgb(0 0 0 / 70%);color:#ffffff}
body.thumb-layout #app .shop-selected-label:empty{display:none}
body.thumb-layout #app .event-copy{background:rgb(0 0 0 / 88%)}
#app .quest-screen :is(.commands,.story-nav,.combat-controls){background:#000000}
#app .quest-screen .reader-panel:before{background:rgb(0 0 0 / 91%)}
body.thumb-layout #app .shop-item h2{font-size:14px;line-height:1.3;margin:0}
body.thumb-layout #app .shop-item p{font-size:12px;line-height:1.4;margin:0;min-height:0;grid-column:1}
body.thumb-layout #app .shop-item button{grid-column:2;grid-row:1 / 3;align-self:center;width:94px;min-height:42px;padding:4px;font-size:12px;line-height:1.4;white-space:pre-line}
.control-tap{position:fixed;z-index:100;pointer-events:none;width:38px;height:38px;border:2px solid #ffb7db;border-radius:50%;translate:-50% -50%;animation:control-tap .42s ease-out forwards;box-shadow:0 0 9px #f347a066}
#app .combat-latest>span{flex:1;min-width:0}
#app .combat-latest button{margin-left:0}
#app button[data-do="battle-skip"]{min-height:36px;font-size:11px;padding:5px 9px}
#app .reader-panel>header{background:rgb(0 0 0 / 50%)}
#app .reader-panel>header>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app button[data-do="story-skip"]{font-size:12px;min-height:28px;padding:3px 7px;white-space:nowrap}
#app .action-grid.ally{grid-template-columns:1fr}
#app .action-grid.ally .combo{--control-bg:#111111;--control-edge:#ff90c6;--control-accent:#f347a0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
#app .action-grid.ally .combo strong{font-size:17px}
#app .action-grid.ally .combo small{display:block;font-size:12px}
#app .action-grid.ally .combo .action-cost{display:none}
#app .party-hud.combo-ready #gauge-meter{background:#f347a0;box-shadow:0 0 8px #f347a080}
#app .party-hud.combo-ready>div:last-child>span{color:#ffb6dc}
.combo-pair-banner{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:8px;padding:7px 12px 25px;background:#000c;border:1px solid #f347a0;z-index:7;pointer-events:none}
.combo-pair-banner>span{display:flex;flex-direction:column;align-items:center;font-size:11px}
.combo-pair-banner img{width:46px;height:46px;object-fit:cover;object-position:top}
.combo-pair-banner>strong{font-size:23px;color:#f347a0}
.combo-pair-banner>small{position:absolute;bottom:5px;white-space:nowrap;font-size:11px;color:#ffffff}
/* Title uses the same single viewport and fixed thumb row as the adventure. */
body.thumb-layout #app .welcome{height:calc(100svh - 48px);min-height:0;padding:0;width:min(100%,430px);margin:auto;background:var(--scene) center/cover;overflow:hidden}
body.thumb-layout #app .welcome-art{inset:0;height:100%}
body.thumb-layout #app .welcome-copy{position:absolute;left:15px;right:15px;top:auto;bottom:calc(var(--control-zone) + 12px);padding:10px;background:rgb(0 0 0 / 70%);border-top:2px solid #f347a0;border-radius:0}
body.thumb-layout #app .welcome .eyebrow{font-size:10px;line-height:1.3;letter-spacing:1px;margin:0 0 4px}
body.thumb-layout #app .welcome h1{font-size:34px;line-height:1.1;margin:0 0 5px}
body.thumb-layout #app .welcome h1 span{display:inline;margin-left:8px}
body.thumb-layout #app .welcome .subtitle{font-size:13px;line-height:1.4;margin:0 0 8px}
body.thumb-layout #app .start-panel{padding:0;border:0;background:transparent;box-shadow:none}
body.thumb-layout #app .start-panel label{font-size:12px;line-height:1.4;margin:0 0 4px}
body.thumb-layout #app .start-panel input{height:42px;padding:8px 10px;font-size:16px;border-radius:4px;background:#000000b3}
body.thumb-layout #app .start-panel small{font-size:10px;line-height:1.5;margin:6px 0 0}
body.thumb-layout #app .welcome-copy>.notice{display:none}
body.thumb-layout #app .welcome>.mascots{position:absolute;left:auto;right:10px;top:10px;bottom:auto;width:auto;margin:0;gap:3px}
body.thumb-layout #app .welcome>.mascots img{width:28px;height:34px;object-fit:contain}
body.thumb-layout #app .welcome>.mascots figcaption{display:none}
body.thumb-layout #app .welcome .thumb-dock{background:transparent;border:0}
@media(max-height:600px){body.thumb-layout #app .welcome-copy{padding:8px;bottom:calc(var(--control-zone) + 6px)}body.thumb-layout #app .welcome h1{font-size:28px}body.thumb-layout #app .welcome .subtitle{margin-bottom:5px}}
@keyframes control-tap{from{opacity:.95;scale:.35}to{opacity:0;scale:1.8}}
@media(prefers-reduced-motion:reduce){:is(#app,#utility) button{transition:none}.control-tap{animation:none;display:none}:is(#app,#utility) button:not(:disabled):is(:active,.is-pressed){translate:none}}