/* 글꼴: 갈무리(SIL OFL, fonts/OFL.md) 게임 안에 포함 */
@font-face{font-family:Galmuri11;src:url("../fonts/Galmuri11.woff2") format("woff2");font-weight:400;font-display:block}
@font-face{font-family:Galmuri11;src:url("../fonts/Galmuri11-Bold.woff2") format("woff2");font-weight:700;font-display:block}
@font-face{font-family:Galmuri9;src:url("../fonts/Galmuri9.woff2") format("woff2");font-weight:400;font-display:block}
@font-face{font-family:Galmuri7;src:url("../fonts/Galmuri7.woff2") format("woff2");font-weight:400;font-display:block}
/* 화면 = 160×288칸. 위 144칸은 골드 장면(캔버스), 아래 144칸은 글상자와 터치 버튼. 1칸 = --p 픽셀(정수배). 색표는 골드_화면규격서.md 1절. */
:root{color-scheme:dark;--p:2px;--k:#181820;--w:#f8f8f8;--paper:#f8f8f0;--hp:#38b848;--hpy:#f8c030;--hpr:#e84838;--pink:#f8a8b8;--green:#98d080;--blue:#88b8f0;--gray:#d8d8d0;--exp:#4890f8;--outer:#000}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
html,body{height:100%;background:var(--outer);overflow:hidden;touch-action:pinch-zoom}
body{display:flex;align-items:flex-end;justify-content:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 8px) env(safe-area-inset-left)}
#scr{position:relative;width:calc(160*var(--p));height:calc(288*var(--p));background:var(--w);color:var(--k);overflow:hidden;
 font-family:Galmuri11,monospace;font-size:calc(11*var(--p));line-height:calc(16*var(--p));image-rendering:pixelated;margin-bottom:auto;margin-top:auto}
#scr *{image-rendering:pixelated}
#top{position:absolute;left:0;top:0;width:calc(160*var(--p));height:calc(144*var(--p))}
#ov{position:absolute;left:0;top:0;width:calc(160*var(--p));height:calc(144*var(--p));pointer-events:none}
#ov .tap{pointer-events:auto}
#bot{position:absolute;left:0;top:calc(144*var(--p));width:calc(160*var(--p));height:calc(144*var(--p));background:var(--w)}
#full{position:absolute;inset:0;display:none;background:var(--w)}
#full.on{display:block}
.ab{position:absolute}
.c{left:calc(var(--x)*var(--p));top:calc(var(--y)*var(--p))}
/* 골드 글상자: 검정 두 줄 테두리 */
.box{position:absolute;background:var(--w);border:var(--p) solid var(--k);box-shadow:inset 0 0 0 var(--p) var(--w),inset 0 0 0 calc(2*var(--p)) var(--k);padding:calc(7*var(--p)) calc(8*var(--p))}
#tb{left:0;top:0;width:calc(160*var(--p));height:calc(48*var(--p));white-space:pre-wrap;overflow:hidden}
#tbm{position:absolute;right:calc(8*var(--p));bottom:calc(3*var(--p));display:none;font-size:calc(9*var(--p));line-height:1}
#tbm.on{display:block}
.blink{animation:bl 1s steps(1) infinite}@keyframes bl{50%{opacity:0}}
.btn{position:absolute;background:var(--w);border:var(--p) solid var(--k);box-shadow:inset 0 0 0 var(--p) var(--w),inset 0 0 0 calc(2*var(--p)) var(--k);
 display:flex;align-items:center;justify-content:center;font-family:Galmuri11;font-size:calc(11*var(--p));line-height:1;text-align:center;cursor:pointer}
