:root {
  --ink: #18283f;
  --ink-2: #263d5d;
  --cream: #f6f0d9;
  --leaf: #5a9c67;
  --leaf-dark: #315d45;
  --white: #fffdf3;
  --shadow: 0 10px 28px rgba(13, 25, 43, .42);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body {
  background: radial-gradient(circle at 20% 0%, rgba(82,182,255,.26), transparent 40%), linear-gradient(180deg, #244d68 0%, #13243a 100%);
  color: var(--ink);
  font-family: "Courier New", monospace;
  image-rendering: pixelated;
  overscroll-behavior: none;
  touch-action: none;
}
button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.game-shell {
  height: 100dvh;
  width: min(100vw, 1160px);
  margin: 0 auto;
  padding: 6px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.game-header {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 8px;
  border: 2px solid #8cb8a2;
  border-radius: 10px;
  background: linear-gradient(180deg, #f9f5e5, #d7e1cc);
  box-shadow: var(--shadow);
}
.game-header h1 { margin: 0; color: #24476a; letter-spacing: .13em; font-size: clamp(1rem, 2.7vw, 1.75rem); line-height: 1; text-shadow: 1px 1px #fff; }
.game-header p { margin: 2px 0 0; color: #54706f; font-size: .72rem; }
.header-actions { display: flex; gap: 6px; }

.game-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: min(100%, calc((100dvh - 132px) * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border: 5px solid #f5e6b6;
  outline: 3px solid #315d45;
  border-radius: 12px;
  background: #1b2e44;
  box-shadow: var(--shadow), inset 0 0 0 2px #18283f;
}
#gameCanvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.overlay { position: absolute; inset: 0; pointer-events: none; }
.overlay.active { pointer-events: auto; }

.panel {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(90%, 470px);
  max-height: 92%; overflow: auto;
  padding: clamp(13px, 2.7vw, 24px);
  border: 5px solid var(--cream);
  outline: 3px solid var(--ink-2);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,253,243,.98), rgba(222,232,208,.98));
  box-shadow: var(--shadow), inset 0 0 0 2px #91ad80;
  text-align: center;
}
.panel.wide { width: min(94%, 780px); }
.panel h2 { margin: 0 0 8px; color: #285276; text-shadow: 1px 1px #fff; }
.panel p { margin: 5px 0; color: #4c5d5e; line-height: 1.35; }
.panel-subtitle { font-size: .83rem; }
.title-panel { background: linear-gradient(rgba(250,247,229,.92), rgba(225,234,209,.95)), url("assets/world_background.png") center / cover no-repeat; }
.logo-mark { width: 58px; height: 58px; margin: 0 auto 8px; border: 6px solid #2e6d65; border-radius: 50%; position: relative; background: #7ee3ff; box-shadow: inset 0 0 0 6px #f7f1d6, 0 3px 0 #1f4051; }
.logo-mark::after { content:""; position:absolute; left:9px; right:9px; top:22px; height:6px; background:#2e6d65; box-shadow: 0 -12px 0 -2px #ff9348, 0 12px 0 -2px #69b9cf; }
.logo-mark span { display:none; }
.title-panel h2 { margin: 0; font-size: clamp(1.8rem, 6vw, 3.6rem); letter-spacing: .1em; color: #24476a; }

.primary-btn, .secondary-btn, .small-btn, .battle-actions button, .hud-button, .avatar-btn, .starter-card, #dialogueNext, .party-entry button {
  border: 3px solid #263d5d;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf3, #dbe7cf);
  color: #20334c;
  padding: 9px 13px;
  box-shadow: inset 0 -3px 0 rgba(49,93,69,.18), 0 2px 0 #17273c;
  transition: transform .08s ease, filter .08s ease;
}
button:hover { filter: brightness(1.05); }
button:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(0,0,0,.16); }
.primary-btn { width:100%; margin-top:10px; background:linear-gradient(180deg,#7dc387,#4e8d62); color:#fff; text-shadow:1px 1px #234d38; }
.secondary-btn { width:100%; margin-top:7px; }
.small-btn { padding:6px 9px; font-size:.74rem; }
.small-btn.danger { background:linear-gradient(180deg,#f1a1a1,#c85b5b); color:#fff; }
label { display:block; text-align:left; margin:5px 0; color:#435c61; font-weight:bold; }
input { width:100%; border:3px solid #58718b; border-radius:7px; background:#fffdf3; color:#20334c; padding:10px; outline:none; box-shadow:inset 0 2px 5px rgba(0,0,0,.12); }
input:focus { border-color:#4e9366; }

.avatar-choice { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 4px; }
.avatar-btn { display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px; background:#eaf0df; }
.avatar-btn.selected { border-color:#d27c32; background:#fff0c8; }
.avatar-btn canvas { width:64px; height:64px; image-rendering:pixelated; }
.starter-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.starter-card { padding:8px 7px; background:#f7f3df; }
.starter-card canvas { width:88px; height:88px; image-rendering:pixelated; }
.starter-card h3 { margin:4px 0 2px; color:#24476a; }
.starter-card p { font-size:.68rem; margin:0; }

.dialogue {
  position:absolute; left:2.2%; right:2.2%; bottom:3%; min-height:92px;
  padding:14px 98px 12px 18px;
  border:5px solid #f6f0d9; outline:3px solid #263d5d; border-radius:10px;
  background:linear-gradient(180deg,rgba(255,253,243,.98),rgba(227,235,214,.98));
  box-shadow:var(--shadow), inset 0 0 0 2px #8aa67d;
}
.dialogue-name { color:#a34a3e; font-weight:bold; margin-bottom:5px; }
.dialogue p { margin:0; color:#20334c; line-height:1.32; }
#dialogueNext { position:absolute; right:12px; bottom:12px; }

.battle-panel { position:absolute; inset:0; pointer-events:none; }
.battle-topbar, .battle-bottombar, .battle-message { pointer-events:auto; }
.battle-topbar {
  position:absolute; right:3%; top:4%; width:50%; padding:9px 13px;
  border:4px solid #f6f0d9; outline:3px solid #263d5d; border-radius:8px;
  background:linear-gradient(180deg,#fffdf3,#dce7cf); box-shadow:var(--shadow);
}
.battle-topbar > div:first-child { display:flex; justify-content:space-between; gap:8px; color:#20334c; }
.hp-wrap { height:10px; margin-top:5px; background:#38485a; border:2px solid #20334c; border-radius:5px; overflow:hidden; }
.hp-bar { width:100%; height:100%; background:linear-gradient(90deg,#4aa85e,#9ad85d); transition:width .25s ease; }
.battle-bottombar {
  position:absolute; right:2.5%; bottom:20%; width:59%; padding:9px 11px;
  border:4px solid #f6f0d9; outline:3px solid #263d5d; border-radius:8px;
  background:linear-gradient(180deg,#fffdf3,#dce7cf); box-shadow:var(--shadow);
}
.player-robot-info { color:#20334c; }
.player-robot-info small { display:block; text-align:right; margin-top:3px; }
.battle-actions { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:7px; }
.battle-actions button { padding:7px 4px; font-size:.72rem; }
.battle-actions button[data-action="download"] { background:linear-gradient(180deg,#7fcbd3,#4b95aa); color:#fff; }
.battle-actions button.wide-action { grid-column: span 2; }
.battle-message {
  position:absolute; left:2.5%; right:2.5%; bottom:3%; min-height:52px; padding:10px 13px;
  border:4px solid #f6f0d9; outline:3px solid #263d5d; border-radius:8px;
  background:linear-gradient(180deg,#fffdf3,#dce7cf); color:#20334c; box-shadow:var(--shadow);
}

.panel-heading-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.panel-heading-row h2 { margin:0; }
.party-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.party-entry { display:grid; grid-template-columns:64px 1fr; gap:8px; align-items:center; text-align:left; border:3px solid #6c8390; background:#f7f3df; border-radius:8px; padding:6px; }
.party-entry.active { border-color:#d27c32; background:#fff0c8; }
.party-entry canvas { width:64px; height:64px; image-rendering:pixelated; }
.party-entry button { margin-top:4px; padding:4px 7px; }

.shop-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0; }
.shop-stats div { border:3px solid #6c8390; border-radius:8px; background:#f7f3df; padding:8px 6px; }
.shop-stats span { display:block; font-size:.66rem; color:#54706f; }
.shop-stats strong { display:block; color:#20334c; margin-top:2px; }
.shop-actions-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.primary-btn.compact, .secondary-btn.compact { margin-top:0; padding:10px 8px; }
.primary-btn.compact small, .secondary-btn.compact small { display:block; opacity:.9; margin-top:2px; }
.shop-message { min-height:42px; margin-top:10px; font-size:.82rem; }

.hud-row { min-height:42px; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)) auto auto; gap:6px; }
.hud-card, .hud-button { border:2px solid #8cb8a2; border-radius:8px; background:linear-gradient(180deg,#f8f4df,#dbe7cf); padding:5px 9px; box-shadow:0 3px 8px rgba(0,0,0,.22); }
.hud-card { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.hud-card span { color:#56706f; font-size:.58rem; }
.hud-card strong { color:#20334c; font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hud-button { border-color:#315d45; font-size:.74rem; }
.controls { min-height:0; color:#e9f0e5; font-size:.68rem; text-align:center; }
.mobile-controls { display:none; }

.orientation-lock { display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:24px; background:linear-gradient(180deg,#244d68,#13243a); color:#fffdf3; }
.orientation-lock h2 { margin:8px 0 2px; }
.orientation-lock p { margin:0; color:#cfdfdc; }
.rotate-device { font-size:4rem; line-height:1; animation:rotateHint 1.6s ease-in-out infinite; }
@keyframes rotateHint { 0%,100%{transform:rotate(-18deg)} 50%{transform:rotate(72deg)} }

@media (orientation: portrait) {
  .game-shell { visibility:hidden; }
  .orientation-lock { display:flex; }
}

@media (max-height: 660px), (max-width: 940px) {
  .game-shell { padding:3px 5px 4px; gap:3px; }
  .game-header { min-height:30px; padding:1px 5px; }
  .game-header h1 { font-size:.92rem; }
  .game-header p { display:none; }
  .small-btn { padding:3px 6px; font-size:.58rem; border-width:2px; }
  .game-frame { width:min(100%, calc((100dvh - 96px) * 16 / 9)); border-width:3px; outline-width:2px; border-radius:7px; }
  .hud-row { min-height:32px; gap:3px; grid-template-columns:repeat(5, minmax(0,1fr)) auto auto; }
  .hud-card,.hud-button { padding:2px 5px; border-width:1px; }
  .hud-card span { font-size:.46rem; }
  .hud-card strong,.hud-button { font-size:.58rem; }
  .controls { height:0; }
  .keyboard-help { display:none; }
  .mobile-controls { display:block; position:fixed; inset:0; pointer-events:none; z-index:50; }
  .mobile-controls > button, .mobile-controls > div { position:fixed; pointer-events:auto; }
  .mobile-controls > button[data-dir="up"] { left:64px; bottom:79px; }
  .mobile-controls > button[data-dir="down"] { left:64px; bottom:7px; }
  .mobile-controls > div { left:7px; bottom:42px; }
  .mobile-controls button { width:50px; height:34px; margin:1px; border:2px solid rgba(255,253,243,.82); border-radius:10px; background:rgba(31,64,81,.70); color:#fff; box-shadow:0 2px 7px rgba(0,0,0,.35); }
  #interactBtn { position:fixed; right:15px; bottom:20px; width:62px; height:62px; border-radius:50%; background:rgba(182,75,79,.78); }
  .panel { padding:10px 12px; max-height:94%; }
  .panel h2 { font-size:1rem; }
  .panel p,label,input,.primary-btn,.secondary-btn { font-size:.7rem; }
  .title-panel h2 { font-size:2rem; }
  .logo-mark { width:40px; height:40px; border-width:4px; }
  .logo-mark::after { top:15px; left:6px; right:6px; height:4px; }
  .starter-grid { gap:5px; }
  .starter-card { padding:4px; }
  .starter-card canvas { width:62px; height:62px; }
  .starter-card h3 { font-size:.76rem; }
  .starter-card p { font-size:.52rem; }
  .avatar-btn canvas { width:48px; height:48px; }
  .dialogue { min-height:68px; padding:8px 74px 7px 10px; font-size:.66rem; border-width:3px; }
  #dialogueNext { right:7px; bottom:7px; padding:5px 7px; font-size:.6rem; }
  .battle-topbar { top:3%; padding:5px 8px; font-size:.65rem; border-width:3px; width:52%; }
  .battle-bottombar { bottom:20%; width:58%; padding:5px 7px; font-size:.62rem; border-width:3px; }
  .battle-actions { gap:3px; margin-top:3px; }
  .battle-actions button { padding:4px 2px; font-size:.53rem; border-width:2px; }
  .battle-message { min-height:38px; padding:6px 8px; font-size:.62rem; border-width:3px; }
  .party-list { max-height:220px; overflow:auto; grid-template-columns:1fr; }
  .shop-stats { gap:5px; }
  .shop-actions-grid { grid-template-columns:1fr; }
}