*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#06111f;--panel:rgba(8,23,42,.88);--panel2:rgba(18,24,55,.9);
  --blue:#1cc8ff;--blue2:#2876ff;--purple:#9a45ff;--gold:#f6b934;
  --gold2:#fff0a8;--text:#f7fbff;--muted:#a9c1d8;--danger:#ff506f;
}
html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;font-family:"Noto Sans KR","Pretendard",system-ui,sans-serif;background:#030b15;color:var(--text)}
button{font:inherit}
canvas{display:block;width:100%;height:100%;touch-action:none}
.cinematic-vignette,.scanline{position:fixed;inset:0;pointer-events:none;z-index:2}
.cinematic-vignette{background:radial-gradient(circle at 50% 42%,transparent 38%,rgba(0,0,0,.54) 100%)}
.scanline{opacity:.11;background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(255,255,255,.06) 4px)}
.screen{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle at 50% 30%,#123554,#030914)}
.screen.show{display:flex}
.hero-screen{overflow:auto;background:#040914}
.hero-bg{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(3,8,18,.72),rgba(3,8,18,.28),rgba(3,8,18,.7)),
  url("./public/assets/ui/hero_neon_scene.jpg") center/cover no-repeat;filter:saturate(1.15) contrast(1.05)}
.hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(2,7,16,.1),rgba(2,7,16,.72))}
.select-shell{position:relative;z-index:1;width:min(1260px,95vw);min-height:min(760px,94vh);display:grid;grid-template-columns:220px 1fr;grid-template-rows:auto 1fr auto;gap:16px;padding:24px}
.select-brand{align-self:start;font-size:38px;font-weight:1000;text-shadow:0 0 24px #1ecbff}.select-brand span{display:block;font-size:14px;font-weight:700}
.select-copy{text-align:center}.eyebrow{color:#69e4ff;letter-spacing:.28em;font-weight:1000}.select-copy h1{font-size:clamp(28px,4.5vw,58px);margin:8px 0;text-shadow:0 3px 30px #000}.sub{color:#d6e9fa}
.character-grid{grid-column:1/3;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end}
.character-card{position:relative;min-height:430px;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:26px;background:linear-gradient(to bottom,rgba(5,13,28,.1),rgba(6,16,34,.92));cursor:pointer;transition:.25s;box-shadow:0 20px 45px #0008}
.character-card:before{content:"";position:absolute;inset:auto 0 0;height:43%;background:linear-gradient(to top,#061225,transparent)}
.character-card img{position:absolute;inset:0;width:100%;height:78%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 14px #000c)}
.character-card h3,.character-card b,.character-card p{position:relative;z-index:1;margin-left:22px;margin-right:22px}
.character-card h3{margin-top:300px;font-size:30px}.character-card b{font-size:16px}.character-card p{font-size:13px;color:#c6d6e6}
.character-card.selected{transform:translateY(-9px);border-color:var(--gold);box-shadow:0 0 0 2px #f8c44766,0 25px 60px #000b,0 0 45px #f6b93444}
.primary.big{grid-column:2;justify-self:end;min-width:300px;padding:17px 32px;border:1px solid #fff2a0;border-radius:20px;background:linear-gradient(180deg,#ffc746,#b76c00);color:#fff;font-size:24px;font-weight:1000;box-shadow:0 0 0 5px #6a390055,0 0 35px #ffc83d77;text-shadow:0 2px 4px #5c3100}
.primary.big:disabled{opacity:.4;filter:grayscale(1)}
.loading-logo{font-size:46px;font-weight:1000;letter-spacing:.04em;text-shadow:0 0 30px #1bd5ff}.loader{width:52px;height:52px;margin-top:20px;border:6px solid #ffffff20;border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}.screen h1{margin:16px 0 6px}.screen p{color:#c9dded}.load-track{width:min(460px,78vw);height:10px;margin-top:18px;background:#ffffff1c;border-radius:99px;overflow:hidden}.load-track div{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--gold));box-shadow:0 0 18px var(--blue);transition:.3s}
.topbar{position:fixed;z-index:15;left:14px;right:14px;top:10px;display:flex;gap:10px;align-items:flex-start;pointer-events:none}
.profile-card,.currency-bar,.top-actions{pointer-events:auto}
.profile-card{display:flex;align-items:center;gap:10px;padding:8px 13px;border:1px solid #40c9ff55;border-radius:18px;background:linear-gradient(135deg,rgba(7,25,47,.94),rgba(12,43,69,.86));box-shadow:0 10px 28px #0009,0 0 20px #0aaae622}
.level-ring{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:3px solid #23d4ff;box-shadow:inset 0 0 14px #1aa8ff,0 0 16px #1aa8ff}.profile-copy{min-width:180px}.profile-copy>span{display:block;color:#a8c8df;font-size:11px}.exp-track{height:7px;margin-top:6px;background:#ffffff1a;border-radius:99px;overflow:hidden}.exp-track div{height:100%;width:34%;background:linear-gradient(90deg,#1bc6ff,#315cff);box-shadow:0 0 10px #1bc6ff}
.currency-bar{display:flex;gap:6px;flex:1;justify-content:center}.currency-bar span{padding:9px 12px;border-radius:13px;background:rgba(7,18,36,.83);border:1px solid #ffffff1f;box-shadow:0 8px 22px #0007;font-size:12px}
.top-actions{display:flex;gap:5px}.top-actions button,.right-rail button{min-width:54px;border:0;background:rgba(6,18,36,.78);color:white;border-radius:13px;padding:7px 8px;box-shadow:0 8px 24px #0008}.top-actions i{display:block;font-style:normal;font-size:21px}.top-actions span,.right-rail span{display:block;font-size:10px}
.quest-panel{position:fixed;z-index:16;left:14px;top:82px;width:290px;padding:14px;background:linear-gradient(145deg,rgba(6,18,37,.92),rgba(9,35,55,.87));border:1px solid #3e9fff55;border-radius:18px;backdrop-filter:blur(12px);box-shadow:0 18px 40px #0009;transition:.25s}.quest-panel.closed{transform:translateX(calc(-100% - 20px))}
.panel-title span{font-size:10px;color:#5edaff;letter-spacing:.2em}.panel-title b{display:block;font-size:17px;margin-top:3px}.quest-panel ol{padding-left:20px;font-size:12px;line-height:1.75}.quest-panel li.done{color:#68df9e;text-decoration:line-through}.panel-toggle{position:absolute;right:9px;top:8px;background:transparent;border:0;color:#9cb8cb;font-size:20px}.claim-btn{width:100%;padding:9px;border:1px solid #ffc84566;border-radius:11px;background:linear-gradient(#ffc84f,#a76200);color:white;font-weight:900}
.right-rail{position:fixed;z-index:15;right:12px;top:86px;display:grid;gap:7px}.right-rail button{width:60px}
.interaction-hint{position:fixed;z-index:18;left:50%;bottom:104px;transform:translateX(-50%);padding:10px 18px;border-radius:99px;background:linear-gradient(90deg,#0b1e36e8,#182b50e8);border:1px solid #f8c44777;box-shadow:0 0 24px #f2b63833;font-weight:900;opacity:0;transition:.2s}.interaction-hint.show{opacity:1}
.bottom-nav{position:fixed;z-index:17;left:50%;bottom:11px;transform:translateX(-50%);display:flex;gap:4px;padding:7px;border:1px solid #4cb5ff44;border-radius:20px;background:rgba(5,15,32,.88);box-shadow:0 14px 34px #000b;backdrop-filter:blur(13px)}
.bottom-nav button{width:66px;height:57px;border:0;border-radius:13px;background:linear-gradient(180deg,#162841,#0a1628);color:#fff}.bottom-nav button i{display:block;font-style:normal;font-size:19px}.bottom-nav button span{font-size:9px}.bottom-nav .interact{width:112px;background:linear-gradient(180deg,#ffc942,#a75c00);border:1px solid #ffe9a0;box-shadow:0 0 25px #ffc13d55}
.joystick{position:fixed;z-index:17;left:18px;bottom:20px;width:112px;height:112px;border-radius:50%;background:radial-gradient(circle,#8fa9c955,#2b456533);border:2px solid #9cc7ef66;box-shadow:0 0 25px #2caeff44;touch-action:none}.joystick div{position:absolute;left:31px;top:31px;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#9fb5ca 40%,#4d6076);box-shadow:0 8px 18px #0009}.run-btn{position:fixed;z-index:17;right:18px;bottom:26px;width:72px;height:72px;border-radius:50%;border:2px solid #ffd263;background:radial-gradient(circle,#ffcf4d,#9b4c00);color:white;font-weight:1000;box-shadow:0 0 24px #ffb62977}
.toast{position:fixed;z-index:35;left:50%;top:43%;transform:translate(-50%,-50%);padding:12px 20px;border-radius:99px;background:#06111fe8;border:1px solid #52caff77;box-shadow:0 0 28px #1cbcff44;opacity:0;transition:.25s}.toast.show{opacity:1;top:40%}
.modal{position:fixed;z-index:40;inset:0;display:none;align-items:center;justify-content:center;background:#01050bc7;padding:18px;backdrop-filter:blur(10px)}.modal.show{display:flex}.modal-card{width:min(760px,100%);max-height:86vh;overflow:auto;background:linear-gradient(145deg,#0e1740,#09162c);border:1px solid #a745ff66;border-radius:22px;padding:22px;box-shadow:0 25px 80px #000d,0 0 30px #8c3dff33}.modal-close{float:right;border:0;background:#ffffff10;color:#fff;border-radius:10px;width:36px;height:36px;font-size:22px}
.shop-grid,.inventory-grid,.farm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-top:15px}.item{padding:14px;border:1px solid #854fff44;border-radius:15px;background:linear-gradient(145deg,#111b3f,#0a142d)}.item button{width:100%;margin-top:9px;padding:9px;border:1px solid #2fc8ff66;border-radius:10px;background:linear-gradient(#1e91d6,#174b93);color:white;font-weight:900}.progress{height:9px;background:#ffffff18;border-radius:99px;overflow:hidden}.progress div{height:100%;background:linear-gradient(90deg,#36d781,#25b9ff)}
.map-preview{width:100%;aspect-ratio:16/9;border-radius:18px;background:url("./public/assets/ui/neon_world_clean_v6.jpg") center/cover;border:1px solid #4cb6ff44}
@media(max-width:860px){
 .topbar{left:7px;right:7px}.profile-card{padding:6px 8px}.profile-copy{min-width:105px}.currency-bar{position:absolute;top:66px;left:50%;transform:translateX(-50%);width:max-content}.top-actions button:nth-child(2),.top-actions button:nth-child(3){display:none}
 .quest-panel{top:128px;width:250px}.right-rail{top:132px}.bottom-nav{max-width:92vw;overflow-x:auto;justify-content:flex-start}.bottom-nav button{min-width:53px;width:53px}.bottom-nav .interact{min-width:88px}.character-grid{grid-template-columns:1fr}.character-card{min-height:290px}.character-card h3{margin-top:190px}.select-shell{display:block;padding:14px}.select-brand{font-size:28px}.primary.big{width:100%;margin-top:16px}.joystick,.run-btn{display:block}
}
@media(min-width:861px){.joystick,.run-btn{display:none}}

/* 실제 승인 시안 적용 확인용 */
#game{background:#020712}
.world-tag{
  position:fixed;left:50%;top:86px;z-index:10;transform:translateX(-50%);
  padding:6px 12px;border-radius:999px;background:rgba(3,10,22,.72);
  border:1px solid rgba(57,206,255,.35);color:#bdeeff;font-size:11px;
  letter-spacing:.12em;pointer-events:none
}
@media(max-width:860px){
  .hero-bg{background-position:center top}
  .character-card img{height:72%}
  .top-actions{gap:2px}
  .top-actions button{min-width:48px;padding:6px 5px}
  .right-rail{display:none}
  .quest-panel{top:121px}
}

.phase-status{position:fixed;z-index:19;right:12px;bottom:84px;padding:7px 10px;border-radius:12px;
background:#061323d9;border:1px solid #37d6ff55;font-size:10px;color:#bcefff}
.rain-drop{position:fixed;pointer-events:none;z-index:5;width:1px;height:16px;background:#9edfff88;transform:rotate(12deg)}

/* 최종 버그 수정 */
.character-card img{
  opacity:1 !important;
  mix-blend-mode:normal !important;
}
#game{
  image-rendering:auto;
}
.world-tag{
  opacity:.72;
  pointer-events:none;
}

/* final UI/UX alignment */
html,body,#app{font-family:"Noto Sans KR","Noto Sans","Pretendard","Malgun Gothic",sans-serif}
.right-dashboard{position:fixed;z-index:16;right:12px;top:86px;width:230px;display:grid;gap:8px}.dash-card{padding:11px;border:1px solid #48b7ff55;border-radius:14px;background:#061426e8;box-shadow:0 12px 28px #0008}.dash-card b,.dash-card span,.dash-card small{display:block}.dash-card img{width:100%;height:92px;object-fit:cover;border-radius:9px;margin-top:7px}.seed-strip{padding:8px 0;font-size:18px}.dash-card button{width:100%;padding:7px;border:0;border-radius:8px;background:#176cb1;color:#fff}.world-tag{display:none}.character-card img{opacity:1!important;mix-blend-mode:normal!important}.bottom-nav{max-width:760px}.quest-panel{width:280px}@media(max-width:860px){.right-dashboard{display:none}.quest-panel{width:245px}.bottom-nav{max-width:78vw}}

/* v6 전면 수정 */
.character-card img,.profile img{opacity:1!important;mix-blend-mode:normal!important}
.world-tag{display:none!important}
#game{image-rendering:auto}
@media(max-width:900px){
  .left-panel{max-height:43vh;overflow:auto}
  .bottom-menu{bottom:8px}
}