:root { color-scheme:dark; --cyan:#55e7ca; --gold:#efc05b; --ink:#100e18; --paper:#f6eedb; --red:#ef6969; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:#17242d; font-family:"Microsoft YaHei",system-ui,sans-serif; }
body::after { position:fixed; inset:0; z-index:100; pointer-events:none; content:""; opacity:.25; background:repeating-linear-gradient(180deg,transparent 0 4px,rgba(0,0,0,.11) 5px); }
button,input { font:inherit; }
canvas { display:block; }
#game { width:100vw; height:100vh; image-rendering:pixelated; }
.hidden { display:none!important; }
.overlay { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; background:rgba(12,11,20,.56); backdrop-filter:blur(2px); }
.start-card,.result-card,.panel { color:var(--paper); background:linear-gradient(145deg,rgba(25,22,35,.98),rgba(12,12,21,.98)); border:1px solid rgba(239,192,91,.45); box-shadow:0 24px 80px rgba(0,0,0,.55); }
.start-card { width:min(620px,94vw); padding:26px 34px 28px; text-align:center; border-radius:24px; }
.back { display:block; margin-bottom:4px; color:#a7a0ac; text-align:left; text-decoration:none; }
h1 { margin:0; font-family:Georgia,serif; font-size:clamp(54px,9vw,92px); font-weight:500; letter-spacing:.08em; line-height:.95; color:#f1cc7a; text-shadow:0 0 24px rgba(239,192,91,.22); }
h1 span,.brand span { color:var(--cyan); }
.chain { margin:8px 0 10px; color:#d9b662; font-size:12px; letter-spacing:.36em; }
.intro { margin:4px auto 12px; max-width:520px; color:#c6c0c4; }
.class-select { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:16px 0 10px; }
.class-option { min-height:122px; padding:10px; color:var(--paper); background:#171824; border:1px solid #3d3b4a; border-radius:14px; cursor:pointer; }
.class-option.selected { border-color:var(--cyan); box-shadow:0 0 18px rgba(85,231,202,.32); }
.class-option img { display:block; width:72px; height:72px; margin:auto; object-fit:contain; image-rendering:pixelated; }
.class-option b { display:block; margin-top:4px; }
.class-description { min-height:22px; margin:8px 0; color:#aaa8b3; font-size:13px; }
input { width:min(360px,90%); height:46px; padding:0 16px; color:var(--paper); background:#11111b; border:1px solid #4c4858; border-radius:6px; outline:0; text-align:center; }
.enter { display:block; min-width:230px; min-height:48px; margin:16px auto 12px; color:#161018; background:linear-gradient(#f6d887,#e7b64f); border:0; border-radius:7px; box-shadow:0 8px 26px rgba(239,192,91,.2); font-weight:900; cursor:pointer; }
small { color:#777681; font-size:11px; }
.hud { position:fixed; inset:14px 18px auto; z-index:20; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; pointer-events:none; }
.brand { padding:7px 11px; font-family:Georgia,serif; font-size:25px; letter-spacing:.08em; color:#f1cc7a; background:rgba(15,13,22,.76); border:1px solid rgba(239,192,91,.42); border-radius:7px; text-shadow:2px 2px #000; }
.stats { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; max-width:70vw; }
.stats span { display:flex; align-items:center; gap:4px; min-height:36px; padding:7px 11px; background:rgba(15,13,22,.82); border:1px solid rgba(239,192,91,.3); border-radius:7px; box-shadow:0 6px 18px rgba(0,0,0,.2); }
.stats img { width:18px; height:18px; image-rendering:pixelated; }
.boss-hud { position:fixed; top:66px; left:50%; width:min(520px,68vw); transform:translateX(-50%); text-align:center; }
.boss-hud span { color:#ffe1a1; font-weight:900; text-shadow:2px 2px #000; }
.boss-hud div { height:18px; margin-top:5px; padding:2px; background:#150d13; border:1px solid #efc05b; border-radius:9px; }
.boss-hud i { display:block; width:100%; height:100%; background:linear-gradient(90deg,#d83457,#ff8568); border-radius:8px; }
.quest-panel { position:fixed; top:70px; left:18px; z-index:16; width:min(330px,48vw); padding:12px 14px; color:#e8dfd1; background:rgba(17,14,23,.82); border-left:3px solid var(--gold); border-radius:4px; pointer-events:none; }
.quest-panel strong { color:#f0c663; }.quest-panel p { margin:5px 0 0; color:#b8b1b7; font-size:13px; line-height:1.45; }
.mini-map { position:fixed; right:18px; bottom:18px; z-index:18; width:180px; height:130px; background:rgba(7,13,18,.86); border:2px solid rgba(239,192,91,.6); border-radius:10px; image-rendering:pixelated; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.message { position:fixed; left:50%; bottom:30px; z-index:24; max-width:min(680px,86vw); transform:translateX(-50%); padding:12px 20px; color:var(--paper); background:rgba(19,16,25,.92); border:1px solid var(--gold); border-radius:7px; font-weight:800; text-align:center; }
.hint { position:fixed; left:50%; bottom:92px; z-index:23; transform:translateX(-50%); padding:8px 15px; color:#17242d; background:#f6d887; border-radius:6px; font-weight:900; }
.round-button,.touch-button { position:fixed; z-index:26; color:#f7e9c8; background:rgba(16,14,22,.82); border:1px solid rgba(239,192,91,.65); border-radius:50%; cursor:pointer; }
.round-button { right:220px; bottom:24px; width:50px; height:50px; }.map-button { right:278px; }
.touch-button { display:none; width:64px; height:64px; font-size:23px; }.attack { right:26px; bottom:38px; }.skill { right:98px; bottom:104px; }
.joystick { display:none; position:fixed; left:28px; bottom:30px; z-index:25; width:128px; height:128px; border-radius:50%; background:rgba(15,14,22,.36); border:2px solid rgba(246,238,219,.28); }.joystick i { position:absolute; left:42px; top:42px; width:42px; height:42px; border-radius:50%; background:rgba(246,216,135,.82); }
.panel { position:fixed; z-index:70; left:50%; top:50%; width:min(720px,92vw); max-height:86vh; overflow:auto; transform:translate(-50%,-50%); padding:28px; border-radius:18px; }
.panel-close { position:absolute; top:12px; right:14px; width:36px; height:36px; color:#fff; background:#332d3b; border:0; border-radius:50%; font-size:24px; cursor:pointer; }
.panel-tag,.result-tag { margin:0; color:var(--cyan); font-size:12px; font-weight:900; letter-spacing:.18em; }
.panel h2,.result-card h2 { margin:8px 0 20px; font-family:Georgia,serif; font-size:clamp(34px,6vw,58px); color:#f0c663; }
.inventory-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.inventory-grid article { min-height:155px; padding:12px; text-align:center; background:#171723; border:1px solid #393746; border-radius:10px; }
.inventory-grid span,.inventory-grid b { display:block; font-size:12px; }.inventory-grid span { color:#908d98; }.inventory-grid img { width:78px; height:78px; object-fit:contain; image-rendering:pixelated; }
.realm-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.realm-card { min-height:200px; padding:14px; color:#ede4d3; background:#171723; border:1px solid #403c49; border-radius:12px; cursor:pointer; text-align:left; }
.realm-card:hover { border-color:var(--gold); transform:translateY(-2px); }.realm-card img { width:100%; height:92px; object-fit:contain; image-rendering:pixelated; }.realm-card b,.realm-card span { display:block; }.realm-card span { margin-top:7px; color:#a7a0ab; font-size:12px; }
.result-card { width:min(560px,92vw); padding:36px; border-radius:20px; text-align:center; }.result-card a { color:#9e9aa5; }
@media(max-width:760px){
  .start-card{padding:20px}.class-select{gap:7px}.class-option{min-height:108px;padding:6px}.class-option img{width:58px;height:58px}.hud{inset:7px 7px auto}.brand{font-size:17px}.stats{font-size:10px;gap:3px}.stats span{padding:5px 7px;min-height:28px}.stats span:nth-child(5){display:none}.boss-hud{top:56px}.quest-panel{top:58px;left:7px;width:62vw;font-size:11px}.quest-panel p{font-size:10px}.mini-map{right:8px;bottom:144px;width:132px;height:96px}.round-button{display:none!important}.touch-button,.joystick{display:block}.inventory-grid{grid-template-columns:repeat(2,1fr)}.realm-cards{grid-template-columns:1fr}.panel{padding:22px}.message{bottom:170px}.hint{bottom:220px}
}