/* =========================================
   OBU Vocabulary Quest RPG 2.0
   Pixel Fantasy UI
========================================= */

:root {
    --night-1: #05091a;
    --night-2: #0a1734;
    --night-3: #132952;
    --panel-dark: #111d38;
    --panel-mid: #1b3156;
    --gold: #f4cd62;
    --gold-deep: #a96c20;
    --parchment: #fff3cf;
    --parchment-dark: #e5c98d;
    --ink: #2b2219;
    --green: #54d18b;
    --green-dark: #176c49;
    --red: #e15b64;
    --red-dark: #7a2632;
    --blue: #4f96df;
    --pixel-border: 4px;
    --shadow: rgba(0,0,0,.48);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--night-1); }
body {
    margin: 0;
    min-height: 100vh;
    padding: 106px 0 44px;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 15% 0%, rgba(67, 109, 184, .22), transparent 34%),
        radial-gradient(circle at 85% 18%, rgba(145, 76, 173, .16), transparent 30%),
        linear-gradient(180deg, var(--night-2), var(--night-1) 68%);
    color: #f8f4e7;
    font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.scanlines {
    position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: .12;
    background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,.25) 3px 4px);
}
.stars {
    position: fixed; inset: 0; pointer-events: none; opacity: .38;
    background-image:
        radial-gradient(circle at 10% 20%, #fff 0 1px, transparent 1.5px),
        radial-gradient(circle at 25% 60%, #f7de90 0 1px, transparent 1.5px),
        radial-gradient(circle at 67% 15%, #fff 0 1px, transparent 1.5px),
        radial-gradient(circle at 84% 42%, #f7de90 0 1px, transparent 1.5px),
        radial-gradient(circle at 54% 74%, #fff 0 1px, transparent 1.5px);
    background-size: 180px 180px, 230px 230px, 260px 260px, 310px 310px, 370px 370px;
}

.container { width: min(94%, 620px); margin: 0 auto; }
.wideContainer { width: min(96%, 940px); }
.screen:not([hidden]) { animation: screenIn .34s steps(5, end) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 共通HUD */
.playerHud {
    position: fixed; z-index: 900; top: 10px; left: 50%; transform: translateX(-50%);
    width: min(96%, 920px); min-height: 78px; padding: 9px 10px;
    display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 10px;
    background: linear-gradient(180deg, rgba(20,38,74,.98), rgba(8,17,37,.98));
    border: 3px solid #6e5326; outline: 2px solid #e8c569;
    box-shadow: 0 8px 0 rgba(0,0,0,.38), 0 14px 28px rgba(0,0,0,.45);
}
.pixelHero {
    width: 64px; height: 64px;
    background-image: url('../assets/hero-sprite.png');
    background-repeat: no-repeat;
    background-size: 128px 64px;
    image-rendering: pixelated;
    filter: drop-shadow(0 5px 0 rgba(0,0,0,.35));
}
.heroWalk { animation: heroWalk .62s steps(2) infinite, heroBob .62s steps(2) infinite; }
@keyframes heroWalk { from { background-position: 0 0; } to { background-position: -128px 0; } }
@keyframes heroBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.playerStats { min-width: 0; }
.levelLine { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.levelLine strong { color: var(--gold); font-family: Georgia, serif; font-size: 21px; text-shadow: 2px 2px 0 #5c3916; white-space: nowrap; }
.levelLine span { overflow: hidden; color: #fff8df; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.xpTrack, .progressTrack {
    height: 12px; padding: 2px; overflow: hidden; background: #030714;
    border: 2px solid #6f5b32; box-shadow: inset 0 2px 4px #000;
}
.xpTrack { margin-top: 5px; }
.xpBar, .progressBar {
    width: 0; height: 100%; background: repeating-linear-gradient(90deg, #4cdb8a 0 12px, #70efaa 12px 16px);
    box-shadow: 0 0 8px rgba(91,230,153,.7); transition: width .45s steps(8,end);
}
.xpText { display: flex; justify-content: space-between; margin-top: 4px; color: #aab9d2; font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.soundButton {
    width: 104px; min-height: 42px; padding: 7px 8px; color: #fff5cf; background: #31537d;
    border: 2px solid #87a8cc; box-shadow: inset 0 -4px 0 #1a3558, 0 4px 0 #050b18;
    font-size: 12px; font-weight: 900;
}
.soundButton.isOff { filter: grayscale(.8); opacity: .75; }

/* Pixel panels and headers */
.pixelPanel {
    position: relative; padding: 22px; color: var(--ink);
    background:
        linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,0)),
        var(--parchment);
    border: 4px solid #7d5321; outline: 3px solid #e6c16a;
    box-shadow: 0 8px 0 #3d260e, 0 18px 34px rgba(0,0,0,.38), inset 0 0 0 4px rgba(123,82,30,.14);
}
.pixelPanel::before, .pixelPanel::after {
    position: absolute; width: 12px; height: 12px; background: #7d5321; content: "";
}
.pixelPanel::before { top: 5px; left: 5px; }
.pixelPanel::after { right: 5px; bottom: 5px; }

.titlePanel { text-align: center; margin: 12px 0 18px; }
.eyebrow, .screenHeader p, .panelHeader p, .logHeader p, .stageTitleRow p, #resultKicker {
    margin: 0; color: #d9bf75; font-family: Georgia, serif; font-size: 10px; font-weight: 900; letter-spacing: .18em;
}
h1 { margin: 4px 0; color: #ffe59b; font-family: Georgia, serif; font-size: clamp(31px, 8vw, 50px); text-shadow: 3px 3px 0 #7c451b, 0 0 20px rgba(245,205,98,.3); }
.subtitle { margin: 0; color: #b8c8e1; font-style: italic; letter-spacing: .08em; }

.pixelWorldScene {
    position: relative; margin-bottom: 23px; height: 270px; overflow: hidden;
    border: 4px solid #0b1327; outline: 3px solid #b18436; box-shadow: 0 8px 0 #030712;
}
.pixelWorldScene img, .mapScene > img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.sceneHero { position: absolute; left: 43%; bottom: 35px; transform: scale(1.35); }
.sceneMessage {
    position: absolute; left: 50%; bottom: 13px; transform: translateX(-50%); width: min(92%, 460px); padding: 8px 12px;
    color: #fffbe7; background: rgba(4,9,22,.88); border: 2px solid #f0cb72; box-shadow: 3px 3px 0 #000;
    font-size: 14px; font-weight: 900; text-align: center;
}

.panelHeader, .logHeader, .screenHeader, .stageTitleRow { display: flex; align-items: center; gap: 12px; }
.panelHeader { margin-bottom: 18px; }
.panelHeader.compact { margin-bottom: 20px; }
.pixelIcon { display: grid; place-items: center; width: 48px; height: 48px; background: #17365e; border: 3px solid #d8af50; color: #fff; font-size: 24px; box-shadow: 4px 4px 0 #1b1b1b; }
.panelHeader h2, .logHeader h2, .screenHeader h2, .stageTitleRow h2 { margin: 2px 0 0; color: inherit; font-family: Georgia, serif; }
.panelHeader p, .logHeader p { color: #7b5321; }

.modeGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modeCard {
    min-height: 170px; padding: 18px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    color: #fff8df; border: 3px solid #d8af50; box-shadow: inset 0 -8px 0 rgba(0,0,0,.28), 0 6px 0 #25170a;
    transition: transform .15s steps(2), filter .15s;
}
.modeCard:hover { transform: translateY(-4px); filter: brightness(1.12); }
.testModeCard { background: linear-gradient(180deg, #315d91, #1a365e); }
.questModeCard { background: linear-gradient(180deg, #6f4b9a, #3e2862); }
.modePixelIcon { font-size: 42px; image-rendering: pixelated; }
.modeCard strong { font-family: Georgia, serif; font-size: 20px; }
.modeCard small { max-width: 180px; color: #d7e1ef; line-height: 1.5; }

.adventureLog { margin-top: 21px; padding: 16px; color: #f8efd8; background: #13213d; border: 3px solid #7c6639; box-shadow: inset 0 0 0 3px rgba(255,255,255,.04); }
.logHeader { justify-content: space-between; }
.logHeader p { color: #9badca; }
.logGrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 13px; }
.logGrid > div { padding: 10px 5px; text-align: center; background: #1c3155; border: 2px solid #425c82; }
.logGrid span { display: block; color: #aebdd4; font-size: 11px; }
.logGrid strong { display: block; margin-top: 4px; color: var(--gold); font-size: 19px; }
.dangerTextButton { width: 100%; margin-top: 11px; padding: 8px; color: #c8b28e; background: transparent; border: 1px dashed #806b45; }

/* Screen headers */
.screenHeader { justify-content: space-between; margin-bottom: 20px; padding: 12px 14px; background: #101f3e; border: 3px solid #735827; outline: 2px solid #d7b75e; box-shadow: 0 6px 0 #02050c; }
.screenHeader > div { flex: 1; text-align: center; }
.screenHeader h2 { color: #ffe59b; }
.headerIcon { font-size: 31px; }
.backButton { min-width: 92px; min-height: 42px; padding: 7px 10px; color: #fff7db; background: #263d60; border: 2px solid #6e88aa; box-shadow: inset 0 -4px 0 #152642, 0 4px 0 #030713; font-size: 12px; font-weight: 900; }

/* Forms and buttons */
.settingsGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fieldWide { grid-column: 1 / -1; }
.fieldGroup label, .inputLabel { display: block; margin-bottom: 6px; color: #5c3d18; font-size: 13px; font-weight: 900; }
input[type="number"], select, #answerInput {
    width: 100%; height: 49px; padding: 0 12px; color: #20180f; background: #fffaf0; border: 3px solid #9a6a2d; box-shadow: inset 0 -4px 0 #ead2a1; outline: none;
}
input:focus, select:focus { border-color: #3c72aa; }
.checkboxRow { display: flex; align-items: center; gap: 10px; margin-top: 17px; padding: 12px; background: #f1dda9; border: 2px solid #a97a35; font-weight: 800; }
.checkboxRow input { width: 20px; height: 20px; accent-color: #3c72aa; }

.goldButton, .blueButton, .redButton, .parchmentButton {
    width: 100%; min-height: 52px; margin-top: 16px; padding: 11px 15px; font-weight: 900; border: 3px solid; box-shadow: inset 0 -6px 0 rgba(0,0,0,.2), 0 6px 0 #1c1208; transition: transform .12s steps(2), filter .12s;
}
.goldButton:hover, .blueButton:hover, .redButton:hover, .parchmentButton:hover { transform: translateY(-3px); filter: brightness(1.1); }
.goldButton { color: #fff9d2; background: #b77b28; border-color: #f1cf69; }
.blueButton { color: #f4f9ff; background: #2c6198; border-color: #7fb2e5; }
.redButton { color: #fff1ec; background: #9b3641; border-color: #e47a7f; }
.parchmentButton { color: #4c3418; background: #ead5a4; border-color: #9f7132; }
button:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.7); }

/* Quest map */
.stageTabs { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-bottom: 18px; }
.stageTab { min-height: 76px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #dce8fa; background: #172b4d; border: 2px solid #506b92; box-shadow: 0 5px 0 #02060e; }
.stageTab span { font-size: 23px; }
.stageTab strong { font-size: 12px; }
.stageTab small { color: #a7bbd7; }
.stageTab.active { color: #fff5c5; background: #6d4a1e; border-color: #efca65; }
.stageTab.locked { opacity: .45; }
.stageWorld { overflow: hidden; }
.stageTitleRow { justify-content: space-between; margin-bottom: 16px; }
.stageTitleRow p { color: #76501f; }
.stageClearCount { padding: 8px 10px; color: #fff6ca; background: #254c3a; border: 3px solid #5fd394; font-weight: 900; white-space: nowrap; }
.mapScene { position: relative; height: 330px; overflow: hidden; border: 4px solid #5b3c18; box-shadow: inset 0 0 0 4px rgba(255,255,255,.12); }
.theme-forest .mapScene { filter: hue-rotate(14deg) saturate(1.2); }
.theme-cave .mapScene { filter: hue-rotate(100deg) brightness(.72) saturate(.85); }
.theme-volcano .mapScene { filter: hue-rotate(285deg) saturate(1.35) brightness(.83); }
.theme-castle .mapScene { filter: hue-rotate(185deg) saturate(.9) brightness(1.05); }
.questRoute { position: absolute; inset: 0; }
.questRoute::before { position: absolute; left: 10%; right: 10%; top: 50%; height: 6px; background: repeating-linear-gradient(90deg,#f5d778 0 14px,transparent 14px 24px); content: ""; filter: drop-shadow(0 2px 0 #493217); }
.questNode {
    position: absolute; width: 82px; height: 82px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff8d9; background: #244875; border: 4px solid #d5b057; box-shadow: 0 6px 0 #071225, 0 0 0 3px rgba(255,255,255,.1);
}
.questNode:hover:not(:disabled) { transform: translateY(-4px); }
.questNode.selected { animation: nodeGlow 1s steps(2) infinite; }
.questNode.cleared { color: #fff7be; background: #237149; border-color: #8df2b4; }
.questNode.locked { background: #3d4657; border-color: #707784; filter: grayscale(1); }
.nodeIcon { font-size: 24px; }
.questNode strong { font-size: 14px; }
.questNode small { color: #dbe7f6; font-size: 10px; }
.node1 { left: 6%; top: 56%; }
.node2 { left: 25%; top: 24%; }
.node3 { left: 44%; top: 58%; }
.node4 { left: 63%; top: 24%; }
.node5 { right: 6%; top: 51%; }
@keyframes nodeGlow { 0%,100% { box-shadow: 0 6px 0 #071225, 0 0 0 3px #fff1a6; } 50% { box-shadow: 0 6px 0 #071225, 0 0 20px 7px #ffe071; } }
.questDetail { margin-top: 18px; padding: 16px; display: grid; grid-template-columns: 1fr auto; gap: 12px 18px; align-items: center; background: #17243d; border: 3px solid #73603d; color: #f5ecd9; }
.questDetailMain p { margin: 3px 0; color: #b6c4d9; }
.questDetailMain h3 { margin: 2px 0 8px; color: var(--gold); font-family: Georgia, serif; font-size: 24px; }
#questDetailCode { color: #e4c469; font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.questRewardBox { padding: 10px; text-align: center; background: #283c5d; border: 2px solid #516f99; }
.questRewardBox span { display: block; color: #9fb3d0; font-size: 9px; }
.questRewardBox strong { color: var(--gold); }
.questDetail .goldButton { grid-column: 1 / -1; margin-top: 0; }

/* Quiz battle */
.quizHeader { display: grid; grid-template-columns: 95px 1fr 95px; align-items: center; margin-bottom: 14px; }
.questStatus { text-align: center; }
.questStatus p { margin: 0; color: #d2b969; font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.questStatus h2 { margin: 3px 0 0; color: #ffe49a; font-family: Georgia, serif; font-size: clamp(20px,5vw,28px); }
.ruleBadge { justify-self: end; padding: 7px; color: #e9f7ff; background: #263e62; border: 2px solid #7393bc; font-size: 11px; font-weight: 900; }
.questProgressPanel { margin-bottom: 13px; padding: 10px 12px; background: #071126; border: 3px solid #70572b; }
.progressMeta { display: flex; justify-content: space-between; margin-bottom: 6px; color: #b4c2d8; font-size: 10px; font-weight: 900; }
.progressMeta strong { color: var(--gold); }

.battleScene { position: relative; height: 155px; margin-bottom: 14px; overflow: hidden; background: linear-gradient(#32689a 0 48%,#4d9b68 48% 72%,#28583e 72%); border: 4px solid #081326; outline: 2px solid #b98a3b; image-rendering: pixelated; }
.battleScene::before { position: absolute; left: 0; right: 0; bottom: 24px; height: 8px; background: repeating-linear-gradient(90deg,#bfa56b 0 14px,#d6bd7d 14px 28px); content:""; }
.heroBattle { position: absolute; left: 18%; bottom: 28px; transform: scale(1.55); }
.pixelSlime { position: absolute; right: 19%; bottom: 29px; width: 66px; height: 45px; background: #56c9a0; border: 5px solid #12664e; border-radius: 45% 45% 30% 30%; box-shadow: inset 0 -8px 0 #2a9c76, 0 6px 0 rgba(0,0,0,.25); animation: slimeBob .75s steps(2) infinite; }
.pixelSlime::before, .pixelSlime::after { position:absolute; top:14px; width:7px; height:7px; background:#07161b; content:""; }
.pixelSlime::before { left:17px; } .pixelSlime::after { right:17px; }
.pixelSlime span { position:absolute; left:26px; top:28px; width:13px; height:4px; background:#0b5c46; }
@keyframes slimeBob { 0%,100% { transform: translateY(0) scaleX(1); } 50% { transform: translateY(-7px) scaleX(.94); } }
.battleFlash { position:absolute; inset:0; pointer-events:none; opacity:0; }
.flashCorrect { animation: greenFlash .5s steps(3); }
.flashWrong { animation: redFlash .5s steps(3); }
@keyframes greenFlash { 0%,100%{opacity:0} 35%{opacity:.75;background:#fff49a} 60%{opacity:.4;background:#48ef9a} }
@keyframes redFlash { 0%,100%{opacity:0} 25%,65%{opacity:.55;background:#e34e58} }

.battlePanel { padding-top: 18px; }
.encounterLabel { margin-bottom: 13px; color: #7c551f; font-family: Georgia, serif; font-size: 11px; font-weight: 900; letter-spacing: .13em; text-align:center; }
#questionSentence { margin:0 0 12px; padding:23px 16px; color:#182234; background:#fffdf8; border:3px solid #bd8b40; box-shadow:inset 0 -5px 0 #ead8b4; font-family:Georgia,serif; font-size:clamp(21px,5.6vw,29px); font-weight:700; line-height:1.65; text-align:center; overflow-wrap:anywhere; }
#questionTranslation { margin:0 0 18px; padding:11px 13px; color:#57452c; background:#f1dfa9; border:2px dashed #a87835; line-height:1.6; text-align:center; }
.choiceButton { width:100%; min-height:55px; margin-top:10px; padding:12px 15px; color:#fff9e8; background:#243f66; border:3px solid #6e8bb1; border-left:8px solid #e2bd56; box-shadow:inset 0 -5px 0 #132844,0 5px 0 #070d18; font-weight:900; text-align:left; }
.choiceButton:first-child { margin-top:0; }
.choiceButton:hover:not(:disabled) { transform:translateX(5px); filter:brightness(1.1); }
.choiceButton.correct { color:#edfff5; background:#23714b; border-color:#75e3a5; animation:correctPulse .4s steps(3); }
.choiceButton.incorrect { color:#fff0ef; background:#8e303a; border-color:#eb777d; animation:wrongShake .38s steps(4); }
@keyframes correctPulse { 50%{transform:scale(1.025)} }
@keyframes wrongShake { 25%{transform:translateX(-7px)} 50%{transform:translateX(7px)} 75%{transform:translateX(-4px)} }
#answerInput { font-size:20px; }
#answerInput.inputCorrect { background:#d9f6e5; border-color:#2b9f69; }
#answerInput.inputIncorrect { background:#f7d6d7; border-color:#ba3d49; }
#feedbackArea { margin-top:18px; animation:reportIn .35s steps(4); }
@keyframes reportIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
#judgementText { margin:0 0 12px; padding:12px; border:3px solid; font-size:18px; font-weight:900; text-align:center; }
.correctMessage { color:#eafff3; background:#1d6e49; border-color:#74e2a4; }
.incorrectMessage { color:#fff0ed; background:#8b2e38; border-color:#ea777d; }
.answerDetails { padding:16px; background:#17243e; border:3px solid #725d38; color:#f5ead2; }
.reportHeading { color:var(--gold); font-family:Georgia,serif; font-weight:900; }
.detailLabel { margin:13px 0 3px; color:#aebdd3; font-size:11px; font-weight:900; }
.answerText { margin:0; color:#ffe49a; font-size:23px; font-weight:900; }
.fullSentence { font-size:18px; font-weight:800; line-height:1.55; }

/* Result / level up */
.resultPanel { text-align:center; }
.resultIcon { font-size:58px; animation:trophyBounce .8s steps(4) infinite; }
@keyframes trophyBounce { 50%{transform:translateY(-8px)} }
.resultPanel h2 { margin:5px 0 16px; color:#7b4f18; font-family:Georgia,serif; font-size:32px; }
#resultKicker { color:#8a6128; }
.resultText { padding:15px; background:#17243e; border:3px solid #75613d; color:#f6edd8; }
.rankBox { display:flex; align-items:center; justify-content:center; gap:22px; }
.rankBox span { color:#aebdd4; font-size:12px; }
.rankBox strong { color:var(--gold); font-family:Georgia,serif; font-size:48px; }
.scoreLine { font-size:21px; font-weight:900; }
.clearRequirement,.accuracyLine { color:#ced9e8; }
.resultMessage { color:#fff0aa; font-weight:900; }
.xpRewardPanel { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:13px; }
.xpRewardPanel > div { padding:11px; background:#f1dda9; border:2px solid #9b6a2b; }
.xpRewardPanel span { display:block; color:#704a1c; font-size:11px; }
.xpRewardPanel strong { color:#8d5712; font-size:20px; }
.xpRewardPanel .xpTotal { grid-column:1 / -1; background:#ffe99d; }

.levelUpOverlay { position:fixed; inset:0; z-index:1500; display:grid; place-items:center; padding:20px; background:rgba(2,5,14,.86); }
.levelUpCard { width:min(92%,430px); padding:30px 22px; text-align:center; color:#fff7d7; background:#152b50; border:5px solid #edc85f; outline:4px solid #69451c; box-shadow:0 0 45px rgba(248,215,106,.45); animation:levelPop .5s steps(5); }
@keyframes levelPop { from{transform:scale(.55);opacity:0} to{transform:scale(1);opacity:1} }
.levelUpSpark { color:#fff1a3; font-size:50px; animation:sparkSpin 1.2s steps(8) infinite; }
@keyframes sparkSpin { to{transform:rotate(360deg)} }
.levelUpCard p { margin:0; color:var(--gold); font-family:Georgia,serif; font-size:23px; letter-spacing:.16em; }
.levelUpCard h2 { margin:8px 0; color:#fff; font-size:42px; }
.levelUpCard strong { display:block; color:#ffe39a; font-size:20px; }

@media (max-width: 680px) {
    body { padding-top: 110px; }
    .playerHud { grid-template-columns: 48px 1fr 82px; }
    .playerHud > .pixelHero { width:48px;height:48px;background-size:96px 48px; }
    .levelLine strong { font-size:17px; }
    .levelLine span { font-size:12px; }
    .soundButton { width:82px; font-size:10px; }
    .modeGrid { grid-template-columns:1fr; }
    .modeCard { min-height:130px; }
    .logGrid { grid-template-columns:repeat(2,1fr); }
    .pixelWorldScene { height:220px; }
    .stageTabs { grid-template-columns:repeat(5,minmax(58px,1fr)); overflow-x:auto; }
    .stageTab { min-width:58px; }
    .mapScene { height:430px; }
    .questRoute::before { left:50%; right:auto; top:8%; bottom:8%; width:6px; height:auto; background:repeating-linear-gradient(180deg,#f5d778 0 14px,transparent 14px 24px); }
    .questNode { width:72px;height:72px;left:auto!important;right:auto!important; }
    .node1{left:20%!important;top:5%}.node2{right:18%!important;top:23%}.node3{left:18%!important;top:42%}.node4{right:18%!important;top:61%}.node5{left:20%!important;top:79%}
    .questDetail { grid-template-columns:1fr; }
    .questRewardBox { text-align:left; }
    .quizHeader { grid-template-columns:82px 1fr 82px; }
    .ruleBadge { font-size:9px; }
    .battleScene { height:135px; }
    .heroBattle { left:12%; }
    .pixelSlime { right:12%; }
    .settingsGrid { grid-template-columns:1fr; }
    .fieldWide { grid-column:auto; }
}

@media (max-width: 420px) {
    body { padding-top: 116px; }
    .playerHud { grid-template-columns:42px 1fr 70px; gap:6px; padding:7px; }
    .playerHud > .pixelHero { width:42px;height:42px;background-size:84px 42px; }
    .soundButton { width:70px; padding:5px; }
    .xpText { font-size:8px; }
    .pixelPanel { padding:17px 14px; }
    h1 { font-size:30px; }
    .sceneHero { left:38%; }
    .screenHeader { padding:9px; }
    .backButton { min-width:75px; font-size:10px; }
    .headerIcon { font-size:24px; }
    .stageTitleRow { align-items:flex-start; }
    .stageClearCount { font-size:10px; }
    #questionSentence { padding:19px 11px; font-size:21px; }
    .choiceButton { font-size:14px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* =========================================
   OBU Vocabulary Quest RPG 3.0
   Character / Sound / Battle quality update
========================================= */

.pixelSprite {
    display: block;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .28));
}

.playerHud {
    grid-template-columns: 64px minmax(0, 1fr) auto;
}

.hudHeroSprite {
    width: 62px;
    height: 62px;
    animation: heroIdle .85s steps(2) infinite;
}

.hudSoundControls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.settingsSoundButton {
    min-height: 30px;
    padding: 4px 8px;
    font-size: 10px;
}

@keyframes heroIdle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.pixelWorldScene > img:first-child,
.mapScene > img,
.battleBackground {
    image-rendering: pixelated;
}

.sceneHeroSprite {
    position: absolute;
    left: 42%;
    bottom: 42px;
    width: 84px !important;
    height: 84px !important;
    animation: sceneHeroWalk 2.6s steps(8) infinite, heroIdle .65s steps(2) infinite;
}

@keyframes sceneHeroWalk {
    0% { left: 28%; }
    50% { left: 52%; }
    100% { left: 28%; }
}

.stageDescription {
    margin-top: 7px !important;
    max-width: 620px;
    color: #5b4528 !important;
    font-size: 13px;
    line-height: 1.55;
    letter-spacing: 0 !important;
}

.theme-forest .mapScene,
.theme-cave .mapScene,
.theme-ice .mapScene,
.theme-castle .mapScene {
    filter: none !important;
}

.questDetail {
    grid-template-columns: 100px minmax(0, 1fr) auto;
}

.questEnemyPreview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 88px;
    padding: 8px 5px;
    background: #0d1930;
    border: 2px solid #566f95;
}

.questEnemyPreview img {
    width: 74px;
    height: 74px;
    animation: enemyPreviewBob .8s steps(2) infinite;
}

.questEnemyPreview span {
    color: #ffe69d;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
    line-height: 1.35;
}

@keyframes enemyPreviewBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.questNode small {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dynamic battle stage */
.battleScene {
    height: 210px;
    background: #18233a;
    isolation: isolate;
}

.battleScene::before {
    z-index: 2;
    bottom: 20px;
}

.battleBackground {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.battleActor {
    position: absolute;
    z-index: 4;
    bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.battleActor > span {
    max-width: 180px;
    margin-top: -5px;
    padding: 3px 7px;
    overflow: hidden;
    color: #fff8da;
    background: rgba(5, 10, 24, .88);
    border: 2px solid #e2bd5c;
    box-shadow: 2px 2px 0 #000;
    font-size: 10px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.heroActor {
    left: 10%;
}

.enemyActor {
    right: 9%;
}

.battleHeroSprite {
    width: 104px;
    height: 104px;
    transform: scaleX(1);
    animation: battleHeroIdle .8s steps(2) infinite;
}

.battleEnemySprite {
    width: 112px;
    height: 112px;
    transform: scaleX(-1);
    animation: battleEnemyIdle .72s steps(2) infinite;
}

.enemyActor.bossEnemy .battleEnemySprite {
    width: 138px;
    height: 138px;
    filter: drop-shadow(0 7px 0 rgba(0,0,0,.35)) drop-shadow(0 0 12px rgba(232,79,112,.55));
}

.bossBattle {
    outline-color: #e25a76;
    box-shadow: 0 0 25px rgba(219, 57, 92, .38);
}

@keyframes battleHeroIdle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes battleEnemyIdle {
    0%, 100% { transform: scaleX(-1) translateY(0); }
    50% { transform: scaleX(-1) translateY(-5px); }
}

.heroStrikes .heroActor {
    animation: heroAttackMotion .55s steps(5);
}

.heroStrikes .enemyActor {
    animation: enemyDamageMotion .55s steps(5);
}

.enemyStrikes .enemyActor {
    animation: enemyAttackMotion .55s steps(5);
}

.enemyStrikes .heroActor {
    animation: heroDamageMotion .55s steps(5);
}

@keyframes heroAttackMotion {
    0%,100% { transform: translateX(0); }
    35% { transform: translateX(115px) translateY(-7px); }
    55% { transform: translateX(128px) translateY(2px); }
}

@keyframes enemyDamageMotion {
    0%,100% { transform: translateX(0); filter: none; }
    35% { transform: translateX(14px); filter: brightness(2.3); }
    55% { transform: translateX(-11px); filter: brightness(.5) sepia(1) hue-rotate(315deg); }
}

@keyframes enemyAttackMotion {
    0%,100% { transform: translateX(0); }
    35% { transform: translateX(-112px) translateY(-5px); }
    55% { transform: translateX(-126px); }
}

@keyframes heroDamageMotion {
    0%,100% { transform: translateX(0); filter: none; }
    35% { transform: translateX(-13px); filter: brightness(2.2); }
    55% { transform: translateX(10px); filter: sepia(1) saturate(2) hue-rotate(315deg); }
}

.screenHit {
    animation: battleScreenShake .42s steps(5);
}

@keyframes battleScreenShake {
    0%,100% { transform: translate(0,0); }
    20% { transform: translate(-5px,2px); }
    40% { transform: translate(5px,-2px); }
    60% { transform: translate(-3px,-1px); }
    80% { transform: translate(3px,1px); }
}

.damageText {
    position: absolute;
    z-index: 9;
    left: 50%;
    top: 28%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: Georgia, serif;
    font-size: clamp(23px, 6vw, 36px);
    font-weight: 900;
    letter-spacing: .06em;
    text-shadow: 3px 3px 0 #000, -2px -2px 0 #000;
    pointer-events: none;
    opacity: 0;
}

.damageGood {
    color: #fff49a;
    animation: damagePop .75s steps(6);
}

.damageBad {
    color: #ff8992;
    animation: damagePop .75s steps(6);
}

@keyframes damagePop {
    0% { opacity: 0; transform: translate(-50%, 10px) scale(.55); }
    25%,70% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    100% { opacity: 0; transform: translate(-50%, -85px) scale(.95); }
}

.questionModeChip {
    width: fit-content;
    margin: 0 auto 10px;
    padding: 5px 10px;
    border: 2px solid;
    box-shadow: 2px 2px 0 #3b2a14;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
}

.choiceModeChip {
    color: #fff6c8;
    background: #315d8d;
    border-color: #86b6e2;
}

.inputModeChip {
    color: #ffe8fa;
    background: #704a91;
    border-color: #c39ae1;
}

/* Result character */
.resultPanel {
    overflow: hidden;
}

.resultHeroSprite {
    width: 105px;
    height: 105px;
    margin: -5px auto -12px;
    animation: resultHeroPose .85s steps(4) infinite;
}

@keyframes resultHeroPose {
    0%,100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-6px) rotate(2deg); }
}

.levelUpHeroSprite {
    width: 132px;
    height: 132px;
    margin: 0 auto -7px;
    animation: levelHeroGlow 1s steps(4) infinite;
}

.levelUpEquipment {
    display: block;
    margin-top: 9px;
    color: #b9f5ff;
    font-weight: 800;
}

@keyframes levelHeroGlow {
    0%,100% { filter: drop-shadow(0 0 5px #ffe370); transform: scale(1); }
    50% { filter: drop-shadow(0 0 18px #fff2a2); transform: scale(1.04); }
}

/* Audio settings */
.audioSettingsOverlay {
    position: fixed;
    inset: 0;
    z-index: 1700;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(2, 5, 14, .82);
}

.audioSettingsCard {
    width: min(94%, 440px);
}

.audioSettingsHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.audioSettingsHeader p {
    margin: 0;
    color: #8b632b;
    font-family: Georgia, serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
}

.audioSettingsHeader h2 {
    margin: 3px 0 0;
    color: #513617;
    font-family: Georgia, serif;
}

.closeAudioButton {
    width: 42px;
    height: 42px;
    color: #fff;
    background: #81313e;
    border: 3px solid #e27d85;
    box-shadow: 0 4px 0 #4a1922;
    font-size: 23px;
    font-weight: 900;
}

.volumeControl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px 12px;
    margin-top: 14px;
    padding: 13px;
    background: #17243e;
    border: 3px solid #75613d;
    color: #f8efd8;
}

.volumeControl span {
    font-weight: 900;
}

.volumeControl strong {
    color: var(--gold);
}

.volumeControl input[type="range"] {
    grid-column: 1 / -1;
    width: 100%;
    accent-color: #d99b37;
}

.audioNote {
    margin: 14px 0 0;
    color: #624b2b;
    font-size: 12px;
    line-height: 1.55;
}

/* Mobile refinements */
@media (max-width: 680px) {
    body { padding-top: 132px; }

    .playerHud {
        grid-template-columns: 52px minmax(0, 1fr) 78px;
        min-height: 98px;
    }

    .hudHeroSprite {
        width: 50px;
        height: 50px;
    }

    .hudSoundControls {
        gap: 4px;
    }

    .hudSoundControls .soundButton {
        width: 78px;
        min-height: 31px;
        padding: 4px;
        font-size: 9px;
    }

    .questDetail {
        grid-template-columns: 82px 1fr;
    }

    .questEnemyPreview {
        min-width: 74px;
    }

    .questEnemyPreview img {
        width: 64px;
        height: 64px;
    }

    .questRewardBox {
        grid-column: 1 / -1;
    }

    .questDetail .goldButton {
        grid-column: 1 / -1;
    }

    .battleScene {
        height: 178px;
    }

    .battleHeroSprite {
        width: 84px;
        height: 84px;
    }

    .battleEnemySprite {
        width: 92px;
        height: 92px;
    }

    .enemyActor.bossEnemy .battleEnemySprite {
        width: 112px;
        height: 112px;
    }

    .heroActor { left: 5%; }
    .enemyActor { right: 4%; }

    .battleActor > span {
        max-width: 130px;
        font-size: 8px;
    }

    @keyframes heroAttackMotion {
        0%,100% { transform: translateX(0); }
        40%,55% { transform: translateX(62px) translateY(-4px); }
    }

    @keyframes enemyAttackMotion {
        0%,100% { transform: translateX(0); }
        40%,55% { transform: translateX(-62px) translateY(-4px); }
    }
}

@media (max-width: 420px) {
    body { padding-top: 138px; }

    .playerHud {
        grid-template-columns: 44px minmax(0, 1fr) 68px;
    }

    .hudHeroSprite {
        width: 43px;
        height: 43px;
    }

    .hudSoundControls .soundButton {
        width: 68px;
        font-size: 8px;
    }

    .sceneHeroSprite {
        width: 70px !important;
        height: 70px !important;
        bottom: 45px;
    }

    .questDetail {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .questEnemyPreview {
        width: 100%;
    }

    .questEnemyPreview img {
        width: 72px;
        height: 72px;
    }

    .battleScene {
        height: 160px;
    }

    .battleHeroSprite {
        width: 72px;
        height: 72px;
    }

    .battleEnemySprite {
        width: 78px;
        height: 78px;
    }

    .enemyActor.bossEnemy .battleEnemySprite {
        width: 94px;
        height: 94px;
    }

    .battleActor > span {
        max-width: 108px;
        font-size: 7px;
    }
}

/* =========================================
   OBU Vocabulary Quest 4.0
   スキルトレーニング / モバイル盤面表示修正
========================================= */

.modeGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.skillModeCard {
    background: linear-gradient(180deg, #45266d, #24123e);
    border-color: #bd8cff;
}

.skillModeCard:hover {
    box-shadow: 0 0 28px rgba(189, 140, 255, .35);
}

.skillSetupPanel h3,
.skillEnemySection h3,
.skillRangePanel h3 {
    margin: 0 0 12px;
    color: #ffe59a;
    font-family: Georgia, serif;
    font-size: 18px;
}

.skillAiStatus {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 11px 13px;
    border: 2px solid #62728f;
    background: #111d34;
    color: #dce8f7;
    font-size: 13px;
}

.skillAiStatus .statusLamp {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #e2b84f;
    box-shadow: 0 0 10px currentColor;
}

.skillAiStatus.ready {
    border-color: #55d88a;
    color: #baf5d0;
}

.skillAiStatus.ready .statusLamp { background: #55d88a; }
.skillAiStatus.notReady { border-color: #dd6b6b; color: #ffd0d0; }
.skillAiStatus.notReady .statusLamp { background: #dd6b6b; }
.skillAiStatus.checking .statusLamp { animation: skillLampPulse .8s steps(2) infinite; }

@keyframes skillLampPulse {
    50% { opacity: .3; }
}

.skillRangePanel,
.skillEnemySection {
    margin-top: 18px;
    padding: 15px;
    background: rgba(8, 18, 37, .72);
    border: 2px solid #536a91;
}

.skillSettingsGrid {
    margin-top: 0;
}

.skillRangeNote,
.skillPrivacyNote {
    margin: 10px 0 0;
    color: #b8c8de;
    font-size: 11px;
    line-height: 1.6;
}

.skillEnemyGrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.skillEnemyCard {
    min-height: 165px;
    padding: 9px 5px;
    color: #eef5ff;
    background: #162640;
    border: 3px solid #536c95;
    box-shadow: none;
    text-align: center;
}

.skillEnemyCard:hover:not(:disabled) {
    transform: translateY(-4px);
    border-color: #e0c56f;
}

.skillEnemyCard.selected {
    color: #fff5bf;
    background: #3a2858;
    border-color: #e6c8ff;
    box-shadow: 0 0 18px rgba(195, 143, 255, .35);
}

.skillEnemyCard img {
    width: 72px;
    height: 72px;
    display: block;
    margin: 0 auto 5px;
}

.skillEnemyCard strong,
.skillEnemyCard small,
.skillEnemyCard .skillDifficulty {
    display: block;
}

.skillEnemyCard strong {
    min-height: 34px;
    font-size: 11px;
    line-height: 1.35;
}

.skillEnemyCard small {
    margin-top: 4px;
    color: #b9cae1;
    font-size: 10px;
}

.skillDifficulty {
    margin-bottom: 5px;
    color: #ffd863;
    font-size: 9px;
    letter-spacing: -.03em;
}

.skillEnemyDetail {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    margin-top: 15px;
    padding: 14px;
    background: linear-gradient(135deg, #171c34, #271742);
    border: 3px solid #8966ad;
}

.skillEnemyDetail > img {
    width: 96px;
    height: 96px;
    animation: enemyPreviewBob .8s steps(2) infinite;
}

.skillEnemyDetail p { margin: 4px 0; color: #c8d3e4; line-height: 1.55; }
.skillEnemyDetail > div > p:first-child { color: #bd9ee6; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.skillEnemyDetail h3 { margin: 3px 0 7px; color: #ffe59a; font-family: Georgia, serif; font-size: 23px; }

.skillEnemyStats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.skillEnemyStats span {
    padding: 6px 9px;
    background: #0c1629;
    border: 2px solid #516d98;
    color: #c7d6e9;
    font-size: 10px;
}

.skillEnemyStats strong { color: #ffe070; }

.skillConsentRow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 13px;
    color: #e1ebf8;
    background: #111d34;
    border: 2px solid #596e91;
    font-size: 12px;
    line-height: 1.6;
}

.skillConsentRow input {
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    flex: 0 0 auto;
    accent-color: #9a65d7;
}

.enemyHpPanel {
    margin-bottom: 13px;
    padding: 11px 13px;
    background: #071126;
    border: 3px solid #70572b;
}

.enemyHpMeta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    color: #f7e7a3;
    font-size: 11px;
    font-weight: 900;
}

.enemyHpTrack {
    height: 18px;
    overflow: hidden;
    background: #2a1118;
    border: 3px solid #121a2a;
    box-shadow: inset 0 0 0 2px #65333a;
}

.enemyHpBar {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(90deg, #36c971 0 16px, #2db360 16px 30px);
    transition: width .65s steps(10), background .3s;
}

.enemyHpBar.danger {
    background: repeating-linear-gradient(90deg, #f05a59 0 16px, #c83f47 16px 30px);
    animation: dangerHpPulse .55s steps(2) infinite;
}

@keyframes dangerHpPulse { 50% { filter: brightness(1.35); } }

.skillBattleScene {
    height: 230px;
}

.skillBattlePanel {
    text-align: center;
}

.skillInstruction {
    margin: 8px 0 3px;
    color: #b8c8dc;
    font-size: 12px;
    font-weight: 800;
}

.skillTargetWord {
    margin: 8px 0 18px;
    padding: 18px 12px;
    color: #172239;
    background: linear-gradient(#fff8d5, #ecd699);
    border: 4px solid #815f28;
    outline: 2px solid #e5c66c;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 9vw, 58px);
    font-weight: 900;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 0 rgba(255,255,255,.75);
}

.skillActionGrid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 10px;
}

.recordButton {
    min-height: 58px;
    background: linear-gradient(#a83e55, #6d2034);
    border: 3px solid #e8919f;
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    box-shadow: 0 7px 0 #3b1020;
}

.recordButton:hover:not(:disabled) { background: linear-gradient(#c94d67, #80273e); }
.recordButton.recording {
    background: linear-gradient(#f05a59, #a62032);
    animation: recordingPulse .65s steps(2) infinite;
}
.recordButton.scoring { background: #385171; border-color: #829bbc; box-shadow: none; }

@keyframes recordingPulse {
    50% { filter: brightness(1.35); transform: scale(1.015); }
}

.skillRecordingStatus {
    margin: 13px 0 0;
    padding: 11px;
    color: #cbd9ea;
    background: #101d34;
    border: 2px solid #506887;
    font-size: 12px;
    line-height: 1.55;
}

.skillRecordingStatus.recording { color: #ffd0d0; border-color: #d75b6b; }
.skillRecordingStatus.scoring { color: #d9d2ff; border-color: #9670cd; }
.skillRecordingStatus.error { color: #ffd1d1; background: #3b1722; border-color: #d85e6c; }
.skillRecordingStatus.perfect { color: #fff4a8; border-color: #f3ce57; }
.skillRecordingStatus.great { color: #c7f3dc; border-color: #5bd493; }
.skillRecordingStatus.good { color: #d2e8ff; border-color: #5f9ee4; }
.skillRecordingStatus.trying { color: #ffe1ad; border-color: #db9944; }
.skillRecordingStatus.retry { color: #ffc7c7; border-color: #d45c64; }

.skillRecordingMeter {
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 5px;
    height: 42px;
    margin-top: 10px;
}

.skillRecordingMeter span {
    width: 9px;
    height: 12px;
    background: #ff6577;
    border: 2px solid #722134;
    animation: meterBounce .55s steps(4) infinite alternate;
}
.skillRecordingMeter span:nth-child(2) { animation-delay: .1s; }
.skillRecordingMeter span:nth-child(3) { animation-delay: .2s; }
.skillRecordingMeter span:nth-child(4) { animation-delay: .3s; }
.skillRecordingMeter span:nth-child(5) { animation-delay: .4s; }

@keyframes meterBounce { to { height: 38px; } }

.skillScoreReport {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    text-align: left;
    background: #121e35;
    border: 3px solid #5f7599;
    animation: feedbackSlideUp .4s ease both;
}

.skillScoreMain {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
    background: #081226;
    border: 2px solid #455f87;
}

.skillScoreMain span { color: #a7bad2; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.skillScoreMain strong { color: #ffe06b; font-family: Georgia, serif; font-size: 56px; line-height: 1; }
.skillScoreMain em { margin-top: 5px; font-style: normal; font-weight: 900; }
.skillScoreMain em.rating-perfect { color: #ffe168; }
.skillScoreMain em.rating-great { color: #62e29c; }
.skillScoreMain em.rating-good { color: #68b4ff; }
.skillScoreMain em.rating-trying { color: #efad51; }
.skillScoreMain em.rating-retry { color: #ed7077; }

.skillScoreDetails p { margin: 6px 0; color: #cbd8e8; font-size: 12px; }
.skillScoreDetails strong { color: #fff1ac; }

.skillPhonemeAdvice {
    grid-column: 1 / -1;
    padding: 10px 12px;
    background: #e9d8a9;
    border: 2px solid #93692b;
    color: #422c16;
    line-height: 1.55;
}
.skillPhonemeAdvice strong { display: block; color: #6e4218; }
.skillPhonemeAdvice p { margin: 4px 0; font-weight: 800; }
.skillPhonemeAdvice small { color: #72522d; }

.skillHeroAttack { animation: skillHeroAttack .65s steps(5); }
.skillEnemyDamaged { animation: skillEnemyDamage .65s steps(5); }
.skillEnemyAttack { animation: enemyAttackMotion .65s steps(5); }
.skillHeroDamaged { animation: skillHeroDamage .55s steps(5); }
.skillEnemyDefeated { animation: skillEnemyDefeat 1.15s steps(8) forwards; }

@keyframes skillHeroAttack {
    0%,100% { transform: translateX(0); }
    40%,58% { transform: translateX(110px) translateY(-8px); }
}
@keyframes skillEnemyDamage {
    0%,100% { transform: translateX(0); filter: none; }
    25% { transform: translateX(-10px); filter: brightness(2); }
    50% { transform: translateX(10px); filter: hue-rotate(310deg) brightness(1.8); }
    75% { transform: translateX(-6px); filter: brightness(2); }
}
@keyframes skillHeroDamage {
    0%,100% { transform: translateX(0); filter: none; }
    30% { transform: translateX(-9px); filter: hue-rotate(310deg) brightness(1.8); }
    60% { transform: translateX(7px); filter: brightness(2); }
}
@keyframes skillEnemyDefeat {
    0% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
    40% { opacity: 1; transform: translateY(-15px) scale(1.12); filter: brightness(3); }
    100% { opacity: 0; transform: translateY(48px) scale(.3) rotate(18deg); filter: brightness(4); }
}

.criticalDamage { color: #fff07e !important; font-size: 22px !important; text-shadow: 3px 3px 0 #8a3b12, 0 0 15px #fff49b !important; }
.counterDamage { color: #ff8a8a !important; }

.skillResultEnemy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
    color: #ffe49a;
    font-size: 20px;
}
.skillResultEnemy img { width: 82px; height: 82px; }
.skillResultStats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.skillResultStats > div {
    padding: 10px 5px;
    background: #172742;
    border: 2px solid #506b94;
    text-align: center;
}
.skillResultStats span { display: block; color: #aebfd5; font-size: 9px; }
.skillResultStats strong { display: block; margin-top: 4px; color: #ffe177; font-size: 19px; }
.skillRemainingHp { color: #c8d7e8; font-size: 12px; }

/* クエスト盤面の「4択」「入力」「4択＋入力」をスマホでも省略せず表示 */
.questNode {
    padding: 5px 3px;
}

.questNode small {
    display: block;
    width: 100%;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: keep-all;
    font-size: 9px;
    line-height: 1.15;
}

@media (max-width: 900px) {
    .modeGrid { grid-template-columns: 1fr; }
    .skillEnemyGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .skillEnemyGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skillEnemyCard { min-height: 145px; }
    .skillEnemyCard img { width: 62px; height: 62px; }
    .skillEnemyDetail { grid-template-columns: 82px minmax(0, 1fr); }
    .skillEnemyDetail > img { width: 78px; height: 78px; }
    .skillActionGrid { grid-template-columns: 1fr; }
    .skillScoreReport { grid-template-columns: 115px minmax(0, 1fr); }
    .skillScoreMain strong { font-size: 46px; }
    .skillBattleScene { height: 185px; }

    .questNode {
        width: 78px !important;
        height: 84px !important;
        padding: 5px 3px;
    }
    .questNode strong { font-size: 13px; }
    .questNode small { font-size: 9px; line-height: 1.1; }
}

@media (max-width: 420px) {
    .skillEnemyGrid { grid-template-columns: 1fr 1fr; gap: 7px; }
    .skillEnemyCard { min-height: 136px; }
    .skillEnemyCard strong { min-height: 30px; font-size: 10px; }
    .skillEnemyDetail { grid-template-columns: 1fr; text-align: center; }
    .skillEnemyDetail > img { margin: 0 auto; }
    .skillEnemyStats { justify-content: center; }
    .skillTargetWord { padding: 15px 8px; font-size: clamp(30px, 11vw, 45px); }
    .skillScoreReport { grid-template-columns: 1fr; }
    .skillPhonemeAdvice { grid-column: auto; }
    .skillResultStats { grid-template-columns: 1fr 1fr; }
    .skillBattleScene { height: 165px; }

    .questNode {
        width: 76px !important;
        height: 86px !important;
    }
    .questNode small {
        font-size: 8.5px;
        line-height: 1.08;
    }
}

/* =========================================
   RPG 4.1 ブラウザ発音判定・スマホ盤面修正
========================================= */
.skillInfoRow {
    display: block;
    line-height: 1.65;
}

.skillInfoRow::before {
    content: "ℹ ";
    color: #ffe177;
    font-weight: 900;
}

/* 盤面名の下にある「4択」「入力」「4択＋入力」を確実に表示 */
.questNode small {
    min-height: 2.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.12;
}

@media (max-width: 680px) {
    .mapScene { height: 500px; }
    .questNode {
        width: 82px !important;
        height: 96px !important;
        padding: 6px 4px !important;
    }
    .questNode strong { font-size: 13px; }
    .questNode small {
        min-height: 2.35em;
        font-size: 9px !important;
        line-height: 1.15 !important;
    }
    .node1{left:18%!important;top:4%}
    .node2{right:16%!important;top:23%}
    .node3{left:16%!important;top:42%}
    .node4{right:16%!important;top:61%}
    .node5{left:18%!important;top:80%}
}

@media (max-width: 420px) {
    .mapScene { height: 510px; }
    .questNode {
        width: 80px !important;
        height: 98px !important;
    }
    .questNode small {
        font-size: 8.5px !important;
        line-height: 1.16 !important;
    }
}

/* =========================================
   RPG 5.0 長期成長・伝説・装備・実績・デイリー
========================================= */

.hudMetaLine {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 5px;
    font-size: 10px;
}

.legendRankBadge {
    padding: 3px 7px;
    color: #fff4a8;
    background: linear-gradient(180deg, #744bb8, #34216f);
    border: 1px solid #c9a8ff;
    box-shadow: 0 0 10px rgba(180, 126, 255, 0.45);
    white-space: nowrap;
}

.hudGold {
    color: #ffe177;
    font-weight: 900;
    white-space: nowrap;
}

.equipmentIcons {
    letter-spacing: 0.1em;
    filter: drop-shadow(1px 2px 0 rgba(0,0,0,.65));
}

.sceneEquipmentIcons {
    position: absolute;
    left: calc(50% + 22px);
    bottom: 52px;
    z-index: 4;
    min-width: 42px;
    padding: 3px 6px;
    color: #fff4a8;
    background: rgba(7,17,38,.78);
    border: 1px solid #d6b75d;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
}

.growthMenuGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 18px;
}

.growthMenuButton {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 2px 10px;
    min-height: 76px;
    padding: 12px;
    color: #eff7ff;
    background: linear-gradient(180deg, #253c61, #14243e);
    border: 2px solid #6984ad;
    text-align: left;
}

.growthMenuButton > span {
    grid-row: 1 / span 2;
    font-size: 30px;
}

.growthMenuButton strong { color: #ffe177; font-size: 14px; }
.growthMenuButton small { color: #b9cbe1; font-size: 10px; line-height: 1.4; }
.growthMenuButton:hover { border-color: #ffe177; background: linear-gradient(180deg, #31527e, #182d4c); }

.dailyMissionPanel {
    margin-top: 18px;
    padding: 15px;
    background: linear-gradient(180deg, rgba(20,41,70,.98), rgba(8,24,45,.98));
    border: 3px double #7fa3cf;
    box-shadow: inset 0 0 0 2px #071126, 0 8px 20px rgba(0,0,0,.28);
}

.dailyHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.dailyHeader p { margin: 0 0 3px; color: #8fb6df; font-size: 9px; letter-spacing: .15em; }
.dailyHeader h2 { margin: 0; color: #fff2ad; font-size: 18px; }
.dailyRewardBadge {
    padding: 7px 9px;
    color: #3c2508;
    background: #ffe177;
    border: 2px solid #fff4ad;
    box-shadow: 2px 2px 0 #6e4211;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}
.dailyMissionList { display: grid; gap: 9px; }
.dailyMissionItem {
    padding: 9px 10px;
    background: rgba(4,14,29,.72);
    border: 1px solid #506b94;
}
.dailyMissionItem.completed { border-color: #68d89b; background: rgba(18,73,54,.55); }
.dailyMissionText {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    color: #dce9f7;
    font-size: 11px;
}
.dailyMissionText em { color: #ffe177; font-style: normal; font-weight: 900; }
.dailyProgressTrack {
    height: 7px;
    margin-top: 7px;
    overflow: hidden;
    background: #050b18;
    border: 1px solid #304a70;
}
.dailyProgressTrack > div {
    height: 100%;
    background: linear-gradient(90deg, #2ea86d, #7cf0a5);
    transition: width .35s ease;
}
#claimDailyRewardButton { margin-top: 12px; }
#claimDailyRewardButton:disabled { filter: grayscale(.65); opacity: .72; cursor: default; }

.collectionPanel,
.achievementsPanel { padding: 18px; }

.collectionHeroPanel {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 14px;
    background: linear-gradient(135deg, #1d3558, #101f38);
    border: 2px solid #7594bc;
}
.collectionHeroVisual { position: relative; min-height: 92px; text-align: center; }
.collectionHeroSprite { width: 92px; height: 92px; object-fit: contain; }
.collectionEquipmentIcons {
    position: absolute;
    right: -5px;
    bottom: -3px;
    padding: 4px 6px;
    color: #fff4a8;
    background: #071126;
    border: 1px solid #d6b75d;
    font-size: 16px;
}
.collectionHeroPanel p { margin: 0 0 4px; color: #9cb6d2; font-size: 9px; letter-spacing: .12em; }
.collectionHeroPanel h2 { margin: 0 0 6px; color: #fff2ad; font-size: 21px; }
.fixedTitleNote { letter-spacing: 0 !important; line-height: 1.55; }
.collectionGoldBox {
    padding: 10px 13px;
    color: #372306;
    background: linear-gradient(180deg, #fff0a0, #e8bd49);
    border: 3px double #fff7c4;
    text-align: center;
}
.collectionGoldBox span { display: block; font-size: 9px; }
.collectionGoldBox strong { display: block; margin-top: 4px; font-size: 20px; }
.collectionGuide { color: #b9cbe1; font-size: 11px; line-height: 1.7; }

.equipmentCollectionGrid { display: grid; gap: 18px; }
.equipmentSlotGroup > h2 {
    margin: 0 0 9px;
    padding-bottom: 6px;
    color: #ffe177;
    border-bottom: 2px solid #506b94;
    font-size: 17px;
}
.equipmentSlotGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.equipmentCard {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
    padding: 11px;
    background: #101f38;
    border: 2px solid #4e678c;
    box-shadow: 3px 3px 0 #050a13;
}
.equipmentCard.equipped { border-color: #ffe177; box-shadow: 0 0 14px rgba(255,225,119,.25), 3px 3px 0 #050a13; }
.equipmentCard.owned:not(.equipped) { border-color: #67b68b; }
.equipmentItemIcon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    background: #071126;
    border: 2px solid #728aae;
    font-size: 29px;
}
.equipmentItemInfo span { color: #8fb6df; font-size: 8px; letter-spacing: .1em; }
.equipmentItemInfo h3 { margin: 4px 0; color: #f6f0d5; font-size: 13px; }
.equipmentItemInfo p { margin: 0; color: #aebfd5; font-size: 9px; line-height: 1.5; }
.equipmentActionButton {
    grid-column: 1 / -1;
    min-height: 38px;
    margin-top: 2px;
    color: #201405;
    background: #f0c95c;
    border: 2px solid #fff0a6;
    font-size: 11px;
    font-weight: 900;
}
.equipmentActionButton:disabled { color: #c8d7e8; background: #34445d; border-color: #566b88; opacity: .85; }

.achievementSummary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
    padding: 15px;
    background: #122640;
    border: 2px solid #637fa6;
}
.achievementSummary p { margin: 0 0 4px; color: #9cb6d2; font-size: 10px; line-height: 1.6; }
.achievementSummary h2 { margin: 0 0 5px; color: #fff2ad; font-size: 20px; }
.achievementSummary > strong {
    min-width: 92px;
    padding: 10px;
    color: #362006;
    background: #ffe177;
    border: 3px double #fff2a6;
    text-align: center;
    font-size: 20px;
}
.achievementGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.achievementCard {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-height: 98px;
    padding: 12px;
    background: #101f38;
    border: 2px solid #465e80;
}
.achievementCard.unlocked { border-color: #d9ba59; background: linear-gradient(135deg, #253b59, #14253e); }
.achievementCard.locked { filter: grayscale(.75); opacity: .68; }
.achievementIcon { font-size: 35px; text-align: center; }
.achievementCard span { color: #8fb6df; font-size: 8px; letter-spacing: .12em; }
.achievementCard h3 { margin: 4px 0; color: #ffe177; font-size: 14px; }
.achievementCard p { margin: 0; color: #b9cbe1; font-size: 9px; line-height: 1.55; }

.actorEquipmentIcons {
    display: block;
    min-height: 18px;
    margin-top: 2px;
    color: #fff2ad;
    font-size: 13px;
}
.resultEquipmentIcons,
.levelUpEquipmentIcons {
    margin: -5px auto 8px;
    color: #fff2ad;
    font-size: 18px;
    text-align: center;
}

.goldTotal {
    color: #3a2406 !important;
    background: linear-gradient(180deg, #ffe891, #d6a52b) !important;
    border-color: #fff3b0 !important;
}

.achievementToast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1200;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    width: min(390px, calc(100vw - 28px));
    padding: 13px;
    color: #f7f4de;
    background: linear-gradient(135deg, #2d244f, #111c34);
    border: 3px double #e2c468;
    box-shadow: 0 10px 35px rgba(0,0,0,.55), 0 0 18px rgba(233,196,90,.28);
    animation: achievementToastIn .35s steps(5) both;
}
.achievementToast.hiding { animation: achievementToastOut .25s ease both; }
.achievementToast > span { font-size: 38px; text-align: center; }
.achievementToast small { display: block; color: #bfa2ff; font-size: 8px; letter-spacing: .12em; }
.achievementToast strong { display: block; margin: 3px 0; color: #ffe177; font-size: 15px; }
.achievementToast p { margin: 0; color: #c9d7e7; font-size: 9px; line-height: 1.5; }
@keyframes achievementToastIn { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:translateX(0); } }
@keyframes achievementToastOut { to { opacity:0; transform:translateY(15px); } }

/* 盤面の形式名をスマホで確実に表示 */
.questNode {
    overflow: visible !important;
}
.questNode small {
    position: relative !important;
    z-index: 2;
    min-height: 2.5em !important;
    padding: 1px 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: keep-all !important;
    line-height: 1.18 !important;
}

@media (max-width: 760px) {
    .playerHud { align-items: flex-start; }
    .hudMetaLine { max-width: 250px; }
    .growthMenuGrid,
    .equipmentSlotGrid,
    .achievementGrid { grid-template-columns: 1fr; }
    .collectionHeroPanel { grid-template-columns: 90px minmax(0, 1fr); }
    .collectionGoldBox { grid-column: 1 / -1; }
    .dailyHeader { align-items: flex-start; flex-direction: column; }
    .dailyRewardBadge { white-space: normal; }
}

@media (max-width: 480px) {
    .hudMetaLine { gap: 4px 7px; font-size: 8px; }
    .legendRankBadge { padding: 2px 4px; }
    .sceneEquipmentIcons { left: calc(50% + 16px); bottom: 48px; font-size: 12px; }
    .growthMenuGrid { gap: 8px; }
    .growthMenuButton { min-height: 68px; padding: 9px; }
    .growthMenuButton > span { font-size: 25px; }
    .dailyMissionPanel { padding: 11px; }
    .dailyMissionText { font-size: 9px; }
    .collectionPanel,
    .achievementsPanel { padding: 11px; }
    .collectionHeroPanel { grid-template-columns: 72px minmax(0, 1fr); gap: 9px; padding: 10px; }
    .collectionHeroSprite { width: 70px; height: 70px; }
    .collectionHeroVisual { min-height: 72px; }
    .collectionHeroPanel h2 { font-size: 16px; }
    .equipmentCard { grid-template-columns: 47px minmax(0, 1fr); padding: 9px; }
    .equipmentItemIcon { width: 45px; height: 45px; font-size: 24px; }
    .achievementSummary { align-items: stretch; flex-direction: column; }
    .achievementSummary > strong { width: 100%; }
    .achievementCard { grid-template-columns: 45px minmax(0, 1fr); min-height: 88px; padding: 9px; }
    .achievementIcon { font-size: 29px; }
    .achievementToast { right: 10px; bottom: 10px; grid-template-columns: 44px minmax(0, 1fr); width: calc(100vw - 20px); }

    .mapScene { height: 540px !important; }
    .questNode {
        width: 86px !important;
        height: 106px !important;
        padding: 6px 4px 9px !important;
    }
    .questNode strong { font-size: 13px !important; }
    .questNode small {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: 2.7em !important;
        font-size: 9px !important;
        line-height: 1.18 !important;
    }
    .node1{left:14%!important;top:3%!important}
    .node2{right:12%!important;top:22%!important}
    .node3{left:12%!important;top:41%!important}
    .node4{right:12%!important;top:60%!important}
    .node5{left:14%!important;top:79%!important}
}


/* =========================================
   RPG 6.0 着せ替え・装備拡張
========================================= */
.heroDoll {
    position: relative;
    display: block;
    flex: 0 0 auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    isolation: isolate;
}
.heroDoll > .heroBaseSprite,
.heroDoll > .heroEquipLayer {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.heroDoll > .heroLayer-aura { z-index: 0; animation: dressAuraPulse 1.25s steps(4) infinite; }
.heroDoll > .heroLayer-cape { z-index: 1; }
.heroDoll > .heroBaseSprite { z-index: 2; filter: drop-shadow(0 5px 0 rgba(0,0,0,.28)); }
.heroDoll > .heroLayer-outfit { z-index: 3; }
.heroDoll > .heroLayer-accessory { z-index: 4; }
.heroDoll > .heroLayer-head { z-index: 5; }
.heroDoll > .heroLayer-shield { z-index: 6; }
.heroDoll > .heroLayer-weapon { z-index: 7; }
@keyframes dressAuraPulse { 0%,100% { opacity:.65; } 50% { opacity:1; } }

/* 元のimg用アニメーションや配置を、着せ替え用ラッパーに引き継ぐ */
.heroDoll.hudHeroSprite,
.heroDoll.sceneHeroSprite,
.heroDoll.collectionHeroSprite,
.heroDoll.battleHeroSprite,
.heroDoll.resultHeroSprite,
.heroDoll.levelUpHeroSprite {
    object-fit: initial;
}

.collectionHeroVisual .heroDoll {
    margin-inline: auto;
}
.collectionHeroVisual {
    min-height: 154px;
}
.collectionHeroSprite {
    width: 148px;
    height: 148px;
}
.collectionEquipmentIcons {
    right: 2px;
    bottom: 0;
    max-width: 95px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dressUpActions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin: 12px 0 18px;
}
.dressUpActions button { min-height: 46px; }
.equipmentSlotGroup {
    padding: 12px;
    background: rgba(8,24,45,.52);
    border: 1px solid #405d83;
}
.equipmentItemIcon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    image-rendering: pixelated;
}
.equipmentCard {
    transition: transform .18s steps(2), border-color .18s;
}
.equipmentCard:hover { transform: translateY(-2px); }
.equipmentCard.equipped::after {
    grid-column: 1 / -1;
    content: "✓ 主人公に反映中";
    color: #ffe177;
    font-size: 9px;
    font-weight: 900;
    text-align: center;
}

@media (max-width: 680px) {
    .collectionHeroPanel { grid-template-columns: 150px minmax(0,1fr); }
    .collectionGoldBox { grid-column: 1 / -1; }
    .collectionHeroVisual { min-height: 136px; }
    .collectionHeroSprite { width: 132px; height: 132px; }
    .equipmentSlotGrid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .collectionHeroPanel { grid-template-columns: 116px minmax(0,1fr); }
    .collectionHeroVisual { min-height: 108px; }
    .collectionHeroSprite { width: 104px; height: 104px; }
    .dressUpActions { grid-template-columns: 1fr; }
    .sceneEquipmentIcons, .actorEquipmentIcons, .resultEquipmentIcons, .levelUpEquipmentIcons { display:none; }
}

/* =========================================
   RPG 6.0.1 ホーム画面の勇者位置修正
   着せ替え用ラッパーが position: relative に戻る問題を補正
========================================= */
.pixelWorldScene .heroDoll.sceneHeroSprite {
    position: absolute;
    left: 42%;
    bottom: 64px;
    width: 108px !important;
    height: 108px !important;
    z-index: 2;
    transform-origin: center bottom;
}

.pixelWorldScene .sceneMessage {
    z-index: 4;
}

@media (max-width: 480px) {
    .pixelWorldScene .heroDoll.sceneHeroSprite {
        bottom: 60px;
        width: 92px !important;
        height: 92px !important;
    }
}

@media (max-width: 360px) {
    .pixelWorldScene .heroDoll.sceneHeroSprite {
        bottom: 58px;
        width: 84px !important;
        height: 84px !important;
    }
}

/* =========================================
   RPG 7.0 モンスター図鑑・素材ドロップ
========================================= */

.growthMenuGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.codexMenuButton {
    border-color: #a67bd9;
    background: linear-gradient(180deg, #3a3169, #1d2347);
}
.codexMenuButton:hover {
    border-color: #d8b7ff;
    background: linear-gradient(180deg, #51428b, #282f60);
}

.codexPanel {
    padding: 18px;
}

.codexSummary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.codexSummary > div {
    padding: 12px;
    color: #e9f3ff;
    background: linear-gradient(180deg, #1c3558, #101f37);
    border: 2px solid #6e8db8;
    text-align: center;
    box-shadow: 3px 3px 0 #050a13;
}
.codexSummary span {
    display: block;
    color: #9eb7d5;
    font-size: 9px;
    letter-spacing: .08em;
}
.codexSummary strong {
    display: block;
    margin-top: 5px;
    color: #ffe177;
    font-size: 21px;
}

.codexTabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
}
.codexTab,
.codexFilter {
    min-height: 44px;
    color: #dbe9f8;
    background: #122640;
    border: 2px solid #526f97;
    font-size: 11px;
    font-weight: 900;
}
.codexTab.active,
.codexFilter.active {
    color: #271806;
    background: linear-gradient(180deg, #ffe894, #d9ab36);
    border-color: #fff2af;
    box-shadow: 2px 2px 0 #704711;
}
.codexFilters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 10px;
}
.codexFilter {
    width: auto;
    min-height: 36px;
    padding: 7px 12px;
}
.codexGuide {
    margin: 8px 0 14px;
    color: #b8cae0;
    font-size: 10px;
    line-height: 1.7;
}

.monsterCodexGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}
.monsterCodexCard {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 11px;
    min-height: 174px;
    padding: 11px;
    background: linear-gradient(145deg, #132945, #0a192e);
    border: 2px solid #4e6f99;
    box-shadow: 4px 4px 0 #040810;
}
.monsterCodexCard.discovered {
    border-color: #70a3d7;
}
.monsterCodexCard.bossMonster {
    border-color: #e2bf58;
    background: linear-gradient(145deg, #342c4e, #171b34);
    box-shadow: 0 0 16px rgba(229, 188, 75, .18), 4px 4px 0 #040810;
}
.monsterPortrait {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 112px;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(77, 132, 181, .3), transparent 55%),
        #071126;
    border: 2px solid #57779f;
}
.monsterPortrait img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(3px 5px 0 rgba(0,0,0,.42));
}
.lockedPortrait img {
    filter: brightness(0) opacity(.6) drop-shadow(2px 4px 0 rgba(0,0,0,.65));
}
.bossCodexBadge {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 3px 5px;
    color: #3a2206;
    background: #ffe177;
    border: 1px solid #fff3b0;
    font-size: 7px;
    font-weight: 900;
}
.monsterCodexInfo > span {
    color: #88b5e0;
    font-size: 8px;
    letter-spacing: .1em;
}
.monsterCodexInfo h3 {
    margin: 5px 0;
    color: #fff0a0;
    font-size: 15px;
}
.monsterCodexInfo p {
    margin: 0 0 5px;
    color: #b9c9db;
    font-size: 9px;
    line-height: 1.55;
}
.monsterCodexInfo > small {
    display: block;
    color: #859dbb;
    font-size: 8px;
    line-height: 1.5;
}
.monsterDefeatBadge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 4px 7px;
    color: #e3effb;
    background: #071126;
    border: 1px solid #526d91;
    font-size: 8px;
}
.monsterDefeatBadge strong {
    color: #ffe177;
    font-size: 11px;
}
.monsterDropPreview {
    display: grid;
    gap: 4px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px dashed #4d678b;
}
.monsterDropPreview em {
    color: #7fa8d1;
    font-size: 7px;
    font-style: normal;
    letter-spacing: .12em;
}
.monsterDropPreview span {
    color: #d7e4f2;
    font-size: 8px;
    line-height: 1.35;
}
.monsterDropPreview .rareDrop {
    color: #ffe177;
}
.monsterCodexCard.locked {
    opacity: .72;
    filter: grayscale(.45);
}
.emptyCodexMessage {
    grid-column: 1 / -1;
    padding: 30px 15px;
    color: #b7c9dc;
    background: #0b1b31;
    border: 2px dashed #59749a;
    text-align: center;
    font-size: 11px;
}

.materialBagGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.materialCard {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 102px;
    padding: 11px;
    background: #0e2038;
    border: 2px solid #4f6c92;
    box-shadow: 3px 3px 0 #050911;
}
.materialCard.owned.rarity-common { border-color: #73a4c9; }
.materialCard.owned.rarity-rare { border-color: #b489e1; box-shadow: 0 0 13px rgba(177,125,223,.18), 3px 3px 0 #050911; }
.materialCard.owned.rarity-boss { border-color: #e3bd4f; box-shadow: 0 0 16px rgba(235,192,71,.25), 3px 3px 0 #050911; }
.materialCard.unowned { opacity: .55; filter: grayscale(.65); }
.materialIcon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    background: #071126;
    border: 2px solid #607ea6;
    font-size: 29px;
}
.materialInfo span {
    color: #89acd0;
    font-size: 7px;
    letter-spacing: .12em;
}
.materialInfo h3 {
    margin: 4px 0;
    color: #ffe177;
    font-size: 12px;
}
.materialInfo p {
    margin: 0 0 4px;
    color: #afc1d6;
    font-size: 8px;
    line-height: 1.5;
}
.materialInfo small {
    color: #7893b2;
    font-size: 7px;
}
.materialCount {
    min-width: 47px;
    padding: 7px;
    color: #2f1c04;
    background: #ffe177;
    border: 2px solid #fff1ac;
    text-align: center;
    font-size: 13px;
}

.lootRewardPanel {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    color: #edf6ff;
    background: linear-gradient(145deg, #213d5f, #0d2039);
    border: 3px double #d8ba61;
    box-shadow: 0 0 18px rgba(231, 193, 84, .15), 4px 4px 0 #050911;
    animation: lootPanelAppear .42s steps(5) both;
}
.lootRewardHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}
.lootRewardHeader span {
    color: #8fb4d8;
    font-size: 7px;
    letter-spacing: .15em;
}
.lootRewardHeader h3 {
    margin: 3px 0 0;
    color: #ffe177;
    font-size: 14px;
}
.lootRewardHeader > strong {
    color: #dfefff;
    font-size: 9px;
}
.newMonsterBadge {
    padding: 5px 7px;
    color: #2e1803 !important;
    background: #ffe177;
    border: 2px solid #fff1a9;
    animation: newBadgePulse .75s steps(3) infinite alternate;
}
.lootItemGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}
.lootItem {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 8px;
    background: #071126;
    border: 1px solid #5d789c;
}
.lootItem.rarity-rare { border-color: #a779dc; }
.lootItem.rarity-boss { border-color: #e5bd4e; }
.lootItem > span { font-size: 23px; text-align: center; }
.lootItem small { display: block; color: #779fc6; font-size: 6px; letter-spacing: .1em; }
.lootItem strong { display: block; margin-top: 2px; color: #f8edc5; font-size: 10px; }
.lootItem em { color: #ffe177; font-size: 13px; font-style: normal; font-weight: 900; }
.lootRewardPanel > p { margin: 9px 0 0; color: #a8bdd3; font-size: 8px; text-align: center; }

@keyframes lootPanelAppear {
    from { opacity: 0; transform: translateY(13px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes newBadgePulse {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

@media (max-width: 900px) {
    .growthMenuGrid { grid-template-columns: 1fr 1fr; }
    .monsterCodexGrid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .growthMenuGrid,
    .codexSummary,
    .materialBagGrid,
    .lootItemGrid { grid-template-columns: 1fr; }
    .codexPanel { padding: 11px; }
    .monsterCodexCard { grid-template-columns: 92px minmax(0, 1fr); min-height: 158px; padding: 9px; }
    .monsterPortrait { min-height: 98px; }
    .monsterPortrait img { width: 86px; height: 86px; }
    .codexTabs { gap: 6px; }
    .codexFilters { display: grid; grid-template-columns: 1fr 1fr; }
    .codexFilter { width: 100%; padding: 6px; font-size: 9px; }
    .lootRewardHeader { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 420px) {
    .monsterCodexCard { grid-template-columns: 78px minmax(0, 1fr); gap: 8px; }
    .monsterPortrait img { width: 72px; height: 72px; }
    .monsterCodexInfo h3 { font-size: 13px; }
    .materialCard { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 7px; padding: 8px; }
    .materialIcon { width: 44px; height: 44px; font-size: 23px; }
    .materialCount { min-width: 42px; padding: 6px 4px; font-size: 11px; }
}

/* =========================================
   RPG 7.5 装備クラフト工房
========================================= */
.collectionTabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
}
.collectionTab {
    position: relative;
    min-height: 48px;
    padding: 9px 12px;
    color: #b8cbe0;
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    background: #13253e;
    border: 2px solid #466587;
    box-shadow: 3px 3px 0 #050a13;
    cursor: pointer;
}
.collectionTab.active {
    color: #fff3a6;
    background: linear-gradient(180deg, #704d20, #392c24);
    border-color: #e4c35c;
}
.craftReadyBadge {
    display: inline-grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    margin-left: 4px;
    padding: 0 5px;
    color: #102033;
    background: #ffe16b;
    border: 1px solid #fff4aa;
    border-radius: 999px;
    font-size: 9px;
}
.collectionView[hidden] { display: none !important; }

.craftWorkshopIntro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 12px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(65,39,24,.9), rgba(18,36,57,.92));
    border: 2px solid #c49745;
    box-shadow: 3px 3px 0 #050a13;
}
.craftWorkshopIntro p {
    margin: 0 0 4px;
    color: #f0bd58;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .13em;
}
.craftWorkshopIntro h2 { margin: 0 0 7px; color: #fff0ae; font-size: 19px; }
.craftWorkshopIntro span { display: block; color: #c6d4e3; font-size: 9px; line-height: 1.6; }
.craftWorkshopIntro > strong {
    flex: 0 0 auto;
    min-width: 112px;
    padding: 12px;
    color: #1f1808;
    background: #f1cb62;
    border: 2px solid #fff1a3;
    box-shadow: 2px 2px 0 #5e3b18;
    font-size: 12px;
    text-align: center;
}
.craftResourceSummary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 12px 0 16px;
}
.craftGoldSummary,
.craftMaterialMini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 43px;
    padding: 8px 10px;
    background: rgba(9,25,45,.78);
    border: 1px solid #466485;
}
.craftGoldSummary { border-color: #cfaa4f; background: rgba(81,57,23,.72); }
.craftGoldSummary span,
.craftMaterialMini span { color: #c5d4e4; font-size: 8px; line-height: 1.35; }
.craftGoldSummary strong { color: #ffe06d; font-size: 12px; }
.craftMaterialMini strong { color: #f6f1d7; font-size: 11px; }

.craftRecipeGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.craftRecipeCard {
    position: relative;
    padding: 12px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(13,31,53,.96), rgba(7,17,32,.98));
    border: 2px solid #6d7890;
    box-shadow: 4px 4px 0 #040811;
}
.craftRecipeCard.rarity-rare { border-color: #5ba6d8; }
.craftRecipeCard.rarity-epic { border-color: #a66de0; }
.craftRecipeCard.rarity-legend { border-color: #e4bb45; box-shadow: 0 0 17px rgba(235,185,60,.2), 4px 4px 0 #040811; }
.craftRecipeCard.ready { animation: craftReadyGlow 1.5s steps(4) infinite; }
.craftRecipeCard.crafted { background: linear-gradient(145deg, rgba(27,61,52,.96), rgba(8,27,34,.98)); }
@keyframes craftReadyGlow { 50% { filter: brightness(1.12); } }
.craftRecipeTop {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 76px;
}
.craftItemPreview {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    background: radial-gradient(circle, rgba(105,164,206,.2), rgba(4,12,24,.9));
    border: 1px solid #54749a;
}
.craftItemPreview img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    image-rendering: pixelated;
}
.craftRecipeTitle > span {
    color: #84bce4;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .12em;
}
.rarity-epic .craftRecipeTitle > span { color: #ca9aff; }
.rarity-legend .craftRecipeTitle > span { color: #ffe176; }
.craftRecipeTitle h3 { margin: 4px 0; color: #f9f1cf; font-size: 13px; line-height: 1.35; }
.craftRecipeTitle p { margin: 0; color: #aebfd3; font-size: 8px; line-height: 1.5; }
.craftedStamp {
    position: absolute;
    top: 9px;
    right: -31px;
    width: 116px;
    padding: 4px 0;
    color: #092018;
    background: #69d39c;
    border: 1px solid #b7f5d4;
    transform: rotate(39deg);
    font-size: 7px;
    text-align: center;
}
.craftRequirements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 11px 0;
}
.craftRequirement {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    min-height: 39px;
    padding: 5px;
    background: rgba(4,13,26,.64);
    border: 1px solid #445b77;
}
.craftRequirement.enough { border-color: #4f9b75; }
.craftRequirement.missing { border-color: #8a4b50; opacity: .78; }
.craftRequirementIcon { font-size: 19px; text-align: center; }
.craftRequirement strong { display: block; color: #dce7f2; font-size: 7px; line-height: 1.35; }
.craftRequirement small { display: block; margin-top: 2px; color: #ee8585; font-size: 8px; font-weight: 900; }
.craftRequirement.enough small { color: #73dda4; }
.craftRecipeFooter {
    display: grid;
    grid-template-columns: minmax(90px, .65fr) minmax(135px, 1fr);
    gap: 8px;
}
.craftGoldCost {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 7px 9px;
    background: rgba(58,42,17,.7);
    border: 1px solid #9b7934;
}
.craftGoldCost span { color: #d5b45c; font-size: 7px; }
.craftGoldCost strong { color: #ffe177; font-size: 11px; }
.craftGoldCost.missing { border-color: #8a4b50; }
.craftGoldCost.missing strong { color: #ef8a8a; }
.craftActionButton {
    min-height: 43px;
    padding: 7px 9px;
    color: #fff7c6;
    background: #9c6425;
    border: 2px solid #efca61;
    box-shadow: 2px 2px 0 #261609;
    font: inherit;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
}
.craftActionButton:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); }
.craftActionButton:disabled { color: #9cabbc; background: #26354a; border-color: #50647d; cursor: default; box-shadow: none; }
.equipmentCard.craftExclusive { border-style: dashed; }
.equipmentCraftBadge {
    display: inline-block;
    margin-left: 5px;
    padding: 2px 4px;
    color: #cdeaff;
    background: #244c6b;
    border: 1px solid #4d91bd;
    font-size: 6px;
    font-style: normal;
    vertical-align: middle;
}
.equipmentCraftBadge.rarity-epic { color: #ebd5ff; background: #4b2e6b; border-color: #9864c4; }
.equipmentCraftBadge.rarity-legend { color: #fff0a4; background: #6c501c; border-color: #d8b34c; }

@media (max-width: 760px) {
    .craftResourceSummary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .craftRecipeGrid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .collectionTabs { grid-template-columns: 1fr; }
    .craftWorkshopIntro { align-items: stretch; flex-direction: column; }
    .craftWorkshopIntro > strong { width: 100%; }
    .craftResourceSummary { grid-template-columns: 1fr; }
    .craftRecipeTop { grid-template-columns: 58px minmax(0, 1fr); }
    .craftItemPreview { width: 56px; height: 56px; }
    .craftItemPreview img { width: 53px; height: 53px; }
    .craftRequirements { grid-template-columns: 1fr; }
    .craftRecipeFooter { grid-template-columns: 1fr; }
}