:root {
  --gold: #d6a84e; --gold2: #f3d58a; --goldd: #7a5a24;
  --ink: #ece2c8; --ink2: #b4a684; --dim: #7d725c;
  --bg: rgba(14, 11, 8, .82); --bg2: rgba(26, 20, 14, .92);
  --line: rgba(214, 168, 78, .45);
  --hp: #c8302a; --hp2: #ff6a4a; --mp: #2a5ec8; --mp2: #5aa8ff;
  --font: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --serif: "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;
  --s: 1;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d0b09; color: var(--ink); font-family: var(--font); font-size: 13px; user-select: none; -webkit-user-select: none; touch-action: none; }
canvas#game { position: fixed; inset: 0; display: block; }
button { font-family: inherit; color: inherit; cursor: pointer; }
input, select { font-family: inherit; }
.hidden { display: none !important; }

/* ── 공통 ── */
.btn { background: linear-gradient(#3a2e1e, #1e170f); border: 1px solid var(--goldd); color: var(--ink); padding: 6px 12px; border-radius: 4px; font-size: 13px; }
.btn:hover { border-color: var(--gold); color: #fff; }
.btn.gold { background: linear-gradient(#b8893a, #7a5520); border-color: var(--gold2); color: #fff8e4; text-shadow: 0 1px 0 #3a2508; font-weight: 700; }
.btn.big { padding: 11px 18px; font-size: 15px; width: 100%; }
.btn.on { background: linear-gradient(#5a8a3a, #2e5520); border-color: #a8e07a; }
.btn.red { background: linear-gradient(#8a2e22, #4e140e); border-color: #e07a6a; }
.btn:disabled { opacity: .45; cursor: default; }
.bar { position: relative; height: 15px; background: #1a120c; border: 1px solid #000; outline: 1px solid rgba(214, 168, 78, .35); border-radius: 2px; overflow: hidden; }
.bar > div { position: absolute; inset: 0 auto 0 0; transition: width .15s; }
.bar > span { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 14px; font-weight: 700; text-shadow: 0 0 2px #000, 0 1px 1px #000; }
.bar.hp > div { background: linear-gradient(#ff6d55, #b8221c 55%, #7a110c); }
.bar.mp > div { background: linear-gradient(#6ab8ff, #2a5ec8 55%, #183a88); }

/* ── 로그인 ── */
#login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, #3a2a16 0%, #120d08 60%, #070504 100%); z-index: 50; }
#login::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 220, 150, .02) 0 2px, transparent 2px 9px); pointer-events: none; }
.login-box { position: relative; width: min(360px, 92vw); padding: 30px 26px 22px; background: var(--bg2); border: 1px solid var(--goldd); box-shadow: 0 0 0 1px #000, 0 0 40px rgba(214, 168, 78, .15), inset 0 0 30px rgba(0, 0, 0, .6); border-radius: 6px; }
.logo { font-family: var(--serif); font-size: 44px; font-weight: 800; text-align: center; letter-spacing: 6px; background: linear-gradient(#fff3c8, #d6a84e 55%, #7a5520); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 2px #000); }
.logo small { display: block; font-family: var(--font); font-size: 11px; letter-spacing: 8px; color: var(--ink2); -webkit-text-fill-color: var(--ink2); font-weight: 400; }
.sub { text-align: center; color: var(--dim); font-size: 12px; margin: 2px 0 18px; letter-spacing: 2px; }
.login-box label { display: block; color: var(--ink2); font-size: 12px; margin-bottom: 10px; }
.login-box input { display: block; width: 100%; margin-top: 4px; padding: 10px; background: #0b0806; border: 1px solid #4a3a22; color: var(--ink); border-radius: 3px; font-size: 15px; user-select: text; -webkit-user-select: text; }
.login-box input:focus { outline: none; border-color: var(--gold); }
#lgGmWrap { margin: 2px 0 14px; color: var(--dim); font-size: 12px; }
#lgGmWrap summary { cursor: pointer; }
#lgErr { color: #ff8a6a; min-height: 18px; margin-top: 8px; text-align: center; font-size: 12px; }
.hint { color: var(--dim); font-size: 11px; text-align: center; line-height: 1.5; }

/* ── HUD ── */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud #centerMsg, #hud #lootLog, #hud #notice, #hud #freeCamBadge, #hud #expbar, #hud #buffs { pointer-events: none; }

#status { position: absolute; left: calc(10px + env(safe-area-inset-left)); top: 10px; display: flex; gap: 8px; align-items: center; transform: scale(var(--s)); transform-origin: 0 0; }
.portrait { position: relative; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #5a4630, #1a120a); border: 2px solid var(--gold); box-shadow: 0 0 0 2px #000, 0 0 10px rgba(0, 0, 0, .8); overflow: hidden; }
.pface { position: absolute; left: 50%; top: 52%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: #f1c27d; box-shadow: 0 18px 0 6px #3a5a8a; }
.portrait span { position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); background: #000; border: 1px solid var(--gold); border-radius: 8px; padding: 0 6px; font-size: 11px; font-weight: 800; color: var(--gold2); }
.bars { width: 220px; display: flex; flex-direction: column; gap: 3px; }
.bars .nm { font-weight: 700; font-size: 14px; text-shadow: 0 1px 2px #000; display: flex; align-items: center; gap: 6px; }
.gmtag { background: #c8501a; color: #fff; font-size: 10px; padding: 0 5px; border-radius: 3px; }
#buffs { position: absolute; left: 70px; top: 66px; display: flex; gap: 4px; }
.buff { width: 26px; height: 26px; border: 1px solid var(--gold); background: #000a; border-radius: 3px; font-size: 15px; display: flex; align-items: center; justify-content: center; position: relative; }
.buff small { position: absolute; bottom: -12px; font-size: 9px; color: var(--ink2); }

#target { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: min(300px, 40vw); text-align: center; background: var(--bg); border: 1px solid var(--line); padding: 4px 8px 6px; border-radius: 3px; }
#tgName { font-weight: 700; font-size: 13px; margin-bottom: 3px; color: #ffd0b0; }
.bar.thp > div { background: linear-gradient(#ff8a55, #b83a1c); }

#topright { position: absolute; right: calc(10px + env(safe-area-inset-right)); top: 10px; display: flex; gap: 8px; align-items: flex-start; transform: scale(var(--s)); transform-origin: 100% 0; }
#menuBtns { display: flex; gap: 5px; }
.mbtn { width: 46px; height: 50px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; }
.mbtn i { font-style: normal; font-size: 19px; line-height: 1; }
.mbtn b { font-size: 10px; font-weight: 500; color: var(--ink2); margin-top: 3px; }
.mbtn:hover, .mbtn.on { border-color: var(--gold2); background: rgba(60, 44, 20, .9); }
.mbtn.gmb { border-color: #c8501a; }
.mini-wrap { position: relative; width: 150px; }
#minimap { width: 150px; height: 150px; display: block; border: 2px solid var(--goldd); outline: 1px solid #000; border-radius: 4px; background: #000; cursor: pointer; }
#zoneName { text-align: center; font-weight: 700; margin-top: 3px; font-size: 12px; color: var(--gold2); text-shadow: 0 1px 2px #000; }
#coords { text-align: center; font-size: 10px; color: var(--ink2); text-shadow: 0 1px 2px #000; }

#chat { position: absolute; left: calc(10px + env(safe-area-inset-left)); bottom: 18px; width: 380px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(214, 168, 78, .25); border-radius: 4px; display: flex; flex-direction: column; }
#chat .tabs { display: flex; border-bottom: 1px solid rgba(214, 168, 78, .2); }
#chat .tabs button { flex: 1; background: none; border: 0; padding: 4px 0; font-size: 11px; color: var(--dim); }
#chat #chatMini { flex: 0 0 30px; color: var(--ink2); }
#chat.mini #chatLog, #chat.mini .chat-in { display: none; }
#chat.mini .tabs button:not(#chatMini) { display: none; }
#chat.mini { width: auto !important; }
#chat .tabs button.on { color: var(--gold2); box-shadow: inset 0 -2px 0 var(--gold); }
#chatLog { height: 128px; overflow-y: auto; padding: 4px 7px; font-size: 12px; line-height: 1.45; scrollbar-width: thin; user-select: text; -webkit-user-select: text; }
#chatLog div { text-shadow: 0 1px 1px #000; word-break: break-all; }
#chatLog .n b { color: #e8d8b0; }
#chatLog .n b.gm { color: #ff9a4a; }
#chatLog .w { color: #e8a0ff; }
#chatLog .sys { color: #9ad0ff; }
#chatLog .notice { color: #ffe066; font-weight: 700; }
.chat-in { display: flex; border-top: 1px solid rgba(214, 168, 78, .2); }
#chatInput { flex: 1; background: rgba(0, 0, 0, .5); border: 0; color: var(--ink); padding: 6px 8px; font-size: 13px; user-select: text; -webkit-user-select: text; }
#chatInput:focus { outline: 1px solid var(--goldd); }
#chatSend { background: rgba(60, 44, 20, .8); border: 0; padding: 0 12px; }

#actions { position: absolute; right: calc(8px + env(safe-area-inset-right)); bottom: 14px; display: flex; flex-direction: column; align-items: flex-end; transform: scale(var(--s)); transform-origin: 100% 100%; }
#quickbar { display: flex; gap: 5px; margin-bottom: 4px; margin-right: 6px; }
.qs { position: relative; width: 50px; height: 50px; background: var(--bg); border: 1px solid var(--line); border-radius: 5px; font-size: 24px; display: flex; align-items: center; justify-content: center; padding: 0; }
.qs .k { position: absolute; left: 3px; top: 1px; font-size: 10px; color: var(--dim); }
.qs .c { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-weight: 700; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.qs.empty { opacity: .45; font-size: 12px; color: var(--dim); }
.qs.zero { filter: grayscale(1); opacity: .55; }
#skillWheel { position: relative; width: 262px; height: 262px; }
#skillWheel button { position: absolute; border-radius: 50%; padding: 0; }
.atk { right: 6px; bottom: 6px; width: 104px; height: 104px; background: radial-gradient(circle at 40% 32%, #6a5032, #2a1c0e 70%); border: 3px solid var(--gold); box-shadow: 0 0 0 2px #000, inset 0 0 18px rgba(0, 0, 0, .8), 0 4px 12px rgba(0, 0, 0, .6); font-size: 46px; }
.atk span { filter: drop-shadow(0 2px 2px #000); }
.atk:active, .atk.press { transform: scale(.94); }
.sk { width: 54px; height: 54px; background: radial-gradient(circle at 40% 32%, #4a3a26, #1a120a 75%); border: 2px solid var(--goldd); box-shadow: 0 0 0 1px #000; font-size: 24px; overflow: hidden; }
.sk .cd { position: absolute; inset: 0; border-radius: 50%; }
.sk .key { position: absolute; bottom: 1px; left: 0; right: 0; font-size: 9px; color: var(--ink2); text-shadow: 0 0 2px #000; }
.sk .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; text-shadow: 0 0 3px #000; }
.sk.locked { filter: grayscale(1) brightness(.5); }
.sk[data-sk=smash] { left: 75px; top: 183px; }
.sk[data-sk=heal] { left: 91px; top: 126px; }
.sk[data-sk=haste] { left: 136px; top: 86px; }
.sk[data-sk=whirl] { left: 194px; top: 76px; }
.round { width: 50px; height: 50px; background: var(--bg); border: 2px solid var(--goldd); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.round b { font-size: 12px; }
.round small { font-size: 9px; color: var(--ink2); }
.auto { left: 14px; top: 192px; }
.auto.on { border-color: #8ef07a; background: radial-gradient(circle, rgba(60, 140, 40, .9), rgba(20, 50, 14, .9)); box-shadow: 0 0 14px rgba(120, 255, 90, .55); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 4px rgba(120, 255, 90, .3); } }
.pick { left: 28px; top: 132px; }
.pick b { font-size: 18px; }

#expbar { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: #0b0806; border-top: 1px solid #3a2c14; }
#expFill { height: 100%; background: linear-gradient(#ffe48a, #c8961e); width: 0; transition: width .3s; }
#expTxt { position: absolute; right: 8px; bottom: 8px; font-size: 10px; color: var(--gold2); text-shadow: 0 1px 2px #000; }

#joyBase { position: absolute; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .06), rgba(255, 255, 255, .14)); border: 2px solid rgba(214, 168, 78, .4); pointer-events: none; }
#joyKnob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255, 230, 170, .7), rgba(140, 100, 40, .6)); border: 2px solid var(--gold2); }

#centerMsg { position: absolute; left: 50%; top: 28%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
#centerMsg div { background: rgba(0, 0, 0, .6); padding: 5px 16px; border-radius: 3px; font-weight: 700; text-shadow: 0 1px 2px #000; animation: msgIn 3s forwards; white-space: nowrap; font-size: 14px; }
#centerMsg .warn { color: #ffb08a; }
#centerMsg .level { color: #ffe066; font-size: 20px; padding: 8px 24px; border: 1px solid var(--goldd); }
#centerMsg .gm { color: #ff9a4a; }
@keyframes msgIn { 0% { opacity: 0; transform: translateY(6px); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
#lootLog { position: absolute; right: 290px; bottom: 30px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
#lootLog div { font-size: 12px; color: #d8f0c0; text-shadow: 0 1px 2px #000, 0 0 3px #000; animation: msgIn 3.2s forwards; }
#lootLog .rare { color: #e0a0ff; font-weight: 700; }
#notice { position: absolute; left: 0; right: 0; top: 74px; text-align: center; font-size: 17px; font-weight: 800; color: #ffe066; background: linear-gradient(90deg, transparent, rgba(80, 30, 0, .75) 20%, rgba(80, 30, 0, .75) 80%, transparent); padding: 6px; text-shadow: 0 1px 2px #000; }
#freeCamBadge { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); background: rgba(200, 80, 26, .85); padding: 5px 14px; border-radius: 14px; font-size: 12px; font-weight: 700; }

/* ── 패널 ── */
.panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(640px, 96vw); max-height: min(560px, 90vh); display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--goldd); box-shadow: 0 0 0 1px #000, 0 10px 40px rgba(0, 0, 0, .8), inset 0 0 40px rgba(0, 0, 0, .5); border-radius: 5px; z-index: 10; }
.ph { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); background: linear-gradient(rgba(214, 168, 78, .14), transparent); }
.ph span { font-family: var(--serif); font-size: 16px; font-weight: 800; color: var(--gold2); letter-spacing: 2px; }
.x { background: none; border: 1px solid var(--goldd); border-radius: 3px; width: 28px; height: 28px; }
#panelBody { padding: 12px; overflow-y: auto; scrollbar-width: thin; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.sec { color: var(--gold); font-size: 12px; font-weight: 700; margin: 10px 0 6px; border-bottom: 1px solid rgba(214, 168, 78, .2); padding-bottom: 3px; }
.sec:first-child { margin-top: 0; }
select, .panel input[type=text], .panel input[type=number] { background: #0b0806; border: 1px solid #4a3a22; color: var(--ink); padding: 5px 7px; border-radius: 3px; font-size: 13px; user-select: text; -webkit-user-select: text; }
.muted { color: var(--dim); font-size: 12px; }

.invwrap { display: flex; gap: 14px; }
.equipcol { width: 170px; flex-shrink: 0; }
.eqslot { display: flex; align-items: center; gap: 8px; padding: 5px; border: 1px solid rgba(214, 168, 78, .25); background: rgba(0, 0, 0, .35); border-radius: 3px; margin-bottom: 5px; cursor: pointer; min-height: 42px; }
.eqslot i { font-style: normal; font-size: 22px; width: 30px; text-align: center; }
.eqslot .l { font-size: 10px; color: var(--dim); }
.eqslot .v { font-size: 12px; }
.stats { font-size: 12px; line-height: 1.7; color: var(--ink2); margin-top: 8px; }
.stats b { color: var(--ink); float: right; }
.grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 5px; align-content: start; }
.cell { position: relative; aspect-ratio: 1; background: rgba(0, 0, 0, .45); border: 1px solid rgba(214, 168, 78, .3); border-radius: 4px; font-size: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cell:hover { border-color: var(--gold2); }
.cell .c { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-weight: 700; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.cell .e { position: absolute; left: 3px; top: 1px; font-size: 11px; font-weight: 800; color: #8ef0ff; text-shadow: 0 0 2px #000; }
.cell.r1 { border-color: #9a6ad8; box-shadow: inset 0 0 10px rgba(154, 106, 216, .5); }
.cell.r2 { border-color: #ff9a2a; box-shadow: inset 0 0 12px rgba(255, 154, 42, .6); }
.cell.empty { cursor: default; opacity: .35; }
.goldline { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(214, 168, 78, .2); color: var(--gold2); font-weight: 700; }

.pop { position: absolute; z-index: 20; width: 250px; background: #120d08; border: 1px solid var(--gold); border-radius: 4px; padding: 10px; box-shadow: 0 6px 24px #000; }
.pop .t { font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.pop .t.r1 { color: #c8a0ff; } .pop .t.r2 { color: #ffb060; }
.pop .d { font-size: 12px; color: var(--ink2); line-height: 1.55; margin-bottom: 8px; }
.pop .bs { display: flex; flex-wrap: wrap; gap: 5px; }
.pop .bs .btn { padding: 5px 9px; font-size: 12px; }

.shoplist .it { display: flex; align-items: center; gap: 10px; padding: 6px; border-bottom: 1px solid rgba(214, 168, 78, .12); }
.shoplist .it i { font-style: normal; font-size: 24px; width: 32px; text-align: center; }
.shoplist .it .nm { flex: 1; }
.shoplist .it .nm small { display: block; color: var(--dim); font-size: 11px; }
.shoplist .it .pr { color: var(--gold2); font-weight: 700; min-width: 70px; text-align: right; }
.tabsbar { display: flex; gap: 4px; margin-bottom: 10px; }
.tabsbar .btn.sel { border-color: var(--gold2); color: var(--gold2); background: rgba(80, 60, 24, .9); }

#bigmap { width: 100%; max-width: 480px; aspect-ratio: 1; display: block; margin: 0 auto; border: 1px solid var(--goldd); background: #000; image-rendering: pixelated; }
.dialog p { margin: 0 0 8px; line-height: 1.6; }

.gmgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gmgrid .btn { font-size: 12px; padding: 7px 6px; }
.plist { font-size: 12px; max-height: 120px; overflow-y: auto; background: rgba(0, 0, 0, .35); border: 1px solid rgba(214, 168, 78, .2); padding: 4px 6px; border-radius: 3px; }
.plist div { display: flex; justify-content: space-between; padding: 2px 0; cursor: pointer; }
.plist div:hover { color: var(--gold2); }

#death, #disc { position: fixed; inset: 0; background: rgba(40, 0, 0, .55); display: flex; align-items: center; justify-content: center; z-index: 30; }
.dbox { width: min(340px, 90vw); text-align: center; background: var(--bg2); border: 1px solid #8a2e22; padding: 24px; border-radius: 5px; }
.dt { font-family: var(--serif); font-size: 24px; font-weight: 800; color: #ff8a6a; margin-bottom: 10px; }
#deathInfo { color: var(--ink2); margin-bottom: 16px; font-size: 13px; line-height: 1.6; }

/* ── 화면 크기별 ── */
@media (max-height: 560px), (max-width: 900px) {
  :root { --s: .82; }
  #chat { width: 300px; }
  #chatLog { height: 78px; font-size: 11px; }
  .bars { width: 180px; }
  #lootLog { right: 230px; }
}
@media (max-height: 430px) {
  :root { --s: .7; }
  #chat { width: 260px; bottom: 12px; }
  #chatLog { height: 58px; }
  .mini-wrap, #minimap { width: 110px; } #minimap { height: 110px; }
}
@media (pointer: coarse) {
  #chat { top: calc(84px * var(--s) + 14px); bottom: auto; width: min(300px, 34vw); background: rgba(0, 0, 0, .3); }
  #chatLog { height: 64px; }
  #chat .chat-in input::placeholder { font-size: 11px; }
  #lootLog { right: auto; left: 50%; transform: translateX(-50%); bottom: 40px; align-items: center; }
}
@media (max-width: 600px) and (orientation: portrait) {
  :root { --s: .72; }
  #chat { width: 92vw; left: 4vw; transform: none; top: 150px; bottom: auto; }
  #chatLog { height: 60px; }
  .invwrap { flex-direction: column; }
  .equipcol { width: 100%; }
}

.ico { display: inline-block; width: 82%; height: 82%; background: url(assets/icons.webp) no-repeat; background-size: 800% 3200%; border-radius: 4px; pointer-events: none; }
.sk .sk-ico { width: 100%; height: 100%; border-radius: 50%; opacity: .92; }
.atk .atk-ico { width: 74%; height: 74%; border-radius: 50%; filter: sepia(.6) saturate(1.6) brightness(1.1); }
.eqslot i .ico { width: 34px; height: 34px; }
.shoplist .it i .ico { width: 34px; height: 34px; }
.pop .t .ico { width: 28px; height: 28px; vertical-align: middle; }
#bigmap { aspect-ratio: 2 / 1; max-width: 640px; }

/* ───────── 이테르나 3D 추가 ───────── */
canvas#gl { position: fixed; inset: 0; display: block; width: 100vw; height: 100vh; }
canvas#game { pointer-events: auto; background: transparent; }
.ico { display: none; }
.emo { font-style: normal; font-size: 1.25em; line-height: 1; }
.sk .emo, #btnAttack .emo { font-size: 26px; }
#login { flex-direction: column; gap: 0; }
.cls-box { width: min(520px, 94vw); }
#clsGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
#clsGrid button { background: #0b0806; border: 1px solid #4a3a22; color: var(--ink); border-radius: 6px; padding: 6px 4px 8px; cursor: pointer; font: inherit; }
#clsGrid button.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(214,168,78,.35); }
#clsGrid canvas { width: 100%; aspect-ratio: 1; display: block; border-radius: 4px; background: radial-gradient(#2c2416, #0b0806 70%); }
#clsGrid b { display: block; margin-top: 4px; font-size: 14px; }
#clsDesc { min-height: 40px; color: var(--ink2); font-size: 13px; text-align: center; margin-bottom: 10px; line-height: 1.6; }
#loadBar { position: fixed; left: 50%; bottom: 12vh; transform: translateX(-50%); width: min(360px, 80vw); height: 22px; background: #0b0806; border: 1px solid var(--goldd); border-radius: 11px; overflow: hidden; z-index: 60; }
#loadBar div { height: 100%; width: 0; background: linear-gradient(90deg, #7a5520, #d6a84e); transition: width .2s; }
#loadBar span { position: absolute; inset: 0; text-align: center; font-size: 12px; line-height: 22px; color: #fff3c8; text-shadow: 0 1px 2px #000; }