/* [claude code] 2026-10-24 標題頁滿版(.title 撐滿可視高度、畫布由 title-art.js 決定大小)。 */
/* [claude code] 2026-10-24 窄螢幕(≤480)拿掉 #app 左右邊框,畫布才放得到整數倍(360 寬 DPR 2 = 4 倍)。 */
/* [codex] 2026-10-23 手機直式、像素畫布與觸控尺寸。 */
:root{color-scheme:dark;font-family:monospace;--ink:#181425;--paper:#ead4aa;--gold:#fee761;--blue:#0099db}*{box-sizing:border-box}body{margin:0;background:#181425;color:#ead4aa;font-size:16px}#app{max-width:480px;min-height:100dvh;margin:auto;display:flex;flex-direction:column;background:#262b44;border-inline:2px solid #3a4466;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}header{min-height:48px;display:flex;align-items:center;justify-content:space-around;border-bottom:3px solid #733e39;background:#3e2731}main{flex:1;position:relative;padding:12px;overflow-x:hidden}h1,h2,h3{color:#fee761;margin:12px 0}p{line-height:1.7}button,input,select{font:inherit;min-height:44px;min-width:44px}button{color:#ead4aa;background:#124e89;border:2px solid #5a6988;padding:8px;margin:3px;cursor:pointer;box-shadow:0 3px #181425}button:active{transform:translateY(2px);box-shadow:none}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid #fee761}button.sprite{background:transparent}nav{position:sticky;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);background:#3e2731;border-top:3px solid #733e39;z-index:2}nav button{padding:8px 0;margin:2px;font-size:14px}nav button.active{background:#b86f50}canvas,img{image-rendering:pixelated;image-rendering:crisp-edges}canvas{display:block;margin:auto}section.card,.card{padding:12px;border:2px solid #733e39;background:#3a4466;margin:8px 0}.title{min-height:70dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:repeating-linear-gradient(0deg,#265c42 0px,#265c42 22px,#193c3e 22px,#193c3e 44px)}.title h1{font-size:33px;text-shadow:3px 3px #733e39}.title img{width:192px;height:192px}.row{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.muted{color:#8b9bb4}.error{color:#f6757a}#toast{position:fixed;bottom:85px;left:50%;transform:translateX(-50%);max-width:90vw;background:#3e2731;border:2px solid #fee761;padding:12px;z-index:10}#toast:empty{display:none}#modal:empty{display:none}#modal{position:fixed;inset:0;background:#181425dd;display:flex;align-items:center;justify-content:center;z-index:20}#modal>.card{width:min(94vw,480px);max-height:85dvh;overflow:auto}input{width:100%;padding:8px}label{display:block;margin-block:8px}.battle-main{padding:0}.battle-stage{overflow:hidden;display:flex;justify-content:center}.skills{display:flex;overflow:auto}.skills button{flex:1;min-width:48px;font-size:12px}.glow{outline:2px solid #fee761}.right-rail{position:absolute;right:8px;top:16px;display:flex;flex-direction:column}.right-rail button{font-size:14px}.kingdom{min-height:390px;padding-right:74px;background:#265c42}.portrait{width:64px;height:64px;object-fit:contain}.small{font-size:14px}.bar{height:12px;background:#181425}.bar>div{height:100%;background:#0099db}.locked{opacity:.65}.banner{padding:8px;border:2px solid #fee761;background:#733e39}.map-node{width:100%;text-align:left}.danger{background:#a22633}.selected{border-color:#fee761}
/* [codex] 2026-10-23 定稿直式提示由字串表供應。 */
.orientation-overlay[hidden]{display:none}.orientation-overlay{position:fixed;inset:0;background:#181425;display:grid;place-items:center;z-index:100;font-size:22px}

/* [codex] 2026-10-23 戰鬥導覽隱藏與直式技能列。 */
[hidden]{display:none!important}.skills button{white-space:normal;min-height:52px}.battle-main .row{justify-content:center}.battle-main p{margin:6px;font-size:14px}.battle-main canvas{touch-action:none}

/* [codex] 2026-10-23 直式戰場保留完整操作列與冷卻頭像。 */
.battle-main .row button{font-size:12px;padding:5px}.battle-main progress{width:100px;height:12px}.battle-main .skills button{display:flex;align-items:center;gap:4px;min-width:64px;padding:3px;font-size:12px}.cooldown-ring{display:inline-flex;border-radius:50%;padding:2px;flex-shrink:0}.cooldown-ring img{width:32px;height:32px;border-radius:50%}.battle-main .skills{max-width:100%}

/* [codex] 2026-10-23 直式大廳、像素建築、圖鑑與地圖。 */
.sprite-thumb{display:inline-block;flex-shrink:0;vertical-align:middle;background-repeat:no-repeat;image-rendering:pixelated}.hero-card{display:flex;align-items:center;flex-direction:column;font-size:14px;overflow-wrap:anywhere}.hero-card span{display:block}.rarity-SSR{border-color:#feae34}.rarity-SR{border-color:#b55088}.rarity-R{border-color:#0099db}.kingdom-wrap{position:relative;margin:auto;overflow:hidden}.kingdom-art,.map-art{position:relative;background-repeat:no-repeat;image-rendering:pixelated;margin:auto}.kingdom-building{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:start;border:none;box-shadow:none;padding:0;margin:0;font-size:14px;white-space:nowrap;color:#fff;text-shadow:1px 1px #181425}.kingdom-building:active,.map-point:active{transform:none}.right-rail{right:0;top:0;z-index:1;background:#262b44}.right-rail button{display:flex;align-items:center;margin:0;font-size:14px;padding:2px;min-height:44px;box-shadow:none}.right-rail .sprite-thumb{margin-right:2px}.map-point{position:absolute;display:grid;place-items:center;border:0;padding:0;margin:0;box-shadow:none}.map-point>.sprite-thumb{grid-area:1/1}.map-point>.sprite-thumb+span{align-self:start}.grid>button{overflow-wrap:anywhere}.card button{max-width:100%}#top button{padding:4px;font-size:14px}.tutorial-hint{margin:2px;font-size:14px;padding:4px}

/* [codex] 2026-10-23 長線頁面維持單一直式欄與三系天賦。 */
.talent-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.talent-columns h3{font-size:14px;overflow-wrap:anywhere}.talent-columns .card{padding:5px}.talent-columns p,.talent-columns button{font-size:14px;overflow-wrap:anywhere}.talent-columns button{padding:4px;margin:2px;max-width:100%}.summon-card{text-align:center;min-height:120px}.summon-card h3{font-size:16px}.claimed{opacity:.55}.odds-table{border-collapse:collapse;width:100%;font-size:14px}.odds-table th,.odds-table td{border-bottom:1px solid #5a6988;padding:6px 2px;text-align:left}.public-page{max-width:480px;margin:auto;padding:16px}.public-page a{display:inline-flex;align-items:center;min-height:44px;color:#fee761}a{color:#fee761}

/* [codex] 2026-10-23 保留捲軸寬度，避免像素場景在臨界寬度反覆變換倍率。 */
html{scrollbar-gutter:stable}

/* [codex] 2026-10-23 子集字型以原生整數字級呈現，版面保持直式。 */
@font-face{font-family:MoePixel;src:url('/assets/fonts/moe-pixel.woff2') format('woff2');font-display:swap}body{font-family:MoePixel,monospace;font-size:22px}h1{font-size:33px}h2,h3{font-size:22px}nav button,.small,.hero-card,.right-rail button,#top button,.talent-columns h3,.talent-columns p,.talent-columns button,.odds-table{font-size:22px}.kingdom-building,.battle-main p,.battle-main .row button,.battle-main .skills button,.tutorial-hint{font-size:11px}input[type=checkbox]{width:44px;vertical-align:middle}select{max-width:100%}a{overflow-wrap:anywhere}#version-update{position:sticky;top:0;z-index:30;width:100%;margin:0}details p{overflow-wrap:anywhere}header{flex-wrap:wrap}nav button{font-size:22px;min-width:0} .talent-columns{overflow-wrap:anywhere}

/* [codex] 2026-10-23 右側選單獨立占欄，不蓋住建築操作區。 */
.kingdom-wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:4px}.kingdom-wrap .kingdom-art{margin:0}.kingdom-wrap .right-rail{position:static;flex-shrink:0}.kingdom-wrap .right-rail button{font-size:22px}


.kingdom-art{flex-shrink:0}.right-rail button{position:relative;white-space:nowrap}.rail-dot{position:absolute;right:0;top:0;font-size:11px;color:#fee761}


/* [codex] 2026-10-23 八英雄依四格換列，觸控按鈕不縮小、不橫向捲動。 */
.battle-main .skills{display:grid;gap:2px;overflow:visible}.battle-main .skills button{margin:0;min-width:0}.battle-main .skills button>span:last-child{min-width:0;overflow-wrap:anywhere}

/* [codex] 2026-10-23 正式直式標題，圖像維持整數倍率，無 CSS 拉伸。 */
.title{position:relative;min-height:0;background:#181425;width:max-content;max-width:100%;margin:auto}.title>button{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);white-space:nowrap;background:#124e89;border-color:#fee761;font-size:22px}.title>button:active{transform:translateX(-50%)}.screen-reader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* [codex] 2026-10-23 正式像素九宮格外框，中心保留高對比底色。 */
button{border-width:5px;border-image:var(--art-blue) 5 stretch;image-rendering:pixelated}.card{border-width:8px;border-image:var(--art-panel) 8 stretch}.danger{border-image-source:var(--art-red)}nav button.active{border-image-source:var(--art-gold)}button:active{border-image-source:var(--art-pressed)}button:disabled{border-image-source:var(--art-disabled)}nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}button.kingdom-building,button.map-point{border-image:none;border-width:0}
@media (max-width:480px){#app{border-inline:0}}
.title{width:100%;max-width:none;height:100dvh;margin:0;overflow:hidden}.title>canvas{margin:0}