/* 게임 화면 위에 얹는 창들 (대화·메뉴·배틀). 크기는 화면 상자 너비 기준(cqw, 1cqw = GBA 2.4px) */
#screenBox { container-type: inline-size; }
#dialog { font-size: 4.3cqw !important; min-height: 28% !important; }
#dialog span { white-space: pre-line; }

/* 고르기 상자 (예/아니요) */
.choice { position: absolute; right: 2.5%; bottom: 33%; min-width: 26%; padding: .3em 0; background: #fbfbf7; color: #2b2b33;
  border: 3px solid #4a6fa5; border-radius: 8px; font-size: 4.3cqw; z-index: 6; }
.choice div { padding: .2em .9em .2em 1.7em; position: relative; cursor: pointer; }
.choice div.sel::before { content: '▶'; position: absolute; left: .5em; color: #d04848; }

/* 목록 창: 오른쪽 메뉴(side), 화면 전체(full) */
.panel { position: absolute; z-index: 5; background: #fbfbf7; color: #2b2b33; border: 3px solid #4a6fa5; border-radius: 8px;
  font-size: 4cqw; display: flex; flex-direction: column; overflow: hidden; }
.panel.side { right: 2.5%; top: 4%; width: 48%; max-height: 92%; }
.panel.full { inset: 0; border-radius: 0; border-width: 0; background: #eef2f8; }
.panel.wide { left: 2.5%; right: 2.5%; top: 4%; max-height: 92%; }
.panel .title { padding: .35em .8em; background: #4a6fa5; color: #fff; font-weight: 700; display: flex; justify-content: space-between; gap: .5em; }
.panel .title small { font-weight: 400; opacity: .9; }
.panel .items { overflow-y: auto; flex: 1; scrollbar-width: none; }
.panel .items::-webkit-scrollbar { display: none; }
.panel .it { padding: .28em .8em .28em 1.7em; position: relative; display: flex; align-items: center; gap: .5em; cursor: pointer; }
.panel .it.sel { background: #dfe8f6; }
.panel .it.sel::before { content: '▶'; position: absolute; left: .45em; color: #d04848; }
.panel .it.dis { color: #9a9aa8; }
.panel .it .r { margin-left: auto; color: #556; white-space: nowrap; }
.panel .help { padding: .3em .8em; font-size: .82em; color: #556; border-top: 1px solid #ccd5e4; background: #f6f8fc; white-space: pre-line; }
.panel .body { padding: .5em .8em; overflow-y: auto; flex: 1; }

/* 포켓몬 목록 한 줄 */
.mon { display: flex; align-items: center; gap: .45em; width: 100%; }
.mon img, .icon { width: 9cqw; height: 9cqw; image-rendering: pixelated; object-fit: contain; flex: none; }
.mon .info { flex: 1; min-width: 0; }
.mon .top { display: flex; justify-content: space-between; gap: .4em; }
.mon .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpbar { height: 1.6cqw; background: #555; border-radius: 1cqw; overflow: hidden; border: 1px solid #333; margin-top: .15em; }
.hpbar b { display: block; height: 100%; background: #3ccf5a; transition: width .1s linear; }
.hpbar b.mid { background: #f2c230; } .hpbar b.low { background: #e8483a; }
.hpnum { font-size: .8em; color: #445; }
.st { display: inline-block; font-size: .72em; padding: 0 .35em; border-radius: .3em; color: #fff; font-weight: 700; vertical-align: middle; }
.st.par { background: #c8a400; } .st.slp { background: #8a8a9a; } .st.frz { background: #4ab0e0; } .st.brn { background: #e05020; }
.st.psn, .st.tox { background: #9040b0; } .st.fnt { background: #c03030; }
.ty { display: inline-block; font-size: .75em; padding: .05em .45em; border-radius: .35em; color: #fff; font-weight: 700; text-shadow: 0 1px 0 #0005; }
.sex.M { color: #3a7be0; } .sex.F { color: #e0508a; }

/* 요약 화면 */
.summary { display: grid; grid-template-columns: 34% 1fr; gap: .2em .7em; font-size: .92em; }
.summary .pic { grid-row: span 3; background: #fff; border: 1px solid #ccd5e4; border-radius: 6px; display: grid; place-items: center; }
.summary .pic img { width: 100%; image-rendering: pixelated; }
.summary table { border-collapse: collapse; width: 100%; }
.summary td { padding: .05em .3em; }
.summary td:last-child { text-align: right; }
.summary .moves { grid-column: span 2; }
.summary .moves div { display: flex; gap: .4em; align-items: center; padding: .1em 0; border-bottom: 1px dashed #ccd5e4; }
.summary .moves .pp { margin-left: auto; color: #556; }

/* ---------- 배틀 */
#battle { position: absolute; inset: 0; z-index: 4; display: none; pointer-events: none; font-size: 4.2cqw; }
#battle.on { display: block; }
#battle .hud { position: absolute; background: #f8f8e8; color: #303030; border: .7cqw solid #506050; border-radius: 1.5cqw 0 1.5cqw 0;
  padding: .25em .6em .35em; box-shadow: .6cqw .6cqw 0 #0004; transition: transform .25s ease, opacity .25s; }
#battle .hud.hide { opacity: 0; }
#battle .hud.foe { left: 3%; top: 6%; width: 47%; } #battle .hud.foe.hide { transform: translateX(-110%); }
#battle .hud.me { right: 2.5%; top: 38%; width: 50%; } #battle .hud.me.hide { transform: translateX(110%); }
#battle .hud .row { display: flex; justify-content: space-between; align-items: baseline; gap: .3em; }
#battle .hud .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#battle .hud .lv { font-size: .85em; white-space: nowrap; }
#battle .hud .hpline { display: flex; align-items: center; gap: .3em; margin-top: .15em; }
#battle .hud .hpline i { font-style: normal; font-size: .65em; font-weight: 700; color: #f0a020; background: #404040; padding: 0 .25em; border-radius: .2em; }
#battle .hud .hpbar { flex: 1; margin: 0; height: 1.5cqw; }
#battle .hud .hpnum { text-align: right; font-weight: 700; font-size: .85em; }
#battle .hud .exp { height: .9cqw; background: #405060; margin-top: .25em; border-radius: .4cqw; overflow: hidden; }
#battle .hud .exp b { display: block; height: 100%; background: #40b8f0; }
#battle .hud .balls { position: absolute; left: .6em; bottom: -1.3em; font-size: .7em; letter-spacing: .1em; color: #fff; text-shadow: 0 1px 2px #000; }
#battle .btext { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: #283848; border-top: .8cqw solid #c8a040;
  color: #fff; padding: .45em .8em; line-height: 1.4; white-space: pre-line; text-shadow: 0 .3cqw 0 #000a; }
#battle .btext .more { position: absolute; right: .7em; bottom: .3em; color: #f06060; animation: blink .8s steps(2) infinite; font-style: normal; }
#battle .cmd { position: absolute; right: 0; bottom: 0; width: 50%; height: 30%; background: #fbfbf7; color: #303030; border: .8cqw solid #706888;
  border-radius: 1.2cqw; display: grid; grid-template-columns: 1fr 1fr; align-content: center; padding: 0 .3em; pointer-events: auto; }
#battle .cmd div, #battle .moves .m { padding: .15em .2em .15em 1.2em; position: relative; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#battle .cmd div.sel::before, #battle .moves .m.sel::before { content: '▶'; position: absolute; left: .1em; color: #303030; }
#battle .moves { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; display: grid; grid-template-columns: 68% 32%; background: #fbfbf7;
  border: .8cqw solid #706888; color: #303030; pointer-events: auto; }
#battle .moves .grid { display: grid; grid-template-columns: 1fr 1fr; align-content: center; padding: 0 .2em; font-size: .92em; }
#battle .moves .m.dis { color: #aaa; }
#battle .moves .side { border-left: .6cqw solid #706888; padding: .25em .5em; font-size: .85em; display: flex; flex-direction: column; justify-content: center; gap: .1em; }
#battle .moves .mega { margin-top: .2em; font-size: .9em; padding: .05em .3em; border-radius: .3em; background: #ddd; color: #666; text-align: center; cursor: pointer; }
#battle .moves .mega.on { background: linear-gradient(90deg, #f05a8a, #f0b030, #50c0f0, #a060f0); color: #fff; font-weight: 700; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 7; }

/* ---------- 타이틀 (메인 메뉴) */
#title { position: absolute; inset: 0; z-index: 3; overflow: hidden; background: #181540; color: #fff; }
#title .tbg { position: absolute; inset: -10% 0; background:
  repeating-linear-gradient(180deg, #2a2480 0 3.2cqw, #3a32a0 3.2cqw 4.4cqw, #1c1858 4.4cqw 8cqw);
  animation: tbg 6s linear infinite; }
@keyframes tbg { to { transform: translateY(8cqw); } }
#title::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, transparent 40%, #0008 100%); pointer-events: none; }
#title .logo { position: absolute; left: 0; right: 0; top: 5%; text-align: center; z-index: 2; line-height: 1; }
#title .logo img { width: 84cqw; image-rendering: pixelated; filter: drop-shadow(0 1.2cqw 0 #0007); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-1cqw); } }
#title .logo small { display: block; margin-top: 2cqw; font-size: 3.2cqw; letter-spacing: .14em; color: #ffe9a8; text-shadow: 0 .4cqw 0 #000a; }
#title .tmenu { position: absolute; right: 4%; bottom: 5%; width: 34%; padding: .6cqw 0; background: #1c1830e8; border: 1cqw solid #d8482c; border-radius: 1.8cqw; z-index: 2; font-size: 3.1cqw; }
#title .tmenu div { padding: .1em .4em .1em 1.7em; position: relative; cursor: pointer; }
#title .tmenu div.sel::before { content: '▶'; position: absolute; left: .45em; }
#title .tmenu div.dis { color: #777; }
#title .tinfo { position: absolute; left: 5%; top: 56%; width: 50%; height: 30%; font-size: 3.3cqw; line-height: 1.35; text-align: left; color: #e8e4ff; text-shadow: 0 .3cqw 0 #000a; z-index: 2; }
#title .tinfo .who { font-size: 5cqw; font-weight: 700; color: #ffd96a; display: flex; align-items: center; gap: 1.2cqw; }
#title .tfoot { position: absolute; left: 0; right: 0; bottom: 1.4%; text-align: center; font-size: 2.3cqw; color: #bdb8e8; z-index: 2; text-shadow: 0 .3cqw 0 #000a; }

/* 배틀 장면(고해상도) 캔버스와, 커스텀 포켓몬(사진 등)을 도트 느낌 없이 보여 주는 그림 */
#hires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: none; pointer-events: none; }
img.smooth { image-rendering: auto !important; }