/* ===== WILDVALE — GBA-style UI ===== */ :root { --px-font: 'Press Start 2P', 'Courier New', monospace; --box-border: #50585f; --box-bg: #f8f8f0; --box-text: #383838; --accent: #c84830; --shell-hi: #e0392c; --shell-mid: #b8231a; --shell-lo: #7a140e; --shell-plastic: #2a2018; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: #181820; color: #ddd; font-family: var(--px-font); width: 100%; height: 100%; overflow: hidden; /* the game IS the page — never scroll */ overscroll-behavior: none; touch-action: manipulation; } /* On touch devices, hard-lock the page so nothing can pan or bounce. */ body.touch { position: fixed; inset: 0; } #wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; /* keep the console clear of notches, the iOS home indicator and Android gesture bar in both orientations (needs viewport-fit=cover in ) */ padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* ===== The handheld shell — a realistic GBA body wrapped around the game. This is the element JS scales to fit the window (see fitScreen in main.js); everything inside stays proportional, like zooming a photo of a real console. ===== */ #console { position: relative; display: flex; flex-direction: column; padding: 20px 26px 26px; background: linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,0) 30%), linear-gradient(200deg, var(--shell-hi) 0%, var(--shell-mid) 45%, var(--shell-lo) 100%); border-radius: 26px 26px 54px 54px; box-shadow: inset 0 2px 2px rgba(255,255,255,.35), inset 0 -10px 22px rgba(0,0,0,.35), 0 20px 50px rgba(0,0,0,.6); transform-origin: center center; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; /* no long-press "save image" menu on shell art */ -webkit-tap-highlight-color: transparent; } /* the save-code textarea is the one place a user needs real text selection/copy */ textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } #shell-top { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 14px; } #shell-brand { font-size: 11px; letter-spacing: 1px; color: rgba(255,246,238,.92); text-shadow: 1px 1px 0 rgba(0,0,0,.35); } #shell-brand b { font-weight: normal; color: rgba(255,246,238,.65); } #power-dot { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #b6ffb0, #2fa22a 70%); box-shadow: 0 0 5px 2px rgba(70, 240, 60, .55); } /* The visible glass/bezel. Width tracks the game's aspect ratio like before; height defaults to exactly the game's own height, but on a portrait phone main.js grows it taller and centers #game-viewport inside — the extra height reads as bezel/glass, not blank plastic. */ #screen { position: relative; width: 720px; height: 480px; display: flex; align-items: center; justify-content: center; background: #000; border: 5px solid #17181c; border-radius: 6px; box-shadow: 0 0 0 3px #8b8f96, 0 0 0 5px #3a3d42, inset 0 0 24px rgba(0,0,0,.85); overflow: hidden; user-select: none; -webkit-user-select: none; } /* The fixed-size game box (canvas + HUD) — this is the positioned ancestor the dialog/menu/HUD overlays below are placed against. */ #game-viewport { position: relative; width: 720px; height: 480px; flex: none; overflow: hidden; } /* subtle glass highlight across the top-left of the screen */ #screen-glare { position: absolute; inset: 0; z-index: 90; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 26%); } #game { position: absolute; inset: 0; width: 100%; /* tracks #screen, which widens with the adaptive viewport */ height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; } #hint { position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 9px; color: #e8ecf2; letter-spacing: 1px; white-space: nowrap; z-index: 850; pointer-events: none; background: rgba(16, 18, 26, .72); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 7px 14px; text-shadow: 1px 1px 0 #000; } .hidden { display: none !important; } /* ===== GBA box style ===== */ .gba-box { background: var(--box-bg); border: 4px solid var(--box-border); border-radius: 8px; box-shadow: inset 0 0 0 3px #fff, 0 3px 0 rgba(0,0,0,.35); color: var(--box-text); } /* ===== Dialog ===== */ #dialog { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 108px; padding: 18px 20px; z-index: 40; } #dialog-text { font-size: 15px; line-height: 1.85; white-space: pre-wrap; } #dialog-arrow { position: absolute; right: 16px; bottom: 8px; font-size: 14px; color: var(--accent); animation: bob .6s steps(2) infinite; } @keyframes bob { 0% { transform: translateY(0); } 100% { transform: translateY(4px); } } /* ===== Battle info boxes ===== */ .info-box { position: absolute; z-index: 30; width: 264px; padding: 10px 12px 8px; background: #f0e8c0; border: 3px solid #685848; border-radius: 8px; box-shadow: inset 0 0 0 2px #f8f8e0, 0 3px 0 rgba(0,0,0,.3); color: #353535; } #enemy-box { left: 18px; top: 24px; } #player-box { right: 18px; top: 218px; width: 286px; } .ib-row1 { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 7px; } .ib-lv { color: #555; } .ib-row2 { display: flex; align-items: center; gap: 6px; } .ib-status { font-size: 9px; min-width: 34px; text-align: center; padding: 3px 0; border-radius: 4px; color: #fff; visibility: hidden; } .ib-status.on { visibility: visible; } .st-PSN { background: #9a4dbb; } .st-BRN { background: #e07030; } .st-PAR { background: #c8a000; } .st-SLP { background: #8a8a9a; } .st-FRZ { background: #50a8d8; } .st-FNT { background: #803030; } .hp-outer { flex: 1; display: flex; align-items: center; background: #504840; border-radius: 6px; padding: 2px 4px 2px 2px; } .hp-label { font-size: 8px; color: #f8c850; padding: 0 4px; } .hp-track { flex: 1; height: 10px; background: #2c2c34; border-radius: 4px; overflow: hidden; } .hp-fill { height: 100%; width: 100%; background: #58d058; border-radius: 4px; } .hp-fill.mid { background: #f8d030; } .hp-fill.low { background: #f05038; } .ib-hpnum { text-align: right; font-size: 12px; margin-top: 6px; } /* trainer's remaining team shown as ball icons; fainted ones go dark */ .ib-balls { display: flex; gap: 4px; margin-top: 6px; min-height: 0; } .ib-balls img { width: 15px; height: 15px; image-rendering: pixelated; } .ib-balls img.down { filter: grayscale(1) brightness(.4); } .exp-track { margin-top: 6px; height: 6px; background: #2c2c34; border-radius: 3px; overflow: hidden; } .exp-fill { height: 100%; width: 0; background: #40a8e8; } /* ===== Menus ===== */ #menu-layer { position: absolute; inset: 0; z-index: 50; pointer-events: none; } #menu-layer > * { pointer-events: auto; } .menu { position: absolute; padding: 14px 16px; font-size: 14px; line-height: 2.1; } .menu .mi { padding-left: 24px; position: relative; white-space: nowrap; } .menu .mi.sel::before { content: '\25B6'; position: absolute; left: 2px; color: var(--accent); animation: blink 1s steps(2) infinite; } .menu .mi.dim { color: #a0a0a0; } @keyframes blink { 50% { opacity: .35; } } /* battle action 2x2 menu */ .grid-menu { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; line-height: 2.2; } /* move menu */ #move-panel { position: absolute; right: 10px; bottom: 10px; width: 200px; height: 108px; padding: 16px 14px; font-size: 12px; line-height: 2; color: #444; } /* ===== Full screens (party / bag / shop / save) ===== */ .full-screen { position: absolute; inset: 0; background: #283038; padding: 18px; z-index: 60; color: #eee; } .fs-title { font-size: 14px; color: #f8d048; margin-bottom: 14px; text-shadow: 2px 2px 0 #000; } .fs-foot { position: absolute; bottom: 12px; left: 18px; font-size: 9px; color: #8898a8; } .party-slot { display: flex; align-items: center; gap: 12px; background: #38444e; border: 3px solid #1d242b; border-radius: 8px; padding: 8px 14px; margin-bottom: 8px; font-size: 11px; } .party-slot.sel { border-color: #f8d048; background: #46555f; } .party-slot.fainted { opacity: .55; } .party-slot canvas { width: 48px; height: 48px; image-rendering: pixelated; } .ps-info { flex: 1; } .ps-name { font-size: 12px; margin-bottom: 5px; } .ps-hpline { display: flex; align-items: center; gap: 8px; } .ps-hptrack { width: 130px; height: 8px; background: #181c20; border-radius: 4px; overflow: hidden; } .ps-hpfill { height: 100%; background: #58d058; } .ps-hpfill.mid { background: #f8d030; } .ps-hpfill.low { background: #f05038; } .ps-st { font-size: 9px; padding: 2px 5px; border-radius: 3px; color: #fff; } .bag-row { display: flex; justify-content: space-between; font-size: 12px; padding: 8px 12px 8px 30px; position: relative; } .bag-row.sel { background: #46555f; border-radius: 6px; } .bag-row.sel::before { content: '\25B6'; position: absolute; left: 8px; color: #f8d048; } .bag-desc { position: absolute; left: 18px; right: 18px; bottom: 34px; background: #1d242b; border-radius: 8px; padding: 12px 14px; font-size: 10px; line-height: 1.8; color: #cdd6dd; min-height: 58px; } /* save modal */ .modal-btns { display: flex; gap: 14px; margin-top: 14px; } .modal-btns button { font-family: var(--px-font); font-size: 12px; padding: 12px 22px; background: var(--box-bg); border: 4px solid var(--box-border); border-radius: 8px; box-shadow: inset 0 0 0 2px #fff, 0 3px 0 rgba(0,0,0,.35); color: var(--box-text); cursor: pointer; touch-action: manipulation; } .modal-btns button:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px #fff; } .save-modal textarea { width: 100%; height: 150px; background: #181c20; color: #9fe8a0; border: 2px solid #444; border-radius: 6px; font-family: var(--px-font); font-size: 9px; padding: 8px; resize: none; line-height: 1.6; } /* starter cards */ #starter-row { display: flex; gap: 16px; justify-content: center; margin-top: 30px; } .starter-card { width: 200px; text-align: center; background: #38444e; border: 4px solid #1d242b; border-radius: 10px; padding: 18px 10px 14px; font-size: 11px; } .starter-card.sel { border-color: #f8d048; background: #46555f; transform: translateY(-6px); } .starter-card canvas { width: 96px; height: 96px; image-rendering: pixelated; } .sc-name { font-size: 13px; margin: 10px 0 8px; } .sc-type { display: inline-block; font-size: 9px; color: #fff; padding: 3px 8px; border-radius: 4px; } .sc-blurb { margin-top: 10px; font-size: 9px; line-height: 1.7; color: #b8c4cc; } /* fade overlay */ #fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .28s linear; z-index: 90; } #fade.on { opacity: 1; } #fade.flash { background: #fff; transition: none; } /* money chip */ .money-chip { position: absolute; top: 12px; right: 12px; padding: 10px 14px; font-size: 12px; } /* item icons in bag / shop */ .item-icon { width: 26px; height: 26px; image-rendering: pixelated; vertical-align: middle; margin-right: 8px; margin-top: -4px; } /* ===== Control deck — a real GBA D-pad / A-B / Start-Select layout. Always visible (click on desktop, tap on mobile) since it's part of the console's body, not a mobile-only overlay. ===== */ #touch-controls { display: flex; align-items: center; justify-content: space-between; padding: 26px 12px 4px; position: relative; z-index: 75; } body.touch #hint { display: none; } /* Always visible, even in touch mode — this is the "are we even looking at the latest deploy" ground truth, so it can't be hidden by the same condition that hides the keyboard hint. */ #build-tag { position: fixed; bottom: 6px; right: 8px; font-size: 8px; letter-spacing: 1px; color: rgba(255,255,255,.35); z-index: 850; pointer-events: none; } #touch-controls button { pointer-events: auto; border: none; color: rgba(255,255,255,.88); font-family: var(--px-font); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } #touch-controls button.on { filter: brightness(1.35); } /* Single scale knob for the whole deck. JS (layoutDeck in main.js) sets --deck-k on portrait phones to whatever value actually fills the available height for that device; everything below derives its size from it, so the D-pad, A/B, and Start/Select all grow as one proportional unit instead of needing separately-tuned breakpoints. */ #touch-controls { --deck-k: 1; } /* ----- D-pad: a real cross, not four separate circles ----- .pad-inner stays at the fixed 148x148 design size all the child offsets below are authored for, and is transform-scaled to match #dpad's own (--deck-k-derived) box size. */ #dpad { position: relative; width: calc(148px * var(--deck-k)); height: calc(148px * var(--deck-k)); flex: none; } .pad-inner { position: absolute; top: 0; left: 0; transform-origin: top left; transform: scale(var(--deck-k)); } #dpad-inner { width: 148px; height: 148px; } #dpad-hub { position: absolute; left: 50px; top: 50px; width: 48px; height: 48px; background: linear-gradient(160deg, #333, #161616); border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } #dpad button { position: absolute; background: linear-gradient(160deg, #3d3d3d, #202020); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -3px 4px rgba(0,0,0,.5), 0 2px 3px rgba(0,0,0,.4); font-size: 15px; line-height: 1; } #tc-up, #tc-down { left: 50px; width: 48px; height: 56px; } #tc-left, #tc-right{ top: 50px; width: 56px; height: 48px; } #tc-up { top: 0; border-radius: 8px 8px 3px 3px; } #tc-down { bottom: 0; border-radius: 3px 3px 8px 8px; } #tc-left { left: 0; border-radius: 8px 3px 3px 8px; } #tc-right { right: 0; border-radius: 3px 8px 8px 3px; } /* ----- Start / Select: small angled pills between the D-pad and buttons ----- */ #mid-buttons { display: flex; gap: calc(16px * var(--deck-k)); align-items: center; transform: rotate(-18deg) translateY(calc(10px * var(--deck-k))); } #touch-controls .pill { width: calc(52px * var(--deck-k)); height: calc(15px * var(--deck-k)); border-radius: 8px; background: linear-gradient(160deg, #4a4a4a, #262626); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 3px rgba(0,0,0,.5); font-size: calc(6px * var(--deck-k)); letter-spacing: .5px; } /* ----- A / B: the yellow diamond (see #dpad comment above — same --deck-k-driven outer box / fixed-design-inner scaling scheme) ----- */ #action-pad { position: relative; width: calc(150px * var(--deck-k)); height: calc(106px * var(--deck-k)); flex: none; } #action-inner { width: 150px; height: 106px; } #action-pad button { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ffdf7a, #e8a622 65%, #c4820f 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -4px 6px rgba(120,60,0,.45), 0 3px 4px rgba(0,0,0,.4); color: #6b3a00; text-shadow: 0 1px 0 rgba(255,255,255,.3); } #tc-a { top: 0; right: 0; width: 66px; height: 66px; font-size: 20px; } #tc-b { bottom: 0; left: 0; width: 58px; height: 58px; font-size: 17px; } /* ----- decorative shell details ----- */ #speaker-grille { position: absolute; right: 30px; bottom: 20px; display: flex; gap: 5px; transform: rotate(-24deg); } #speaker-grille span { width: 4px; height: 26px; background: rgba(0,0,0,.32); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .shoulder-btn { position: absolute; top: -9px; width: 58px; height: 20px; background: linear-gradient(180deg, #4a4a4a, #232323); border-radius: 8px 8px 3px 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 3px rgba(0,0,0,.4); color: rgba(255,255,255,.55); font-size: 8px; text-align: center; line-height: 20px; pointer-events: none; } .shoulder-btn.left { left: 8px; } .shoulder-btn.right { right: 8px; } /* ===== Portrait mode — hold it upright, classic-handheld style. ===== The game's screen is a fixed landscape shape (it can't get taller), so instead of leaving empty space below it, the control deck grows to fill the rest of a tall phone with big, comfortable touch targets — the overall proportions land close to a classic vertical handheld rather than the wide GBA shell used in landscape. */ @media (orientation: portrait) { /* Button sizes come from --deck-k (set per-device by layoutDeck() in main.js) — the console itself keeps its natural proportions rather than being stretched to fill the phone's height, so any leftover space above/below reads as normal centering, not a broken layout. */ #speaker-grille { right: 34px; bottom: 26px; } #speaker-grille span { height: 32px; } }