:root{
  --ink:#22313f;--blue:#1f8ed8;--pink:#ff5b97;--yellow:#ffd85a;--white:#fff;
  --shadow:0 16px 44px rgba(16,55,84,.22);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;background:#79d6ff;color:var(--ink)}
button{font:inherit}
body{overflow:hidden}
#app{height:100%}
.screen{display:none;height:100%;background:#dff6ff}
.screen.active{display:flex;flex-direction:column}
.topbar{height:58px;flex:none;background:#fff;display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid #c9e7f7;z-index:10}
.topbar button{border:0;background:#eef8ff;border-radius:12px;padding:9px;font-weight:900}
.topbar b{text-align:center;font-size:17px}
.topbar span{font-size:13px;font-weight:900}
.content{padding:14px}.scroll{overflow:auto;flex:1;padding-bottom:90px}
.scene{position:relative;flex:1;background-size:cover;background-position:center;overflow:hidden}
.title-scene{background-image:url("../assets/scenes/title.jpg")}
.map-scene{background-image:url("../assets/scenes/map.jpg")}
.jiro-scene{background-image:url("../assets/scenes/jiro.jpg")}
.mermaids-scene{background-image:url("../assets/scenes/mermaids.jpg")}
.hitofuta-scene{background-image:url("../assets/scenes/hitofuta.jpg")}
.chase-scene{background-image:url("../assets/scenes/chase.jpg")}
.battle-scene{background-image:url("../assets/scenes/battle.jpg")}
.clear-scene{background-image:url("../assets/scenes/clear.jpg")}
.overlay{position:absolute;inset:0}.overlay.dark{background:linear-gradient(#03253a22,#03253a77)}
.hero-card,.result-card,.mission-card,.dialogue,.ramen-game,.selected-panel,.note{background:rgba(255,255,255,.94);box-shadow:var(--shadow);border-radius:24px}
.hero-card{position:absolute;left:5%;right:5%;bottom:5%;padding:20px;text-align:center}
.hero-card h1{margin:5px 0 8px;font-size:clamp(30px,9vw,54px);line-height:1.05}
.hero-card h1 span{font-size:.5em;color:#216da9}
.eyebrow{font-weight:1000;color:#ff4d8e;letter-spacing:.06em}
.primary,.secondary{width:100%;border:0;border-radius:18px;padding:15px 16px;font-weight:1000;font-size:18px;margin-top:10px}
.primary{background:linear-gradient(#ff77a9,#ff4f8e);color:white;box-shadow:0 5px 0 #d83670}
.secondary{background:#fff;color:#236d9d;box-shadow:0 4px 0 #c8dae6}
.character-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.char-card{border:3px solid transparent;border-radius:20px;background:white;padding:8px;box-shadow:0 7px 18px #1e6f9d1a;text-align:center;font-weight:1000}
.char-card.selected{border-color:#ffad32;background:#fff9db}
.char-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px}
.char-card small{display:block;margin-top:5px;color:#647784}
.selected-panel{display:flex;gap:14px;align-items:center;padding:12px;margin-top:14px}
.selected-panel img{width:92px;height:92px;object-fit:cover;border-radius:20px}
.selected-panel h2{margin:0 0 5px}.selected-panel p{margin:0;font-size:14px;line-height:1.5}
.sticky{position:sticky;bottom:8px}
.mission-card{position:absolute;left:5%;right:5%;bottom:5%;padding:16px}
.mission-card h2{margin:0 0 4px}
.mini-stats{position:absolute;top:10px;left:10px;display:flex;gap:6px}
.mini-stats span{background:#fff;border-radius:999px;padding:7px 10px;font-weight:1000;box-shadow:0 3px 10px #0002}
.dialogue{position:absolute;left:4%;right:4%;padding:14px 16px}.dialogue.bottom{bottom:3%}
.speaker{display:inline-block;background:#166cab;color:white;border-radius:99px;padding:5px 12px;font-weight:1000;margin-bottom:4px}
.dialogue p{font-size:18px;font-weight:800;line-height:1.5;margin:4px 0}
.ramen-game{position:absolute;left:3%;right:3%;bottom:3%;padding:14px;text-align:center}
.ramen-game h3{margin:0 0 8px}
.ingredients{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0}
.ingredients button,.battle-buttons button,.touch-controls button{border:0;border-radius:16px;padding:12px 6px;font-weight:1000;background:white;box-shadow:0 4px 0 #c5d9e5}
#ramen-progress{font-weight:1000;color:#1b73ab}
.danger-meter{position:absolute;top:14px;left:5%;right:5%;height:18px;background:#ffffff99;border:2px solid white;border-radius:99px;overflow:hidden}
#danger-fill{height:100%;width:5%;background:linear-gradient(90deg,#55d889,#ffd84f,#ff536b);transition:width .2s}
#runner{position:absolute;bottom:28%;left:50%;font-size:52px;transform:translateX(-50%);transition:left .08s,bottom .16s}
#obstacle{position:absolute;bottom:29%;left:50%;font-size:52px;display:none}
.touch-controls{position:absolute;left:3%;right:3%;bottom:3%;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px}
.touch-controls button{font-size:18px}
.battle-ui{position:absolute;left:3%;right:3%;bottom:3%;background:#ffffffee;border-radius:22px;padding:14px;box-shadow:var(--shadow)}
.hp-row{display:grid;grid-template-columns:auto 1fr 42px;gap:8px;align-items:center;font-weight:1000}
.hp{height:16px;background:#e8eef3;border-radius:99px;overflow:hidden}
.hp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff447d,#ff824a)}
.battle-log{margin:12px 0;background:#f5fbff;border-radius:14px;padding:10px;font-weight:800;min-height:44px}
.battle-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.result-card{position:absolute;left:5%;right:5%;bottom:4%;padding:18px;text-align:center}
.result-card h1{margin:6px 0}.stars{font-size:42px;color:#ffb300;letter-spacing:4px}.score-big{font-size:54px;font-weight:1000;color:#1d75ac}
.note{padding:14px;margin:14px 0;line-height:1.6}
#toast{position:fixed;z-index:99;left:50%;top:74px;transform:translateX(-50%) translateY(-20px);background:#213847ee;color:#fff;padding:10px 16px;border-radius:99px;font-weight:900;opacity:0;transition:.2s;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (min-width:720px){
  #app{max-width:760px;margin:auto;box-shadow:0 0 60px #14557744}
  .character-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}