@font-face {
  font-family: "MiraDamage";
  src: url("assets/fonts/Cinzel-Black-900.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

/* Skill acquisition is a major progression beat, not a small toast. */
.skill-awakening { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .22s ease; --awaken:#78e9cf; --awaken-deep:#173f43; }
.skill-awakening:not(.hidden) { opacity:1; }
.skill-awakening-vignette { position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--awaken) 20%,transparent) 0,rgba(5,11,18,.8) 42%,rgba(1,4,8,.95) 100%); animation:awakening-vignette 3.8s ease both; }
.skill-awakening-runes { position:absolute; left:50%; top:50%; width:min(74vw,760px); aspect-ratio:1; transform:translate(-50%,-50%); filter:drop-shadow(0 0 24px var(--awaken)); }
.skill-awakening-runes i { position:absolute; inset:8%; border:1px solid color-mix(in srgb,var(--awaken) 82%,white); border-radius:50%; opacity:.72; animation:awakening-ring 3.6s cubic-bezier(.18,.78,.16,1) both; }
.skill-awakening-runes i:nth-child(2) { inset:22%; border-width:2px; border-style:dashed; animation-direction:reverse; animation-duration:3.1s; }
.skill-awakening-runes i:nth-child(3) { inset:35%; border-radius:18%; transform:rotate(45deg); animation-duration:2.6s; }
.skill-awakening-card { position:relative; width:min(86vw,560px); padding:34px 42px 30px; text-align:center; color:#f8f4e7; border:1px solid color-mix(in srgb,var(--awaken) 68%,#fff); border-radius:3px 34px 3px 34px; background:linear-gradient(145deg,rgba(14,25,33,.96),rgba(5,9,16,.97)); box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 0 70px color-mix(in srgb,var(--awaken) 28%,transparent),0 35px 90px rgba(0,0,0,.72); animation:awakening-card 3.8s cubic-bezier(.16,.8,.16,1) both; }
.skill-awakening-card::before,.skill-awakening-card::after { content:""; position:absolute; left:9%; right:9%; height:1px; background:linear-gradient(90deg,transparent,var(--awaken),transparent); }
.skill-awakening-card::before { top:12px; }.skill-awakening-card::after { bottom:12px; }
.skill-awakening-kicker { display:block; color:var(--awaken); font:700 11px/1.2 Cinzel,serif; letter-spacing:.34em; }
.skill-awakening-icon { display:grid; place-items:center; width:92px; height:92px; margin:18px auto 13px; color:#fff9dc; font:900 42px/1 Cinzel,serif; border:1px solid var(--awaken); border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--awaken) 48%,white),var(--awaken-deep) 48%,#071018 72%); box-shadow:0 0 28px var(--awaken),0 0 70px color-mix(in srgb,var(--awaken) 42%,transparent),inset 0 0 16px rgba(255,255,255,.45); animation:awakening-icon 1.1s .35s cubic-bezier(.2,1.4,.3,1) both; }
.skill-awakening-image { width:86px; height:86px; border-radius:50%; object-fit:cover; filter:saturate(1.1) contrast(1.04); }
.skill-awakening-card p { margin:0; }.skill-awakening-card #skill-awakening-job { color:#cbdedb; font-size:13px; letter-spacing:.16em; }
.skill-awakening-card h2 { margin:8px 0 10px; color:#fff; font:900 clamp(27px,4vw,42px)/1.2 Cinzel,"Yu Mincho",serif; letter-spacing:.08em; text-shadow:0 0 22px var(--awaken); }
.skill-awakening-line { width:72%; height:2px; margin:0 auto 16px; background:linear-gradient(90deg,transparent,var(--awaken),#fff,var(--awaken),transparent); box-shadow:0 0 12px var(--awaken); }
.skill-awakening-card #skill-awakening-summary { color:#f2ead7; font-size:14px; line-height:1.75; }
.skill-awakening-card small { display:block; margin-top:15px; color:#93aca9; letter-spacing:.12em; }
.skill-awakening.swordsman { --awaken:#ffd269; --awaken-deep:#543417; }.skill-awakening.thief { --awaken:#b889ff; --awaken-deep:#362057; }.skill-awakening.mage { --awaken:#69dbff; --awaken-deep:#173a58; }.skill-awakening.healer { --awaken:#92ffc0; --awaken-deep:#174d39; }
@keyframes awakening-card { 0%{opacity:0;transform:scale(.72) translateY(34px);filter:blur(9px)} 16%,76%{opacity:1;transform:scale(1) translateY(0);filter:none} 100%{opacity:0;transform:scale(1.05) translateY(-8px);filter:blur(2px)} }
@keyframes awakening-icon { 0%{opacity:0;transform:scale(.35) rotate(-80deg)} 100%{opacity:1;transform:scale(1) rotate(0)} }
@keyframes awakening-ring { 0%{opacity:0;transform:scale(.38) rotate(-100deg)} 20%,70%{opacity:.75} 100%{opacity:0;transform:scale(1.25) rotate(160deg)} }
@keyframes awakening-vignette { 0%,100%{opacity:0} 12%,78%{opacity:1} }

#death-return-panel { position:fixed; z-index:85; left:50%; top:46%; transform:translate(-50%,-50%); width:min(420px,calc(100vw - 32px)); padding:26px; box-sizing:border-box; text-align:center; color:#f4e5c5; border:1px solid #bc9d61; border-radius:4px 20px 4px 20px; background:linear-gradient(145deg,rgba(19,37,42,.98),rgba(9,17,27,.98)); box-shadow:0 18px 70px #0009,inset 0 0 0 5px #bf985513; }
#death-return-panel[hidden] { display:none; }
#death-return-panel small { color:#cfb47a; letter-spacing:.22em; font:700 10px/1.4 "MiraDamage",serif; }
#death-return-panel h2 { margin:16px 0 10px; font:600 20px/1.6 "Yu Mincho",serif; }
#death-return-panel p { margin:10px 0 18px; color:#bfcdd0; font-size:14px; }
#death-return-panel button { display:block; width:100%; min-height:48px; border:1px solid #f0d28b; border-radius:4px; background:linear-gradient(#e3ca8b,#ae8547); color:#231c12; font-family:inherit; font-weight:700; font-size:16px; line-height:1.4; cursor:pointer; box-shadow:0 4px 18px #0005; }
#death-return-panel button:hover { filter:brightness(1.12); }
#death-return-panel button:focus-visible { outline:3px solid #a5f3df; outline-offset:4px; }
#death-return-panel button:disabled { opacity:.5; cursor:wait; }
#death-return-panel span { display:block; margin-top:14px; font-size:11px; line-height:1.8; color:#a5b8bc; }

:root {
  color-scheme: dark;
  font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --ink: #fff8e8;
  --panel: rgba(22, 25, 36, .88);
  --edge: rgba(255, 246, 211, .18);
  --gold: #ffd56b;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #111722; }
button, input, select { font: inherit; }
button { cursor: pointer; }

#app { position: relative; width: 100vw; height: 100vh; }
#game { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; image-rendering: auto; background: #8ebd78; }
.hidden { display: none !important; }
.glass { background: var(--panel); border: 1px solid var(--edge); box-shadow: 0 10px 28px rgba(0,0,0,.28); backdrop-filter: blur(7px); }

.game-loading { position:absolute; inset:0; z-index:220; display:grid; place-items:center; overflow:hidden; color:#f7efd9; background:#06131a; opacity:1; transition:opacity .38s ease; }
.game-loading.is-complete { opacity:0; pointer-events:none; }
.game-loading-art { position:absolute; inset:-3%; background:url("assets/ui/adventure1/magic-city-title-v1.png") center 54%/cover no-repeat; filter:saturate(.7) brightness(.34) contrast(1.08); transform:scale(1.04); animation:loading-drift 12s ease-in-out infinite alternate; }
.game-loading-vignette { position:absolute; inset:0; background:radial-gradient(circle at 50% 48%,rgba(28,95,104,.12),rgba(1,8,13,.62) 61%,rgba(1,6,10,.94)),linear-gradient(180deg,rgba(1,7,11,.3),rgba(1,8,13,.74)); }
.game-loading-card { position:relative; width:min(520px,86vw); display:grid; justify-items:center; padding:34px 42px 30px; border:1px solid rgba(237,210,135,.3); border-radius:2px 25px 2px 25px; background:linear-gradient(145deg,rgba(7,25,31,.86),rgba(5,14,22,.94)); box-shadow:0 28px 90px rgba(0,0,0,.58),inset 0 0 42px rgba(75,177,165,.06); backdrop-filter:blur(14px); }
.game-loading-card::before,.game-loading-card::after { content:""; position:absolute; width:42px; height:42px; border-color:#d9bd6d; opacity:.62; }
.game-loading-card::before { left:9px; top:9px; border-left:1px solid; border-top:1px solid; }
.game-loading-card::after { right:9px; bottom:9px; border-right:1px solid; border-bottom:1px solid; }
.game-loading-sigil { width:190px; display:grid; grid-template-columns:1fr 42px 1fr; align-items:center; gap:12px; color:#edd486; }
.game-loading-sigil i { height:1px; background:linear-gradient(90deg,transparent,rgba(239,211,130,.72)); }
.game-loading-sigil i:last-child { transform:scaleX(-1); }
.game-loading-sigil b { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(231,204,125,.65); transform:rotate(45deg); font-size:17px; text-shadow:0 0 13px #f4d878; animation:loading-sigil 1.8s ease-in-out infinite; }
.game-loading-sigil b::first-letter { transform:rotate(-45deg); }
.game-loading-card > p { margin:22px 0 5px; color:#d7bd70; font:700 9px/1 Cinzel,serif; letter-spacing:.34em; }
.game-loading-card h2 { margin:6px 0 9px; font:600 25px/1.4 "Yu Mincho",serif; letter-spacing:.1em; }
.game-loading-card > span { color:rgba(237,241,228,.65); font-size:11px; letter-spacing:.07em; }
.game-loading-meter { position:relative; width:100%; height:12px; margin:23px 0 10px; overflow:hidden; border:1px solid rgba(230,207,141,.23); background:rgba(1,8,13,.75); box-shadow:inset 0 2px 6px rgba(0,0,0,.48); }
.game-loading-meter i { position:absolute; inset:2px auto 2px 2px; width:0; background:linear-gradient(90deg,#4da995,#c5d98c 62%,#f0d178); box-shadow:0 0 16px rgba(116,224,195,.55); transition:width .22s ease; }
.game-loading-meter b { position:absolute; right:5px; top:-18px; color:#ead18a; font:700 9px/1 Cinzel,serif; letter-spacing:.08em; }
.game-loading-card small { color:rgba(225,231,218,.46); font-size:9px; letter-spacing:.04em; }
.game-loading-card button { margin-top:18px; padding:9px 20px; border:1px solid rgba(239,205,117,.56); color:#f3dda1; background:rgba(71,54,28,.56); }
.game-loading-tip { position:absolute; left:50%; bottom:28px; translate:-50% 0; display:flex; gap:13px; align-items:center; width:min(610px,88vw); padding-top:13px; border-top:1px solid rgba(231,209,150,.16); color:rgba(235,238,223,.53); font-size:9px; letter-spacing:.05em; }
.game-loading-tip b { flex:0 0 auto; color:#d5bb70; font:700 8px/1 Cinzel,serif; letter-spacing:.22em; }
@keyframes loading-drift { from { transform:scale(1.04) translate3d(-.5%,0,0); } to { transform:scale(1.085) translate3d(.5%,-.6%,0); } }
@keyframes loading-sigil { 0%,100% { filter:brightness(.86); box-shadow:0 0 0 rgba(238,210,125,0); } 50% { filter:brightness(1.25); box-shadow:0 0 22px rgba(238,210,125,.24); } }

.screen-panel {
  position: absolute; inset: 0; display: grid; place-items: center; overflow: auto;
  padding: 24px; color: var(--ink);
  background: radial-gradient(circle at 50% 20%, rgba(255,223,143,.14), transparent 36%), rgba(10,14,24,.82);
}

.create-card {
  width: min(980px, 96vw); border: 1px solid rgba(255,244,202,.2); border-radius: 24px;
  padding: 24px 28px 28px; background: linear-gradient(145deg, rgba(35,39,55,.97), rgba(16,20,31,.97));
  box-shadow: 0 28px 80px rgba(0,0,0,.48);
}

.create-card header { text-align: center; margin-bottom: 18px; }
.create-card h1 { margin: 0; font-family: Georgia, serif; letter-spacing: .08em; color: #ffe49a; font-size: 34px; }
.create-card header p { margin: 4px 0; color: #d9d2be; }
.create-card .eyebrow { font-size: 10px; letter-spacing: .18em; color: #8be2cf; }
.creator-grid { display: grid; grid-template-columns: 380px 1fr; gap: 30px; }
.preview-wrap { display: grid; place-items: center; align-content: center; min-height: 530px; border-radius: 18px; background: radial-gradient(circle, #466d68, #263f48 60%, #1c2935); }
#preview { max-width: 100%; height: auto; }
.preview-note { font-size: 11px; color: #b9d8d1; opacity: .85; }
.creator-controls { display: flex; flex-direction: column; gap: 10px; }
.field-label, label { font-size: 12px; color: #cfc9ba; }
input, select { width: 100%; margin-top: 5px; color: #fff; background: #101521; border: 1px solid #465066; border-radius: 9px; padding: 9px 11px; }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.segmented button, .class-card, .equipment-row button { border: 1px solid #4e596e; border-radius: 9px; padding: 8px; color: #ddd; background: #171e2c; }
.segmented button.selected, .class-card.selected { color: #1a2028; background: #ffda79; border-color: #ffe7a8; }
.color-row { display: flex; gap: 9px; }
.color-button { width: 31px; height: 31px; border: 2px solid rgba(255,255,255,.2); border-radius: 50%; padding: 0; }
.color-button.selected { outline: 3px solid #fff; outline-offset: 2px; }
.class-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.class-card { display: grid; gap: 2px; font-size: 12px; }
.class-card b { font-size: 13px; }
.class-card small { opacity: .7; }
.stats-title { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; color: #ddd6c2; }
.stats-title strong { color: var(--gold); font-size: 20px; }
.stat-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.stat-row { display: grid; grid-template-columns: 58px 30px 28px 28px; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 8px; background: #121927; }
.stat-row span { font-size: 12px; }
.stat-row b { text-align: center; color: #ffe195; }
.stat-row button { width: 28px; height: 26px; color: #fff; background: #303c52; border: 0; border-radius: 6px; }
.stat-row button:disabled { opacity: .25; cursor: default; }
.primary { margin-top: 4px; border: 0; border-radius: 11px; padding: 12px; color: #172027; background: linear-gradient(#ffe59b, #efbb55); font-weight: 800; }
.primary:disabled { filter: grayscale(1); opacity: .45; cursor: default; }

#hud { position: absolute; inset: 0; pointer-events: none; color: white; }
#hud button, #hud input, .hotbar, .class-mechanic-panel, .game-window, .equipment-panel, .menu-panel, .chat, .party-panel { pointer-events: auto; }
.player-panel { position: absolute; left: 18px; top: 18px; width: 306px; padding: 10px; border-radius: 14px; display: flex; gap: 10px; }
.location-panel { position: absolute; left: 18px; top: 105px; display: grid; min-width: 190px; gap: 1px; padding: 8px 11px; border-radius: 11px; background: linear-gradient(135deg,rgba(24,34,42,.9),rgba(18,28,32,.76)); }
.location-panel span { color: #88d9c6; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.location-panel strong { color: #fff0b2; font: 700 14px Georgia,"Yu Mincho",serif; letter-spacing: .08em; }
.location-panel small { color: #cbd6cf; font-size: 9px; }
.portrait { width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; font-size: 28px; background: #354255; border: 1px solid #718099; }
.player-meta { flex: 1; }
.name-line { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.name-line span { color: #d7cda9; }
.meter, .target-meter, .target-break-meter { position: relative; height: 12px; margin: 3px 0; border-radius: 5px; overflow: hidden; background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.12); }
.meter span, .target-meter span, .target-break-meter span { display: block; width: 100%; height: 100%; transition: width .18s ease; }
.meter b, .target-meter b, .target-break-meter b { position: absolute; inset: 0; text-align: center; font: 700 9px/11px system-ui; text-shadow: 0 1px 2px #000; }
.meter.hp span { background: linear-gradient(90deg,#9c1827,#f04855); }
.meter.mp span { background: linear-gradient(90deg,#1456aa,#3997ef); }
.meter.sp span { background: linear-gradient(90deg,#a97b0f,#ffd33e); }
.target-panel { position: absolute; top: 18px; left: 50%; translate: -50% 0; width: 310px; padding: 10px 12px; border-radius: 12px; }
.target-panel > div:first-child { display: flex; justify-content: space-between; font-size: 12px; }
.target-panel span { color: #ffd888; }
.target-panel.boss { border-color:rgba(255,137,78,.72); box-shadow:0 12px 38px rgba(0,0,0,.48),inset 0 0 24px rgba(186,57,25,.16),0 0 24px rgba(255,99,42,.12); }
.target-panel.boss #target-name { color:#ffd1a2; text-shadow:0 0 10px rgba(255,102,40,.4); }
.target-panel.midboss { border-color:rgba(183,119,255,.62); box-shadow:0 12px 34px rgba(0,0,0,.44),inset 0 0 20px rgba(112,64,188,.14); }
.target-meter span { background: linear-gradient(90deg,#7d1724,#e54052); }
.target-break-meter { height: 9px; margin-top: 5px; border-color: rgba(255,220,117,.28); }
.target-break-meter span { background: linear-gradient(90deg,#98661c,#ffe071); }
.target-break-meter b { color: #fff4c2; font-size: 8px; line-height: 8px; letter-spacing: .08em; }
.menu-button { position: absolute; top: 18px; right: 18px; min-width: 132px; padding: 10px 14px; border: 1px solid #a38b59; border-radius: 11px; color: #fff1bd; background: linear-gradient(145deg, rgba(45,40,43,.95), rgba(21,24,34,.95)); box-shadow: 0 7px 20px rgba(0,0,0,.3); font-weight: 800; }
.menu-button.needs-stat-allocation { animation: stat-attention-button 1.65s ease-in-out infinite; }
.menu-button.needs-stat-allocation::after { content:"!"; position:absolute; right:-7px; top:-8px; display:grid; place-items:center; width:21px; height:21px; border:1px solid #fff0a8; border-radius:50%; color:#2a1d0b; background:linear-gradient(#fff0a0,#e8aa38); box-shadow:0 0 15px rgba(255,195,69,.68); font:900 12px/1 sans-serif; }
#dev-button[hidden], #developer-menu-entry[hidden] { display:none !important; }
@keyframes stat-attention-button { 0%,100% { border-color:#a38b59; box-shadow:0 7px 20px rgba(0,0,0,.3); } 50% { border-color:#ffe99f; box-shadow:0 7px 20px rgba(0,0,0,.3),0 0 19px rgba(255,202,75,.48); filter:brightness(1.1); } }
.dev-button { position: absolute; top: 18px; right: 160px; min-width: 92px; padding: 10px 12px; border: 1px solid rgba(119,224,196,.52); border-radius: 11px; color: #a8f4de; background: linear-gradient(145deg,rgba(24,53,54,.95),rgba(15,25,34,.95)); box-shadow: 0 7px 20px rgba(0,0,0,.3),inset 0 0 16px rgba(88,213,181,.07); font-weight: 800; }
.dev-button:hover { border-color: #9af2da; box-shadow: 0 0 18px rgba(84,220,183,.2); }
.help { position: absolute; top: 66px; right: 18px; width: 180px; padding: 10px 12px; border-radius: 12px; display: grid; gap: 3px; font-size: 11px; color: #d9dfdc; }
.help b { color: #ffe39a; margin-bottom: 2px; }
.chat { position: absolute; left: 18px; bottom: 88px; width: min(500px, 46vw); height: 174px; border-radius: 12px; overflow: hidden; background: rgba(10,15,24,.58); border-color: rgba(255,246,211,.12); box-shadow: 0 7px 20px rgba(0,0,0,.18); backdrop-filter: blur(4px); transition: width .18s ease, height .18s ease, background .18s ease; }
#chat-log { height: 105px; padding: 8px 38px 8px 10px; overflow-y: auto; font-size: 11px; line-height: 1.5; color: #e1e6e2; text-shadow: 0 1px 2px rgba(0,0,0,.9); scrollbar-width: thin; }
.chat-toggle { position: absolute; z-index: 2; top: 6px; right: 7px; width: 25px; height: 22px; padding: 0; border: 1px solid rgba(255,229,153,.35); border-radius: 7px; color: #ffe39a; background: rgba(11,16,24,.58); line-height: 19px; }
.chat.collapsed { width: 132px; height: 34px; background: rgba(10,15,24,.38); }
.chat.collapsed #chat-log, .chat.collapsed .chat-tabs, .chat.collapsed .chat-compose { display: none; }
.chat.collapsed .chat-toggle { inset: 0; width: 100%; height: 100%; border: 0; border-radius: 11px; color: rgba(255,240,190,.9); background: transparent; font-size: 11px; font-weight: 700; }
#chat-log .system { color: #ffe18a; }
#chat-log .loot { color: #88e7cb; }
#chat-log .loot-rare { color:#e5a8ff; font-weight:800; text-shadow:0 0 8px rgba(194,91,255,.48),0 1px 2px rgba(0,0,0,.9); }
#chat-log .loot-legendary { color:#fff0a0; font-weight:900; letter-spacing:.02em; text-shadow:0 0 5px #d969ff,0 0 13px rgba(255,203,76,.72),0 1px 2px #000; }
#chat-log .chat-field { color: #f5f2e7; }
#chat-log .chat-party { color: #76d9e5; }
#chat-log .chat-guild { color: #c8a0ff; }
#chat-log .chat-private { color: #ff9fc9; }
.chat-tabs { height: 28px; display: flex; align-items: stretch; padding: 0 7px; border-top: 1px solid var(--edge); }
.chat-tabs button { border: 0; padding: 0 8px; color: #8f9ba4; background: transparent; font-size: 10px; }
.chat-tabs button.active { color: #fff2b2; border-bottom: 2px solid #e4ba60; }
.chat-compose { height: 40px; display: grid; grid-template-columns: 1fr 58px; gap: 6px; padding: 5px 7px 7px; background: rgba(6,10,17,.38); }
.chat-compose input { min-width: 0; height: 29px; margin: 0; padding: 5px 8px; border-radius: 7px; font-size: 11px; }
.chat-compose button { height: 29px; border: 1px solid #796b4c; border-radius: 7px; color: #201d19; background: #e8c66d; font-size: 11px; font-weight: 800; }
.hotbar { position: absolute; z-index: 20; left: 50%; bottom: 18px; translate: -50% 0; display: flex; gap: 6px; }
.slot { position: relative; width: 58px; height: 58px; border: 2px solid #90866b; border-radius: 10px; background: rgba(16,20,29,.92); box-shadow: 0 4px 16px rgba(0,0,0,.35); color: white; }
.slot.active { border-color: #ffe28a; transform: translateY(-2px); }
.slot.filled { border-color: #b5a575; }
.slot .key { position: absolute; left: 5px; top: 3px; font-size: 10px; color: #ffe7a7; }
.slot .skill-icon { font-size: 24px; }
.slot .skill-name { position: absolute; left: 2px; right: 2px; bottom: 3px; font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .hotbar-qty { position: absolute; right: 4px; top: 3px; padding: 1px 4px; border-radius: 8px; color: #fff5c8; background: rgba(5,8,13,.78); font-size: 9px; }
.class-mechanic-panel { position: absolute; z-index: 19; right: 18px; bottom: 88px; width: 218px; padding: 10px 11px; border-radius: 13px; background: linear-gradient(145deg,rgba(23,27,38,.91),rgba(10,14,22,.88)); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.class-mechanic-panel header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.class-mechanic-panel header b { color: #fff0bb; font-size: 12px; letter-spacing: .08em; }
.class-mechanic-panel header span { color: #aeb9c0; font-size: 9px; }
.kenatsu-gauges { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.kenatsu-gauges i { position: relative; height: 15px; border: 1px solid rgba(255,221,123,.3); border-radius: 5px; background: rgba(26,22,20,.8); box-shadow: inset 0 0 8px rgba(0,0,0,.55); overflow: hidden; }
.kenatsu-gauges i.locked { display: none; }
.kenatsu-gauges i span { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg,#b44b27,#ffc854 65%,#fff2a0); transition: width .15s ease; }
.kenatsu-gauges i.full { border-color: #ffe493; box-shadow: 0 0 13px rgba(255,166,49,.54),inset 0 1px rgba(255,255,255,.6); }
.kenatsu-gauges i.full span { width: 100%; }
.swordsman-kenatsu.ready { border-color: rgba(255,209,105,.72); box-shadow: 0 0 20px rgba(255,151,40,.24); }
.swordsman-kenatsu.dragging { border-color: #fff0a0; box-shadow: 0 0 24px rgba(255,180,45,.34); }
.swordsman-kenatsu small { display: block; margin-top: 7px; color: #c7d0d1; font-size: 9px; }
.thief-pouch-row { display: grid; grid-template-columns: 1fr 18px 1fr; align-items: center; gap: 5px; }
.fragment-plus { color: #78808b; font-size: 13px; text-align: center; }
.fragment-slot { position: relative; height: 50px; display: grid; place-items: center; border: 1px solid rgba(190,178,211,.27); border-radius: 9px; background: rgba(7,10,17,.72); overflow: hidden; }
.fragment-slot small { position: absolute; left: 5px; top: 3px; color: #858d9a; font-size: 8px; }
.fragment-slot b { color: #7d8490; font-size: 10px; }
.fragment-slot.has-fragment b { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px 10px 7px 11px; color: white; font-size: 16px; transform: rotate(12deg); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.fragment-slot.fragment-red b { background: linear-gradient(145deg,#ff806e,#9e2233); box-shadow: 0 0 13px rgba(255,72,72,.48); }
.fragment-slot.fragment-blue b { background: linear-gradient(145deg,#78dcff,#2454bb); box-shadow: 0 0 13px rgba(67,155,255,.48); }
.fragment-slot.fragment-purple b { background: linear-gradient(145deg,#d995ff,#7131aa); box-shadow: 0 0 13px rgba(191,89,255,.48); }
.fragment-slot.fragment-green b { background: linear-gradient(145deg,#a7f58a,#2f8b59); box-shadow: 0 0 13px rgba(83,224,128,.48); }
.thief-pouch.ready .fragment-slot { animation: pouch-ready-pulse .86s ease-in-out infinite alternate; }
.thief-pouch button { width: 100%; min-height: 31px; margin-top: 8px; border: 1px solid #4a5260; border-radius: 8px; color: #8d959e; background: rgba(16,21,30,.85); font-size: 10px; }
.thief-pouch button:not(:disabled) { border-color: #e9d27e; color: #fff0b0; background: linear-gradient(145deg,rgba(86,63,35,.9),rgba(34,27,38,.92)); box-shadow: 0 0 14px rgba(255,194,68,.2); cursor: pointer; }
.thief-pouch kbd { margin-right: 7px; padding: 2px 5px; border: 1px solid currentColor; border-radius: 4px; font: 800 9px system-ui; }
@keyframes pouch-ready-pulse { from { border-color: rgba(255,222,126,.48); box-shadow: 0 0 7px rgba(255,195,68,.12); } to { border-color: #ffe58d; box-shadow: 0 0 15px rgba(255,185,50,.4); } }
.menu-panel { position: absolute; top: 66px; right: 18px; width: 260px; padding: 12px; border-radius: 14px; }
.menu-panel > button:not([data-close-panel]) { width: 100%; display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 8px; margin-top: 8px; padding: 10px; text-align: left; border: 1px solid #4e5360; border-radius: 10px; color: white; background: #171b27; }
.menu-panel > button span { grid-row: 1 / 3; align-self: center; font-size: 20px; }
.menu-panel > button b { font-size: 12px; }
.menu-panel > button small { color: #9ca8ad; font-size: 9px; }
.menu-panel > button.needs-stat-allocation { position:relative; border-color:#f0cb69; animation:stat-attention-entry 1.45s ease-in-out infinite; }
.menu-panel > button.needs-stat-allocation::after { content:"能力ポイント未使用"; position:absolute; right:9px; top:8px; padding:3px 6px; border-radius:9px; color:#251b09; background:#f0cd70; font:900 7px/1 sans-serif; letter-spacing:.04em; }
@keyframes stat-attention-entry { 0%,100% { box-shadow:inset 0 0 0 rgba(255,210,85,0); } 50% { box-shadow:inset 0 0 22px rgba(255,210,85,.16),0 0 13px rgba(255,191,59,.24); } }
.game-window { position: absolute; z-index: 10; left: 50%; top: 50%; translate: -50% -50%; border-radius: 16px; padding: 14px; }
.game-window::before { content: ""; position: absolute; inset: 5px; z-index: -1; border: 1px solid rgba(210,165,83,.22); border-radius: 12px; pointer-events: none; }
.equipment-panel { top: calc(50% - 42px); width: min(1080px, 96vw); max-height: calc(100vh - 100px); overflow-y: auto; padding: 16px; background: radial-gradient(circle at 45% 38%, rgba(115,79,130,.18), transparent 37%), linear-gradient(145deg, rgba(34,30,38,.97), rgba(13,17,26,.97)); border-color: rgba(211,168,87,.42); }
.panel-heading { display: flex; justify-content: space-between; align-items: center; }
.panel-heading > div { display: flex; align-items: baseline; gap: 9px; }
.panel-heading small { color: #9da8aa; font-size: 9px; }
.panel-heading button { color: white; background: transparent; border: 0; font-size: 20px; }
.equipment-and-bag { display: grid; grid-template-columns: minmax(390px, 1.3fr) minmax(275px, .85fr); gap: 13px; margin-top: 12px; }
.equipment-column { min-width: 0; }
.equipment-workbench { display: grid; grid-template-columns: 132px 1fr; gap: 12px; }
.equipment-stats { display: grid; align-content: start; gap: 5px; padding: 9px; border: 1px solid rgba(203,164,91,.22); border-radius: 11px; background: rgba(8,11,18,.46); }
.equipment-stat { display: flex; justify-content: space-between; padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,.06); color: #aeb6b9; font-size: 10px; }
.equipment-stat b { color: #f2d37f; }
.loadout-board { position: relative; min-height: 410px; overflow: hidden; border: 1px solid rgba(203,164,91,.22); border-radius: 13px; background: radial-gradient(circle at center, rgba(95,71,111,.22), transparent 46%), repeating-radial-gradient(circle at center, transparent 0 52px, rgba(189,147,72,.08) 53px 54px); }
#equipment-avatar { position: absolute; left: 50%; top: 110px; translate: -50% 0; width: 180px; height: 230px; filter: drop-shadow(0 13px 10px rgba(0,0,0,.42)); }
.gear-slot { position: absolute; width: 92px; min-height: 44px; display: grid; align-content: center; gap: 2px; padding: 5px; border: 1px solid #665d5f; border-radius: 8px; color: white; background: linear-gradient(145deg,rgba(42,38,48,.98),rgba(17,20,28,.98)); box-shadow: inset 0 0 0 1px rgba(222,174,87,.08); font-size: 9px; }
.gear-slot:hover { border-color: #d2a95d; box-shadow: 0 0 14px rgba(173,125,65,.18); }
.gear-slot span { color: #8f999f; font-size: 8px; }
.gear-slot b { overflow: hidden; color: #f4d681; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.gear-slot b:has(.gear-item-art) { display: flex; align-items: center; gap: 4px; }
.gear-item-art { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.8)); }
.gear-slot b span { overflow: hidden; text-overflow: ellipsis; }
.slot-head { left: 50%; top: 10px; translate: -50% 0; }
.slot-ear-left { left: 12px; top: 64px; }
.slot-ear-right { right: 12px; top: 64px; }
.slot-arm { left: 12px; top: 132px; }
.slot-body { right: 12px; top: 132px; }
.slot-main { left: 12px; top: 218px; }
.slot-off { right: 12px; top: 218px; }
.slot-knee { left: 52px; bottom: 18px; }
.slot-feet { right: 52px; bottom: 18px; }
.equipment-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 8px 10px; border-top: 1px solid rgba(213,174,99,.2); color: #aeb6b8; font-size: 10px; }
.equipment-footer b { color: #ffe18a; }
.equipment-series-preview { margin-top:10px; padding:10px; border:1px solid rgba(208,171,97,.2); border-radius:12px; background:linear-gradient(145deg,rgba(11,18,25,.76),rgba(8,12,19,.88)); }
.equipment-series-preview > header { display:flex; align-items:end; justify-content:space-between; gap:12px; padding:0 2px 8px; border-bottom:1px solid rgba(255,255,255,.07); }
.equipment-series-preview > header div { display:grid; gap:1px; }
.equipment-series-preview > header small { color:#69cdb4; font:700 6px/1.2 Georgia,serif; letter-spacing:.17em; }
.equipment-series-preview > header strong { color:#f0d79c; font:600 11px/1.4 "Yu Mincho",serif; letter-spacing:.08em; }
.equipment-series-preview > header span { color:#9daaaa; font-size:8px; }
#equipment-series-grid { display:grid; gap:5px; margin-top:7px; }
.equipment-series-row { display:grid; grid-template-columns:36px repeat(5,minmax(0,1fr)); gap:4px; align-items:stretch; }
.equipment-series-row > strong { display:grid; place-items:center; color:#d5bd83; border-right:1px solid rgba(214,180,105,.15); font:700 8px/1 Georgia,serif; }
.equipment-series-item { position:relative; min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr); grid-template-rows:12px 1fr; gap:0 4px; align-items:center; min-height:48px; padding:3px 4px; overflow:hidden; text-align:left; border:1px solid rgba(112,123,132,.25); border-radius:7px; color:#8c989b; background:linear-gradient(145deg,rgba(29,35,44,.72),rgba(12,17,24,.82)); opacity:.66; }
.equipment-series-item img { grid-row:1 / 3; width:34px; height:40px; object-fit:contain; filter:saturate(.74) drop-shadow(0 3px 4px rgba(0,0,0,.72)); }
.equipment-series-item span { align-self:end; color:#6f8083; font-size:6px; }
.equipment-series-item b { align-self:start; overflow:hidden; color:#b7bdba; font-size:6.5px; font-weight:600; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.equipment-series-item:hover,.equipment-series-item.selected { opacity:1; border-color:rgba(235,205,130,.58); box-shadow:0 0 12px rgba(202,159,78,.1); }
.equipment-series-item.owned { opacity:1; border-color:rgba(96,210,177,.42); background:linear-gradient(145deg,rgba(27,58,57,.64),rgba(11,23,28,.84)); }
.equipment-series-item.owned img { filter:saturate(1.05) drop-shadow(0 3px 5px rgba(0,0,0,.78)); }
.equipment-series-preview > p { margin:6px 2px 0; color:#748787; font-size:6.5px; line-height:1.4; }
.bag-column { min-width: 0; padding: 11px; border: 1px solid rgba(203,164,91,.22); border-radius: 13px; background: rgba(8,11,18,.5); }
.bag-heading { display: flex; justify-content: space-between; align-items: center; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.07); }
.bag-heading strong { color: #f1d58b; font-size: 12px; }
.bag-heading span { color: #9da8aa; font-size: 10px; }
.wallet { display: flex; justify-content: flex-end; gap: 8px; margin: 8px 0; color: #adb6b7; font-size: 11px; }
.wallet b { color: #ffe18a; }
.inventory-filters { display: flex; gap: 5px; margin-bottom: 9px; }
.inventory-filters button { border: 1px solid #434b5c; border-radius: 7px; padding: 5px 10px; color: #9da7ac; background: #141a27; font-size: 10px; }
.inventory-filters button.active { color: #241e14; background: #e7c66d; border-color: #ffe19a; }
.inventory-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; min-height: 190px; padding: 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(8,12,19,.55); }
.item-slot { position: relative; aspect-ratio: 1; min-width: 0; border: 1px solid #4b5260; border-radius: 9px; color: white; background: linear-gradient(145deg,#242b39,#121722); }
.item-slot[data-item-id] { cursor: grab; touch-action: none; }
.item-slot[data-item-id]:active { cursor: grabbing; }
.item-slot.dragging { opacity: .42; transform: scale(.94); }
.item-slot:hover, .item-slot.selected { border-color: #f1cb71; box-shadow: inset 0 0 0 1px rgba(241,203,113,.35); }
.item-slot.empty { cursor: default; opacity: .36; }
.item-slot .item-icon { width: 100%; height: 100%; display: grid; place-items: center; font-size: 22px; overflow: hidden; }
.item-art, .hotbar-item-image, .item-detail-image, .drag-item-image { display: block; object-fit: contain; pointer-events: none; user-select: none; }
.tiered-weapon-art { filter: drop-shadow(0 0 4px var(--weapon-accent,#9da8ad)) drop-shadow(0 4px 5px rgba(0,0,0,.72)) saturate(1.14) !important; }
.item-art { width: 86%; height: 86%; filter: drop-shadow(0 4px 5px rgba(0,0,0,.72)); }
.hotbar-item-image { width: 38px; height: 38px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.75)); }
.item-detail-image { width: 38px; height: 38px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.72)); }
.drag-item-image { width: 34px; height: 34px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.75)); }
.item-glyph-fallback { display: grid; place-items: center; width: 100%; height: 100%; }
.item-art-host { display: grid; place-items: center; }
.item-slot .item-qty { position: absolute; right: 4px; bottom: 2px; font-size: 9px; text-shadow: 0 1px 2px #000; }
.item-slot .equipped-mark { position: absolute; left: 3px; top: 2px; color: #ffe18a; font-size: 8px; }
.item-detail { min-height: 67px; display: grid; grid-template-columns: 1fr 72px; gap: 10px; align-items: center; margin-top: 9px; padding: 9px; border-radius: 10px; background: rgba(12,16,24,.72); }
.item-detail > div { display: flex; align-items: center; gap: 10px; }
#item-detail-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #4e5968; border-radius: 9px; background: #222938; font-size: 23px; }
.item-detail b, .item-detail small { display: block; }
.item-detail small { margin-top: 4px; color: #aeb6b8; font-size: 9px; white-space: pre-line; line-height: 1.45; }
.item-detail > button { border: 0; border-radius: 8px; padding: 8px; color: #211d15; background: #e8c66d; font-size: 11px; font-weight: 800; }
.item-detail > button:disabled { filter: grayscale(1); opacity: .4; }
.drag-hint { margin: 8px 2px 0; color: #91cdbf; font-size: 9px; line-height: 1.5; }
.drag-ghost { position: fixed; z-index: 100; display: flex; align-items: center; gap: 7px; max-width: 170px; padding: 7px 10px; border: 1px solid #75e2bf; border-radius: 10px; color: #fff7d2; background: rgba(14,20,28,.94); box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 14px rgba(80,225,184,.25); pointer-events: none; }
.drag-ghost .drag-ghost-art { width: 36px; height: 36px; display: grid; place-items: center; }
.drag-ghost b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.gear-slot.drop-ready, .slot.drop-ready { border-color: #75e2bf; box-shadow: 0 0 18px rgba(80,225,184,.48), inset 0 0 0 1px rgba(184,255,235,.4); }
.gear-slot.drop-invalid, .slot.drop-invalid { border-color: #eb6b77; box-shadow: 0 0 14px rgba(235,107,119,.35); }
.status-panel { width: min(390px, 82vw); }
.status-content { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.status-entry { display: flex; justify-content: space-between; padding: 8px; border-radius: 8px; background: #151b27; font-size: 11px; }
.status-entry b { color: #ffe09a; }
.developer-panel { width: min(840px,94vw); max-height: calc(100vh - 90px); overflow-y: auto; padding: 17px; background: radial-gradient(circle at 18% 10%,rgba(66,202,170,.15),transparent 34%),linear-gradient(145deg,rgba(24,31,39,.98),rgba(10,15,23,.98)); border-color: rgba(111,224,193,.42); }
.dev-summary { display: grid; grid-template-columns: minmax(210px,.7fr) minmax(300px,1.3fr); gap: 10px; margin-top: 13px; }
.dev-summary > div { min-height: 78px; display: grid; align-content: center; gap: 3px; padding: 12px 14px; border: 1px solid rgba(123,218,194,.18); border-radius: 12px; background: rgba(7,14,21,.56); }
.dev-summary span { color: #93aaa9; font-size: 9px; }
.dev-summary strong { color: #f3daa0; font-size: 18px; }
.dev-summary small { color: #79d8c0; font-size: 9px; }
.dev-summary .dev-summary-note { grid-template-columns: auto 1fr; align-items: center; gap: 11px; }
.dev-summary-note b { padding: 6px 8px; border: 1px solid rgba(116,231,199,.36); border-radius: 7px; color: #9df2da; background: rgba(29,74,65,.34); font-size: 9px; letter-spacing: .08em; }
.dev-summary-note span { line-height: 1.6; }
.dev-character-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 11px; }
.dev-character-card { position: relative; min-height: 132px; display: grid; grid-template-columns: 54px 1fr; align-content: center; gap: 10px; padding: 15px 12px; text-align: left; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; color: #edf4ef; background: linear-gradient(145deg,rgba(38,43,53,.96),rgba(16,21,29,.96)); overflow: hidden; }
.dev-character-card::before { content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none; background: radial-gradient(circle at 16% 50%,var(--dev-accent),transparent 42%); }
.dev-character-card.swordsman { --dev-accent:#d7a45e; }
.dev-character-card.thief { --dev-accent:#9f78dc; }
.dev-character-card.mage { --dev-accent:#7554d8; }
.dev-character-card:hover { translate: 0 -2px; border-color: var(--dev-accent); }
.dev-character-card.active { border-color: #f3d887; box-shadow: inset 0 0 0 1px rgba(243,216,135,.35),0 0 22px rgba(105,212,183,.13); }
.dev-character-icon { position: relative; width: 52px; height: 66px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--dev-accent) 48%,transparent); border-radius: 11px; color: #fff0c2; background: rgba(7,12,19,.5); font-size: 27px; }
.dev-character-copy { position: relative; display: grid; gap: 6px; }
.dev-character-copy strong { color: #fff2ca; font-size: 14px; }
.dev-character-copy small { color: #aebbbb; font-size: 9px; line-height: 1.5; }
.dev-character-card em { position: absolute; right: 9px; bottom: 8px; padding: 3px 7px; border-radius: 99px; color: #9eaaa9; background: rgba(7,11,17,.72); font-size: 8px; font-style: normal; }
.dev-character-card em.ready { color: #93ead1; }
.dev-character-card em.error { color: #ff8992; }
.dev-unavailable { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 10px; padding: 9px 11px; border: 1px dashed rgba(255,255,255,.12); border-radius: 10px; color: #849294; background: rgba(8,13,20,.38); font-size: 9px; }
.dev-unavailable > span { color: #d3bd81; }
.dev-unavailable b { padding: 4px 7px; border-radius: 6px; color: #8d999b; background: rgba(255,255,255,.05); }
.dev-unavailable small { margin-left: auto; }
.dev-tools { display: grid; grid-template-columns: minmax(230px,.72fr) minmax(330px,1.28fr); gap: 10px; margin-top: 10px; }
.dev-master-tools { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 15px; border: 1px solid rgba(255,214,105,.72); border-radius: 10px; background: radial-gradient(circle at 8% 20%,rgba(255,205,78,.16),transparent 36%),linear-gradient(125deg,rgba(45,31,19,.96),rgba(22,36,42,.96)); box-shadow: inset 0 0 24px rgba(255,197,73,.07),0 7px 20px rgba(0,0,0,.22); }
.dev-master-tools[hidden] { display: none; }
.dev-master-tools small { display: block; color: #f5ce69; font: 800 9px/1.2 Georgia,serif; letter-spacing: .18em; }
.dev-master-tools strong { display: block; margin-top: 3px; color: #fff0bd; font-size: 14px; }
.dev-master-tools p { margin: 4px 0 0; color: #b9c9c4; font-size: 10px; }
.dev-master-tools button { flex: 0 0 auto; min-height: 42px; padding: 8px 15px; border: 1px solid #ffe39a; border-radius: 7px; color: #2c2313; background: linear-gradient(180deg,#fff0b0,#d8a846); box-shadow: 0 0 18px rgba(255,200,75,.18); font-weight: 900; }
.dev-master-tools button:hover { filter: brightness(1.09); }
.dev-master-actions { display: grid; gap: 8px; min-width: min(280px,100%); }
.dev-master-actions button:last-child { border-color: rgba(129,238,211,.42); color: #c9fff0; background: linear-gradient(180deg,rgba(21,61,59,.96),rgba(10,31,34,.98)); box-shadow: 0 8px 22px rgba(3,13,20,.26); }
#dev-name-form { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(8,13,20,.44); }
#dev-name-form label { grid-column: 1 / -1; color: #94aaa9; font-size: 9px; }
#dev-name-form input { min-width: 0; height: 34px; margin: 0; padding: 6px 9px; }
#dev-name-form button,.dev-tool-buttons button { border: 1px solid #526069; border-radius: 8px; color: #dce9e5; background: #19232c; font-size: 9px; }
#dev-name-form button { padding: 0 11px; }
.dev-tool-buttons { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
.dev-tool-buttons button { min-height: 38px; padding: 7px; }
.dev-tool-buttons button:hover,#dev-name-form button:hover { color: #13231f; border-color: #a4eed9; background: #82d8bf; }
.dev-enemy-tools { display:grid; grid-template-columns:minmax(210px,1.3fr) minmax(180px,.8fr) auto auto; align-items:end; gap:9px; margin-top:10px; padding:12px 13px; border:1px solid rgba(213,178,103,.2); border-radius:12px; background:linear-gradient(135deg,rgba(31,27,23,.72),rgba(8,17,22,.72)); }
.dev-enemy-tools > div { display:grid; gap:3px; }
.dev-enemy-tools > div span { color:#c9a85f; font:800 8px/1.2 Cinzel,serif; letter-spacing:.17em; }
.dev-enemy-tools > div strong { color:#f4e8c6; font:700 14px/1.3 "Yu Mincho",serif; }
.dev-enemy-tools > div small,.dev-enemy-tools label { color:#91a5a3; font-size:9px; line-height:1.45; }
.dev-enemy-tools label { display:grid; gap:4px; }
.dev-enemy-tools select { min-width:0; width:100%; height:35px; padding:6px 9px; border:1px solid rgba(229,206,143,.22); color:#f2ecd9; background:#0b1920; }
.dev-enemy-tools button { min-height:35px; padding:7px 11px; border:1px solid rgba(229,203,131,.28); border-radius:8px; color:#f0dfad; background:rgba(32,61,62,.55); font-size:9px; font-weight:800; }
.dev-enemy-tools button:hover { border-color:#e2c675; background:rgba(79,75,45,.72); }
.dev-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 11px; padding-top: 9px; border-top: 1px solid rgba(116,218,190,.14); color: #8ba09f; font-size: 9px; }
.character-lab-panel { top: calc(50% - 30px); width: min(1060px, 96vw); max-height: calc(100vh - 88px); overflow-y: auto; padding: 16px; background: radial-gradient(circle at 64% 42%, rgba(94,116,139,.2), transparent 38%), linear-gradient(145deg, rgba(31,31,42,.98), rgba(12,17,25,.98)); border-color: rgba(128,205,191,.4); }
.character-lab-layout { display: grid; grid-template-columns: 210px 1fr; gap: 13px; margin-top: 12px; }
.character-lab-layout.sprite-mode { grid-template-columns: 1fr; }
.legacy-technical-proof { display: none !important; }
.lab-controls { display: grid; align-content: start; gap: 12px; padding: 11px; border: 1px solid rgba(125,196,182,.2); border-radius: 13px; background: rgba(7,12,18,.55); }
.lab-control-group { display: grid; gap: 7px; }
.lab-control-group > span, .lab-speed { color: #9fb6b5; font-size: 10px; }
.lab-animation-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.lab-animation-options button, .lab-direction-pad button { min-width: 0; border: 1px solid #475665; border-radius: 7px; padding: 6px 4px; color: #c4d0d0; background: #151c27; font-size: 10px; }
.lab-animation-options button.active, .lab-direction-pad button.active { color: #14231f; background: #82d8bf; border-color: #b5f4df; font-weight: 800; }
.lab-direction-pad { display: grid; grid-template-columns: repeat(3, 34px); justify-content: center; gap: 4px; }
.lab-direction-pad button { width: 34px; height: 30px; padding: 0; font-size: 15px; }
.lab-direction-pad b { display: grid; place-items: center; color: #ead48f; font-size: 9px; text-align: center; }
.lab-selects { grid-template-columns: 1fr 1fr; }
.lab-selects label { min-width: 0; font-size: 9px; }
.lab-selects label:last-child { grid-column: 1 / -1; }
.lab-selects select { min-width: 0; margin-top: 3px; padding: 6px; font-size: 9px; }
.lab-speed { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px; }
.lab-speed b { color: #f0d58b; }
.lab-speed input { grid-column: 1 / -1; margin: 0; padding: 0; accent-color: #82d8bf; }
.lab-preview-area { min-width: 0; display: grid; gap: 10px; }
.mesh-character-proof { overflow: hidden; border: 1px solid rgba(130,216,191,.3); border-radius: 15px; background: radial-gradient(circle at 38% 52%,rgba(88,137,150,.24),transparent 38%),linear-gradient(145deg,#14232b,#0c121b); box-shadow: 0 16px 42px rgba(0,0,0,.24); }
.mesh-proof-heading { display: flex; justify-content: space-between; gap: 18px; align-items: end; padding: 14px 16px 11px; border-bottom: 1px solid rgba(130,216,191,.16); }
.mesh-proof-heading > div:first-child { display: grid; gap: 3px; }
.mesh-proof-heading span { color: #82d8bf; font-size: 9px; letter-spacing: .14em; }
.mesh-proof-heading strong { color: #f5dda0; font-size: 17px; }
.mesh-proof-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.mesh-proof-badges b, .mesh-proof-badges em { padding: 5px 9px; border: 1px solid rgba(126,208,184,.22); border-radius: 99px; color: #9fcfc3; background: rgba(10,18,25,.7); font-size: 9px; font-style: normal; font-weight: 600; }
.mesh-proof-badges b { color: #f2d994; }
.mesh-proof-layout { display: grid; grid-template-columns: minmax(430px,1.35fr) minmax(220px,.65fr); min-height: 530px; }
.mesh-preview-stage { position: relative; min-width: 0; min-height: 530px; overflow: hidden; background: radial-gradient(circle at 50% 68%,rgba(132,184,180,.18),transparent 34%),linear-gradient(#25333e,#121a23); cursor: grab; touch-action: none; }
.mesh-preview-stage:active { cursor: grabbing; }
#mesh-character-preview { display: block; width: 100%; height: 100%; }
#mesh-character-status { position: absolute; left: 13px; bottom: 12px; padding: 6px 10px; border: 1px solid rgba(126,208,184,.24); border-radius: 99px; color: #b4c6c5; background: rgba(7,12,18,.76); font-size: 9px; pointer-events: none; }
#mesh-character-status[data-kind="ready"] { color: #8de0c5; }
#mesh-character-status[data-kind="impact"] { color: #ffd26f; border-color: rgba(255,190,78,.58); box-shadow: 0 0 16px rgba(255,168,54,.24); }
#mesh-character-status[data-kind="error"] { color: #ff8790; }
#mesh-direction-name { position: absolute; right: 13px; bottom: 12px; padding: 6px 10px; border-radius: 99px; color: #f5dda0; background: rgba(7,12,18,.76); font-size: 9px; pointer-events: none; }
.mesh-proof-controls { display: grid; align-content: start; gap: 15px; padding: 16px; border-left: 1px solid rgba(255,255,255,.07); background: rgba(7,12,18,.38); }
.mesh-proof-controls > div { display: grid; gap: 7px; }
.mesh-proof-controls > div > span { color: #9fb6b5; font-size: 10px; }
.mesh-button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mesh-direction-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; }
.mesh-equipment-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mesh-button-row button, .mesh-direction-grid button, .mesh-equipment-row button { border: 1px solid #475665; border-radius: 8px; padding: 8px 6px; color: #c4d0d0; background: #151c27; font-size: 10px; }
.mesh-button-row button:hover, .mesh-direction-grid button:hover, .mesh-equipment-row button:hover { border-color: #78ad9e; }
.mesh-equipment-row button.active { border-color: #d8b76b; color: #f5dda0; background: #242016; }
.mesh-equipment-status { display: block; padding: 8px 9px; border: 1px solid rgba(216,183,107,.22); border-radius: 8px; color: #d8c58d; background: rgba(28,23,14,.58); font-size: 9px; line-height: 1.45; }
.mesh-button-row button.active, .mesh-direction-grid button.active { color: #14231f; background: #82d8bf; border-color: #b5f4df; font-weight: 800; }
.mesh-proof-controls dl { display: grid; gap: 0; margin: 0; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; overflow: hidden; }
.mesh-proof-controls dl div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 9px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 9px; }
.mesh-proof-controls dl div:last-child { border-bottom: 0; }
.mesh-proof-controls dt { color: #83989a; }
.mesh-proof-controls dd { margin: 0; color: #e7d39b; text-align: right; }
.mesh-proof-controls p { margin: 0; padding: 10px; border-radius: 9px; color: #94a8aa; background: rgba(18,28,38,.75); font-size: 9px; line-height: 1.65; }
.sprite-proof { overflow: hidden; border: 1px solid rgba(130,216,191,.25); border-radius: 15px; background: radial-gradient(circle at 37% 53%,rgba(82,137,143,.22),transparent 34%),linear-gradient(145deg,#14232b,#0d141e); }
.sprite-proof-heading { display: grid; grid-template-columns: 1fr minmax(260px,.75fr); gap: 18px; align-items: end; padding: 14px 16px 10px; border-bottom: 1px solid rgba(130,216,191,.16); }
.sprite-proof-heading div { display: grid; gap: 3px; }
.sprite-proof-heading span { color: #82d8bf; font-size: 9px; letter-spacing: .12em; }
.sprite-proof-heading strong { color: #f5dda0; font-size: 17px; }
.sprite-proof-heading p { margin: 0; color: #9cb0b2; font-size: 9px; line-height: 1.6; }
.sprite-proof-grid { display: grid; grid-template-columns: minmax(360px,1.1fr) minmax(250px,.78fr) minmax(190px,.55fr); gap: 10px; padding: 10px; }
.sprite-main-stage, .sprite-direction-stage, .sprite-proof-notes { position: relative; min-width: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: radial-gradient(circle at 50% 69%,rgba(143,187,176,.22),transparent 37%),linear-gradient(#21323a,#111b24); }
.sprite-main-stage, .sprite-direction-stage { display: grid; justify-items: center; align-content: start; overflow: hidden; }
.sprite-main-stage canvas { display: block; width: min(100%,384px); height: auto; margin-top: 4px; }
.sprite-direction-stage > canvas { display: block; width: min(100%,270px); height: auto; margin-top: 22px; }
.sprite-main-stage > b { position: absolute; left: 10px; bottom: 10px; padding: 4px 8px; border-radius: 20px; color: #f5dda0; background: rgba(7,12,18,.72); font-size: 9px; }
.sprite-direction-stage > b { margin: -11px 0 7px; padding: 4px 8px; border-radius: 20px; color: #f5dda0; background: rgba(7,12,18,.72); font-size: 9px; }
.sprite-direction-stage > span { position: absolute; left: 11px; top: 10px; color: #82d8bf; font-size: 9px; }
.sprite-motion-controls { position: absolute; z-index: 2; top: 9px; right: 9px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.sprite-motion-controls button, .sprite-direction-controls button, .sprite-equipment-controls button { border: 1px solid #53626d; border-radius: 7px; padding: 5px 8px; color: #c8d4d3; background: rgba(14,21,30,.88); font-size: 9px; }
.sprite-motion-controls button.active, .sprite-direction-controls button.active, .sprite-equipment-controls button.active { color: #12211e; border-color: #b5f4df; background: #82d8bf; font-weight: 800; }
.sprite-direction-controls { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; width: calc(100% - 16px); margin: 0 8px 9px; }
.sprite-direction-controls button { padding: 5px 3px; }
.sprite-equipment-controls { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; width: calc(100% - 16px); margin: 0 8px 7px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.08); }
.sprite-equipment-controls span { grid-column: 1 / -1; justify-self: start; color: #d5ad69; font-size: 8px; letter-spacing: .06em; }
.sprite-equipment-controls button { padding: 6px 3px; }
.sprite-equipment-controls button:nth-last-child(2):first-of-type, #sprite-hair-controls button, #sprite-armor-controls button { grid-column: span 1; }
#sprite-hair-controls, #sprite-headgear-controls { grid-template-columns: repeat(2,1fr); }
#sprite-layer-status { width: calc(100% - 18px); margin: 7px 9px 10px; color: #88aaa7; font-size: 8px; text-align: center; }
.sprite-proof-notes { display: grid; align-content: start; gap: 8px; padding: 13px; color: #9fb1b3; font-size: 9px; line-height: 1.6; }
.sprite-proof-notes > strong { color: #f0d58b; font-size: 11px; }
.sprite-proof-notes ul { display: grid; gap: 4px; margin: 0; padding-left: 17px; }
.sprite-proof-notes > div { display: grid; justify-items: center; margin-top: 4px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }
.sprite-proof-notes span { justify-self: start; color: #82d8bf; }
.sprite-proof-notes canvas { width: 128px; height: auto; }
.lab-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.lab-stage article { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(138,190,183,.22); border-radius: 13px; background: radial-gradient(circle at 50% 60%, rgba(110,143,145,.24), transparent 43%), linear-gradient(#1a2630,#101721); }
.lab-stage article::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 92%, rgba(128,216,193,.12) 93%), linear-gradient(90deg, transparent 92%, rgba(128,216,193,.08) 93%); background-size: 36px 36px; pointer-events: none; }
.lab-stage article > div { position: absolute; z-index: 1; left: 11px; top: 9px; display: grid; }
.lab-stage article b { color: #f5dda0; font-size: 12px; }
.lab-stage article span { margin-top: 2px; color: #89aea8; font-size: 8px; }
.lab-stage canvas { position: relative; width: 100%; height: auto; display: block; }
.lab-readability { display: grid; grid-template-columns: minmax(360px,1fr) minmax(180px,.55fr); gap: 9px; }
.lab-readability > div, .lab-readability p { margin: 0; padding: 9px 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(7,12,18,.46); }
.lab-readability span { display: block; color: #f0d58b; font-size: 9px; }
#lab-actual-size { width: 100%; height: auto; max-height: 78px; }
.lab-readability p { align-content: center; color: #a8b8b7; font-size: 9px; line-height: 1.65; }
.lab-readability p b { display: block; margin-bottom: 3px; color: #82d8bf; }
.lab-3d-proof { display: grid; grid-template-columns: minmax(240px,.9fr) 1fr; gap: 12px; align-items: center; margin: 0; padding: 10px; border: 1px solid rgba(130,216,191,.24); border-radius: 12px; background: linear-gradient(120deg,rgba(17,40,47,.78),rgba(12,16,25,.76)); }
.lab-3d-proof img { display: block; width: 100%; min-width: 0; border-radius: 9px; }
.lab-3d-proof figcaption { display: grid; gap: 5px; color: #9eb1b3; font-size: 9px; line-height: 1.65; }
.lab-3d-proof figcaption b { color: #f0d58b; font-size: 11px; }
.lab-status { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(128,205,191,.16); }
.lab-status span { padding: 4px 8px; border: 1px solid rgba(128,205,191,.2); border-radius: 20px; color: #91cdbf; background: rgba(23,55,51,.35); font-size: 9px; }

@media (max-width: 1050px) {
  .equipment-workbench { grid-template-columns: 1fr; }
  .equipment-stats { grid-template-columns: repeat(6, 1fr); gap: 0; }
}

@media (max-width: 740px) {
  .screen-panel { align-items: start; padding: 8px; }
  .create-card { padding: 16px; }
  .creator-grid { grid-template-columns: 1fr; }
  .preview-wrap { min-height: 300px; }
  #preview { height: 290px; }
  .class-grid { grid-template-columns: repeat(2, 1fr); }
  .help { display: none; }
  .location-panel { left: 8px; top: 84px; min-width: 154px; padding: 6px 8px; }
  .menu-button { right: 8px; top: 8px; min-width: auto; }
  .dev-button { right: 118px; top: 8px; min-width: auto; }
  .slot { width: 38px; height: 46px; }
  .slot .skill-icon { font-size: 18px; }
  .chat { width: min(96vw, 500px); left: 8px; bottom: 70px; }
  .inventory-grid { grid-template-columns: repeat(4, 1fr); }
  .equipment-panel { width: 98vw; max-height: calc(100vh - 90px); padding: 10px; overflow-y: auto; }
  .equipment-and-bag { grid-template-columns: minmax(310px, 1.35fr) minmax(225px, .9fr); gap: 8px; }
  .equipment-stats { grid-template-columns: repeat(3, 1fr); }
  .loadout-board { min-height: 390px; }
  #equipment-avatar { width: 130px; height: 166px; }
  .gear-slot { width: 82px; }
  .slot-knee { left: 28px; }
  .slot-feet { right: 28px; }
  .character-lab-panel { width: 98vw; max-height: calc(100vh - 88px); padding: 10px; }
  .developer-panel { width: 96vw; max-height: calc(100vh - 76px); }
  .mesh-proof-layout { grid-template-columns: minmax(360px,1fr) minmax(200px,.52fr); }
  .character-lab-layout { grid-template-columns: 170px 1fr; gap: 8px; }
  .lab-controls { padding: 8px; }
  .lab-readability { grid-template-columns: 1fr; }
  .lab-3d-proof { grid-template-columns: 1fr; }
  .sprite-proof-grid { grid-template-columns: minmax(330px,1fr) minmax(220px,.7fr); }
  .sprite-proof-notes { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}

/* Arcana Atelier HUD v2 — deep navy lacquer, aged brass and etched glass */
:root {
  --arcana-void: #050a0f;
  --arcana-panel: rgba(8, 17, 25, .92);
  --arcana-panel-soft: rgba(12, 25, 34, .84);
  --arcana-ivory: #f7efd9;
  --arcana-muted: #9ca9a6;
  --arcana-gold: #c89e51;
  --arcana-gold-hi: #f0d58d;
  --arcana-teal: #65cdb5;
  --arcana-line: rgba(219, 184, 105, .34);
  --arcana-shadow: rgba(0, 4, 10, .76);
}

.ui-glyph,
.portrait-glyph,
.party-job-glyph,
.hotbar-glyph {
  width: 1em;
  height: 1em;
  display: block;
  overflow: visible;
}

[data-ui-icon] { display: inline-grid; place-items: center; }

.glass {
  color: var(--arcana-ivory);
  border-color: var(--arcana-line);
  border-radius: 4px;
  background:
    radial-gradient(circle at 14% -20%, rgba(101, 205, 181, .12), transparent 41%),
    radial-gradient(circle at 100% 115%, rgba(205, 157, 72, .1), transparent 38%),
    repeating-linear-gradient(118deg, transparent 0 18px, rgba(255, 255, 255, .012) 19px),
    linear-gradient(145deg, rgba(16, 31, 40, .94), rgba(4, 10, 16, .96));
  box-shadow:
    0 16px 38px rgba(0, 0, 0, .38),
    0 1px 0 rgba(255, 235, 179, .08) inset,
    0 0 0 1px rgba(0, 0, 0, .45) inset;
  backdrop-filter: blur(15px) saturate(1.16);
}

.player-panel,
.target-panel,
.party-panel,
.chat,
.hotbar,
.menu-panel,
.game-window,
.class-mechanic-panel {
  isolation: isolate;
}

.player-panel::before,
.target-panel::before,
.party-panel::before,
.chat::before,
.hotbar::before,
.menu-panel::before,
.game-window::before,
.class-mechanic-panel::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 3px;
  pointer-events: none;
  opacity: .74;
  background:
    linear-gradient(90deg, #e5c779, transparent) left top / 24px 1px no-repeat,
    linear-gradient(180deg, #e5c779, transparent) left top / 1px 24px no-repeat,
    linear-gradient(270deg, #e5c779, transparent) right top / 24px 1px no-repeat,
    linear-gradient(180deg, #e5c779, transparent) right top / 1px 24px no-repeat,
    linear-gradient(90deg, #e5c779, transparent) left bottom / 24px 1px no-repeat,
    linear-gradient(0deg, #e5c779, transparent) left bottom / 1px 24px no-repeat,
    linear-gradient(270deg, #e5c779, transparent) right bottom / 24px 1px no-repeat,
    linear-gradient(0deg, #e5c779, transparent) right bottom / 1px 24px no-repeat;
}

.target-panel::after,
.hotbar::after { display: none; }

.player-panel {
  width: 338px;
  min-height: 82px;
  padding: 9px 13px 9px 10px;
  gap: 11px;
  border-left-color: rgba(240, 210, 132, .58);
  background:
    linear-gradient(90deg, rgba(7, 15, 23, .98), rgba(12, 30, 39, .9) 71%, rgba(7, 15, 22, .96)),
    var(--arcana-panel);
}

.player-panel::after {
  content: "ADVENTURER";
  position: absolute;
  right: 15px;
  top: 6px;
  width: auto;
  height: auto;
  color: rgba(237, 210, 142, .54);
  background: none;
  font: 700 7px/1 Georgia, serif;
  letter-spacing: .22em;
}

.portrait {
  position: relative;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(235, 204, 127, .58);
  border-radius: 50%;
  color: var(--arcana-gold-hi);
  background:
    radial-gradient(circle at 38% 28%, rgba(124, 219, 194, .27), transparent 34%),
    radial-gradient(circle, #243743 0 39%, #0d1922 42% 59%, #b0833b 61% 63%, #081018 65%);
  box-shadow: 0 0 17px rgba(77, 190, 162, .15), inset 0 0 13px rgba(0, 0, 0, .62);
}

.portrait::before,
.portrait::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid var(--arcana-gold);
  background: #0b1620;
  transform: translateX(-50%) rotate(45deg);
}
.portrait::before { top: -4px; }
.portrait::after { bottom: -4px; }
.portrait-glyph { width: 31px; height: 31px; filter: drop-shadow(0 2px 5px #000); }
.portrait[data-job="mage"] { color: #c4a0ff; }
.portrait[data-job="healer"] { color: #f1d57e; }
.portrait[data-job="thief"] { color: #bd92e8; }

.player-meta { gap: 4px; }
.name-line { padding: 0 2px 3px; }
.name-line strong { color: #fff7df; font: 600 13px/1.1 Georgia, "Yu Mincho", serif; letter-spacing: .05em; }
.name-line span { color: #e8c775; font-size: 9px; }
.meter {
  height: 11px;
  border: 1px solid rgba(220, 225, 210, .13);
  border-radius: 1px;
  background: rgba(0, 4, 8, .79);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8);
}
.meter > span { filter: saturate(1.04); box-shadow: 0 0 8px currentColor; }
.meter b { font-size: 7px; letter-spacing: .035em; text-shadow: 0 1px 3px #000; }

.location-panel {
  width: 220px;
  padding: 8px 13px 9px;
  border-left: 2px solid var(--arcana-gold);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, rgba(5, 12, 18, .92), rgba(10, 23, 30, .74));
}
.location-panel span { color: #76cdb9; font-size: 7px; letter-spacing: .24em; }
.location-panel strong { color: #fff2cf; font: 600 13px/1.2 Georgia, "Yu Mincho", serif; }
.location-panel small { color: #9eaaa6; font-size: 8px; }

.target-panel {
  padding: 10px 17px 12px;
  border-radius: 3px 3px 14px 14px;
  background:
    radial-gradient(ellipse at 50% -22%, rgba(165, 76, 92, .22), transparent 58%),
    linear-gradient(180deg, rgba(16, 25, 33, .95), rgba(6, 12, 19, .94));
}
.target-panel > div:first-child strong { color: #fff2d0; font: 600 13px/1 Georgia, "Yu Mincho", serif; letter-spacing: .05em; }
.target-panel > div:first-child span { font-size: 8px; letter-spacing: .06em; }
.target-meter,
.target-break-meter { height: 10px; border-radius: 1px; border-color: rgba(220, 192, 128, .16); background: rgba(0, 3, 7, .77); }
.target-meter b,
.target-break-meter b { font-size: 7px; }

.menu-button,
.dev-button,
.sound-button {
  position: absolute;
  z-index: 24;
  top: 18px;
  min-width: 102px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(221, 187, 106, .42);
  border-radius: 3px 11px 3px 11px;
  color: #f2e6c8;
  background:
    radial-gradient(circle at 20% 0, rgba(92, 207, 180, .12), transparent 54%),
    linear-gradient(145deg, rgba(21, 36, 44, .95), rgba(5, 12, 18, .95));
  box-shadow: 0 9px 25px rgba(0, 0, 0, .31), inset 0 1px rgba(255, 255, 255, .07);
  font-size: 9px;
  letter-spacing: .08em;
}
.menu-button:hover,
.dev-button:hover,
.sound-button:hover { color: #fff4cf; border-color: #ddbb69; transform: translateY(-1px); filter: brightness(1.09); }
.menu-button > span,
.dev-button > span,
.sound-button > span { width: 17px; height: 17px; color: var(--arcana-gold-hi); }
.menu-button { right: 18px; }
.dev-button { right: 130px; }
.sound-button { right: 242px; min-width: 94px; }
.sound-button.muted { color: #7f8b89; border-color: rgba(130, 140, 138, .28); }
.sound-button.muted > span { opacity: .46; }

.help {
  top: 64px;
  right: 18px;
  border-radius: 3px 11px 3px 11px;
  opacity: .72;
  background: linear-gradient(145deg, rgba(7, 15, 22, .72), rgba(7, 13, 20, .62));
}

.chat {
  height: 158px;
  overflow: visible;
  border-left: 2px solid rgba(89, 195, 170, .42);
  border-radius: 3px 14px 3px 3px;
  background:
    linear-gradient(90deg, rgba(4, 11, 17, .78), rgba(6, 15, 22, .57)),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(255, 255, 255, .018) 23px);
}
#chat-log { height: 91px; color: #dbe3dd; font-size: 11px; line-height: 1.55; }
.chat-tabs button { border-radius: 0; }
.chat-compose input { font-size: 11px; }
.chat-compose button { color: #1d1a13; font-weight: 900; }

.party-panel {
  width: 276px;
  padding: 8px 10px 9px;
  border-radius: 3px 15px 3px 3px;
  background:
    radial-gradient(circle at 100% 0, rgba(93, 205, 179, .14), transparent 42%),
    linear-gradient(145deg, rgba(11, 25, 33, .94), rgba(5, 12, 19, .94));
}
.party-panel-header { min-height: 34px; }
.party-panel-header span { color: #82dfc7; font: 800 9px/1 Georgia, serif; letter-spacing: .24em; }
.party-panel-header button { border-radius: 2px 7px 2px 7px; }
.party-member-list { gap: 0; padding-top: 5px; }
.party-member {
  min-height: 57px;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  padding: 7px 6px;
  border-width: 0 0 1px 0;
  border-color: rgba(223, 202, 150, .11);
  border-radius: 0;
  background: linear-gradient(90deg, rgba(31, 48, 54, .44), rgba(9, 19, 26, .18));
  box-shadow: none;
}
.party-member:hover { border-color: rgba(117, 218, 191, .45); background: linear-gradient(90deg, rgba(44, 68, 70, .66), rgba(12, 25, 31, .36)); }
.party-member.selected { border-color: rgba(116, 220, 192, .54); background: linear-gradient(90deg, rgba(49, 101, 90, .44), rgba(10, 23, 29, .24)); box-shadow: inset 2px 0 #70d6bb; }
.party-job-icon {
  width: 34px;
  height: 34px;
  border-radius: 0;
  clip-path: polygon(50% 0, 93% 24%, 93% 76%, 50% 100%, 7% 76%, 7% 24%);
  color: #ecd082;
  background: radial-gradient(circle at 35% 28%, #40545a, #101c25 70%);
  box-shadow: inset 0 0 0 1px rgba(239, 207, 128, .5);
}
.party-job-glyph { width: 18px; height: 18px; }
.party-member-name b { color: #fff0cf; font-size: 10px; }
.party-mini-meter { height: 4px; border-radius: 0; }
.party-panel footer { color: #93a6a1; }

.hotbar {
  gap: 5px;
  padding: 9px 13px 10px;
  border: 1px solid rgba(232, 199, 118, .44);
  border-radius: 3px 17px 3px 17px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(98, 211, 183, .12), transparent 58%),
    linear-gradient(180deg, rgba(22, 36, 44, .96), rgba(4, 10, 16, .97));
}
.slot {
  width: 55px;
  height: 58px;
  overflow: hidden;
  border: 1px solid rgba(213, 184, 112, .4);
  border-radius: 1px;
  clip-path: polygon(0 7px, 7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px));
  color: #d9c692;
  background:
    radial-gradient(circle at 50% 38%, rgba(102, 184, 168, .15), transparent 57%),
    linear-gradient(145deg, rgba(28, 43, 51, .98), rgba(6, 12, 19, .98));
  box-shadow: inset 0 0 0 2px rgba(1, 5, 9, .55), inset 0 1px rgba(255, 255, 255, .06);
}
.slot:hover { border-color: #eccb79; transform: translateY(-3px); }
.slot.active { border-color: #ffe39a; color: #ffe6a3; box-shadow: 0 0 19px rgba(229, 186, 82, .25), inset 0 0 12px rgba(101, 218, 188, .12); }
.slot[data-glyph="fire"] { color: #ff8a65; }
.slot[data-glyph="wind"] { color: #78dfc1; }
.slot[data-glyph="heal"],
.slot[data-glyph="thread"] { color: #f1d77e; }
.slot[data-glyph="invisible"],
.slot[data-glyph="thief"] { color: #c49bec; }
.slot .key { border-radius: 0; color: #ffe7aa; }
.slot .skill-icon { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-size: 27px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .82)); }
.hotbar-glyph { width: 27px; height: 27px; }
.slot .skill-name { bottom: 4px; width: calc(100% - 4px); color: #e9e3d3; font-size: 7px; letter-spacing: .02em; }

.class-mechanic-panel {
  border-radius: 3px 14px 3px 14px;
  background:
    radial-gradient(circle at 88% 3%, rgba(228, 186, 86, .12), transparent 42%),
    linear-gradient(145deg, rgba(15, 29, 37, .94), rgba(5, 12, 19, .94));
}
.class-mechanic-panel header b { color: #f8ebcc; font-weight: 600; letter-spacing: .08em; }

.menu-panel,
.game-window {
  border: 1px solid rgba(225, 190, 104, .48);
  border-radius: 3px 17px 3px 17px;
  background:
    radial-gradient(circle at 28% -10%, rgba(92, 204, 179, .1), transparent 39%),
    radial-gradient(circle at 98% 92%, rgba(188, 130, 57, .12), transparent 38%),
    repeating-linear-gradient(118deg, transparent 0 22px, rgba(255, 255, 255, .011) 23px),
    linear-gradient(145deg, rgba(18, 31, 39, .985), rgba(4, 10, 16, .99));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .62), inset 0 1px rgba(255, 241, 201, .08);
}
.menu-panel { top: 66px; width: 330px; padding: 13px; }
.panel-heading { min-height: 43px; align-items: center; border-bottom-color: rgba(231, 198, 119, .22); }
.panel-heading strong { color: #fff0cc; font-weight: 600; letter-spacing: .09em; }
.panel-heading button { border-radius: 2px 7px 2px 7px; color: #d8c08a; }
.menu-panel > button:not([data-close-panel]) {
  min-height: 58px;
  grid-template-columns: 39px 1fr;
  border-width: 0 0 1px;
  border-radius: 0;
  border-color: rgba(225, 205, 157, .13);
  background: linear-gradient(90deg, rgba(33, 51, 57, .38), transparent);
}
.menu-panel > button:not([data-close-panel]):hover { border-color: rgba(233, 201, 123, .45); background: linear-gradient(90deg, rgba(62, 78, 72, .54), rgba(15, 24, 30, .28)); }
.menu-symbol { grid-row: 1 / 3; width: 31px; height: 31px; color: var(--arcana-gold-hi); }
.menu-symbol .ui-glyph { width: 23px; height: 23px; }
.menu-panel > button b { color: #f5e9cb; font: 600 11px/1.2 Georgia, "Yu Mincho", serif; }
.menu-panel > button small { color: #91a19e; font-size: 8px; }

.audio-settings {
  margin-top: 10px;
  padding: 11px 10px 10px;
  border: 1px solid rgba(111, 201, 178, .18);
  background: linear-gradient(110deg, rgba(24, 48, 51, .36), rgba(6, 15, 21, .48));
}
.audio-settings-title { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; }
.audio-settings-title > span { width: 23px; height: 23px; color: #75d6bd; }
.audio-settings-title > div { display: grid; gap: 2px; }
.audio-settings-title b { color: #f2e5c6; font-size: 10px; }
.audio-settings-title small { color: #8fa09d; font-size: 8px; }
.audio-settings-title output { color: #eccd7d; font: 700 9px/1 Georgia, serif; }
.audio-settings-controls { display: grid; grid-template-columns: 1fr 52px; gap: 10px; align-items: center; margin-top: 10px; }
.audio-settings-controls input { width: 100%; accent-color: #cfaa55; cursor: pointer; }
.audio-settings-controls button { height: 27px; border: 1px solid rgba(224, 193, 116, .42); border-radius: 2px 7px 2px 7px; color: #f3dfaa; background: rgba(7, 17, 23, .74); font-size: 8px; }

.class-card { grid-template-columns: 28px 1fr; align-items: center; }
.class-card-glyph { grid-row: 1 / 3; width: 27px; height: 27px; display: grid; place-items: center; color: #d8b866; }
.class-card-glyph .ui-glyph { width: 22px; height: 22px; }

@keyframes arcana-active-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.17); }
}
.slot.active .hotbar-glyph { animation: arcana-active-breathe 1.75s ease-in-out infinite; }

@media (max-width: 900px) {
  .player-panel { left: 10px; top: 10px; width: 294px; }
  .menu-button { right: 8px; top: 10px; }
  .dev-button { right: 116px; top: 10px; }
  .sound-button { right: 224px; top: 10px; }
  .hotbar { bottom: 12px; padding: 7px 9px 8px; }
  .slot { width: 45px; height: 50px; }
  .slot .skill-icon { top: 8px; font-size: 23px; }
  .hotbar-glyph { width: 23px; height: 23px; }
}

@media (max-width: 740px) {
  .player-panel { width: 268px; min-height: 67px; padding: 7px 9px; }
  .portrait { width: 50px; height: 50px; flex-basis: 50px; }
  .portrait-glyph { width: 27px; height: 27px; }
  .menu-button,
  .dev-button,
  .sound-button { min-width: 88px; width: 88px; height: 34px; padding: 0 8px; gap: 6px; }
  .menu-button { right: 8px; }
  .dev-button { right: 102px; }
  .sound-button { right: 196px; }
  .menu-button > span,
  .dev-button > span,
  .sound-button > span { width: 15px; height: 15px; }
  .target-panel { top: 84px; min-width: 300px; width: 58vw; }
  .location-panel { top: 158px; }
  .help { display: none; }
  .chat { left: 8px; bottom: 69px; width: min(94vw, 410px); }
  .party-panel { right: 8px; top: 175px; width: 242px; }
  .hotbar { gap: 3px; padding: 6px 7px 7px; }
  .slot { width: 38px; height: 46px; }
  .slot .skill-icon { top: 7px; font-size: 21px; }
  .hotbar-glyph { width: 21px; height: 21px; }
  .slot .skill-name { bottom: 3px; font-size: 6px; }
  .class-mechanic-panel { bottom: 69px; }
  .menu-panel { top: 54px; right: 8px; width: min(330px, calc(100vw - 16px)); }
}

/* Class skill tree */
.skill-tree-panel {
  width: min(1080px, calc(100vw - 32px));
  height: min(650px, calc(100vh - 120px));
  top: calc(50% - 38px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 18px 12px;
  background:
    radial-gradient(circle at 12% 8%, rgba(80, 188, 164, .13), transparent 31%),
    radial-gradient(circle at 91% 82%, rgba(184, 126, 60, .12), transparent 34%),
    linear-gradient(145deg, rgba(19, 34, 42, .99), rgba(5, 11, 18, .995));
}
.skill-tree-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .17;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 24px 24px;
}
.skill-tree-hero {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 83px;
  padding: 10px 7px 8px;
  border-bottom: 1px solid rgba(227, 199, 128, .16);
}
.skill-tree-job-glyph {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #e8ca7e;
  border: 1px solid rgba(232, 201, 125, .46);
  background: radial-gradient(circle, rgba(101, 197, 174, .2), rgba(13, 26, 34, .84) 66%);
  clip-path: polygon(50% 0, 92% 22%, 100% 66%, 72% 100%, 28% 100%, 0 66%, 8% 22%);
  filter: drop-shadow(0 8px 13px rgba(0,0,0,.35));
}
.skill-tree-class-glyph { width: 31px; height: 31px; }
.skill-tree-hero div:nth-child(2) { min-width: 0; }
.skill-tree-hero span { color: #7ccdb8; font-size: 8px; letter-spacing: .22em; }
.skill-tree-hero h2 { margin: 3px 0 2px; color: #fff1ca; font: 600 23px/1 Georgia, "Yu Mincho", serif; letter-spacing: .1em; }
.skill-tree-hero p { overflow: hidden; margin: 0; color: #9eaeab; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.skill-tree-hero > strong { padding: 8px 13px; color: #f0d388; border: 1px solid rgba(236, 202, 119, .26); background: rgba(3, 10, 15, .52); font: 600 14px/1 Georgia, serif; letter-spacing: .07em; }
.skill-tree-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 34px;
  padding: 0 7px;
  color: #a6b3b0;
  border-bottom: 1px solid rgba(225, 205, 157, .1);
  font-size: 8px;
}
.skill-tree-legend span { display: inline-flex; align-items: center; gap: 6px; }
.skill-tree-legend i { width: 7px; height: 7px; border-radius: 50%; background: #606e70; box-shadow: 0 0 0 2px rgba(255,255,255,.04); }
.skill-tree-legend .learned i { background: #63d7b6; box-shadow: 0 0 8px rgba(99,215,182,.65); }
.skill-tree-legend .available i { background: #f3dfaf; box-shadow: 0 0 8px rgba(243,223,175,.35); }
.skill-tree-legend .locked i { background: #526066; }
.skill-tree-legend em { margin-left: auto; color: #687a7d; font-style: normal; }
.skill-tree-content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 13px;
  flex: 1;
  min-height: 0;
  padding: 13px 3px 10px;
  overflow: auto;
  scrollbar-color: rgba(207,178,108,.45) rgba(0,0,0,.2);
}
.skill-tree-branch {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(210, 190, 145, .15);
  background: linear-gradient(155deg, rgba(38, 55, 60, .42), rgba(8, 17, 24, .48));
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.skill-tree-branch > header { display: grid; grid-template-columns: 4px 1fr auto; align-items: center; gap: 8px; min-height: 30px; margin-bottom: 4px; padding: 0 3px 8px; border-bottom: 1px solid rgba(223, 202, 154, .13); }
.skill-tree-branch > header > span { width: 3px; height: 20px; background: linear-gradient(#77d6bd, #b49354); box-shadow: 0 0 8px rgba(119,214,189,.25); }
.skill-tree-branch > header strong { color: #f1dfb7; font: 600 12px/1 Georgia, "Yu Mincho", serif; letter-spacing: .14em; }
.skill-tree-branch > header small { color: #617578; font-size: 6px; letter-spacing: .1em; }
.skill-tree-branch-nodes { position: relative; display: grid; gap: 7px; padding-top: 3px; }
.skill-tree-branch-nodes::before { content: ""; position: absolute; left: 18px; top: 9px; bottom: 9px; width: 1px; background: linear-gradient(transparent, rgba(146,173,165,.42) 8%, rgba(146,173,165,.24) 92%, transparent); }
.skill-tree-node {
  position: relative;
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 69px;
  padding: 7px 7px 7px 5px;
  border: 1px solid rgba(179, 190, 179, .15);
  background: linear-gradient(100deg, rgba(28, 43, 49, .74), rgba(8, 16, 22, .68));
  transition: opacity .2s ease, border-color .2s ease, background .2s ease, filter .2s ease;
}
.skill-tree-rail-dot { position: absolute; left: 15px; top: 50%; z-index: 0; width: 7px; height: 7px; translate: -50% -50%; border: 1px solid #81918e; border-radius: 50%; background: #17252b; }
.skill-tree-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  overflow: hidden;
  color: #b6c4c0;
  border: 1px solid rgba(187, 198, 190, .26);
  background: radial-gradient(circle at 35% 28%, rgba(135,168,158,.2), rgba(10,20,26,.95));
  clip-path: polygon(50% 0, 94% 24%, 94% 76%, 50% 100%, 6% 76%, 6% 24%);
}
.skill-tree-icon img { width: 100%; height: 100%; object-fit: cover; }
.hotbar-ability-icon { display:block; width:34px; height:34px; border-radius:7px; object-fit:cover; pointer-events:none; user-select:none; filter:saturate(1.08) contrast(1.04) drop-shadow(0 3px 5px rgba(0,0,0,.82)); }
.slot.active .hotbar-ability-icon { box-shadow:0 0 9px rgba(115,224,194,.22); }
.skill-tree-icon b { font: 600 14px/1 Georgia, "Yu Mincho", serif; text-shadow: 0 1px 4px #000; }
.skill-tree-node-copy { min-width: 0; }
.skill-tree-node-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.skill-tree-node-name b { overflow: hidden; color: #d8e0dc; font: 600 11px/1.2 Georgia, "Yu Mincho", serif; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.skill-tree-node-name em { flex: 0 0 auto; padding: 2px 4px; color: #e6bf76; border: 1px solid rgba(230,191,118,.32); font: normal 6px/1 Georgia, serif; letter-spacing: .1em; }
.skill-tree-node-copy p { margin: 4px 0 3px; color: #869895; font-size: 7px; line-height: 1.35; }
.skill-tree-node-copy small { color: #a8905d; font-size: 6px; letter-spacing: .04em; }
.skill-mastery { display:grid; grid-template-columns:auto minmax(54px,1fr) auto; align-items:center; gap:5px; margin-top:5px; color:#9eb5b1; }
.skill-mastery > span { color:#7de2c5; font:600 7px/1 Georgia,serif; white-space:nowrap; }
.skill-mastery > i { position:relative; height:3px; overflow:hidden; border-radius:4px; background:rgba(2,7,11,.72); box-shadow:inset 0 0 0 1px rgba(207,234,222,.08); }
.skill-mastery > i b { position:absolute; inset:0 auto 0 0; border-radius:inherit; background:linear-gradient(90deg,#48aa97,#91f1ce 72%,#ffe18d); box-shadow:0 0 7px rgba(108,231,197,.62); }
.skill-mastery > em { color:#aab7b3; font:normal 6px/1 Georgia,serif; white-space:nowrap; }
.skill-mastery > small { grid-column:1 / -1; color:#d7be7b; font-size:6px; letter-spacing:.025em; }
.skill-tree-node-state { display: grid; justify-items: end; align-self: stretch; align-content: space-between; min-width: 50px; padding: 2px 0; }
.skill-tree-node-state strong { color: #b5a16d; font: 600 9px/1 Georgia, serif; }
.skill-tree-node-state span { color: #748481; font-size: 6px; white-space: nowrap; }
.skill-tree-node.locked { opacity: .32; filter: saturate(.35); }
.skill-tree-node.locked .skill-tree-node-name b { color: #a5afad; }
.skill-tree-node.available { opacity: 1; border-color: rgba(241, 218, 164, .5); background: linear-gradient(100deg, rgba(61, 69, 64, .76), rgba(18, 24, 28, .84)); box-shadow: inset 2px 0 #e9d398, 0 0 13px rgba(229,201,132,.08); }
.skill-tree-node.available .skill-tree-node-name b { color: #fff3d2; }
.skill-tree-node.available .skill-tree-icon { color: #f4dfaa; border-color: rgba(244, 223, 170, .62); }
.skill-tree-node.available .skill-tree-node-state span { color: #ead69d; }
.skill-tree-node.learned { opacity: 1; border-color: rgba(92, 211, 179, .45); background: linear-gradient(100deg, rgba(27, 72, 67, .72), rgba(9, 27, 31, .78)); box-shadow: inset 2px 0 #64d6b6, 0 0 15px rgba(83,210,176,.08); }
.skill-tree-node.learned .skill-tree-node-name b { color: #77e3c5; }
.skill-tree-node.learned .skill-tree-icon { color: #73e0c2; border-color: rgba(104,224,193,.58); box-shadow: 0 0 12px rgba(86,214,180,.18); }
.skill-tree-node.learned .skill-tree-rail-dot { border-color: #7ce3c7; background: #51bea2; box-shadow: 0 0 7px rgba(92,218,185,.66); }
.skill-tree-node.learned .skill-tree-node-state span { color: #69d6b7; }
.skill-tree-node.learned { cursor: grab; touch-action: none; }
.skill-tree-node.learned:active { cursor: grabbing; }
.skill-tree-node.learned.dragging { opacity: .42; transform: scale(.985); filter: saturate(.7); }
.skill-tree-node.rare { background-image: radial-gradient(circle at 6% 20%, rgba(160,102,201,.17), transparent 33%), linear-gradient(100deg, rgba(40,38,58,.78), rgba(12,17,29,.78)); }
.skill-tree-node.rare:not(.locked) { border-color: rgba(208,164,239,.46); }
.skill-tree-footer { display: flex; justify-content: space-between; gap: 20px; min-height: 25px; padding: 7px 6px 0; color: #728682; border-top: 1px solid rgba(225, 205, 157, .1); font-size: 7px; letter-spacing: .05em; }
.skill-tree-footer strong { color:#efd58e; font-size:8px; font-weight:600; letter-spacing:.06em; }
.skill-hotbar-dragging .hotbar { z-index: 70; }
.skill-hotbar-dragging .slot { border-color:rgba(117,226,191,.74); box-shadow:0 0 14px rgba(80,225,184,.24),inset 0 0 0 1px rgba(184,255,235,.16); }
.skill-hotbar-dragging .slot.drop-ready { transform:translateY(-5px) scale(1.05); border-color:#fff0a0; box-shadow:0 0 24px rgba(255,211,93,.5),inset 0 0 12px rgba(117,226,191,.24); }

@media (max-width: 900px) {
  .hotbar-ability-icon { width:29px; height:29px; }
  .skill-tree-panel { width: calc(100vw - 18px); height: calc(100vh - 94px); top:calc(50% - 38px); padding: 12px; }
  .skill-tree-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .skill-tree-hero { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 9px; min-height: 66px; }
  .skill-tree-job-glyph { width: 43px; height: 43px; }
  .skill-tree-class-glyph { width: 24px; height: 24px; }
  .skill-tree-hero h2 { font-size: 18px; }
  .skill-tree-hero p, .skill-tree-legend em { display: none; }
  .skill-tree-legend { gap: 10px; overflow: hidden; }
  .skill-tree-content { grid-template-columns: 1fr; }
}

/* Adventure I onboarding -------------------------------------------------- */
.onboarding-shell {
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: 0;
  overflow: hidden;
  color: #f8f1dd;
  background: #07151d;
}
.onboarding-stage {
  position: absolute;
  inset: 0;
  min-height: 100%;
  overflow: auto;
  isolation: isolate;
}
.onboarding-stage::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
  filter: saturate(1.05) contrast(1.03);
  transform: scale(1.015);
}
.onboarding-stage::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 51% 42%, transparent 0 30%, rgba(2, 10, 15, .2) 76%),
    linear-gradient(90deg, rgba(3, 11, 17, .78), rgba(3, 13, 20, .15) 62%, rgba(3, 11, 17, .5));
}
.title-stage::before { background-image: url("assets/ui/adventure1/magic-city-title-v1.png"); }
.character-stage::before { background-image:linear-gradient(90deg,rgba(3,12,18,.35),rgba(4,14,20,.06)),url("assets/ui/adventure1/path-hall-v1.png"); filter:saturate(.82) brightness(.68); }
.class-stage::before { background-image: url("assets/ui/adventure1/path-hall-v1.png"); }
.identity-stage::before { background-image: url("assets/ui/adventure1/path-hall-v1.png"); filter: saturate(.78) brightness(.66) blur(1px); }
.title-stage { display: flex; align-items: center; padding: clamp(28px, 6vw, 92px); }
.title-vignette { position: fixed; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(1, 8, 13, .08), transparent 50%, rgba(2, 9, 14, .74)); }
.title-copy { position: relative; width: min(600px, 87vw); margin-top: 7vh; text-shadow: 0 3px 22px rgba(0,0,0,.7); animation: title-arrive 1.2s cubic-bezier(.2,.8,.2,1) both; }
.title-chapter { margin: 0 0 16px; color: #e4c577; font: 700 13px/1.2 Cinzel, Georgia, serif; letter-spacing: .38em; }
.title-copy h1 { margin: 0; font: 500 clamp(42px, 6.1vw, 88px)/.98 "Yu Mincho", "Hiragino Mincho ProN", serif; letter-spacing: .08em; }
.title-copy h1 span { display: block; margin-bottom: 13px; color: #f6df9e; font: 600 clamp(13px, 1.25vw, 18px)/1 Cinzel, Georgia, serif; letter-spacing: .52em; }
.title-copy > p:not(.title-chapter) { max-width: 480px; margin: 28px 0 36px; color: rgba(248,244,226,.88); font: 500 15px/2 "Yu Gothic UI", sans-serif; letter-spacing: .08em; }
.title-start-button { position: relative; display: grid; min-width: 290px; padding: 15px 58px 13px; border: 1px solid rgba(255,224,146,.78); border-radius: 2px 19px 2px 19px; color: #132526; background: linear-gradient(110deg,#f8e5ad,#d9b85e 72%,#f4dda0); box-shadow: 0 17px 40px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.6); overflow: hidden; }
.title-start-button::after { content:""; position:absolute; inset:-120% -40%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); transform:rotate(20deg) translateX(-90%); animation:title-glint 4s 1.6s infinite; }
.title-start-button span { font: 800 16px/1.3 "Yu Mincho", serif; letter-spacing:.16em; }
.title-start-button small { font: 700 9px/1.3 Cinzel,serif; letter-spacing:.27em; opacity:.67; }
.title-start-button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.title-features { display:flex; align-items:center; gap:14px; margin-top:24px; color:rgba(246,240,218,.64); font:700 10px/1.2 sans-serif; letter-spacing:.13em; }
.title-features i { width:3px; height:3px; border-radius:50%; background:#e7ca78; box-shadow:0 0 9px #e7ca78; }
.title-corner { position:fixed; right:42px; bottom:35px; display:flex; gap:14px; align-items:center; color:rgba(255,244,209,.66); }
.title-corner b { padding-right:14px; border-right:1px solid rgba(239,216,155,.38); font:500 31px/1 Cinzel,serif; }
.title-corner span { font:600 9px/1.5 Cinzel,serif; letter-spacing:.25em; }
@keyframes title-arrive { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes title-glint { 0%,64% { transform:rotate(20deg) translateX(-90%); } 82%,100% { transform:rotate(20deg) translateX(90%); } }

.character-select-layout { width:min(980px,92vw); margin:clamp(34px,7vh,86px) auto 24px; }
.character-select-heading { display:grid; gap:5px; margin-bottom:22px; text-shadow:0 2px 14px #000; }
.character-select-heading p { margin:0; color:#d9bd6e; font:700 9px/1 Cinzel,serif; letter-spacing:.27em; }
.character-select-heading h2 { margin:0; color:#fff2ce; font:700 30px/1.4 "Yu Mincho",serif; letter-spacing:.08em; }
.character-select-heading span { color:rgba(240,242,229,.66); font-size:11px; }
.character-slot-list { display:grid; grid-template-columns:repeat(2,minmax(280px,1fr)); gap:18px; }
.character-slot-wrap { display:flex; flex-direction:column; gap:12px; }
.character-slot-wrap .character-slot-card { width:100%; flex:1; }
.character-delete-link { align-self:flex-end; padding:7px 12px; color:#d5a89c; border:1px solid #ae796049; border-radius:4px; background:#1b1b21; font-size:11px; cursor:pointer; }
.character-delete-link:hover { color:#ffd9c7; border-color:#c58c70; background:#39242a; }
#name-validation[data-valid="false"] { color:#ffb1a3; }
#name-validation[data-valid="true"] { color:#a6dbc5; }
.character-slot-card { position:relative; min-height:250px; display:grid; align-content:end; gap:7px; padding:25px; overflow:hidden; text-align:left; border:1px solid rgba(235,215,157,.32); border-radius:2px 24px 2px 24px; color:#f7eed7; background:radial-gradient(circle at 74% 28%,var(--character-glow,rgba(89,199,176,.18)),transparent 39%),linear-gradient(145deg,rgba(10,26,32,.94),rgba(5,12,20,.98)); box-shadow:0 22px 55px rgba(0,0,0,.36); }
.character-slot-card::before { content:""; position:absolute; width:180px; height:180px; right:-22px; top:-22px; border:1px solid rgba(237,213,146,.14); border-radius:50%; box-shadow:0 0 44px var(--character-glow,rgba(89,199,176,.16)),inset 0 0 35px rgba(255,255,255,.025); }
.character-slot-card:hover { transform:translateY(-3px); border-color:#efd27d; box-shadow:0 25px 62px rgba(0,0,0,.44),0 0 22px rgba(226,191,99,.12); }
.character-slot-card .slot-index { position:absolute; left:22px; top:19px; color:#cbae61; font:700 8px/1 Cinzel,serif; letter-spacing:.2em; }
.character-slot-card .slot-job-icon { position:absolute; right:37px; top:38px; color:#f2d888; font-size:66px; text-shadow:0 0 26px var(--character-glow,rgba(89,199,176,.55)); }
.character-slot-card strong { font:700 25px/1.2 "Yu Mincho",serif; letter-spacing:.08em; }
.character-slot-card b { color:#dfc576; font-size:11px; letter-spacing:.08em; }
.character-slot-card small { color:rgba(235,239,226,.58); font-size:9px; }
.character-slot-card.empty { align-content:center; justify-items:center; text-align:center; border-style:dashed; color:rgba(245,236,210,.68); background:rgba(7,17,24,.76); }
.character-slot-card.empty .slot-job-icon { position:static; font-size:44px; opacity:.62; }
.character-slot-card.empty strong { font-size:18px; }
#character-select-message { align-self:center; margin-left:auto; color:#efd88e; font-size:10px; }

.onboarding-header { position:sticky; top:0; z-index:3; display:flex; justify-content:space-between; align-items:center; min-height:94px; padding:18px clamp(24px,4.5vw,72px); border-bottom:1px solid rgba(235,212,148,.25); background:linear-gradient(180deg,rgba(4,14,21,.94),rgba(4,14,21,.72)); backdrop-filter:blur(14px); }
.onboarding-header > div { display:grid; gap:2px; }
.onboarding-header span { color:#d6b967; font:700 9px/1.2 Cinzel,serif; letter-spacing:.3em; }
.onboarding-header strong { font:700 22px/1.4 "Yu Mincho",serif; letter-spacing:.09em; }
.onboarding-header small { color:rgba(236,239,228,.64); font-size:11px; }
.onboarding-header ol { display:flex; gap:9px; padding:0; margin:0; list-style:none; }
.onboarding-header li { padding:7px 12px; border-bottom:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.43); font:700 10px/1 sans-serif; }
.onboarding-header li.active { border-color:#efcf78; color:#ffe8a8; }
.class-selection-layout { display:grid; grid-template-columns:minmax(640px,1.7fr) minmax(300px,.72fr); gap:24px; width:min(1180px,92vw); margin:clamp(28px,5vh,58px) auto 20px; }
.premium-class-grid { display:grid; grid-template-columns:repeat(2,minmax(270px,1fr)); gap:15px; }
.premium-class-grid .class-card { position:relative; display:grid; grid-template-columns:160px 1fr; grid-template-rows:auto 1fr auto; min-height:268px; padding:0; overflow:hidden; text-align:left; border:1px solid rgba(234,216,165,.25); border-radius:2px 22px 2px 22px; color:#f5eedb; background:linear-gradient(135deg,rgba(10,24,30,.82),rgba(8,14,24,.93)); box-shadow:0 18px 46px rgba(0,0,0,.26); }
.premium-class-grid .class-card:hover,.premium-class-grid .class-card.selected { border-color:rgba(245,210,116,.82); transform:translateY(-3px); box-shadow:0 19px 48px rgba(0,0,0,.36),inset 0 0 40px rgba(218,181,89,.08); }
.premium-class-grid .class-card.selected::after { content:"SELECTED"; position:absolute; right:15px; top:14px; color:#f8d77f; font:700 8px/1 Cinzel,serif; letter-spacing:.22em; }
.class-portrait-shell { grid-row:1/4; width:160px; height:100%; background:radial-gradient(circle at 50% 56%,rgba(106,193,176,.2),transparent 57%); }
.class-portrait-shell canvas { width:100%; height:100%; object-fit:contain; }
.class-portrait-shell canvas[data-portrait-ready] { filter:contrast(1.035) saturate(1.045); }

#hotbar .slot.reverse-heal {
  border-color:rgba(211,137,255,.82);
  background:radial-gradient(circle at 50% 35%,rgba(157,74,210,.28),transparent 64%),linear-gradient(180deg,rgba(44,24,58,.96),rgba(17,15,28,.98));
  box-shadow:inset 0 0 20px rgba(196,112,255,.14),0 0 14px rgba(156,75,219,.18);
}
#hotbar .slot.reverse-heal .skill-name { color:#efccff; }
.class-card-copy { display:grid; align-content:center; gap:7px; padding:43px 20px 30px 6px; }
.class-card-copy small { color:#cfb768; font:700 9px/1.4 sans-serif; letter-spacing:.14em; }
.class-card-copy b { font:700 24px/1.25 "Yu Mincho",serif; letter-spacing:.1em; }
.class-card-copy em { color:rgba(240,237,221,.67); font:500 11px/1.65 sans-serif; }
.class-detail { padding:33px 31px; border:1px solid rgba(237,215,151,.3); border-radius:2px 24px 2px 24px; background:linear-gradient(145deg,rgba(13,28,34,.91),rgba(7,14,22,.96)); box-shadow:0 25px 62px rgba(0,0,0,.4); }
.class-detail > p:first-child { margin:0; color:#d8ba68; font:700 10px/1.5 sans-serif; letter-spacing:.13em; }
.class-detail h2 { margin:9px 0 4px; font:700 33px/1.3 "Yu Mincho",serif; letter-spacing:.12em; }
.class-detail > strong { display:block; margin-bottom:21px; color:#f3d586; font:600 14px/1.5 "Yu Mincho",serif; }
.class-detail > p { color:rgba(239,238,224,.74); font:500 12px/1.9 sans-serif; }
.class-detail dl { margin:25px 0 0; }
.class-detail dl div { padding:13px 0; border-top:1px solid rgba(233,216,169,.14); }
.class-detail dt { margin-bottom:5px; color:#d2b96f; font:800 9px/1 sans-serif; letter-spacing:.15em; }
.class-detail dd { margin:0; color:rgba(244,242,229,.8); font:500 11px/1.65 sans-serif; }
.onboarding-actions { display:flex; justify-content:space-between; align-items:center; width:min(1180px,92vw); margin:18px auto 32px; }
.quiet-button,.primary-button { min-width:170px; padding:13px 22px; border-radius:2px 14px 2px 14px; font-weight:800; letter-spacing:.08em; }
.quiet-button { border:1px solid rgba(239,221,171,.25); color:#eae5d3; background:rgba(7,16,22,.74); }
.primary-button { border:1px solid #edcf7b; color:#192525; background:linear-gradient(110deg,#f7e7b9,#d7b760); box-shadow:0 10px 25px rgba(0,0,0,.28); }
.primary-button:disabled { filter:grayscale(.75); opacity:.5; }

.identity-layout { display:grid; grid-template-columns:minmax(320px,.82fr) minmax(450px,1.18fr); gap:22px; width:min(1000px,90vw); margin:28px auto 10px; }
.premium-preview-wrap { position:relative; min-height:560px; overflow:hidden; border:1px solid rgba(238,216,153,.28); border-radius:2px 24px 2px 24px; background:radial-gradient(circle at 50% 58%,rgba(84,187,168,.17),transparent 42%),linear-gradient(180deg,rgba(6,17,24,.48),rgba(3,10,16,.93)); box-shadow:0 22px 54px rgba(0,0,0,.35); }
.premium-preview-wrap::before { content:""; position:absolute; left:50%; bottom:76px; width:210px; height:65px; transform:translateX(-50%); border:1px solid rgba(229,199,119,.38); border-radius:50%; box-shadow:0 0 35px rgba(111,222,193,.16),inset 0 0 28px rgba(219,191,116,.08); }
.premium-preview-wrap #preview { position:absolute; inset:0; width:100%; height:100%; }
.preview-job { position:absolute; left:24px; bottom:23px; display:grid; }
.preview-job span { color:#d9be72; font:700 9px/1.4 sans-serif; letter-spacing:.14em; }
.preview-job strong { font:700 21px/1.3 "Yu Mincho",serif; letter-spacing:.12em; }
.preview-job small { color:rgba(255,255,255,.55); font-size:10px; }
.premium-preview-wrap .preview-note { position:absolute; right:20px; bottom:25px; color:rgba(255,255,255,.42); font:600 9px/1 sans-serif; }
.premium-creator-controls { padding:28px 31px; border:1px solid rgba(237,215,151,.26); border-radius:2px 24px 2px 24px; background:linear-gradient(145deg,rgba(12,27,33,.94),rgba(6,13,20,.97)); box-shadow:0 22px 54px rgba(0,0,0,.36); }
.premium-creator-controls > input { width:100%; padding:13px 15px; border:1px solid rgba(235,213,150,.3); color:#fff5d9; background:rgba(2,10,15,.62); font:700 17px/1.2 "Yu Mincho",serif; letter-spacing:.08em; }
.premium-creator-controls .input-note { display:block; margin:7px 0 18px; color:rgba(234,236,225,.46); font-size:9px; }
.legacy-creator-options { display:none!important; }
.premium-stat-list { display:grid; grid-template-columns:repeat(2,1fr); gap:7px 13px; }
.premium-stat-list .stat-row { display:grid; grid-template-columns:1fr 32px 31px 31px; min-height:43px; padding:5px 7px 5px 12px; border:1px solid rgba(229,210,156,.14); background:rgba(10,23,29,.58); }
.premium-stat-list .stat-row button { width:27px; height:27px; padding:0; border:1px solid rgba(224,199,130,.3); color:#f5dda0; background:rgba(16,34,39,.75); }
.recommended-build { display:grid; width:100%; margin-top:13px; padding:10px 13px; text-align:left; border:1px solid rgba(110,211,185,.28); color:#d8f4e9; background:linear-gradient(90deg,rgba(39,92,81,.35),rgba(21,38,42,.22)); }
.recommended-build small { color:rgba(224,238,228,.56); font-size:9px; }
.identity-summary { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:1px 12px; margin-top:14px; padding:12px 14px; border-left:2px solid #cfb260; background:rgba(3,11,16,.48); }
.identity-summary span { grid-row:1/3; color:#c9ac5c; font:800 9px/1 sans-serif; letter-spacing:.12em; }
.identity-summary strong { font:700 13px/1.25 "Yu Mincho",serif; }
.identity-summary small { color:rgba(240,239,226,.47); font-size:9px; }

/* Action-validated tutorial */
.tutorial-guide { position:fixed; z-index:32; left:18px; top:124px; width:320px; padding:0; overflow:hidden; border:1px solid rgba(238,212,140,.38); border-radius:2px 18px 2px 18px; background:linear-gradient(145deg,rgba(10,25,31,.94),rgba(4,12,19,.97)); box-shadow:0 20px 45px rgba(0,0,0,.4); }
.tutorial-guide > header { display:flex; justify-content:space-between; align-items:center; padding:12px 13px 11px 16px; border-bottom:1px solid rgba(235,212,151,.16); background:linear-gradient(90deg,rgba(53,102,91,.25),transparent); }
.tutorial-guide > header div { display:grid; }
.tutorial-guide > header span { color:#d8bd70; font:700 8px/1.4 Cinzel,serif; letter-spacing:.16em; }
.tutorial-guide > header strong { font:700 14px/1.4 "Yu Mincho",serif; letter-spacing:.08em; }
.tutorial-guide > header button { width:28px; height:28px; border:0; color:#dfc777; background:transparent; font-size:18px; }
#tutorial-guide-body { padding:14px 16px 16px; }
.tutorial-progress { display:flex; gap:5px; margin-bottom:13px; }
.tutorial-progress i { height:2px; flex:1; background:rgba(255,255,255,.13); }
.tutorial-progress i.active,.tutorial-progress i.done { background:#e5c66e; box-shadow:0 0 8px rgba(229,198,110,.52); }
#tutorial-step-label { margin:0 0 4px; color:#78d9c0; font:800 8px/1.4 sans-serif; letter-spacing:.14em; }
#tutorial-title { margin:0; color:#fff3cf; font:700 19px/1.4 "Yu Mincho",serif; letter-spacing:.06em; }
#tutorial-instruction { min-height:48px; margin:8px 0 12px; color:rgba(241,240,226,.74); font:500 11px/1.72 sans-serif; }
#tutorial-input-hint { display:inline-block; padding:6px 9px; border:1px solid rgba(229,204,132,.32); color:#f2d98e; background:rgba(2,9,14,.6); font:700 10px/1.3 sans-serif; }
#tutorial-status { display:flex; align-items:center; gap:7px; margin-top:13px; color:rgba(255,255,255,.48); font-size:9px; }
#tutorial-status i { width:7px; height:7px; border-radius:50%; background:#d9bd70; box-shadow:0 0 9px rgba(217,189,112,.7); animation:tutorial-pulse 1.6s infinite; }
.tutorial-guide.completing #tutorial-status { color:#a9f5dd; }
.tutorial-guide.completing #tutorial-status i { background:#74e0bb; }
.tutorial-guide.collapsed #tutorial-guide-body { display:none; }
@keyframes tutorial-pulse { 50% { opacity:.35; transform:scale(.75); } }
.tutorial-complete { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:24px; background:rgba(2,8,12,.68); backdrop-filter:blur(10px); }
.tutorial-complete-card { position:relative; width:min(620px,92vw); padding:58px 54px; overflow:hidden; text-align:center; border:1px solid rgba(245,218,141,.72); border-radius:2px 28px 2px 28px; background:linear-gradient(rgba(4,14,20,.58),rgba(4,13,19,.88)),url("assets/ui/adventure1/magic-city-title-v1.png") center/cover; box-shadow:0 35px 90px rgba(0,0,0,.55); }
.tutorial-complete-card p { margin:0 0 14px; color:#efd17e; font:700 9px/1.2 Cinzel,serif; letter-spacing:.28em; }
.tutorial-complete-card h2 { margin:0; font:700 31px/1.35 "Yu Mincho",serif; letter-spacing:.09em; text-shadow:0 3px 14px #000; }
.tutorial-complete-card span { display:block; margin:12px 0 28px; color:rgba(255,255,255,.75); font-size:12px; }
.tutorial-complete-card button { min-width:210px; padding:13px 25px; border:1px solid #f0d184; color:#142425; background:linear-gradient(110deg,#f8e8b8,#d5b35d); font-weight:800; }

/* Runtime asset editor */
.dev-runtime-config { display:grid; grid-template-columns:repeat(3,minmax(230px,1fr)); gap:10px; margin-top:12px; }
.dev-heading-actions { display:flex; align-items:center; gap:7px; }
.dev-heading-actions #dev-motion-jump { width:auto; padding:7px 11px; border:1px solid rgba(111,224,193,.34); color:#a6ead8; background:rgba(27,73,72,.46); font-size:9px; font-weight:800; }
.dev-config-card { padding:13px; border:1px solid rgba(227,205,146,.17); background:linear-gradient(145deg,rgba(20,42,46,.45),rgba(7,15,22,.68)); }
.dev-config-card header { display:grid; margin-bottom:10px; }
.dev-config-card header span { color:#cfb66b; font:800 8px/1.2 Cinzel,serif; letter-spacing:.18em; }
.dev-config-card header strong { color:#f5edd5; font:700 13px/1.4 "Yu Mincho",serif; }
.dev-config-card label { display:grid; gap:3px; margin-top:7px; color:rgba(240,239,225,.55); font:700 8px/1.2 sans-serif; }
.dev-config-card select,.dev-config-card input { min-width:0; width:100%; padding:7px 8px; border:1px solid rgba(229,206,143,.2); color:#f2ecd9; background:#0b1920; font-size:10px; }
.dev-config-row { display:grid; grid-template-columns:1fr 68px; gap:7px; }
.dev-config-card > div:last-child { display:flex; gap:6px; margin-top:10px; }
.dev-config-card button { flex:1; padding:8px; border:1px solid rgba(229,203,131,.28); color:#f0dfad; background:rgba(32,61,62,.55); font-size:9px; font-weight:800; }
.dev-motion-config { grid-column:1/-1; background:linear-gradient(135deg,rgba(19,47,52,.72),rgba(8,15,25,.88)); box-shadow:inset 0 1px rgba(255,239,188,.04); }
.dev-motion-config header small { margin-top:3px; color:rgba(226,231,219,.48); font-size:8px; font-weight:500; }
.dev-motion-workbench { display:grid!important; grid-template-columns:250px minmax(0,1fr); align-items:stretch; gap:12px!important; margin-top:0!important; }
.dev-motion-preview-stage { position:relative; min-height:316px; overflow:hidden; border:1px solid rgba(109,221,196,.28); background:radial-gradient(circle at 50% 65%,rgba(78,178,163,.2),transparent 35%),linear-gradient(180deg,#1b2d36,#09131b 80%); box-shadow:inset 0 0 42px rgba(0,0,0,.38); }
#dev-motion-preview-canvas { display:block; width:100%; height:100%; min-height:316px; }
.dev-motion-preview-stage::after { content:""; position:absolute; left:20%; right:20%; bottom:49px; height:24px; border:1px solid rgba(220,193,117,.28); border-radius:50%; box-shadow:0 0 28px rgba(83,218,188,.15); pointer-events:none; }
.dev-motion-preview-caption { position:absolute; left:12px; right:12px; bottom:10px; z-index:2; display:grid; padding-top:22px; background:linear-gradient(transparent,rgba(3,9,14,.82)); pointer-events:none; }
.dev-motion-preview-caption strong { color:#f4e6b8; font:700 11px/1.35 "Yu Mincho",serif; }
.dev-motion-preview-caption span { color:rgba(225,239,235,.58); font-size:8px; }
.dev-motion-preview-badge { position:absolute; top:9px; right:9px; padding:4px 6px; border:1px solid rgba(110,224,194,.35); color:#8ce4cc; background:rgba(4,14,20,.72); font:800 7px/1 Cinzel,serif; letter-spacing:.14em; }
.dev-motion-controls { min-width:0; display:flex!important; flex-direction:column; gap:0!important; margin-top:0!important; }
.dev-motion-editor-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:7px 9px; }
.dev-motion-source { margin:9px 0 0; padding:8px 10px; border:1px solid rgba(108,214,190,.15); color:#bfe9dd; background:rgba(4,13,19,.48); font:600 9px/1.45 monospace; }
.dev-motion-help { display:grid!important; grid-template-columns:auto 1fr; gap:8px!important; margin-top:7px!important; padding:8px 9px; color:rgba(235,237,222,.56); background:rgba(108,214,190,.05); font-size:8px; line-height:1.5; }
.dev-motion-help b { color:#d9c47f; }
.dev-motion-actions { display:grid!important; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:7px!important; }
.dev-motion-actions button:nth-last-child(-n+2) { color:rgba(242,230,195,.72); background:rgba(61,43,37,.48); }
.dev-config-feedback { margin:10px 0 0; padding:8px 10px; border-left:2px solid #69cdb3; color:rgba(235,238,225,.58); background:rgba(3,11,16,.42); font-size:9px; }

@media (max-width: 900px) {
  .class-selection-layout { grid-template-columns:1fr; }
  .identity-layout { grid-template-columns:1fr 1.1fr; width:94vw; }
  .dev-runtime-config { grid-template-columns:1fr; }
  .dev-motion-workbench { grid-template-columns:220px minmax(0,1fr); }
  .dev-motion-editor-grid { grid-template-columns:1fr 1fr; }
  .dev-motion-actions { grid-template-columns:1fr 1fr; }
  .tutorial-guide { top:170px; width:286px; }
}
@media (max-width: 650px) {
  .dev-motion-workbench { grid-template-columns:1fr; }
  .dev-motion-preview-stage,#dev-motion-preview-canvas { min-height:280px; }
  .title-stage { align-items:flex-end; padding:25px 23px 66px; }
  .title-copy { margin:0; }
  .title-copy h1 { font-size:39px; }
  .title-features,.title-corner { display:none; }
  .onboarding-header { align-items:flex-start; min-height:82px; padding:14px 16px; }
  .onboarding-header strong { font-size:17px; }
  .onboarding-header small,.onboarding-header ol { display:none; }
  .class-selection-layout { width:94vw; margin-top:16px; }
  .character-slot-list { grid-template-columns:1fr; }
  .character-select-layout { width:94vw; margin-top:22px; }
  .premium-class-grid { grid-template-columns:1fr; }
  .premium-class-grid .class-card { min-height:206px; grid-template-columns:136px 1fr; }
  .class-portrait-shell { width:136px; }
  .class-card-copy { padding:25px 15px 20px 3px; }
  .identity-layout { grid-template-columns:1fr; width:94vw; }
  .premium-preview-wrap { min-height:330px; }
  .premium-creator-controls { padding:20px; }
  .premium-stat-list { grid-template-columns:1fr 1fr; }
  .tutorial-guide { top:108px; left:8px; width:min(285px,calc(100vw - 16px)); }
}

@media (max-width: 560px) {
  .inventory-grid { grid-template-columns: repeat(4, 1fr); }
  .equipment-panel .panel-heading small { display: none; }
  .equipment-footer { align-items: flex-start; gap: 8px; }
  .dev-summary,.dev-tools { grid-template-columns: 1fr; }
  .dev-enemy-tools { grid-template-columns:1fr 1fr; }
  .dev-enemy-tools > div { grid-column:1 / -1; }
  .dev-character-grid { grid-template-columns: 1fr; }
  .dev-character-card { min-height: 88px; }
  .dev-unavailable small { width: 100%; margin-left: 0; }
}

@media (max-width: 520px) {
  .equipment-and-bag { grid-template-columns: 1fr; }
  .inventory-grid { grid-template-columns: repeat(6, 1fr); }
  .character-lab-layout { grid-template-columns: 1fr; }
  .mesh-proof-heading { align-items: start; flex-direction: column; }
  .mesh-proof-badges { justify-content: flex-start; }
  .mesh-proof-layout { grid-template-columns: 1fr; }
  .mesh-preview-stage { min-height: 440px; }
  .mesh-proof-controls { border-top: 1px solid rgba(255,255,255,.07); border-left: 0; }
  .sprite-proof-heading, .sprite-proof-grid { grid-template-columns: 1fr; }
  .sprite-proof-notes { grid-column: auto; grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Sunlit Arcana HUD — warm ornament, readable combat information, and a
   deliberately light footprint so the field remains the main visual.
   ------------------------------------------------------------------------- */
:root {
  --hud-night: rgba(13, 20, 29, .86);
  --hud-night-soft: rgba(17, 27, 35, .66);
  --hud-line: rgba(246, 211, 133, .34);
  --hud-line-soft: rgba(240, 231, 200, .13);
  --hud-ivory: #fff6d8;
  --hud-gold: #efc66c;
  --hud-mint: #8de0c6;
}

#hud { text-shadow: 0 1px 3px rgba(0, 0, 0, .72); }
#hud::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 128px;
  pointer-events: none;
  background: linear-gradient(rgba(8, 17, 25, .17), transparent);
}
.glass {
  border-color: var(--hud-line-soft);
  background:
    linear-gradient(118deg, rgba(255,255,255,.045), transparent 28%),
    linear-gradient(145deg, var(--hud-night), rgba(10, 16, 25, .78));
  box-shadow: 0 12px 34px rgba(1, 7, 13, .28), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(9px) saturate(1.12);
}

.player-panel {
  left: 20px;
  top: 20px;
  width: 326px;
  min-height: 78px;
  gap: 13px;
  padding: 11px 14px 11px 11px;
  border: 1px solid var(--hud-line);
  border-radius: 7px 18px 18px 7px;
  background:
    radial-gradient(circle at 12% 40%, rgba(239,198,108,.12), transparent 27%),
    linear-gradient(110deg, rgba(23,33,42,.95), rgba(10,17,26,.78));
}
.player-panel::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 5px;
  width: 52px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hud-gold));
  opacity: .6;
}
.portrait {
  position: relative;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border: 1px solid rgba(255,230,159,.68);
  border-radius: 50%;
  color: var(--hud-ivory);
  background: radial-gradient(circle at 38% 30%, #53616c, #1d2a35 64%, #0d141c);
  box-shadow: 0 0 0 3px rgba(15,23,31,.9), 0 0 0 4px rgba(231,193,108,.38), inset 0 1px rgba(255,255,255,.16);
}
.portrait::after {
  content: "◆";
  position: absolute;
  right: -8px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid #e6bf68;
  border-radius: 50%;
  color: #f5d985;
  background: #17222d;
  font-size: 7px;
}
.name-line { align-items: center; margin: 0 1px 6px; font-size: 13px; }
.name-line strong { color: var(--hud-ivory); letter-spacing: .035em; }
.name-line span {
  padding: 2px 7px;
  border: 1px solid rgba(239,198,108,.32);
  border-radius: 99px;
  color: #f6d98b;
  background: rgba(239,198,108,.07);
  font-size: 9px;
}
.meter, .target-meter, .target-break-meter {
  height: 13px;
  margin: 3px 0;
  border: 1px solid rgba(245,237,211,.16);
  border-radius: 3px;
  background: rgba(2,7,12,.72);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5);
}
.meter span, .target-meter span, .target-break-meter span { position: relative; }
.meter span::after, .target-meter span::after {
  content: "";
  position: absolute;
  inset: 1px 2px auto;
  height: 35%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
}
.meter b, .target-meter b, .target-break-meter b {
  font-size: 9px;
  line-height: 12px;
  letter-spacing: .025em;
}
.meter.hp span { background: linear-gradient(90deg,#861c31,#e84c5b 70%,#ff7a78); }
.meter.mp span { background: linear-gradient(90deg,#174e91,#2989db 70%,#69c1f7); }
.meter.sp span { background: linear-gradient(90deg,#987018,#e4b52d 70%,#ffe06c); }
.meter.hp #hp-shield-fill { position: absolute; inset: 0 auto 0 0; z-index: 1; background: linear-gradient(90deg,#b75a13,#ffad36 72%,#ffe092); box-shadow: 0 0 10px rgba(255,160,48,.8); }
.meter.hp #hp-fill { position: absolute; inset: 0 auto 0 0; z-index: 2; }
.meter.hp #hp-text { z-index: 3; }

.location-panel {
  left: 20px;
  top: 108px;
  min-width: 208px;
  gap: 2px;
  padding: 8px 13px 9px 35px;
  border-radius: 4px 13px 13px 4px;
  border-left: 2px solid rgba(129,222,195,.75);
}
.location-panel::before {
  content: "✦";
  position: absolute;
  left: 12px;
  top: 14px;
  color: var(--hud-mint);
  font-size: 14px;
  filter: drop-shadow(0 0 6px rgba(111,226,194,.5));
}
.location-panel span { color: var(--hud-mint); font-size: 8px; letter-spacing: .21em; }
.location-panel strong { color: var(--hud-ivory); font-size: 14px; }
.location-panel small { color: #b9c7c5; font-size: 9px; }

.target-panel {
  top: 20px;
  width: min(390px, 34vw);
  min-width: 310px;
  padding: 10px 23px 12px;
  border-radius: 5px 5px 15px 15px;
  border-top-color: rgba(255,225,151,.56);
  background:
    radial-gradient(ellipse at 50% 0, rgba(203,113,91,.15), transparent 58%),
    linear-gradient(180deg, rgba(18,27,36,.94), rgba(9,15,23,.77));
}
.target-panel::before, .target-panel::after {
  content: "◆";
  position: absolute;
  top: 29px;
  color: #d7b76b;
  font-size: 7px;
  opacity: .8;
}
.target-panel::before { left: 9px; }
.target-panel::after { right: 9px; }
.target-panel > div:first-child { align-items: center; margin-bottom: 6px; font-size: 13px; }
.target-panel > div:first-child strong { color: var(--hud-ivory); letter-spacing: .06em; }
.target-panel > div:first-child span { font-size: 10px; }
.target-meter { height: 15px; }
.target-break-meter { height: 9px; margin-top: 6px; }

.menu-button, .dev-button {
  top: 20px;
  min-width: auto;
  height: 39px;
  padding: 0 14px;
  border-radius: 5px 13px 5px 13px;
  letter-spacing: .035em;
}
.menu-button { right: 20px; border-color: rgba(231,195,111,.52); }
.dev-button { right: 143px; border-color: rgba(119,224,196,.38); }
.menu-button:hover, .dev-button:hover { translate: 0 -1px; filter: brightness(1.12); }
.help {
  top: 68px;
  right: 20px;
  width: 194px;
  padding: 10px 13px;
  border-radius: 10px 3px 10px 10px;
  color: #c4cfcd;
  background: linear-gradient(145deg, rgba(14,23,31,.68), rgba(8,14,22,.52));
  opacity: .82;
}
.help b { color: #f1d68c; font-size: 10px; letter-spacing: .12em; }
.help span { font-size: 10px; line-height: 1.45; }

.chat {
  left: 20px;
  bottom: 94px;
  width: min(438px, 40vw);
  height: 158px;
  border-radius: 5px 15px 5px 5px;
  border-color: rgba(201,224,215,.14);
  background:
    linear-gradient(90deg, rgba(11,19,27,.63), rgba(10,16,24,.42)),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.018) 23px);
  box-shadow: 0 10px 28px rgba(0,0,0,.16), inset 2px 0 rgba(120,218,190,.24);
}
#chat-log { height: 91px; padding: 10px 39px 7px 13px; font-size: 11px; }
.chat-tabs { height: 27px; padding-left: 10px; border-top-color: rgba(223,235,225,.09); }
.chat-tabs button { padding: 0 10px; font-size: 9px; letter-spacing: .04em; }
.chat-tabs button.active { color: #fff0b7; border-bottom-color: #e7c36c; background: linear-gradient(transparent, rgba(228,188,93,.08)); }
.chat-compose { height: 40px; padding: 5px 8px 7px 11px; background: rgba(3,8,13,.3); }
.chat-compose input {
  border-color: rgba(142,179,170,.28);
  color: #edf4ed;
  background: rgba(6,13,20,.67);
}
.chat-compose input:focus { outline: 1px solid rgba(132,224,198,.6); border-color: transparent; }
.chat-compose button { border-color: #b99651; background: linear-gradient(#f2d884,#cda750); }
.chat-toggle { border-color: rgba(229,198,119,.3); background: rgba(8,15,22,.66); }

.hotbar {
  bottom: 19px;
  gap: 5px;
  padding: 7px 11px 8px;
  border: 1px solid rgba(232,202,130,.32);
  border-radius: 18px 18px 6px 6px;
  background:
    linear-gradient(180deg, rgba(38,45,53,.91), rgba(9,15,22,.94)),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.025) 19px);
  box-shadow: 0 12px 30px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.08);
}
.hotbar::before, .hotbar::after {
  content: "";
  position: absolute;
  top: 13px;
  width: 18px;
  height: 34px;
  border-top: 1px solid rgba(235,199,111,.48);
  border-bottom: 1px solid rgba(235,199,111,.25);
  pointer-events: none;
}
.hotbar::before { left: -13px; transform: skewY(-28deg); }
.hotbar::after { right: -13px; transform: skewY(28deg); }
.slot {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(199,185,147,.46);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 40%, rgba(115,137,145,.13), transparent 62%),
    linear-gradient(145deg, rgba(34,42,51,.97), rgba(10,15,22,.98));
  box-shadow: inset 0 0 0 2px rgba(1,5,9,.4), inset 0 1px rgba(255,255,255,.07);
  transition: transform .12s ease, border-color .12s ease, filter .12s ease;
}
.slot:hover { transform: translateY(-2px); filter: brightness(1.13); }
.slot.active {
  border-color: #ffe18a;
  transform: translateY(-3px);
  box-shadow: 0 0 16px rgba(255,196,73,.28), inset 0 0 0 2px rgba(1,5,9,.35);
}
.slot .key {
  left: 4px;
  top: 3px;
  min-width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,225,153,.22);
  border-radius: 3px;
  color: #ffe7aa;
  background: rgba(4,8,12,.56);
  font-size: 8px;
}
.slot .skill-icon { font-size: 23px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
.slot .skill-name { bottom: 4px; color: #e9ece6; font-size: 7px; text-shadow: 0 1px 3px #000; }

.class-mechanic-panel {
  right: 20px;
  bottom: 94px;
  width: 230px;
  padding: 11px 13px 12px;
  border-radius: 15px 5px 15px 5px;
  border-color: rgba(232,202,130,.28);
  background:
    radial-gradient(circle at 86% 10%, rgba(239,198,108,.09), transparent 38%),
    linear-gradient(145deg, rgba(23,31,40,.91), rgba(8,14,22,.88));
}
.class-mechanic-panel header { padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.07); }
.class-mechanic-panel header b { color: var(--hud-ivory); font-family: Georgia, "Yu Mincho", serif; font-size: 13px; }

.party-panel {
  position: absolute;
  z-index: 18;
  right: 20px;
  top: 175px;
  width: 268px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(132,224,198,.25);
  border-radius: 14px 5px 14px 5px;
  background:
    radial-gradient(circle at 92% 0, rgba(115,224,194,.1), transparent 36%),
    linear-gradient(145deg,rgba(16,28,36,.91),rgba(7,13,21,.88));
  box-shadow: 0 14px 36px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.05);
  user-select: none;
  transition: width .15s ease, filter .15s ease;
}
.party-panel.dragging { filter: brightness(1.1); box-shadow: 0 18px 44px rgba(0,0,0,.4), 0 0 18px rgba(117,220,191,.12); }
#party-panel { right: 286px; }
#healer-thread-status {
  right: 18px;
  bottom: 105px;
  width: 282px;
  padding: 15px 17px 14px 23px;
  overflow: hidden;
  border: 1px solid rgba(146,255,220,.38);
  border-radius: 18px 5px 18px 5px;
  background:
    radial-gradient(circle at 10% 50%,rgba(112,255,215,.18),transparent 33%),
    linear-gradient(135deg,rgba(11,31,38,.94),rgba(8,15,27,.91));
  box-shadow: 0 15px 38px rgba(0,0,0,.4), 0 0 26px rgba(92,237,198,.1), inset 0 1px rgba(255,255,255,.09);
  pointer-events: none;
}
#healer-thread-status::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 9px;
  bottom: 9px;
  width: 5px;
  border-radius: 9px;
  background: linear-gradient(#fff6b6,#72f5cd,#91b9ff);
  box-shadow: 0 0 12px #71efd0, 0 0 24px rgba(255,228,133,.42);
  animation: healer-thread-hud-pulse 2.4s ease-in-out infinite;
}
#healer-thread-status::after {
  content: "✦";
  position: absolute;
  right: 12px;
  top: 8px;
  color: #fff0a5;
  text-shadow: 0 0 9px #6dffd7;
  animation: healer-thread-hud-pulse 1.7s ease-in-out infinite reverse;
}
#healer-thread-mode { color: #eafff7; font: 700 15px Georgia,"Yu Mincho",serif; letter-spacing: .12em; text-shadow: 0 0 12px rgba(100,255,210,.44); }
#healer-thread-detail { margin: 9px 0 7px; padding-right: 12px; color: #e9f2e9; font-size: 11px; line-height: 1.68; }
#healer-thread-feedback { display: block; min-height: 17px; color: #ffe39a; font-size: 11px; font-weight: 700; text-shadow: 0 0 9px rgba(255,217,112,.28); }
@keyframes healer-thread-hud-pulse { 0%,100% { opacity: .62; filter: brightness(.9); } 50% { opacity: 1; filter: brightness(1.32); } }
.dev-tutorial-entry { margin: 10px 0 16px; padding: 14px; border: 1px solid #aa9762; border-radius: 8px; background: linear-gradient(120deg,#183e3b,#182832); }
.dev-tutorial-entry button { padding: 10px 16px; color: #201f17; background: linear-gradient(#f5e2ac,#c7ab69); border: 1px solid #f5e2ac; border-radius: 5px; font-weight: 700; }
.dev-tutorial-entry p { margin: 8px 0; color: #dfdfcb; font-size: 12px; line-height: 1.65; }
.dev-tutorial-entry small { color: #a1baaf; }
.party-panel-header {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 7px 7px;
  border-bottom: 1px solid rgba(139,220,199,.13);
  cursor: move;
  touch-action: none;
}
.party-panel-header > div { display: flex; align-items: baseline; gap: 8px; }
.party-panel-header span { color: #85dec6; font-size: 9px; font-weight: 900; letter-spacing: .19em; }
.party-panel-header strong { color: #e9d797; font-size: 9px; }
.party-panel-header button {
  width: 26px;
  height: 23px;
  padding: 0;
  border: 1px solid rgba(236,207,137,.26);
  border-radius: 7px;
  color: #f1d98f;
  background: rgba(7,13,20,.55);
  line-height: 20px;
}
.party-member-list {
  display: grid;
  gap: 5px;
  max-height: min(490px, calc(100vh - 280px));
  padding-top: 7px;
  overflow-y: auto;
  scrollbar-color: rgba(123,214,190,.45) rgba(7,13,20,.5);
  scrollbar-width: thin;
}
.party-member {
  position: relative;
  width: 100%;
  min-height: 55px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 7px;
  padding: 6px 8px 6px 6px;
  border: 1px solid rgba(210,222,214,.13);
  border-radius: 9px;
  color: #edf4ec;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(110deg,rgba(35,45,52,.82),rgba(13,21,29,.72));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.party-member:hover { border-color: rgba(139,225,201,.5); background: linear-gradient(110deg,rgba(42,56,61,.9),rgba(15,25,32,.82)); }
.party-member.selected { border-color: #86e0c8; box-shadow: inset 3px 0 #79d9c0, 0 0 13px rgba(100,220,188,.13); }
.party-member.threaded { border-color: #f2d47d; box-shadow: inset 3px 0 #e6bd57, 0 0 14px rgba(242,201,99,.17); }
.party-member.threaded.enemy-thread { border-color: #ce92f0; box-shadow: inset 3px 0 #a361d0, 0 0 14px rgba(186,104,226,.18); }
.party-job-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  align-self: center;
  border: 1px solid rgba(243,218,151,.29);
  border-radius: 50%;
  color: #ffebaa;
  background: radial-gradient(circle at 38% 32%,#41505a,#17232d 70%);
  font-size: 15px;
}
.party-member-copy { min-width: 0; display: grid; gap: 3px; }
.party-member-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.party-member-name b { overflow: hidden; color: #fff5d4; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.party-member-name small { flex: 0 0 auto; color: #d4c17f; font-size: 8px; }
.party-mini-meter {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(0,0,0,.62);
}
.party-mini-meter i { display: block; width: 100%; height: 100%; transition: width .15s ease; }
.party-mini-meter.hp i { background: linear-gradient(90deg,#98233b,#ef5965); }
.party-mini-meter.mp i { background: linear-gradient(90deg,#24579c,#50a4e4); }
.party-mini-meter.sp i { background: linear-gradient(90deg,#9f761b,#efc744); }
.party-member-resources { display: flex; justify-content: space-between; color: #91a4a4; font-size: 7px; }
.party-member .thread-mark { position: absolute; right: 5px; top: 22px; color: #ffe293; font-size: 9px; filter: drop-shadow(0 0 5px currentColor); }
.party-panel footer { display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 5px 1px;color:#869a9a;font-size:8px;text-align:center; }
.party-panel footer button { flex:none;border:1px solid rgba(196,126,99,.55);border-radius:4px;padding:4px 6px;color:#ffd8c2;background:rgba(91,43,35,.58);font-size:8px;cursor:pointer; }
.party-panel footer button[hidden] { display:none; }
.party-panel.collapsed { width: 158px; }
.party-panel.collapsed .party-member-list, .party-panel.collapsed footer { display: none; }
.party-panel.collapsed .party-panel-header { padding-bottom: 0; border-bottom: 0; }

.menu-panel, .game-window {
  border: 1px solid rgba(229,193,109,.4);
  background:
    radial-gradient(circle at 30% 0, rgba(232,197,114,.09), transparent 35%),
    linear-gradient(145deg, rgba(30,35,44,.98), rgba(10,15,23,.98));
  box-shadow: 0 24px 70px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.06);
}
.menu-panel { top: 67px; right: 20px; }
.menu-panel > button:not([data-close-panel]) {
  border-color: rgba(216,196,151,.18);
  background: linear-gradient(145deg,rgba(32,40,48,.92),rgba(15,21,29,.92));
}
.menu-panel > button:not([data-close-panel]):hover { border-color: #d9bb70; background: linear-gradient(145deg,rgba(52,50,46,.95),rgba(21,26,33,.95)); }
.panel-heading { padding: 2px 3px 10px; border-bottom: 1px solid rgba(236,204,129,.18); }
.panel-heading strong { color: var(--hud-ivory); font-family: Georgia, "Yu Mincho", serif; letter-spacing: .07em; }
.equipment-panel {
  background:
    radial-gradient(circle at 31% 42%, rgba(109,81,122,.18), transparent 34%),
    linear-gradient(145deg, rgba(31,33,41,.985), rgba(9,14,22,.985));
}
.loadout-board, .bag-column, .equipment-stats {
  border-color: rgba(218,183,103,.24);
  background-color: rgba(6,11,17,.55);
}
.loadout-board::before {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 46%;
  translate: -50% -50%;
  color: rgba(226,190,109,.08);
  font-size: 180px;
  pointer-events: none;
}
.gear-slot, .item-slot {
  border-color: rgba(175,170,157,.3);
  background: linear-gradient(145deg,rgba(38,43,51,.98),rgba(13,18,25,.98));
}
.gear-slot:hover, .item-slot:hover, .item-slot.selected { border-color: #e6c873; box-shadow: 0 0 14px rgba(212,165,72,.18), inset 0 0 0 1px rgba(241,203,113,.22); }

@media (max-width: 900px) {
  .player-panel { left: 10px; top: 10px; width: 294px; }
  .location-panel { left: 10px; top: 96px; }
  .target-panel { top: 10px; width: 330px; }
  .menu-button { right: 10px; top: 10px; }
  .dev-button { right: 131px; top: 10px; }
  .help { right: 10px; top: 58px; }
  .chat { left: 10px; bottom: 82px; width: 390px; }
  .class-mechanic-panel { right: 10px; bottom: 82px; }
  .hotbar { bottom: 12px; padding: 5px 8px 6px; }
  .slot { width: 45px; height: 48px; }
}

@media (max-width: 740px) {
  .player-panel { width: 268px; min-height: 68px; padding: 8px 10px; }
  .portrait { width: 50px; height: 50px; flex-basis: 50px; }
  .target-panel { top: 84px; min-width: 300px; width: 58vw; }
  .location-panel { top: 158px; }
  .chat { width: min(94vw, 410px); left: 8px; bottom: 70px; }
  .hotbar { gap: 3px; padding-inline: 5px; }
  .slot { width: 38px; height: 45px; }
  .class-mechanic-panel { bottom: 70px; }
  .party-panel { right: 8px; top: 175px; width: 242px; }
}

/* Final cascade: preserve the atelier treatment above legacy compatibility rules. */
.menu-panel,
.game-window { z-index: 40; }
.menu-panel {
  width: 330px;
  max-height: calc(100dvh - 84px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 13px;
  border-radius: 3px 17px 3px 17px;
  background:
    radial-gradient(circle at 28% -10%, rgba(92, 204, 179, .1), transparent 39%),
    radial-gradient(circle at 98% 92%, rgba(188, 130, 57, .12), transparent 38%),
    linear-gradient(145deg, rgba(18, 31, 39, .985), rgba(4, 10, 16, .99));
}
.menu-panel > button:not([data-close-panel]) {
  min-height: 58px;
  grid-template-columns: 39px 1fr;
  margin-top: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  border-color: rgba(225, 205, 157, .13);
  background: linear-gradient(90deg, rgba(33, 51, 57, .38), transparent);
}
.menu-panel > button:not([data-close-panel]):hover {
  border-color: rgba(233, 201, 123, .45);
  background: linear-gradient(90deg, rgba(62, 78, 72, .54), rgba(15, 24, 30, .28));
}
.menu-panel > button[hidden] { display: none; }
.menu-panel > button.logout-entry { color: #ffd8c2; background: linear-gradient(90deg, rgba(111, 48, 35, .42), rgba(15, 24, 30, .28)); }
.menu-panel > button.character-select-entry { color: #fff0bd; background: linear-gradient(90deg, rgba(105, 83, 35, .42), rgba(15, 24, 30, .28)); }
.menu-panel > button.login-entry { color: #d9ffe9; background: linear-gradient(90deg, rgba(34, 105, 81, .46), rgba(15, 24, 30, .28)); }
.menu-symbol { grid-row: 1 / 3; width: 31px; height: 31px; color: var(--arcana-gold-hi); }
.menu-symbol .ui-glyph { width: 23px; height: 23px; }

/* Readable descriptions: these are instructional text, not decorative labels. */
.item-detail { min-height: 108px; grid-template-columns: minmax(0, 1fr) 92px; padding: 13px; }
.item-detail b { font-size: 15px; line-height: 1.4; }
.item-detail small { margin-top: 7px; color: #d1dad7; font-size: 14px; line-height: 1.65; }
.item-detail > button { min-height: 42px; font-size: 13px; }
.drag-hint { font-size: 12px; line-height: 1.6; }
.skill-tree-panel { width: min(1240px, calc(100vw - 24px)); height: min(760px, calc(100vh - 96px)); }
.skill-tree-hero span { font-size: 10px; }
.skill-tree-hero p { color: #c4cecb; font-size: 13px; line-height: 1.45; }
.skill-tree-legend { font-size: 11px; }
.skill-tree-branch > header small { font-size: 9px; }
.skill-tree-node { grid-template-columns: 48px minmax(0, 1fr) 76px; min-height: 104px; padding: 10px 9px 10px 6px; }
.skill-tree-node-name b { font-size: 14px; line-height: 1.35; }
.skill-tree-node-name em { font-size: 9px; }
.skill-tree-node-copy p { margin: 7px 0 6px; color: #c2cfcb; font-size: 12px; line-height: 1.55; }
.skill-tree-node-copy small { display: block; color: #d2b978; font-size: 10px; line-height: 1.45; letter-spacing: .02em; }
.skill-mastery { gap: 7px; margin-top: 8px; }
.skill-mastery > span { font-size: 10px; }
.skill-mastery > i { height: 5px; }
.skill-mastery > em { font-size: 9px; }
.skill-mastery > small { font-size: 9px; }
.skill-tree-node-state { min-width: 72px; }
.skill-tree-node-state strong { font-size: 12px; }
.skill-tree-node-state span { max-width: 76px; font-size: 10px; line-height: 1.35; text-align: right; white-space: normal; }
.skill-tree-footer { min-height: 34px; padding-top: 10px; font-size: 11px; }
.skill-tree-footer strong { font-size: 11px; }

.party-member-list { gap: 0; }
.party-member {
  border-width: 0 0 1px;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(31, 48, 54, .44), rgba(9, 19, 26, .18));
  box-shadow: none;
}
.party-member:hover { background: linear-gradient(90deg, rgba(44, 68, 70, .66), rgba(12, 25, 31, .36)); }
.party-member.selected { background: linear-gradient(90deg, rgba(49, 101, 90, .44), rgba(10, 23, 29, .24)); box-shadow: inset 2px 0 #70d6bb; }
.party-job-icon {
  border-radius: 0;
  clip-path: polygon(50% 0, 93% 24%, 93% 76%, 50% 100%, 7% 76%, 7% 24%);
}

.hotbar {
  padding: 9px 13px 10px;
  border-radius: 3px 17px 3px 17px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(98, 211, 183, .12), transparent 58%),
    linear-gradient(180deg, rgba(22, 36, 44, .96), rgba(4, 10, 16, .97));
}
.slot {
  width: 55px;
  height: 58px;
  border-radius: 1px;
  clip-path: polygon(0 7px, 7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px));
}
.slot .skill-icon { top: 10px; font-size: 27px; }

@media (max-width: 900px) {
  .menu-button { right: 8px; top: 10px; }
  .dev-button { right: 116px; top: 10px; }
  .sound-button { right: 224px; top: 10px; }
  .hotbar { padding: 7px 9px 8px; }
  .slot { width: 45px; height: 50px; }
  .slot .skill-icon { top: 8px; font-size: 23px; }
}

@media (max-width: 740px) {
  .menu-button,
  .dev-button,
  .sound-button { min-width: 88px; width: 88px; height: 34px; padding: 0 8px; gap: 6px; }
  .menu-button { right: 8px; }
  .dev-button { right: 102px; }
  .sound-button { right: 196px; }
  .help { display: none; }
  .hotbar { padding: 6px 7px 7px; }
  .slot { width: 38px; height: 46px; }
  .slot .skill-icon { top: 7px; font-size: 21px; }
  .menu-panel { top: 54px; right: 8px; width: min(330px, calc(100vw - 16px)); max-height: calc(100dvh - 62px); }
}