/* suiko-web-v2 deltas on top of the shared gensei-pc98 style.css.
   Keep this file as small as possible — anything that isn't specific to running
   doswasmx (vs. gensei-pc98's NP2kai) belongs in style.css so the two stay in sync. */

/* doswasmx hardcodes the id "canvasDiv" (resizeCanvas/fullscreen/mobile-mode logic in
   script.js) so it can't be renamed to style.css's "canvas-wrap" — give it the exact
   same role/appearance instead. The one lock we do need: doswasmx boots with
   $('#canvasDiv').show(), which writes inline display:block and would left-align the
   canvas — keep it inline-block so the body's flex centering still applies. Sizing is
   otherwise plain CSS (this file loads after style.css, so these just win by order). */
#canvasDiv {
  position: relative;
  display: inline-block !important;
  border: 0;
  margin: 12px 0;
}
body:has(#canvasDiv) { min-height: 0; }

/* This game is 640x480 (4:3), not gensei-pc98's PC-98 640x400 (16:10). No !important:
   it must NOT beat the mobile @media rule below (that's what broke phone sizing). */
canvas { width: 640px; height: 480px; }
/* The unconditional #canvasDiv rule above (position:relative, margin:12px 0) is an
   author style, which beats the UA stylesheet's own fullscreen rule (position:fixed,
   inset:0, width/height:100%) that would otherwise stretch+center this element over the
   whole screen. Without re-asserting those here, the div stays in normal document flow
   at its pre-fullscreen size/position — which is what was pushing the canvas left. */
/* !important here too: the base rule's "display: inline-block !important" otherwise
   still wins on `display` even though :fullscreen has higher specificity — !important
   beats specificity, so both sides need it for the more-specific rule to actually win.
   Without this, position/inset applied (stretching the div over the viewport) but the
   div never actually became a flex container, so the canvas sat at its default
   top/left position inside that box instead of being centered — the "leans left" bug. */
#canvasDiv:fullscreen,
#canvasDiv:-webkit-full-screen {
  position: fixed; inset: 0; margin: 0; width: 100vw; height: 100vh;
  display: flex !important; align-items: center; justify-content: center; background: rgba(0, 0, 0, 1);
}
#canvasDiv:fullscreen canvas,
#canvasDiv:-webkit-full-screen canvas {
  width: min(100vw, 133.33vh);
  height: min(100vh, 75vw);
  image-rendering: pixelated;
}
#canvasDiv:fullscreen #toast,
#canvasDiv:-webkit-full-screen #toast {
  font-size: 2.4vmin; padding: 1.2vmin 2.4vmin; border-radius: 0.6vmin; bottom: 2.4vmin;
}
@media (max-width: 680px) {
  canvas { width: 100vw; height: calc(100vw * .75); }
  #canvasDiv { width: 100vw; }
}

/* Boot cover: splash image shown inside #overlay (in place of the start button) while
   Win95 boots — suiko-boot.js unhides it on Start and fades the whole overlay out
   (#overlay.hidden) once the game actually launches. */
#boot-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
#boot-cover[hidden] { display: none; }

/* Ataho's face overlay for the eye-blink: the base splash is 640x480 and the face frame
   is 104x88 at (256,136), so these percentages map it 1:1 onto the (always-4:3) cover.
   suiko-boot.js cycles its src through the blink frames; hidden = resting (base's eyes). */
#boot-blink {
  position: absolute;
  left: 40%;            /* 256/640 */
  top: 28.3333%;        /* 136/480 */
  width: 16.25%;        /* 104/640 */
  height: 18.3333%;     /* 88/480  */
  image-rendering: pixelated;
}
#boot-blink[hidden] { display: none; }

/* Start control: the cute Ataho popup image instead of a plain button. #overlay #btn-start
   (2 ids) overrides style.css's #overlay button (1 id + type) box styling. Disabled = the
   pre-ready state (dimmed, not clickable); enabled gets a small hover pop. */
#overlay #btn-start {
  position: relative;  /* anchor for the label overlaid on the grass */
  background: none;
  border: 0;
  padding: 0;
  width: 50%;          /* 320/640: the popup's natural half-width on the splash area */
  max-width: 320px;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
