/* Phone pad ("Mobile GBA controls" thread). Load after the battle screen's battle.css.
   .pk-app       the handheld from padshell.js: the stage in a bezel, the pad under it or beside it
   .stage.pad    a battle stage with the pad's controls on (padbattle.js attach()): the map in a viewport,
                 the info strip (dock) and minimap under it, the Start menu over it */
.pk-app, .stage.pad {
  --shell: #2b2550; --shell-2: #3a3270; --shell-edge: #1c1838; --bezel: #12131c;
  --btn: #1d1b2e; --btn-ink: #d9d4f2; --ab: #8c2f4f; --ab-ink: #ffe9f0;
}
html.pk-open, html.pk-open body { overflow: hidden; overscroll-behavior: none; }

/* ---------- The handheld ---------- */
.pk-app { position: fixed; inset: 0; z-index: 1000; display: grid; overflow: hidden; background: var(--shell); color: var(--ink);
  font: 14px/1.4 var(--body); box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "screen" "controls";
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  user-select: none; -webkit-user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
.pk-app[hidden] { display: none; }
.pk-app *, .pk-app *::before, .pk-app *::after { box-sizing: border-box; }
/* Desktop preview: a phone-sized frame (the pad page's portrait/landscape switch flips it). */
html.pk-framed .pk-app { inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 400px; height: 820px; border-radius: 28px;
  box-shadow: 0 0 0 10px #05060a, 0 20px 60px rgba(0,0,0,.6); }
html.pk-framed.pk-framed-land .pk-app { width: 844px; height: 390px; }
html.pk-framed body { background: #0b0c12; }

.pk-screen { grid-area: screen; min-height: 0; min-width: 0; display: grid; padding: 8px 8px 0; }
.pk-bezel { position: relative; min-height: 0; background: var(--bezel); border-radius: 10px 10px 18px 10px; padding: 6px; display: grid;
  box-shadow: inset 0 0 0 2px #000, 0 1px 0 rgba(255,255,255,.08); }
.pk-bezel > .stage { min-height: 0; min-width: 0; height: 100%; width: 100%; margin: 0; }

/* ---------- The stage with the pad on ---------- */
.stage.pad { position: relative; container-type: size; overflow: hidden; border-radius: 4px; padding: 0 !important; --cvw: 100% !important;
  --dock-h: 128px; --keys-h: 22px; }
.stage.pad.pk-land { --dock-h: 84px; --keys-h: 0px; }
.stage.pad::after { display: none !important; }
.stage.pad > .minimap, .stage.pad .terrain-tip { display: none !important; } /* the dock shows the minimap and the cursor's tile instead */
.stage.pad .pk-vp { position: absolute; left: 0; top: 0; right: 0; bottom: var(--dock-h); overflow: hidden; background: #0e1019; }
.stage.pad .pk-vp > canvas { position: absolute; left: 0; top: 0; max-width: none !important; margin: 0 !important; border-radius: 0; cursor: default; }
.stage.pad #fcbox:not(.duelmode), .stage.pad .gmenu.fc:not(.duelmode) { width: 100%; height: var(--dock-h); font-size: 12.5px; border-radius: 0; padding-right: 10px; }
/* The duel card: in portrait it sits along the bottom over the info strip and the space under the map, so
   it hides as little of the battlefield as it can (the game does the same on phones, v112). In landscape the
   battle screen puts it in the map corner farthest from the target. */
.stage.pad #fcbox.duelmode { width: min(600px, calc(100% - 8px)); }
.stage.pad:not(.pk-land) #fcbox.duelmode { left: 4px !important; right: 4px; top: auto !important; bottom: 4px; width: auto; max-height: calc(100% - 8px) !important; }
.stage.pad .gmenu { font-size: 15px; min-width: 8.5em; }
.stage.pad .gmenu button { padding: .42em .6em .42em 1.4em; }
.stage.pad .gmenu .mi-ic { width: 20px; height: 20px; }
/* The pad's focus, drawn like the mouse hover (white menu, black arrow). */
.stage.pad .gmenu button.pf:not([disabled]) { background: var(--menu-hi); }
.stage.pad .gmenu button.pf:not([disabled])::before { content: "▶"; position: absolute; left: 5px; font-size: 10px; color: var(--menu-ink); }
.stage.pad .infocard { max-height: calc(100% - var(--dock-h) - 8px); width: min(330px, calc(100% - 8px)); }
.stage.pad .infocard button.pf { outline: 2px solid var(--gold); outline-offset: 1px; }
.stage.pad .banner button.pf { background: var(--menu-hi); }
.stage.pad .callout { font-size: 14px; top: 8px; }
.stage.pad .beat-line { bottom: calc(var(--dock-h) + 6px); font-size: 15px; }
.stage.pad .banner { inset: 25% 8% auto; }

/* The dock: phase, what the cursor is on, and what A and B do right now. The attack preview covers it while aiming. */
.stage.pad .pk-dock { position: absolute; left: 0; right: 0; bottom: 0; height: var(--dock-h); background: #151826; border-top: 2px solid var(--line);
  padding: 6px 10px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 3px; font-size: 13px; overflow: hidden; color: var(--ink); text-align: left; }
/* The top lines leave room for the minimap on the right (--mini-pad, set by padbattle.js); the button hints run full width under it. */
.pk-dock .d-top, .pk-dock .d-on { margin-right: calc(var(--mini-pad, 0px) - 10px); }
.pk-dock .d-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; }
.pk-dock .d-top .phase { white-space: nowrap; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.pk-dock .d-cam { appearance: none; margin-left: auto; flex: none; align-self: center; border: 1px solid #4a4670; border-radius: 999px; background: #2a2748; color: #e6e3ff;
  font: 600 11.5px var(--body); padding: 2px 9px; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.pk-dock .d-cam:active { filter: brightness(1.3); }
.pk-dock .d-zone { font-size: 11px; color: var(--enemy); font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.pk-dock .d-goal { font-size: 12px; color: var(--gold); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pk-dock .d-hint { display: none; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pk-dock .d-on { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: center; min-height: 0; overflow: hidden; }
.pk-dock .d-on.has-unit .d-ter { -webkit-line-clamp: 1; }
.pk-dock .d-on .fp { grid-row: span 2; }
.pk-dock .d-name { display: flex; gap: 6px; align-items: baseline; font-weight: 700; white-space: nowrap; overflow: hidden; min-width: 0; }
.pk-dock .d-name .chip { flex: none; }
.pk-dock .d-name .player { color: var(--player); } .pk-dock .d-name .enemy { color: var(--enemy); } .pk-dock .d-name .ally { color: #6fe3c1; }
.pk-dock .d-name small { font-weight: 400; color: var(--muted); }
.pk-dock .d-name .chip.ally { background: #1f4f45; color: #c9fff0; }
.pk-dock .d-name .chip.keep { background: #5a4a14; color: #ffe9a0; }
.pk-dock .d-hp { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
.pk-dock .d-hp .hp { flex: 1; max-width: 140px; }
.pk-dock .d-ter { color: var(--muted); font-size: 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pk-dock .d-ter b { color: var(--gold); font-weight: 700; margin-right: 4px; }
.pk-dock .d-ter .tt-who { display: none; }
.pk-dock .d-keys { display: flex; flex-wrap: nowrap; gap: 2px 10px; font-size: 12px; color: var(--muted); height: var(--keys-h); align-items: center; overflow: hidden; white-space: nowrap; }
.pk-dock .d-keys > * { flex: none; }
.pk-dock .d-keys b { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--btn); color: var(--btn-ink); font-size: 10px; margin-right: 3px; }
.pk-dock .d-keys b.a { background: var(--ab); color: var(--ab-ink); }
.stage.pad.pk-land .pk-dock { grid-template-rows: auto minmax(0, 1fr); padding: 4px 10px; }
.stage.pad.pk-land .pk-dock .d-keys { display: none; }
.stage.pad.pk-land .pk-dock .d-on { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr); }
.stage.pad.pk-land .pk-dock .d-ter { grid-column: 3 !important; grid-row: 1 / span 2; }
.stage.pad.pk-land .pk-dock .d-ter:only-child { grid-column: 1 / -1 !important; }
.stage.pad.pk-land .pk-dock .d-top .d-hint { display: inline; }

/* Minimap in the dock's right end (never over the battlefield); the attack preview covers it while aiming. */
.stage.pad .pk-mini-wrap { position: absolute; right: 0; bottom: var(--keys-h); height: calc(var(--dock-h) - var(--keys-h) - 4px); display: grid; place-items: center;
  padding: 0 10px; z-index: 1; pointer-events: none; }
.stage.pad .pk-mini { display: block; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); image-rendering: auto; pointer-events: auto; cursor: pointer; touch-action: none; }

/* Start menu */
.stage.pad .pk-start { position: absolute; z-index: 8; right: 6px; top: 6px; min-width: 11em; max-height: calc(100% - 12px); overflow-y: auto; }
.stage.pad .pk-start hr { border: 0; border-top: 1px solid var(--menu-sub, #999); opacity: .4; margin: 2px 6px; }

/* Combat log (Start → Battle log): over the battle, beside the stage it belongs to. */
.pk-host { position: relative; }
.pk-host > .clog { display: none; }
.pk-host.pk-log > .clog { display: block; position: absolute; z-index: 15; left: 12px; right: 12px; top: 12px; max-height: 60%; margin: 0; overflow: auto;
  box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.pk-host.pk-log > .clog .clog-list { max-height: none; }

/* ---------- Controls ---------- */
.pk-controls { grid-area: controls; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 6px 10px;
  padding: 10px 14px 12px; align-items: center; }
.pk-ctl-l, .pk-ctl-r { display: contents; }
.pk-btn { appearance: none; border: 0; font: 700 13px var(--body); color: var(--btn-ink); background: var(--btn); touch-action: none;
  box-shadow: 0 3px 0 var(--shell-edge), inset 0 1px 0 rgba(255,255,255,.12); cursor: pointer; display: grid; place-items: center; padding: 0; }
.pk-btn.down, .pk-dpad .down { transform: translateY(2px); box-shadow: 0 1px 0 var(--shell-edge), inset 0 1px 0 rgba(255,255,255,.08); filter: brightness(1.25); }
.pk-shoulder { width: 78px; height: 30px; border-radius: 10px 10px 6px 6px; font-size: 13px; }
.pk-bL { grid-column: 1; grid-row: 1; justify-self: start; } .pk-bR { grid-column: 2; grid-row: 1; justify-self: end; }
.pk-dpad { grid-column: 1; grid-row: 2; justify-self: start; position: relative; width: 138px; height: 138px; touch-action: none; }
.pk-dpad i { position: absolute; background: var(--btn); box-shadow: 0 3px 0 var(--shell-edge), inset 0 1px 0 rgba(255,255,255,.12); }
.pk-dpad .h { left: 0; right: 0; top: 46px; height: 46px; border-radius: 7px; }
.pk-dpad .v { top: 0; bottom: 0; left: 46px; width: 46px; border-radius: 7px; }
.pk-dpad .c { left: 46px; top: 46px; width: 46px; height: 46px; box-shadow: none; border-radius: 0; background: var(--btn); }
.pk-dpad .c::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: rgba(255,255,255,.05); }
.pk-dpad b { position: absolute; width: 46px; height: 46px; display: grid; place-items: center; color: #6d6990; font-size: 14px; pointer-events: none; z-index: 1; }
.pk-dpad b.down { color: var(--btn-ink); transform: none; filter: none; box-shadow: none; }
.pk-dpad .u { left: 46px; top: 0; } .pk-dpad .d { left: 46px; bottom: 0; } .pk-dpad .l { left: 0; top: 46px; } .pk-dpad .r { right: 0; top: 46px; }
.pk-abpad { grid-column: 2; grid-row: 2; justify-self: end; position: relative; width: 140px; height: 120px; }
.pk-face { position: absolute; width: 62px; height: 62px; border-radius: 50%; background: var(--ab); color: var(--ab-ink); font-size: 20px; }
.pk-bA { right: 0; top: 4px; } .pk-bB { left: 0; bottom: 4px; }
.pk-pill { width: 62px; height: 22px; border-radius: 11px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #a9a3cc; }
.pk-bSel { grid-column: 1; grid-row: 3; justify-self: center; } .pk-bStart { grid-column: 2; grid-row: 3; justify-self: center; }

/* Landscape: D-pad on the left, A/B on the right, screen in the middle (the classic emulator layout). */
.pk-app.land { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); grid-template-areas: "l screen r"; }
.pk-app.land .pk-controls { display: contents; }
.pk-app.land .pk-ctl-l, .pk-app.land .pk-ctl-r { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: center; padding: 10px 10px 12px; gap: 6px; width: 170px; }
.pk-app.land .pk-ctl-l { grid-area: l; } .pk-app.land .pk-ctl-r { grid-area: r; }
.pk-app.land .pk-bL, .pk-app.land .pk-bR, .pk-app.land .pk-dpad, .pk-app.land .pk-abpad, .pk-app.land .pk-bSel, .pk-app.land .pk-bStart { grid-column: auto; grid-row: auto; justify-self: center; }
.pk-app.land .pk-screen { padding: 8px 0; }
.stage.pad.pk-land .gmenu:not(.fc):not(.list) { font-size: 13.5px; }
.stage.pad.pk-land .gmenu:not(.fc):not(.list) button { padding-top: .3em; padding-bottom: .3em; }
.stage.pad.pk-land .gmenu.fc { font-size: 12px; }

/* A page's own overlays inside the handheld (the pad page's title and help screens). */
.pk-app .pk-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 14px; background: rgba(10,11,18,.86); }
.pk-app .pk-overlay[hidden] { display: none; }

/* The battle screen's own Zoom button (#zoomBtn, beside the page's End phase button): the pad has its own in the info strip. */
html.pk-open #zoomBtn { display: none !important; }