:root{--ink:#ece6d4;--muted:#b3aeab;--gold:#eec77d;--gold2:#b87d3c;--panel:#17232b;--edge:rgba(236,199,125,.37);--accent:#e0ae63;--purple:#9e8ef0;--green:#89c8a3;--danger:#e86f67;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",system-ui,sans-serif;color:var(--ink);font-synthesis:none}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{padding:0;margin:0;width:100%;height:100%;height:100dvh;background:#090f18;overflow:hidden}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button:disabled{cursor:default;opacity:.58}.hidden{display:none!important}
.device{position:relative;width:100%;height:100%;height:100dvh;max-width:510px;max-height:100dvh;margin:0 auto;overflow:hidden;isolation:isolate;background:#162830;box-shadow:0 0 0 1px #4b4435,0 0 65px #000b}
#world{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;image-rendering:auto}
#ambient{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,18,29,.23),transparent 22%,transparent 68%,rgba(4,10,16,.44));}
.screen{position:absolute;inset:0;z-index:10}.menu-screen{background:linear-gradient(180deg,rgba(11,19,26,.68) 0%,rgba(11,20,29,.88) 32%,rgba(13,21,29,.95) 68%,rgba(8,14,23,.97) 100%)}.menu-scroll{height:100%;width:100%;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;padding:calc(21px + env(safe-area-inset-top)) 21px calc(24px + env(safe-area-inset-bottom));}.menu-scroll::-webkit-scrollbar{display:none}
.top-brand{display:flex;align-items:center;justify-content:space-between;gap:9px;max-width:410px;margin:0 auto;color:#c2ad8c;font-size:9px;letter-spacing:.26em;font-weight:800}.brand-mark{color:#eccb87;font-size:18px;line-height:1}.hero-title{text-align:center;margin:20px 0 17px}.sword-decoration{color:#d1aa67;font-size:14px;letter-spacing:20px;opacity:.95}.eyebrow{font-size:9px;letter-spacing:.39em;color:#d8bb8e;font-weight:700;margin:8px 0 2px}.hero-title h1{font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;display:flex;justify-content:center;align-items:baseline;gap:8px;margin:0;font-weight:900;font-size:clamp(60px,15vw,89px);line-height:1.16;letter-spacing:-.10em;text-shadow:0 5px 0 rgba(2,10,20,.38),0 7px 20px #000b}.hero-title h1 span:last-child{color:#fff7da;}.hero-title .golden{color:var(--gold);letter-spacing:-.11em}.tagline{margin:2px 0 0;color:#c9bfac;font-size:12px;letter-spacing:.18em;font-weight:700}
.menu-panel,.meta-panel{max-width:430px;margin:0 auto;border:1px solid var(--edge);background:linear-gradient(155deg,rgba(28,42,48,.96),rgba(14,27,37,.96));border-radius:10px;padding:15px;box-shadow:0 12px 25px #02060c66,inset 0 1px #ffffff1c;position:relative}.menu-panel:before,.menu-panel:after{content:'◆';position:absolute;color:var(--gold);font-size:9px;top:3px}.menu-panel:before{left:5px}.menu-panel:after{right:5px}.panel-heading{display:flex;align-items:center;gap:9px;margin-bottom:11px}.panel-heading>span:first-child{color:var(--gold);font-family:Georgia,serif;font-size:14px;font-weight:800}.panel-heading h2{margin:0;font-size:12px;font-weight:800;letter-spacing:.1em;color:#f2e2be}.panel-heading .line{flex:1;height:1px;background:linear-gradient(90deg,#bb9b6d6b,transparent)}.class-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}.class-card{background:rgba(10,20,27,.72);border:1px solid rgba(199,196,178,.18);border-radius:8px;min-height:109px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:10px 2px;position:relative;transition:background .16s,border .16s,transform .16s}.class-card.selected{background:linear-gradient(180deg,#443e35,#292d31);border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(239,203,125,.2),0 0 15px #e6b15b1b;transform:translateY(-1px)}.class-card.selected:after{content:'◆';position:absolute;top:5px;right:7px;font-size:9px;color:var(--gold)}.class-card strong{font-size:13px;font-weight:800}.class-card small{font-size:9px;color:#b8b4a7;white-space:nowrap}.avatar{display:flex;justify-content:center;align-items:center;width:41px;height:41px;border-radius:9px;font-size:25px;font-family:Georgia,serif;text-shadow:0 2px 1px #0008}.avatar.knight{color:#ffd988;background:linear-gradient(140deg,#455a6c,#263c4a)}.avatar.mage{color:#acd4ff;background:linear-gradient(140deg,#465279,#262f59)}.avatar.rogue{color:#a6ebc2;background:linear-gradient(140deg,#315344,#22392f)}
.primary-button{width:100%;border:1px solid #fff0b3;background:linear-gradient(180deg,#f6d994,#daa755 92%);color:#33251a;border-radius:7px;min-height:53px;box-shadow:inset 0 1px #fff2c5,0 4px 0 #7b522e,0 10px 17px #0005;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:900;font-size:15px;letter-spacing:.09em;position:relative;transition:transform .1s}.primary-button:active{transform:translateY(2px);box-shadow:inset 0 1px #fff2c5,0 2px 0 #7b522e}.button-arrow{position:absolute;right:19px;font-size:21px;font-weight:400}.daily-button{background:none;width:100%;display:flex;justify-content:center;align-items:center;gap:9px;color:#d7d4c6;border:0;min-height:41px;font-size:12px;font-weight:750;margin-top:6px;letter-spacing:.05em}.daily-button>span:first-child{color:#f3d188;font-size:19px}.daily-date{font:700 10px monospace;color:#ab9881;border-left:1px solid #a6a09955;padding-left:10px;margin-left:4px}
.meta-panel{margin-top:13px;padding:15px}.meta-head{display:flex;justify-content:space-between;align-items:center}.meta-title{color:#ebcf96;font-size:13px;font-weight:800;letter-spacing:.07em}.coin-total{font:700 12px monospace;color:#ebc676}.coin-total strong{font-size:16px}.meta-sub{font-size:10px;color:#aebbb4;margin:5px 0 12px}.shop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.shop-item{min-width:0;background:#0c1720b8;border:1px solid #60705b4a;border-radius:8px;padding:10px 4px 8px;text-align:center;display:flex;align-items:center;gap:4px;flex-direction:column;min-height:91px}.shop-item .shop-icon{font-size:21px;line-height:1.1}.shop-item strong{font-size:11px}.shop-item small{font:700 9px monospace;color:#aebeb4}.shop-item .cost{font-size:11px;color:#eac47d;font-weight:800}.shop-item.purchasable{border-color:#d7b570a3}.shop-item.maxed{opacity:.68}.records{display:flex;justify-content:space-between;align-items:center;margin:17px auto 8px;max-width:405px;gap:12px;font-size:10px;color:#adbbba}.records strong{font-size:10px;color:#dec8a1;text-align:right}.text-button{margin:0 auto;display:block;border:0;background:none;color:#d4c8ad;font-size:11px;text-decoration:underline;text-underline-offset:5px;padding:10px}.footer-sigil{text-align:center;font-size:8px;letter-spacing:.13em;color:#917e60;margin-top:10px}
.hud{position:absolute;top:0;left:0;right:0;z-index:4;pointer-events:none;padding:calc(12px + env(safe-area-inset-top)) 15px 0;background:linear-gradient(180deg,#07121dd9,rgba(8,19,26,.67) 72%,transparent)}.hud button{pointer-events:auto}.hud-top{display:flex;align-items:center;gap:9px;height:47px}.icon-button{background:#10232bc7;border:1px solid #9eaa9a66;min-width:34px;height:34px;border-radius:7px;font:900 17px Georgia;color:#e8cb93}.stage-caption{display:flex;gap:5px;align-items:center;flex:1;min-width:0;color:#dfc79b;font-size:10px;letter-spacing:.03em;font-weight:800}.stage-dot{width:6px;height:6px;background:#75c7a9;border-radius:50%;box-shadow:0 0 8px #72e1ae}.time-wrap{display:flex;align-items:flex-end;flex-direction:column;gap:0;margin-left:auto}.time-kicker{font:800 8px monospace;letter-spacing:.22em;color:#b4bbad}.time-wrap strong{font:900 31px/1 "Arial Narrow",monospace;letter-spacing:-.05em;color:#fff3d0;text-shadow:0 2px 5px #000}.status-line{display:flex;gap:9px;align-items:center;margin:5px 0 0}.portrait{width:35px;height:35px;background:#203443;border:1px solid #c6ae7b6e;display:flex;align-items:center;justify-content:center;border-radius:6px;color:#efcf8c;font-size:21px}.bars{flex:1}.bar-title{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font-size:10px;font-weight:850;color:#f5e3bf;margin-bottom:4px}.bar-title #levelLabel{color:#d8ceae;margin-right:auto}.bar-title #hpNumber{font:700 9px monospace;color:#d5d3bb}.bar{height:10px;border:1px solid #6b666287;border-radius:3px;background:#090e18;overflow:hidden;position:relative;margin-bottom:4px}.bar-fill{height:100%;width:100%;transform-origin:left center;transition:width .12s linear}.hp .bar-fill{background:linear-gradient(90deg,#ad4f54,#f07469,#ffae82);box-shadow:inset 0 1px #ffd1a35c}.xp{height:5px;border-color:#42758177}.xp .bar-fill{background:linear-gradient(90deg,#499ba8,#94eff2)}.combat-info{display:flex;justify-content:space-between;gap:8px;align-items:center;color:#d2ceb7;font:800 10px monospace;margin-top:5px}.combat-info #bossHint{color:#ffc990;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.combat-info #scoreLabel{color:#d9bc7d}
.action-ui{position:absolute;z-index:5;bottom:calc(22px + env(safe-area-inset-bottom));left:0;right:0;pointer-events:none;display:flex;align-items:end;justify-content:space-between;padding:0 22px}.move-hint{display:flex;align-items:center;gap:9px;color:#e2e3d3a5;font-size:10px;font-weight:700;text-shadow:0 1px #000;max-width:150px;padding-bottom:17px}.move-cross{width:38px;height:38px;border-radius:50%;background:#0c182681;border:1px solid #c9d6c27a;display:grid;place-items:center;font-size:25px}.skill-button{position:relative;width:84px;height:84px;border-radius:50%;border:3px solid #ebcf8e;background:radial-gradient(circle at 35% 22%,#796b53,#473f51 40%,#1a2435 82%);box-shadow:0 0 0 4px #0a142ab8,0 0 19px #f5b34f6b,inset 0 1px #ffffce;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:auto;gap:0;overflow:hidden}.skill-glow{position:absolute;inset:7px;border:1px dashed #eec38b88;border-radius:50%;animation:spin 12s linear infinite}.skill-mark{position:relative;font:900 35px/1 Georgia;color:#ffe0a1;text-shadow:0 0 14px #ffc562}.skill-name{position:relative;font-size:10px;font-weight:900;color:#ffebbf}.skill-button.cooling{border-color:#8999a8;background:radial-gradient(circle at 35% 25%,#344b59,#19232d)}.skill-button.cooling .skill-mark{opacity:.42}.skill-cooldown{position:absolute;inset:0;display:grid;place-items:center;font:900 26px monospace;background:#08142099}.skill-button:active{transform:scale(.95)}
.announcement{z-index:6;position:absolute;top:28%;left:10%;right:10%;text-align:center;pointer-events:none;animation:announce-in .35s ease both;text-shadow:0 3px 10px #000}.announcement span{display:block;color:#ead3a7;font:900 11px monospace;letter-spacing:.3em}.announcement strong{display:block;font:900 29px Georgia,"Yu Mincho",serif;color:#fff1cb;margin-top:5px}.toast{position:absolute;z-index:30;bottom:calc(140px + env(safe-area-inset-bottom));left:15%;right:15%;text-align:center;border:1px solid #ecc68280;border-radius:8px;background:#101f2ddf;color:#f8eac9;padding:10px 9px;font-size:12px;font-weight:800;box-shadow:0 5px 19px #0008;pointer-events:none;animation:toast-in .25s ease}
.overlay{background:#07111ae8;display:flex;align-items:center;justify-content:center;padding:calc(14px + env(safe-area-inset-top)) 17px calc(15px + env(safe-area-inset-bottom));backdrop-filter:blur(6px)}.modal{position:relative;width:100%;max-width:450px;max-height:100%;overflow-y:auto;scrollbar-width:none;border:1px solid #c7aa75b2;border-radius:13px;background:linear-gradient(160deg,#29313a,#16232d 47%,#101b26);box-shadow:0 18px 60px #000c,inset 0 0 0 4px #161f29, inset 0 0 0 5px #9c82575c;padding:24px 18px 20px;text-align:center}.modal:before,.modal:after{content:'✧';position:absolute;color:#d5bc83;top:7px;font-size:13px}.modal:before{left:12px}.modal:after{right:12px}.modal::-webkit-scrollbar{display:none}.modal-crest{color:var(--gold);font:900 12px Georgia,serif;letter-spacing:.22em;margin-bottom:8px}.modal h2{font-family:Georgia,"Yu Mincho",serif;margin:4px 0 5px;font-size:27px;color:#fff1cb}.modal-sub{font-size:11px;color:#b9c1bb;margin:5px 0 21px;line-height:1.7}.upgrade-choices{display:flex;flex-direction:column;gap:9px}.upgrade-option{display:flex;text-align:left;align-items:center;gap:12px;width:100%;border:1px solid #937d598a;border-radius:8px;background:linear-gradient(95deg,#3e3e3b,#283340);padding:12px 11px;min-height:90px;transition:border .15s}.upgrade-option:active{transform:scale(.987);border-color:#ffe09c}.upgrade-illustration{font-size:29px;width:51px;height:51px;flex:0 0 51px;display:grid;place-items:center;border-radius:8px;background:#14242bbb;border:1px solid #d0b27885;color:#f7d38f;text-shadow:0 0 10px #eaae5088}.upgrade-option:nth-child(2) .upgrade-illustration{color:#bbd0ff;border-color:#8aa1c185}.upgrade-option:nth-child(3) .upgrade-illustration{color:#9edab7;border-color:#6fa28e88}.upgrade-name{display:block;color:#f8ebcc;font-weight:900;font-size:14px;margin-bottom:4px}.upgrade-desc{font-size:10px;color:#c8cfc7;line-height:1.5}.upgrade-rank{display:block;color:#d8af66;font-size:10px;font-weight:700;margin-top:5px}.upgrade-hotkey{margin-left:auto;font:800 11px monospace;color:#b9b2a2;border:1px solid #89857366;width:21px;height:22px;display:grid;place-items:center;border-radius:4px}.shortcut-note{color:#8b9a99;font-size:9px;margin-top:16px}.pause-modal{max-width:370px;padding:34px 22px}.pause-modal .primary-button{margin-top:25px}.secondary-button{width:100%;min-height:45px;border:1px solid #9ba6a87d;border-radius:7px;background:#1b2c39;color:#ded7c4;font-size:12px;font-weight:800;margin-top:12px}.pause-modal .secondary-button{margin-top:16px}
.result-modal{max-width:400px;padding-top:19px}.result-emblem{display:grid;place-items:center;margin:0 auto 6px;width:64px;height:64px;border-radius:50%;border:2px solid #e7bc68;color:#ffe1a0;background:radial-gradient(circle,#675339,#2b2d32);box-shadow:0 0 20px #bb96502e;font:700 33px Georgia}.result-modal h2{margin-top:6px}.result-modal .modal-sub{margin-bottom:12px}.score-card{border:1px solid #dfbc78a3;border-radius:8px;padding:14px 9px 12px;background:radial-gradient(ellipse at 50% 0%,#59463388,transparent 70%),#15222d}.result-small{font:900 10px monospace;letter-spacing:.22em;color:#bcbba5}.result-score{font:900 43px/1.28 "Arial Narrow",monospace;letter-spacing:-.04em;color:#ffe1a2}.result-rank{font:900 11px Georgia;letter-spacing:.17em;color:#e4c082}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:10px}.result-stats>div{border:1px solid #9f9e8650;border-radius:7px;padding:10px 2px;background:#13212a}.result-stats small{display:block;font-size:10px;color:#a3b4ac}.result-stats strong{display:block;color:#f0d6a6;font:900 19px/1.5 monospace}.result-build{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;min-height:22px;margin:12px 0 7px}.result-build span{font-size:9px;color:#bdced4;border:1px solid #5e778178;padding:3px 6px;border-radius:20px}.best-label{font-size:11px;color:#f1d082;min-height:25px;font-weight:800}.result-modal .primary-button{margin-top:5px}.result-modal .text-button{margin-top:6px}
.help-modal{max-width:410px;text-align:left}.help-modal h2{text-align:center;font-size:24px}.help-steps{display:grid;gap:10px;margin-bottom:21px}.help-steps>div{border-bottom:1px solid #8b937344;padding-bottom:8px}.help-steps span{font:800 10px monospace;letter-spacing:.1em;color:#dbb978}.help-steps strong{display:block;font-size:14px;margin-top:5px}.help-steps p{font-size:11px;color:#b8c2bb;line-height:1.6;margin:4px 0 0}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes announce-in{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:560px){body{display:grid;place-items:center;background:radial-gradient(circle,#29333c,#0b1119 75%)}.device{height:min(900px,96dvh);border:1px solid #baa47a33;border-radius:17px}.menu-scroll{padding-left:28px;padding-right:28px}}
@media(max-height:730px){.menu-scroll{padding-top:calc(12px + env(safe-area-inset-top))}.hero-title{margin:12px 0}.hero-title h1{font-size:58px}.top-brand{font-size:8px}.menu-panel,.meta-panel{padding:12px}.class-card{min-height:94px}.modal{padding-top:19px;padding-bottom:15px}.upgrade-option{min-height:76px;padding:9px}.result-emblem{height:45px;width:45px;font-size:26px}.result-score{font-size:34px}}
@media(max-height:600px){.overlay{align-items:flex-start}.action-ui{bottom:12px}.menu-scroll{padding-bottom:18px}.hud{padding-top:6px}.result-modal .modal-sub{margin-bottom:5px}.result-stats>div{padding:6px 2px}}
@media(prefers-reduced-motion:reduce){.skill-glow{animation:none}.announcement,.toast{animation:none}.class-card,.primary-button{transition:none}}

.toast.in-modal{bottom:auto;top:calc(10px + env(safe-area-inset-top));}

.trophy-panel{max-width:430px;margin:11px auto 0;padding:8px 4px 0}.trophy-caption{color:#c4ae8b;font-size:10px;font-weight:800;letter-spacing:.1em}.trophies{display:flex;gap:6px;margin-top:8px}.trophy{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;font-size:9px;color:#afbbb6;border:1px solid #9ea99933;background:#16252b87;padding:7px 3px;border-radius:6px;white-space:nowrap}.trophy.won{color:#efcc8c;border-color:#c9a97870;background:#3a342c9c}.trophy i{font:normal 13px Georgia;}

/* V2: class signature legibility on compact phones */
.class-card small{font-size:9px;line-height:1.35;letter-spacing:-.015em;white-space:normal}
.skill-button .skill-name{font-size:10px;letter-spacing:.04em}
@media(max-width:375px){.class-card small{font-size:8.3px}.class-card{padding-left:3px;padding-right:3px}}

/* V4: six selectable jobs + unlock progression */
.class-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:6px}
.class-card{min-height:116px;padding:10px 3px 9px;gap:4px}
.class-card small{font-size:9px;white-space:normal;min-height:26px;line-height:1.35}
.class-card.locked{border-color:#6672806b;background:linear-gradient(165deg,#17242bbf,#121b24da);color:#9ea9ac}
.class-card.locked .avatar{filter:saturate(.4);opacity:.7}
.class-card.locked.focused{border-color:#e4bd76;background:linear-gradient(155deg,#303638,#1a2732);box-shadow:0 0 0 1px #d2a3634d}
.class-card.locked strong{color:#c6c9c0}
.job-status{font-size:9px;line-height:1.3;font-weight:800;color:#88cbb3;padding:2px 4px;border-radius:5px;background:#234c433b;white-space:nowrap}
.class-card.locked .job-status{color:#d8b27c;background:#5e492a51}
.job-progress{text-align:center;color:#c3bfaa;font-size:9px;line-height:1.5;margin:3px 0 11px}
.unlock-panel{border:1px solid #d8b67885;border-radius:8px;background:linear-gradient(115deg,#38352c,#192832);padding:12px 12px 11px;margin-bottom:12px;color:#f8e5c4;text-align:left}
.unlock-panel strong{display:block;font-size:14px;margin-bottom:5px}
.unlock-panel p{margin:0 0 5px;font-size:11px;color:#c7d4cd}
.unlock-panel small{display:block;color:#d9b875;font-size:10px;margin-bottom:9px}
.unlock-button{width:100%;min-height:41px;border:1px solid #e6be75;background:#e5bd70;color:#1f272b;font-size:12px;font-weight:900;border-radius:6px}
.unlock-button:disabled{background:#4b4b46;border-color:#87795b;color:#aea69b;opacity:1}
.avatar.ninja{color:#dfb8ff;background:linear-gradient(140deg,#5b447e,#27243f)}
.avatar.summoner{color:#a1edcc;background:linear-gradient(140deg,#38645a,#183f43)}
.avatar.engineer{color:#f4cd89;background:linear-gradient(140deg,#746144,#373b43)}
@media(max-width:375px){.class-choices{gap:6px}.class-card{padding:8px 2px;min-height:108px}.class-card strong{font-size:12px}.class-card small{font-size:8.2px}.class-card .avatar{width:35px;height:35px;font-size:22px}}