/* Presentation only: world coordinates and touch hit areas stay unchanged. */
#lobby {
  color: #fff6da;
  background:
    radial-gradient(ellipse at 50% 40%, #d2e0a7 0%, #96b86d 35%, transparent 66%),
    radial-gradient(ellipse at 0% 40%, #345e42 8%, transparent 50%),
    radial-gradient(ellipse at 100% 50%, #2c543c 8%, transparent 50%), #638656;
}
#lobby::before {
  content: ""; position: absolute; inset: 100px 100px 90px; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 70%, #e0d39a66, transparent 55%);
}
#lobbyTop { z-index: 1; padding: 18px 26px; }
.gameTitle { color: #fff6db; text-shadow: 0 3px 4px #203c2e; font-size: calc(26px * var(--ui, 1)); }
.resBox { font-size: calc(17px * var(--ui, 1)); gap: 12px; }
.resBox span { background: #243f2de8; border-color: #b6c58e66; color: #fff0bb; }
#lobbyMain { position: absolute; inset: 70px 0 0; padding: 0; display: block; }
#charStage {
  position: absolute; inset: 0 0 100px; width: auto; gap: 4px;
  justify-content: center; background: none;
}
.heroEyebrow { font-weight: 700; font-size: calc(14px * var(--ui, 1)); letter-spacing: 4px; color: #f0efd1; }
#charCanvas { width: 480px; height: 400px; margin: -20px 0 -30px; }
#charCaption { color: #fffbe4; font-size: calc(17px * var(--ui, 1)); text-shadow: 0 2px 3px #294331; }
#charCaption b { color: #fff0a5; }
#homeBattle { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; }
#homeBattle .btn { font-size: calc(18px * var(--ui, 1)); min-height: calc(44px * var(--ui, 1)); padding: 8px 26px; }
#homeBattle .startHome {
  background: linear-gradient(#f7da7a, #d5ab45); border: 2px solid #fff0b0; color: #493819;
  box-shadow: 0 5px 0 #7f6632, 0 12px 25px #263e3355; min-width: 290px;
}
.startHome span { font-size: .65em; display: block; letter-spacing: 3px; }
#panelWrap { position: absolute; bottom: 12px; left: 22px; right: 22px; overflow: visible; border: 0; background: none; }
#tabs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; padding: 0; background: none; }
.tab {
  min-height: calc(44px * var(--ui, 1)); padding: 8px 4px;
  font-size: calc(16px * var(--ui, 1)); border-color: #d3dab19c; color: #fff5d5;
  background: #263f2fe8; box-shadow: 0 3px 0 #233c2c;
  white-space: nowrap;
}
.tab.on { background: #3d6041; border-color: #f0d283; }
#assetStatus { position: absolute; bottom: 105px; left: 24px; z-index: 1; font-size: calc(12px * var(--ui, 1)); color: #fff9d6; pointer-events: none; }
#assetStatus.error { background: #7d2727; padding: 4px 10px; border-radius: 6px; }
#lobbyPanel { position: absolute; inset: 0; z-index: 10; background: #14251fe0; display: flex; align-items: center; justify-content: center; padding: 18px; }
#panelCard { width: 1080px; max-height: 100%; display: flex; flex-direction: column; background: #faf4e5; color: #493e27; border: 3px solid #bca878; border-radius: 22px; overflow: hidden; box-shadow: 0 12px 50px #12261c80; }
#panelCard header { display: flex; justify-content: flex-end; background: #e8dfc7; padding: 8px 16px; }
#panel { padding: 10px 24px 24px; overscroll-behavior: contain; touch-action: pan-y; }
#panel h3 { font-size: calc(19px * var(--ui, 1)); }
.card { font-size: calc(17px * var(--ui, 1)); padding: 12px 16px; }
.card .sub,.sub,.card .lv,#panel .hint { font-size: calc(14px * var(--ui, 1)); color: #6a5a39; }
.btn,.chip,.costumeCard { font-size: calc(16px * var(--ui, 1)); }
.btn { min-height: calc(42px * var(--ui, 1)); }
.btn .cost,.tag,.lack { font-size: calc(13px * var(--ui, 1)); }
.assetError { color: #9c2929; font-size: calc(14px * var(--ui, 1)); overflow-wrap: anywhere; }
#assetErrorNotice { position: fixed; bottom: 4px; left: 50%; transform: translateX(-50%); z-index: 100; max-width: 90%; padding: 6px 12px; border-radius: 6px; background: #782f27; color: white; font-size: 13px; pointer-events: none; }
.costumeGrid { grid-template-columns: repeat(3, 1fr); }
.costumeIcon { width: 135px; height: 150px; }
#hudFort,#hudRound,.pill,#btnPause { background: #213725eb; border: 1px solid #dcdfaa66; color: #fff6d8; }
#hudFort { width: 31%; min-height: calc(44px * var(--ui, 1)); padding: 6px 12px; gap: 8px; }
#hudFort .icon { display: none; }
.fortCol { flex: 1; min-width: 0; }
#hudFort .bar { width: 100%; height: calc(7px * var(--ui, 1)); }
.fortCol .label { font-size: calc(12px * var(--ui, 1)); }
#fortHpText { font-size: calc(15px * var(--ui, 1)); min-width: 0; }
#hudRound { padding: 5px 16px; min-width: 24%; }
.roundLabel { font-size: calc(17px * var(--ui, 1)); letter-spacing: 0; }
#timeText { font-size: calc(13px * var(--ui, 1)); }
#hudRight { max-width: 33%; gap: 6px; }
.pill { font-size: calc(16px * var(--ui, 1)); padding: 8px 10px; }
#btnPause { width: calc(42px * var(--ui, 1)); height: calc(42px * var(--ui, 1)); font-size: calc(18px * var(--ui, 1)); }
#hudTarget { pointer-events: none; font-size: calc(13px * var(--ui, 1)); padding: 6px 12px; }
#devHud { top: calc(62px * var(--ui, 1)); font-size: 15px; }
.dialog { max-height: 95%; overflow-y: auto; touch-action: pan-y; }
.dialog h2 { font-size: calc(22px * var(--ui, 1)); }
.dialog .btn,.resTable .row { font-size: calc(16px * var(--ui, 1)); }
.dialog .btn.big { min-width: calc(180px * var(--ui, 1)); width: auto; }
.compact #lobbyTop { padding: 12px 24px; }
.compact #lobbyBest { font-size: calc(13px * var(--ui)); }
.compact #charStage { top: 16px; bottom: 120px; }
.compact #charCanvas { width: 400px; height: 333px; margin: -35px 0 -40px; }
.compact .heroEyebrow { letter-spacing: 2px; }
.compact #homeBattle { margin-top: 12px; }
.compact #assetStatus { bottom: 112px; }
.compact .tab { font-size: calc(14px * var(--ui)); }
.compact .resTable { max-width: 600px; }
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
}