*{box-sizing:border-box}body{margin:0;color:#503d2a;background:#e5e4d5;font-family:system-ui,-apple-system,'PingFang SC',sans-serif}main{max-width:1180px;margin:auto;min-height:100svh;padding:0 32px 28px;background:#faf5e9;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:20px 28px}header{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;height:70px;border-bottom:1px solid #d8ccb6}a{color:inherit;text-decoration:none;font:bold 30px serif}a small{font:11px system-ui;margin-left:12px;color:#87765e}button{font:inherit;cursor:pointer;border:1px solid #cfbea0;background:#fffaf1;color:#674a32;border-radius:6px;padding:9px 12px}button:focus-visible,a:focus-visible{outline:3px solid #b88938;outline-offset:4px}[hidden]{display:none!important}.heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between}.heading p,.eyebrow{font-size:11px;letter-spacing:3px;color:#93724b}.heading h1{font:36px 'Kaiti SC',serif;margin:6px 0}.heading>span{font-size:13px;letter-spacing:3px}.arena{min-width:0;align-self:start;border:2px solid #a48257;border-radius:12px;overflow:hidden;box-shadow:0 12px 30px #644c3020}canvas{display:block;width:100%;height:510px}.panel{padding:22px;border:1px solid #d2bea0;border-radius:12px;background:#fffbf3;align-self:start}h2{font:26px 'Kaiti SC',serif;margin:10px 0}.story{font-size:13px;line-height:1.8;color:#887156;border-bottom:1px solid #e2d5bf;padding-bottom:15px}#task{font-size:12px;line-height:1.6}#steps{display:flex;gap:7px}#steps span{font-size:10px;padding:5px 8px;border:1px solid #ddcfb6;border-radius:3px}#steps .done{color:#547548;background:#e6ebd9}#steps .current{color:#a44930;border-color:#bf7957}#receipt{min-height:70px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:16px;font-weight:650;line-height:1.5;padding:10px 0;border-block:1px solid #eadfcb;color:#9e4d2f;margin:15px 0}.meter-title{display:flex;justify-content:space-between;font-size:10px;color:#88775d}#meter{height:30px;background:#e8e5d7;border:1px solid #c3b89b;border-radius:5px;position:relative;margin:10px 0 20px}#meter i{position:absolute;height:100%}#zone{background:#b86a52aa}#gold{background:#e6bb5b}#needle{position:absolute;height:40px;width:3px;background:#503b28;top:-5px}.primary{width:100%;min-height:56px;background:#a84c33;color:#fff1d4;border:0;box-shadow:0 3px 0 #703827;font-weight:700;font-size:18px;touch-action:none;user-select:none}.primary small{font-size:11px;font-weight:400;margin-left:8px}button:disabled{opacity:.6;cursor:default}.secondary{display:flex;justify-content:space-between;gap:10px;margin-top:15px}.secondary button{border:0;background:none;font-size:11px;padding:4px 0}.tip,#stats{font-size:10px;color:#938069;line-height:1.8}#pause{position:fixed;inset:0;background:#34291fa8;display:grid;place-items:center;z-index:5}#pause>div{padding:30px;background:#fff6e3;border-radius:12px;max-width:90vw}@media(max-width:780px){main{display:block;padding:0 16px 20px}header{height:52px}.heading{padding:10px 0}.heading h1{font-size:26px}.heading p{margin:4px 0}.arena{margin:0 -16px 12px;border-radius:0;border-inline:0}canvas{height:260px}.panel{padding:14px}h2{font-size:22px}.story{font-size:12px;margin:8px 0;padding-bottom:8px}#receipt{min-height:54px;margin:10px 0}.tip{margin-bottom:0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
header{gap:12px;flex-wrap:wrap}header>a:nth-child(2){font-size:14px;margin-left:auto}
#save-panel{position:fixed;inset:0;background:#211b16b8;z-index:100;display:grid;place-items:center;padding:20px}#save-panel[hidden]{display:none}#save-panel section{background:#fff8e9;color:#493c2b;max-width:540px;width:100%;max-height:90vh;overflow:auto;padding:24px;border:2px solid #a88755;border-radius:10px}#save-panel button,#save-panel a{display:block;margin:14px 0;padding:12px}#save-panel button{width:100%}
#save-panel a{font-size:16px;font-weight:500}
/* Match the archive's military-night interface while keeping the painted arena. */
body{background:#101c24;color:#e0e6e5}header{border-color:#3b505b}header a,header button{color:#d8bd8a}button{background:#263c48;color:#e7eceb;border-color:#4b6370}.heading{background:#14232d;color:#e2e8e7}.heading p,.eyebrow{color:#b5c3c6}.panel{background:linear-gradient(145deg,#20333e,#15242e);border-color:#405762;color:#e2e8e7}.story,#stats,.tip,.meter-title{color:#b5c3c6}#receipt{color:#f0c991;border-color:#455c67}#task{color:#c5d2d4}#steps span{border-color:#536b73;color:#bbcccf}#steps .current{border-color:#d3b47c;color:#efd7a9}#steps .done{color:#83b4a5}.primary{background:#a34e40;color:#fff3df}#pause>div,#save-panel section{background:#1a2b36;color:#e2e8e7;border-color:#8f7c58}#save-panel a{color:#dbc393}
main{background:#101c24}#steps .done{background:#203d3b}#meter{background:#0c1820;border-color:#4b6571}.story{border-color:#3b505d}.arena{border-color:#566970;border-radius:5px}.panel{border-radius:5px}
/* Aim instrument: three independent layers, no animation lag on the hit windows. */
#aim{background:#101e27;border:1px solid #3b5360;padding:18px 16px 12px;border-radius:6px}.aim-readout{display:flex;flex-direction:column;gap:5px;min-height:52px;margin-bottom:12px}.aim-readout strong{font-size:18px;letter-spacing:1px;color:#dbe5e7}.aim-readout span{font-size:11px;color:#91a9b5}.meter-title{font-size:11px;align-items:center;color:#a6bdc8}#power{font:24px ui-monospace,monospace;color:#f0e1c2;font-variant-numeric:tabular-nums}#meter{height:42px;border:1px solid #516876;border-radius:3px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#a4c0cc20 calc(10% - 1px),#a4c0cc20 10%),#09131b;margin:12px 0 5px;box-shadow:inset 0 2px 10px #0008;isolation:isolate}#meter #power-fill{left:0;top:0;background:linear-gradient(90deg,#54798d28,#8caebe55);height:100%;z-index:0}#zone{background:repeating-linear-gradient(135deg,#61b5ae60 0,#61b5ae60 5px,#3b827c60 5px,#3b827c60 10px);border-inline:2px solid #94dbce;z-index:1}#gold{background:#eccb84;box-shadow:0 0 10px #e7bb6155;z-index:2}#needle{height:54px;width:3px;top:-7px;background:#f6faff;z-index:4;transform:translateX(-50%);box-shadow:0 0 5px #c4ddeb80}#needle:before{content:'';position:absolute;top:-4px;left:-4px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #f6faff}.meter-scale{display:flex;justify-content:space-between;color:#78939f;font:10px ui-monospace,monospace;margin-bottom:12px}.meter-legend{display:flex;gap:9px;flex-wrap:wrap;font-size:10px;margin-bottom:18px;color:#adc0c8}.meter-legend span:first-child{color:#94dbce}.meter-legend span:nth-child(2){color:#eccb84}#aim[data-state=good]{border-color:#6bb0a8}#aim[data-state=good] .aim-readout strong{color:#a2e3d5}#aim[data-state=perfect]{border-color:#e8c77c;box-shadow:inset 0 0 28px #d2a85912}#aim[data-state=perfect] .aim-readout strong{color:#ffe1a0}#aim[data-state=over] .aim-readout strong,#aim[data-state=blocked] .aim-readout strong{color:#edab94}#aim[data-state=perfect] #draw{background:#b68140}#draw{min-height:62px;box-shadow:0 3px 0 #512e2a;letter-spacing:1px}#draw:active{transform:translateY(2px);box-shadow:0 1px 0 #512e2a}#steps{flex-wrap:wrap}.secondary button{font-size:12px;padding:8px 0}.heading{padding:16px 0;background:none}header{min-height:70px;height:auto;padding:12px 0}.panel{box-shadow:0 14px 35px #0003}@media(max-width:780px){header{gap:8px}header>a:nth-child(2){font-size:11px}header>a:first-child{font-size:24px}.heading{padding:8px 0}canvas{height:230px}#aim{padding:14px 12px}.aim-readout strong{font-size:16px}.story{font-size:11px}#receipt{font-size:13px;min-height:44px}.tip{font-size:9px}#draw{min-height:60px}}@media(prefers-reduced-motion:reduce){#draw:active{transform:none}}
main{align-content:start;row-gap:12px}header{min-height:56px;padding:8px 0}.heading{padding:4px 0}.heading h1{font-size:30px;margin:3px 0}.panel{padding:18px}.panel h2{font-size:23px;margin:7px 0}.story{margin:8px 0;padding-bottom:10px}#receipt{min-height:44px;margin:10px 0;padding:8px 0;font-size:14px}.aim-readout{min-height:40px;margin-bottom:8px}#aim{padding:12px}.meter-legend{margin-bottom:12px}#meter{margin-top:8px}.secondary{margin-top:8px}.tip{margin-top:6px}canvas{height:490px}@media(max-width:780px){canvas{height:220px}.panel{padding:12px}.heading h1{font-size:24px}}
/* Clear daylight command desk. World, NPC conversation, aim and loot each have a home. */
body{background:#e4e8ee;color:#273448}main{background:#edf0f4;max-width:1320px;grid-template-columns:minmax(0,1.65fr) minmax(340px,1fr);gap:14px 24px;padding-inline:28px}header{border-color:#c7ced8}header a,header button{color:#46526a}a small{color:#718096}.heading{color:#29374d}.heading p,.eyebrow{color:#68768b}.heading h1{font-weight:600}.panel{background:#fffdf9;border:1px solid #d1d5dc;color:#29374d;box-shadow:0 12px 30px #3f4d6310;border-radius:12px}.story,#stats,.tip,.meter-title{color:#6b7687}.story{border-color:#e0e4e9}#task{color:#667287}#receipt{color:#995837;border-color:#e4e0d9;background:#f7f0e6;border-radius:6px;padding:10px;font-size:14px}#steps span{color:#66748b;border-color:#d5dce5}#steps .current{color:#8e5036;border-color:#bf8564;background:#faf0e7}#steps .done{background:#edf1f5;color:#65798a}button{background:#f3f5f8;color:#34445d;border-color:#c6cfdb}#draw{background:#b45c45;color:#fff8ed;box-shadow:0 3px #854535}.arena{border:1px solid #bcc7d2;border-radius:12px;background:#fffdf9;overflow:hidden;box-shadow:0 12px 30px #3f4d6310}.npc-invite{padding:18px 20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;border-top:3px solid #b67652;background:linear-gradient(110deg,#fffaf2,#f2f4f8)}.npc-invite>div{flex:1 1 240px}.npc-invite small{display:block;font-size:10px;color:#9a765b;letter-spacing:2px}.npc-invite strong{display:block;font:21px serif;margin:6px 0;color:#34405a}.npc-invite p{font-size:13px;line-height:1.7;margin:0;color:#6c7687}#npc-action{background:#394b66;color:white;border:0}#npc-other{background:transparent;border:0;font-size:11px;color:#69778e}#quest-track{font-size:11px;color:#6e7f93;line-height:1.7;padding:8px 0}#reward-card{display:flex;gap:12px;align-items:center;background:linear-gradient(120deg,#fff2d8,#faf8f1);border:1px solid #d8b478;border-radius:8px;padding:12px;margin:12px 0}#reward-icon{width:120px;height:80px;flex:0 0 120px;background:url('art/relics-v1.webp') no-repeat;background-size:800% 600%}#reward-card small{font-size:10px;color:#9a7950}#reward-card h3{margin:4px 0;font:18px serif;color:#80532d}#reward-card p{font-size:11px;color:#89745d;line-height:1.6;margin:4px 0}#reward-card a{font:12px system-ui;color:#99633b}#aim{background:#eff3f7;border-color:#c7d1dd}.aim-readout strong{color:#344660}.aim-readout span,.meter-title{color:#76859b}#power{color:#344660}#meter{background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#c7d3e233 calc(10% - 1px),#c7d3e233 10%),#26354b;border-color:#3c506b}#aim[data-state=good] .aim-readout strong{color:#3c8276}#aim[data-state=perfect] .aim-readout strong{color:#986126}#aim[data-state=over] .aim-readout strong,#aim[data-state=blocked] .aim-readout strong{color:#b05c47}.meter-legend{color:#64758b}.meter-legend span:first-child{color:#438c81}.meter-legend span:nth-child(2){color:#9b773d}#pause>div,#save-panel section{background:#fffdf8;color:#34445b;border-color:#c8c0b2}#save-panel a{color:#8a6047}@media(max-width:780px){main{display:block;padding:0 14px 20px}.arena{margin-inline:-14px;border-radius:0}.npc-invite{padding:12px 14px;gap:8px}.npc-invite>div{flex-basis:100%}.npc-invite strong{font-size:18px}#reward-icon{width:90px;height:60px;flex-basis:90px}canvas{height:230px}}
@media(min-width:781px){canvas{height:400px}.heading{padding:0}.heading p{margin:8px 0 3px}.npc-invite{padding:14px 18px}.panel{padding:16px}#aim{padding:10px}.aim-readout{min-height:36px}.heading h1{font-size:27px}}
#chapter-result{padding:16px;background:#f9edda;border:1px solid #d3ad72;border-radius:8px;margin:14px 0}#chapter-result h3{font:22px serif;color:#805b35;margin:0 0 10px}#chapter-result-score{font-size:14px;color:#9c713b;line-height:1.8}#chapter-result-best{font-size:12px;color:#8a7a65}#chapter-result button{margin:5px 6px 0 0;font-size:12px}
header>a:not(:first-child){font:12px system-ui;margin-left:0}header>a:nth-child(2){margin-left:auto}
/* Quiet aiming mode: detail is progressive, not permanently printed beside the bow. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}summary{cursor:pointer;font-size:12px;color:#758298;list-style:none}summary:before{content:'＋';margin-right:7px}details[open]>summary:before{content:'－'}summary:focus-visible{outline:2px solid #b58b59;outline-offset:4px}.heading p{display:none}.heading h1{font:14px system-ui;color:#758298;letter-spacing:2px}.heading{padding:8px 0!important}#title{font-size:25px;margin:4px 0 16px}#mission-details{margin-bottom:14px}#mission-details[open]{background:#f4f5f6;padding:12px;border-radius:6px}#mission-details .eyebrow{line-height:1.7}#mission-details #stats{margin-bottom:0}.npc-invite{display:block;padding:12px 18px;border-top:1px solid #d1d6dd;background:#fcfbf8}.npc-invite>summary{font-size:13px;color:#8b654c}.npc-content{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:14px}.npc-content>div{flex:1 1 220px}.npc-content small{display:none}#quest-track{padding:5px 0}#aim{border:0;background:transparent;padding:0}.aim-readout{min-height:30px;margin:8px 0 12px}.aim-readout strong{font-size:20px;font-weight:500}.meter-title>span{display:none}.meter-title{justify-content:flex-end}#power{font-size:17px;color:#7a8798}#meter{height:36px}.meter-scale{margin-bottom:18px}#draw{min-height:62px}.secondary{align-items:start}.secondary button{font-size:12px}#aim-help{text-align:right;max-width:260px}#aim-help[open]{background:#f0f3f6;padding:12px;border-radius:6px}#aim-help p{font-size:12px;color:#758298;line-height:1.7}#aim-help .meter-legend{justify-content:flex-end;margin:12px 0}#receipt{min-height:0;font-weight:500}body[data-play-state=idle] #receipt,body[data-play-state=drawing] #receipt{display:none}body[data-play-state=drawing] .npc-invite{visibility:hidden}#reward-card h3{font-size:17px}#reward-card summary{font-size:11px;margin:8px 0}#reward-card small{font-size:10px}#reward-card a{display:inline-block;margin-top:6px}.panel{padding:22px;align-self:center}main{grid-template-columns:minmax(0,2fr) minmax(300px,1fr)}@media(min-width:781px){canvas{height:480px}}@media(max-width:780px){main{display:block}.panel{padding:16px}canvas{height:280px}#title{font-size:21px;margin-bottom:10px}#mission-details{margin-bottom:8px}.aim-readout{margin:6px 0;min-height:25px}.aim-readout strong{font-size:18px}#meter{margin-top:6px}.npc-invite{padding:10px 14px}}
.panel:has(#reward-card:not([hidden]))>#receipt{display:none}
/* Phone layout: the aim controls and target fit together on short screens. */
@media(max-width:780px){
 html{scroll-padding-bottom:env(safe-area-inset-bottom)}
 main{padding:env(safe-area-inset-top) 12px calc(12px + env(safe-area-inset-bottom));min-height:100svh}
 header{min-height:44px;padding:0;gap:4px;flex-wrap:wrap}header>a:first-child{font-size:22px;margin-right:auto}header>a:first-child small{display:none}header>a:not(:first-child){font-size:11px;padding:12px 3px;margin:0}header button{min-height:44px;padding:7px;font-size:11px}
 .heading{padding:5px 0!important;min-height:27px}.heading h1{font-size:12px;letter-spacing:1px;margin:0}.heading>span{font-size:11px}
 .arena{margin:0 -12px 8px;border-radius:0}canvas{height:clamp(165px,30svh,280px)}.npc-invite{padding:10px 14px}.npc-invite summary{font-size:12px;min-height:22px}.npc-content button{min-height:44px}
 .panel{padding:12px;border-radius:9px}#title{font-size:19px;margin:0 0 7px}#mission-details{margin:0 0 4px}#mission-details summary{font-size:11px}.aim-readout{min-height:22px;margin:4px 0}.aim-readout strong{font-size:17px}.meter-title{height:20px}#power{font-size:14px}#meter{height:30px;margin:6px 0 4px}#needle{height:42px}#draw{min-height:52px;font-size:18px}.meter-scale{margin-bottom:10px}.secondary{margin-top:2px;min-height:38px}.secondary>button,#aim-help>summary{min-height:38px;display:flex;align-items:center}
 #aim-help[open]{max-width:100%;text-align:left}#reward-card{flex-wrap:wrap}#reward-card>div:last-child{flex:1;min-width:150px}#save-panel{padding:12px}#save-panel section{max-height:calc(100svh - 24px);padding:18px}#save-panel button{min-height:44px}
 input,select{font-size:16px}button{-webkit-tap-highlight-color:transparent}#draw{-webkit-touch-callout:none;touch-action:none}summary{-webkit-tap-highlight-color:transparent}
}
@media(max-width:780px) and (max-height:650px){canvas{height:165px}.heading{min-height:23px}.panel{padding:10px}.npc-invite{padding:7px 12px}.aim-readout strong{font-size:16px}.meter-scale{margin-bottom:7px}#draw{min-height:48px}}
@media(max-height:500px) and (min-width:600px){main{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr);gap:8px 12px}.arena{margin:0;align-self:start}canvas{height:260px}.heading{display:none}.panel{align-self:start}header{grid-column:1/-1}}
@media(max-width:780px){.secondary>button{white-space:nowrap;flex-shrink:0;min-width:42px}#aim-help{min-width:0;flex:1}}
/* WebKit needs the prefixed rule on descendants as well as the button. */
#draw,#draw *{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;-webkit-user-drag:none;touch-action:none}
#aim,#aim *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.credits{grid-column:1/-1;text-align:center;font:12px/1.8 system-ui;color:#8490a0;padding:16px 0 4px}.credits span{padding:0 8px}.credits a{font:inherit;color:#667a93;text-decoration:underline;text-underline-offset:3px}

/* Stable touch layout: details stay in place while the finger is on the bow. */
body[data-play-state=drawing] #mission-details{visibility:hidden}
#meter{contain:layout}
button,a,summary{touch-action:manipulation}
#draw{touch-action:none}
@media(max-width:780px){
 header>a:not(:first-child){min-width:44px;text-align:center}
 .secondary>button,#aim-help>summary,#mission-details>summary{min-height:44px;min-width:44px}
 #mission-details>summary{display:flex;align-items:center}
 .npc-invite{padding-block:0}.npc-invite>summary{display:flex;align-items:center;min-height:44px}
 #tap,#npc-other,#chapter-result button,#restart{min-height:44px;padding:10px 12px}
 #save-panel section{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 #reward-card a{min-height:44px;display:inline-flex;align-items:center}
}

.save-heading{position:sticky;top:-18px;z-index:1;background:#fffdf8;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #e0e4e9}.save-heading h2{margin:0}#save-panel .save-heading button{width:auto;flex-shrink:0;margin:0;font-size:13px}

.visit-stats{font:12px/1.8 system-ui;margin:12px auto 6px;max-width:440px;text-align:center}.visit-stats summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center;color:inherit;list-style:none}.visit-stats summary:before{content:none}.visit-stats p{font:11px/1.8 system-ui;margin:4px 0 12px;color:inherit;opacity:.85}

.visit-stats summary{flex-direction:column;gap:2px}.visit-stats summary span{padding:0}
