:root{--ink: #4a3b5c;--ink-soft: #7d6e8f;--line: #f0d9e8;--paper: #ffffff;--cream: #fff9ef;--pink: #ff8fb1;--pink-soft: #ffe1ea;--blue: #5ab8ff;--blue-soft: #dff2ff;--yellow: #ffd23f;--yellow-soft: #fff4c7;--green: #4cc38a;--green-soft: #dcf7e9;--purple: #9b6dff;--purple-soft: #efe6ff;--orange: #ff9f43;--red: #ff4d6d;--shadow: 0 4px 0 rgba(74, 59, 92, .12), 0 8px 20px rgba(74, 59, 92, .08);color-scheme:light}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{color:var(--ink);font:15px/1.5 Nunito,Microsoft JhengHei,PingFang TC,Noto Sans TC,system-ui,sans-serif;background:radial-gradient(circle at 10% 10%,#fff 0 2px,transparent 3px) 0 0 / 40px 40px,linear-gradient(180deg,#bfe7ff,#ffe9f2 55%,#fff6dc) fixed}button{font:inherit;font-weight:800;color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:7px 14px;cursor:pointer;min-height:36px;box-shadow:0 3px 0 var(--line);transition:transform .08s,box-shadow .08s}button:hover:not(:disabled){transform:translateY(-1px);border-color:var(--pink);box-shadow:0 4px 0 var(--pink-soft)}button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--line)}button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}button.primary{background:linear-gradient(180deg,#ff9fbd,#ff6f9c);border-color:#ff5d8f;color:#fff;box-shadow:0 4px #e04677;text-shadow:0 1px 0 #d94070}button.go{background:linear-gradient(180deg,#7fd9a8,#3fbd7c);border-color:#34a96c;color:#fff;box-shadow:0 4px #2b8f5a}button.dig{background:linear-gradient(180deg,#ffc875,#ff9f43);border-color:#f08a2c;color:#fff;box-shadow:0 4px #cf7420}button.big{padding:10px 26px;font-size:17px;border-radius:18px}button.link{background:none;border:none;box-shadow:none;color:var(--purple);padding:4px 6px}button.mini{padding:3px 10px;min-height:30px;font-size:13px;border-radius:11px}input,select{font:inherit;color:var(--ink);background:var(--cream);border:2px solid var(--line);border-radius:12px;padding:7px 10px}input:focus,select:focus{outline:3px solid var(--blue-soft);border-color:var(--blue)}input[type=number]{width:64px}h1,h2,h3{margin:.1em 0 .5em;font-weight:900}h3{font-size:16px;color:var(--purple)}.muted{color:var(--ink-soft)}.fine{color:var(--ink-soft);font-size:12px}.error,.warn{color:var(--red);font-weight:700}.pad{padding:0 16px}.card{background:var(--paper);border:3px solid #fff;border-radius:22px;padding:16px;box-shadow:var(--shadow)}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row.space{justify-content:space-between}.badge{font-size:11px;font-weight:900;color:#7a4b00;background:var(--yellow);padding:3px 9px;border-radius:999px}.center-screen{min-height:100vh;display:grid;place-items:center;padding:16px}.logo{font-size:30px;font-weight:900;color:#fff;text-shadow:0 3px 0 #ff6f9c,0 6px 0 rgba(74,59,92,.2);letter-spacing:.04em}.login{width:min(400px,100%);display:grid;gap:12px;text-align:center}.login label{display:grid;gap:4px;text-align:left;font-weight:800}.topbar{display:flex;gap:10px;align-items:center;padding:10px 18px;background:linear-gradient(90deg,#ff9fbd,#ffb86b 60%,#ffd23f);color:#fff;box-shadow:0 4px #4a3b5c1f}.topbar strong{font-size:18px;text-shadow:0 2px 0 rgba(0,0,0,.12)}.topbar .muted{color:#fff8;font-weight:700}.topbar button.link{color:#fff;font-size:15px}.coins{margin-left:auto;background:#fff;color:#c77700;font-weight:900;padding:4px 12px;border-radius:999px;box-shadow:0 3px #0000001a}.select-screen{max-width:980px;margin:0 auto;display:grid;gap:16px;padding-bottom:32px}.select-screen>.card{margin:0 16px}.type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:10px}.type-card{display:grid;justify-items:center;gap:2px;padding:8px 6px;background:var(--cream);border-radius:18px}.type-card.on{border-color:var(--pink);background:var(--pink-soft);box-shadow:0 4px #ffb3c9}.type-card b{font-size:15px}.type-card small{color:var(--ink-soft);font-size:11px;font-weight:700}.type-detail{margin:12px 0;padding:12px;background:var(--blue-soft);border-radius:16px}.char-list{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.char-row{display:flex;gap:10px;align-items:center;text-align:left;background:var(--cream)}.sprite{image-rendering:pixelated;display:block}.no-art{display:inline-grid;place-items:center;width:48px;height:48px;color:var(--ink-soft);border:2px dashed var(--line);border-radius:12px}.icon{width:32px;height:32px;image-rendering:pixelated;object-fit:contain;flex:none;background:var(--cream);border-radius:10px;padding:2px}.icon.missing{display:inline-grid;place-items:center;font-size:11px;color:var(--ink-soft);border:2px dashed var(--line)}.game{display:grid;min-height:100vh;grid-template-columns:230px minmax(0,1fr) 310px;grid-template-rows:auto 1fr;grid-template-areas:"top top top" "left main right";gap:0}.game>.topbar{grid-area:top}.col-left{grid-area:left;padding:14px;overflow:auto}.col-main{grid-area:main;padding:14px 6px;display:grid;gap:12px;align-content:start;min-width:0}.col-right{grid-area:right;padding:14px;display:flex;flex-direction:column;min-height:0}.col-right .card{display:flex;flex-direction:column;min-height:0;flex:1;padding:0;overflow:hidden}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px;background:var(--purple-soft)}.tabs button{flex:1;padding:6px 0;min-height:40px;border-radius:12px;font-size:12.5px;white-space:nowrap;box-shadow:none;border-color:transparent;background:transparent}.tabs button.on{background:#fff;border-color:#fff;color:var(--purple);box-shadow:0 3px #d8c7ff}.panel{padding:14px;overflow:auto;flex:1}.mobile-only{display:none}.stage{position:relative}.battle{width:100%;height:auto;aspect-ratio:2 / 1;border-radius:22px;border:4px solid #fff;box-shadow:var(--shadow);background:#bfe8ff;image-rendering:pixelated;display:block}.stage-hud{position:absolute;left:12px;top:10px;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}.chip{background:#ffffffe6;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:800;box-shadow:0 2px #00000014}.status-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.bar{background:#fff;border-radius:16px;padding:6px 10px;box-shadow:var(--shadow);font-size:12px}.bar-top{display:flex;justify-content:space-between;font-weight:900}.bar-top span:last-child{color:var(--ink-soft);font-weight:700}.bar-track{height:10px;background:#f3eef7;border-radius:999px;overflow:hidden;margin-top:3px}.bar-track>div{height:100%;border-radius:999px;transition:width .5s}.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.controls .where{flex:1;min-width:200px;font-weight:800;background:#fff;padding:9px 14px;border-radius:16px;box-shadow:var(--shadow)}.quickbar{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.qslot{aspect-ratio:1;max-height:64px;border:3px solid #fff;border-radius:16px;background:linear-gradient(180deg,#fff,var(--purple-soft));display:grid;place-items:center;position:relative;box-shadow:var(--shadow)}.qslot small{position:absolute;right:5px;bottom:2px;font-size:10px;color:var(--blue);font-weight:900}.qslot .n{position:absolute;left:6px;top:2px;font-size:10px;color:var(--ink-soft)}.qslot.cooling{filter:grayscale(.7) brightness(.95)}.stats{width:100%;border-collapse:separate;border-spacing:0 4px}.stats th{text-align:left;font-weight:800;width:70px}.stats th small{color:var(--ink-soft);font-weight:700}.stats td{padding:2px 4px;font-weight:800}.bonus{color:var(--green)}.stat-group{padding:8px 10px;border-radius:14px;margin-bottom:8px}.g-attack{background:var(--pink-soft)}.g-magic{background:var(--blue-soft)}.g-sense{background:var(--yellow-soft)}.g-charm{background:var(--green-soft)}.pill{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--purple-soft);color:var(--purple);font-weight:800;font-size:12px}.potion{display:grid;gap:8px;margin:12px 0;padding:10px;background:var(--pink-soft);border-radius:16px}.potion label{font-weight:700}.map-list,.inv,.equip,.skills,.skillbar-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.map-list li{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:10px 12px;background:var(--cream);border-radius:16px;border:2px solid #fff}.map-list b{font-size:15px}.inv li,.equip li,.skills li,.skillbar-list li{display:flex;gap:8px;align-items:center;padding:8px 10px;background:var(--cream);border-radius:16px}.inv li.equipped{background:var(--yellow-soft)}.equip li.drill-slot{background:linear-gradient(90deg,#ffe7c2,#fff4c7);border:2px dashed var(--orange)}.e-tag{color:#fff;background:var(--orange);border-radius:6px;padding:0 5px;font-size:11px}.slot{width:44px;color:var(--ink-soft);font-weight:800}.grow{flex:1;min-width:0}.price{color:#c77700;font-weight:900;white-space:nowrap}.cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.cats button{min-height:32px;padding:3px 12px;font-size:13px;border-radius:999px}.cats button.on{background:var(--purple);color:#fff;border-color:var(--purple);box-shadow:0 3px #7a4fe0}.dur{display:inline-block;height:6px;width:60px;background:#f3e6d6;border-radius:99px;overflow:hidden;vertical-align:middle}.dur>i{display:block;height:100%;background:var(--orange)}.summary .kv{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px}.summary .kv li{background:var(--cream);padding:2px 10px;border-radius:999px;font-weight:700;font-size:13px}.report{border-bottom:2px dashed var(--line);padding:10px 0}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#4a3b5c73;display:grid;place-items:center;padding:16px;z-index:20}.modal .card{width:min(480px,100%);max-height:90vh;overflow:auto}.modal h2{color:var(--pink)}.toast{position:fixed;left:50%;transform:translate(-50%);bottom:26px;background:#fff;color:var(--ink);font-weight:800;border:3px solid var(--pink-soft);padding:9px 16px;border-radius:999px;z-index:30;max-width:calc(100% - 32px);box-shadow:var(--shadow)}@media(max-width:1220px){.game{grid-template-columns:minmax(0,1fr) 290px;grid-template-areas:"top top" "main right"}.col-left{display:none}}@media(max-width:767px){body{font-size:15px}.game{display:block;padding-bottom:calc(70px + env(safe-area-inset-bottom))}.desktop-only{display:none!important}.mobile-only{display:flex}.col-main{padding:10px 16px 4px;gap:10px}.col-right{padding:6px 16px 16px}.col-right .card{overflow:visible}.col-right .tabs{display:none}.panel{padding:14px}.status-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.topbar{padding:8px 12px;flex-wrap:wrap;gap:6px}.topbar .muted{display:none}.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:3px solid var(--pink-soft);padding:4px 4px env(safe-area-inset-bottom);z-index:10;box-shadow:0 -4px 14px #4a3b5c1a;gap:2px}.bottom-nav button{flex:1;border:none;box-shadow:none;background:none;min-height:58px;color:var(--ink-soft);font-size:12px;display:grid;place-items:center;gap:0;padding:4px 0;border-radius:14px}.bottom-nav button .ico{font-size:20px;line-height:1}.bottom-nav button.on{color:var(--pink);background:var(--pink-soft)}button.mini{min-height:40px;padding:4px 12px}.map-list li{flex-direction:column;align-items:stretch}.map-list li .row button{flex:1;min-height:46px}.controls .where{flex-basis:100%;min-width:0}.controls button{min-height:50px;flex:1}.quickbar{gap:5px}.qslot{border-radius:12px}}.modebar{background:#fff;border-radius:22px;padding:12px 14px;box-shadow:var(--shadow);display:grid;gap:10px}.mode-map{display:flex;justify-content:space-between;align-items:center;gap:10px}.mode-map b{font-size:17px}.mode-buttons{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}.mode-buttons .mode{min-height:52px;font-size:16px;border-radius:18px}.mode-buttons .mode.active{outline:4px solid var(--yellow);outline-offset:2px;opacity:1}.mode-buttons .mode.active:disabled{opacity:1;cursor:default}.mode-notes p{margin:2px 0;font-size:13px}.map-list li.here{background:var(--yellow-soft);border-color:var(--yellow)}.skills li.skill{display:block;padding:8px 10px}.skill-head{display:flex;gap:8px;align-items:center}.skill-name{flex:1;min-width:0;text-align:left;background:none;border:none;box-shadow:none;padding:2px 4px;font-weight:400;min-height:0}.skill-name:hover:not(:disabled){transform:none;box-shadow:none;background:#fff6}.tag{display:inline-block;font-size:11px;font-weight:900;border-radius:6px;padding:0 6px}.tag.ok{background:var(--green-soft);color:#1f8a55}.tag.todo{background:#ffe3cc;color:#b85c00}.skill-detail{margin-top:8px;padding:10px;background:#fff;border-radius:12px;font-size:13px}.skill-detail .kv{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px}.ok-text{color:#1f8a55;font-weight:700}.lv-table{width:100%;border-collapse:collapse;font-size:12px}.lv-table th,.lv-table td{padding:2px 4px;text-align:center;border-bottom:1px solid var(--line)}.lv-table tr.cur{background:var(--yellow-soft);font-weight:800}@media(max-width:767px){.mode-buttons{grid-template-columns:1fr 1fr}.mode-buttons>button:last-child:not(.mode){grid-column:1 / -1}}.sell-list{max-height:40vh;overflow:auto;padding-left:18px;columns:2;font-size:13px}@media(max-width:767px){.sell-list{columns:1}}.login-screen{min-height:100vh;display:grid;align-content:center;justify-items:center;gap:18px;padding:24px 16px;background:linear-gradient(180deg,#8fd6ff,#c9efff 42%,#fff1c4 72%,#ffd98a)}.login-hero{text-align:center;color:#3f5f7a;font-weight:800;max-width:100%}.login-hero p{margin:6px 0 0}.login-logo{font-size:clamp(38px,9vw,60px)}.parade{display:flex;justify-content:center;flex-wrap:wrap;margin-top:8px}.parade .sprite{margin:0 -6px}.select-tabs{display:flex;gap:8px;margin:0 16px}.select-tabs button{flex:1;border-radius:16px;font-weight:800}.select-tabs button.on{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 4px #ff6f9c}.select-screen h2{margin:14px 0 8px;font-size:18px}.select-screen h2:first-child{margin-top:0}.color-picker{display:grid;gap:10px;flex:1;min-width:200px}.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatch{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line)}.swatch.on{box-shadow:0 0 0 3px var(--ink)}.hue-slider{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px}.hue-slider input{flex:1;min-width:0;accent-color:var(--pink)}.hue-slider small{width:34px;color:var(--ink-soft)}.color-row{align-items:center;flex-wrap:wrap}.color-edit{margin:12px 0;padding:10px;background:var(--cream);border-radius:14px}.drill-rule{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:800;margin-top:8px}.rule-edit{display:inline-flex;align-items:center;gap:4px;font-size:12px;margin-top:2px;flex-wrap:wrap}.rule-edit select{font-size:12px;padding:2px 4px}.rule-edit input{width:52px;font-size:12px;padding:2px 4px}.login-tabs{justify-content:center}.login-tabs button{flex:1}.login label.login-show{display:flex;flex-direction:row;align-items:center;gap:6px;font-size:13px;font-weight:400}.login label.login-show input{width:auto;min-height:0;margin:0}.skill-why{margin:6px 0 2px;font-size:12px;color:#9a6a2f}.skill-guide{margin-top:8px;padding:8px 10px;border-radius:12px;background:#fff;border:2px dashed #ffd8a8;font-size:13px;display:grid;gap:6px;justify-items:start}.skill-guide ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;width:100%}.skill-guide p{margin:0;font-size:12px}ul.skills .skill-guide li{display:block;padding:0;margin:0;background:none;border-radius:0;box-shadow:none}.tag.site{background:#fff3bf;color:#8a5a00;margin-left:4px}.site-note{margin:4px 0 0;font-size:13px;font-weight:700;color:#8a5a00}.gap{display:inline-block;font-weight:700;color:#2b8a3e}.gap.low{color:#c92a2a}.stat-row th{cursor:help}.stat-tip{position:fixed;transform:translateY(-100%);width:240px;z-index:60;padding:8px 10px;border-radius:12px;background:#4a3b5c;color:#fff;font-size:13px;font-weight:600;line-height:1.4;box-shadow:var(--shadow);pointer-events:none}.stat-tip.below{transform:none}