.btn.on,.btn:active,.btn.down{background:var(--k);color:var(--w);box-shadow:inset 0 0 0 var(--p) var(--k),inset 0 0 0 calc(2*var(--p)) var(--w)}
.btn.off{color:#a8a8a0}
.btn.small{font-size:calc(9*var(--p))}
.btn.round{border-radius:50%}
.lv{font-family:Galmuri7;font-size:calc(7*var(--p));line-height:calc(8*var(--p))}
.efftag{background:var(--hpr);color:var(--w);padding:0 var(--p)}
.s9{font-family:Galmuri9;font-size:calc(9*var(--p));line-height:calc(12*var(--p))}
.hpbar{display:flex;align-items:center;gap:var(--p);font-family:Galmuri7;font-size:calc(7*var(--p));line-height:1}
.hpbar .lab{background:var(--k);color:var(--hpy);padding:0 var(--p);line-height:calc(7*var(--p))}
.hpbar .bar{width:calc(48*var(--p));height:calc(4*var(--p));border:var(--p) solid var(--k);background:var(--w);position:relative}
.hpbar .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--hp)}
.expbar{width:calc(64*var(--p));height:calc(3*var(--p));border:var(--p) solid var(--k);background:var(--w);position:relative}
.expbar i{position:absolute;right:0;top:0;bottom:0;background:var(--exp)}
.cur::before{content:"▶";position:absolute;margin-left:calc(-9*var(--p))}
.cur2::before{content:"▷";position:absolute;margin-left:calc(-9*var(--p))}
.spr{position:absolute;width:calc(56*var(--p));height:calc(56*var(--p))}
.spr img,.spr canvas{position:absolute;left:0;top:0;width:calc(56*var(--p));height:calc(56*var(--p))}
.row{position:absolute;left:0;right:0}
.list .it{position:relative;padding-left:calc(12*var(--p));cursor:pointer}
input.name{position:absolute;font-family:Galmuri11;font-size:calc(11*var(--p));border:none;outline:none;background:transparent;color:var(--k);user-select:text;-webkit-user-select:text}
.badge{display:inline-block;width:calc(12*var(--p));height:calc(12*var(--p));border:var(--p) solid var(--k);margin-right:calc(2*var(--p));background:#e8e8e0}
.badge.got{background:#48b858}
/* 폰(손가락 조작): 화면을 아래쪽에 붙여 엄지가 닿게 */
@media (pointer:coarse){#scr{margin-bottom:0}}
/* 넓은 화면(필드·메뉴): 위 그림이 192칸, 글상자는 말할 때만 지도 위에 */
#scr.wide #bot{background:transparent}
#scr.wide #bot::before{content:"";position:absolute;left:0;top:calc(48*var(--p));width:100%;height:calc(96*var(--p));background:var(--w)}
#scr.tblow #tb{top:calc(96*var(--p))}
#scr.tall #tb{top:calc(40*var(--p))}
/* 지도 전체(필드·메뉴, 288칸): 버튼판은 지도 위에 투명하게. 선택지 같은 버튼일 때만 아래 칸을 흰 판으로 */
#scr.full #bot::before{display:none}
#scr.full.panel #bot::before{display:block}
.pad{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.pad .btn{pointer-events:auto}
#scr.hidepad .pad{display:none}
.btn.ghost{background:rgba(248,248,248,.35);border-color:rgba(24,24,32,.5);box-shadow:inset 0 0 0 var(--p) rgba(248,248,248,.35);color:rgba(24,24,32,.75)}
.btn.ghost.down,.btn.ghost:active{background:rgba(24,24,32,.45);color:var(--w);box-shadow:none}
.cap{text-align:center;color:var(--w);text-shadow:var(--p) 0 0 var(--k),calc(-1*var(--p)) 0 0 var(--k),0 var(--p) 0 var(--k),0 calc(-1*var(--p)) 0 var(--k)}

/* 등급 딱지: 이름 앞 색 네모(일반 회색·희귀 파랑·영웅 보라·전설 빨강) */
.tag{display:inline-block;font-family:Galmuri9;font-size:calc(9*var(--p));line-height:calc(11*var(--p));padding:0 calc(2*var(--p));margin-right:calc(3*var(--p));border:var(--p) solid var(--k);vertical-align:top}
.tag.big{font-family:Galmuri11;font-size:calc(11*var(--p));line-height:calc(14*var(--p));padding:0 calc(4*var(--p))}
/* 스마트 조작 조이스틱: 반투명 큰 원 + 가운데 작은 원 */
.joy{position:absolute;pointer-events:auto;border-radius:50%;background:rgba(248,248,248,.5);border:var(--p) solid rgba(24,24,32,.5);touch-action:none}
.joy .knob{position:absolute;left:50%;top:50%;width:calc(28*var(--p));height:calc(28*var(--p));margin:calc(-14*var(--p)) 0 0 calc(-14*var(--p));border-radius:50%;background:rgba(24,24,32,.5);pointer-events:none}
/* 도감 상세: 항목마다 검은 이름표 + 구분선 */
.drow{border-top:var(--p) solid #b8b8b0;padding:calc(3*var(--p)) 0}
.dl{display:inline-block;background:var(--k);color:var(--w);padding:0 calc(2*var(--p));margin-right:calc(4*var(--p))}

/* 빛·어둠 몬스터 둘레 효과(core.js elemFx) */
img[data-el=light]{animation:elL 2.4s ease-in-out infinite}
img[data-el=dark]{animation:elD 3s ease-in-out infinite}
@keyframes elL{0%,100%{filter:drop-shadow(0 0 calc(1*var(--p)) rgba(250,210,80,.45))}50%{filter:drop-shadow(0 0 calc(2.5*var(--p)) rgba(250,200,60,.85))}}
@keyframes elD{0%,100%{filter:drop-shadow(0 0 calc(1.5*var(--p)) rgba(80,20,130,.5))}50%{filter:drop-shadow(0 0 calc(3*var(--p)) rgba(110,30,170,.85))}}
.elfx{position:absolute;pointer-events:none}
.elfx i{position:absolute;width:var(--p);height:var(--p);opacity:0}
.elfx.light i{background:#fff;box-shadow:0 calc(-1*var(--p)) #ffe680,0 var(--p) #ffe680,calc(-1*var(--p)) 0 #ffe680,var(--p) 0 #ffe680,0 calc(-2*var(--p)) #f2c230,0 calc(2*var(--p)) #f2c230,calc(-2*var(--p)) 0 #f2c230,calc(2*var(--p)) 0 #f2c230;animation:twk 1.9s ease-in-out infinite}
.elfx.dark i{width:calc(2*var(--p));height:calc(2*var(--p));background:#8a4cc8;box-shadow:0 0 0 calc(.5*var(--p)) #3a1060,0 0 calc(3*var(--p)) #5a2290;animation:wisp 2.4s ease-out infinite}
.elfx.sp i{width:var(--p);height:var(--p);animation:wisp 2.2s ease-out infinite}
@keyframes twk{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1)}60%{opacity:.9;transform:scale(.8)}}
@keyframes wisp{0%{opacity:0;transform:translateY(0)}25%{opacity:.75}100%{opacity:0;transform:translateY(calc(-10*var(--p)))}}

/* 다른 소환사: 이름표·말풍선·채널(online.js). 캔버스 위에 얹는 글자판 */
#ol{position:absolute;left:0;top:0;width:calc(160*var(--p));height:calc(288*var(--p));pointer-events:none;overflow:hidden}
/* 길쭉한 폰: 필드 지도와 이름표는 위 빈칸까지 늘린다(core.js XH) */
#scr.full{overflow:visible;margin-bottom:0}
#scr.full #top,#scr.full #ol{top:calc(-1*var(--xh,0)*var(--p))}
#scr.full #ol{height:calc((288 + var(--xh,0))*var(--p))}
.otag{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center}
.otag .on{font-family:Galmuri7;font-size:calc(7*var(--p));line-height:calc(8*var(--p));color:var(--w);background:rgba(24,24,32,.7);padding:0 var(--p);white-space:nowrap}
.otag .ob{position:relative;font-family:Galmuri7;font-size:calc(7*var(--p));line-height:calc(8*var(--p));background:var(--w);color:var(--k);border:var(--p) solid var(--k);padding:0 calc(2*var(--p));
 max-width:calc(64*var(--p));width:max-content;word-break:keep-all;overflow-wrap:anywhere;white-space:pre-wrap;margin-bottom:calc(3*var(--p))}
.otag .ob::after{content:"";position:absolute;left:50%;bottom:calc(-3*var(--p));margin-left:calc(-1*var(--p));width:calc(2*var(--p));height:calc(2*var(--p));background:var(--w);border:var(--p) solid var(--k);border-top:none}
/* 채팅: 화면 아래(채팅창 자리). 폰 키보드가 올라오면 키보드 바로 위에 붙는다(online.js chatPlace). 위는 최근 대화, 맨 아래 입력줄 */
.chatbox{position:fixed;width:calc(160*var(--p));height:calc(62*var(--p));background:var(--w);border-top:var(--p) solid var(--k);z-index:50;font-family:Galmuri11;color:var(--k)}
.chatbox .clog{position:absolute;left:calc(6*var(--p));top:calc(2*var(--p));width:calc(148*var(--p));height:calc(36*var(--p));overflow-y:auto;word-break:break-all}
.chatbox .clog b{font-weight:normal;color:#3870f0}
.chatbox .ccnt{position:absolute;right:calc(6*var(--p));top:calc(34*var(--p))}
.chatbox .cin{position:absolute;left:calc(4*var(--p));top:calc(42*var(--p));width:calc(98*var(--p));height:calc(18*var(--p));font-size:calc(9*var(--p));
 border:var(--p) solid var(--k);padding:0 calc(2*var(--p));box-sizing:border-box;background:var(--w)}
.chatbox [data-c=send]{left:calc(104*var(--p));top:calc(42*var(--p));width:calc(28*var(--p));height:calc(18*var(--p))}
.chatbox [data-c=close]{left:calc(134*var(--p));top:calc(42*var(--p));width:calc(22*var(--p));height:calc(18*var(--p))}