#overlay #btn-start:hover { background: none; }
#overlay #btn-start img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
#overlay #btn-start:disabled { opacity: 0.5; cursor: default; }
#overlay #btn-start:not(:disabled):hover { transform: scale(1.04); }

/* "▶ 시작" label sitting in the grass strip at the bottom-center of the popup. It just
   INHERITS the button's own text styling (style.css #overlay button already sets
   KoddiUDOnGothic / --font-lg / light) — re-declaring font-size here would compound the
   button's 1.2em into 1.44em. pointer-events off so the click lands on the button. */
#overlay #btn-start .btn-start-label {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  /* 1px black outline — 4-way text-shadow (text-stroke support is uneven across browsers) */
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
}

/* Landscape on a touch device: a phone in landscape is usually wider than 680px, so it
   would otherwise fall back to the fixed 640x480 and get cropped top/bottom on short
   viewports. Drive by HEIGHT (100% of the viewport, 4:3 width) so the whole screen is
   visible. Portrait doesn't match this, so it keeps the width-driven rule.
   On a near-square viewport (e.g. a tablet split-screen), the height-driven width can
   overflow past 100vw — clamp both axes with min() so it never exceeds either bound. */
@media (orientation: landscape) and (pointer: coarse) {
  canvas { width: min(100vw, calc(100vh * 4 / 3)); height: min(100vh, calc(100vw * 3 / 4)); }
  #canvasDiv { width: auto; }
  /* .top-bar/.disk-panel are hardcoded to 640px in style.css (matching the desktop
     canvas), so on a wide tablet in this mode they stayed a fixed 640px centered under a
     much wider canvas — the disk button and mute/fullscreen buttons (grid-column 1/3,
     justify-self start/end) hugged the edges of that narrower 640px bar instead of the
     actual canvas, i.e. they visually sat well short of the canvas's real edges. Match
     their width to the same formula so the 3-column grid spans the full canvas width. */
  .top-bar, .disk-panel { width: min(100vw, calc(100vh * 4 / 3)); }
  /* 100vh on mobile Safari/Chrome is the height as if the address/toolbar were hidden, not
     the actually-visible viewport — with the toolbar showing (e.g. top-bar collapsed but
     the browser chrome still up), a canvas sized off 100vh comes out taller than the real
     screen. 100dvh tracks the current visible viewport instead; re-declaring the same
     properties after the 100vh versions above means unsupported browsers just keep the vh
     fallback (an unparseable dvh value doesn't overwrite the previous declaration), while
     supported ones (iOS Safari 15.4+/Chrome 108+) get the corrected size. */
  canvas { width: min(100vw, calc(100dvh * 4 / 3)); height: min(100dvh, calc(100vw * 3 / 4)); }
  .top-bar, .disk-panel { width: min(100vw, calc(100dvh * 4 / 3)); }
}

/* The doswasmx engine's own demo UI (#maindiv, #divInstructions) stays in the DOM — rivets
   binds to it during init/boot — but isn't part of this page's visual layout. Already has
   an inline display:none; !important here just makes that non-negotiable regardless of any
   future inline-style changes. (#githubDiv/#menuDiv/#mobileDiv/#mobileButtons/#settingsModal/
   #importModal/#loginModal/.modal-backdrop were removed from the HTML entirely in an earlier
   cleanup pass — dropped from this selector list since they no longer exist.) */
#maindiv, #divInstructions {
  display: none !important;
}

/* The C button (기술설명) is unique to this game — gensei-pc98's shared gamepad has only
   ESC/Enter. It's a round key to set it apart from the square/pill face buttons. Needs the
   "#virtual-gamepad" id prefix to outrank "#virtual-gamepad button"'s own border-radius:
   8px — a bare class selector loses to that id rule regardless of source order. Everything
   else about the gamepad (arrow icons, gap, Enter width, icon sizing) lives in the shared
   style.css so both projects stay in sync. */
#virtual-gamepad .gamepad-buttons button.gamepad-btn-round {
  border-radius: 50%;
}