/* kit.css: UI kit (LOOK §4, Lopez): tokens, button states, motion, title screen. Motion off with prefers-reduced-motion. */
:root{--ink:#2a1608;--par:#f3e6c4;--par2:#e6d2a2;--gold:#d9a441;--gold2:#f6d27a;--blood:#8e2a1c;--wood:#5a3519;--night:#141a26}
.btn{font-family:Cinzel,serif;font-weight:700;letter-spacing:.03em;transition:transform .08s ease-out,filter .15s,box-shadow .15s}
.btn:hover:not(:disabled){filter:brightness(1.1);box-shadow:0 0 0 2px #f6d27a55}
.btn:active:not(:disabled){transform:translateY(1px) scale(.97);filter:brightness(.92)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.btn:disabled{filter:grayscale(.7) brightness(.85);opacity:.6;cursor:not-allowed}
.btn.gold{background:linear-gradient(#f2c55e,#c48a2a);color:#3a1f08;border-color:#fde3a0;box-shadow:inset 0 1px 0 #fff3c4,0 3px 0 #6b4512,0 6px 14px #0006}
#detail,#hpan,#cpan,#market,#build,#tour,.lk-pop{animation:lk-up .18s cubic-bezier(.2,.8,.2,1)}
#toast{animation:lk-up .25s ease-out}#gold.up{animation:lk-pop .26s}
@keyframes lk-up{from{transform:translateY(14px);opacity:0}}
#market,#tour,#build{animation-name:lk-upc}@keyframes lk-upc{from{transform:translate(-50%,calc(-50% + 14px));opacity:0}}
@keyframes lk-pop{40%{transform:scale(1.18);color:#ffe28a}}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}}
/* title: live scene blurred behind, no HUD */
body:has(#start) :is(#top,#roster,#log,#help,#detail,#say,#toast){visibility:hidden}
#start{position:fixed;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px 16px;color:#f3e6c4;text-align:center;
 background:radial-gradient(120% 70% at 50% 38%,#0000 0,#0008 60%,#000c 100%),linear-gradient(#0000 55%,#120a05e6);-webkit-backdrop-filter:blur(3px) saturate(1.1);backdrop-filter:blur(3px) saturate(1.1)}
#start .crest{width:min(78vw,340px);height:auto;filter:drop-shadow(0 6px 18px #000a);animation:lk-up .5s ease-out}
#start .tag{margin:0 0 6vh;font-style:italic;font-size:16px;text-shadow:0 2px 6px #000}
.tmenu{display:flex;flex-direction:column;gap:14px;width:min(80vw,300px)}.tmenu .btn{font-size:16px;min-height:50px;border-radius:8px;display:flex;gap:8px;align-items:center;justify-content:center}
.trow{display:flex;gap:14px}.trow .btn{flex:1}
#start .tsave{margin:14px 0 0;font-size:13px;color:#e6d2a2;min-height:1em}#start .tfoot{margin:0;font-size:12px;color:#e6d2a2aa}
.tload{width:min(66vw,260px);height:8px;border-radius:4px;background:#0008;border:1px solid #c58a3a88;margin-top:10px;overflow:hidden}
.tload b{display:block;height:100%;width:90%;border-radius:4px;background:linear-gradient(90deg,#c48a2a,#f6d27a);animation:tl 7s cubic-bezier(.1,.7,.3,1)}@keyframes tl{from{width:4%}}
#start #ld{margin:2px 0 0;font-size:12px;color:#e6d2a2bb}
#start:not(.ok) .tmenu,#start:not(.ok) .tsave,#start.ok .tload,#start.ok #ld{display:none}
#start #bc.hide{display:none}
#tdlg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,380px);max-height:80vh;overflow:auto;text-align:left;color:#3b2812;animation-name:lk-upc}
#tdlg p{margin:4px 0;font-size:14px}#tdlg .seg{display:flex;gap:6px;margin:4px 0 6px}#tdlg .seg .btn{flex:1;min-height:44px}#tdlg #aud{display:flex;flex-direction:column;gap:6px}
/* banner chooser */
#bandlg{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:12;width:min(94vw,380px);max-height:92vh;overflow:auto;animation-name:lk-upc}
#bandlg .bnp{text-align:center}#bandlg .bnr{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px}#bandlg .bnr .btn{min-width:44px;min-height:44px;padding:4px;display:flex;align-items:center;justify-content:center}
#bandlg .bnr .btn.on{outline:3px solid #f6d27a;outline-offset:1px}#bandlg .bnr i{display:block;width:28px;height:28px;border-radius:4px;border:1px solid #0006}