:root {
  --design-width: 400px;
  --design-height: 720px;
  /* inset: the ring stays inside the control's own rect so focusing
     one hotspot never paints over the artwork of the one beside it */
  --focus-ring: inset 0 0 0 3px #ffe64c, inset 0 0 0 6px #b74f19;
  --font-family: "Noto Sans Thai", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1e1b18;
  color: #fff;
  font-family: var(--font-family);
}

body {
  display: grid;
  place-items: center;
}

.device-container {
  position: relative;
  width: var(--design-width);
  height: var(--design-height);
  aspect-ratio: 5 / 9;
  max-width: 100vw;
  max-height: 100vh;
  background: #000;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

.screen-surface {
  position: relative;
  width: 400px;
  height: 720px;
  overflow: hidden;
}

.surface-layer {
  position: absolute;
  inset: 0;
  width: 400px;
  height: 720px;
}

#base-layer {
  z-index: 10;
}

#modal-layer {
  z-index: 50;
}

#modal-layer[hidden] {
  display: none !important;
}

.surface-layer img {
  display: block;
  width: 400px;
  height: 720px;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.overlay-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hotspot-btn {
  position: absolute;
  pointer-events: auto;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
}

.hotspot-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  background: rgba(255, 230, 76, 0.2);
}

.native-field {
  position: absolute;
  pointer-events: auto;
  background-color: transparent;
  background-clip: content-box;
  border: none;
  outline: none;
  box-shadow: none;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  color: #29211c;
  padding: 4px 48px 4px 12px;
  margin: 0;
  line-height: 1.2;
}

/* Opaque design-matched mask, painted only inside the content box so the
   source well border, right-side icons (01a/01b) and 03 counter stay visible.
   Applies whenever a live value exists (focused or after blur). */
.native-field[data-has-value="true"] {
  background-color: #fef7ef;
}

.native-field:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: var(--focus-ring);
}

.native-field::placeholder {
  color: transparent;
}

/* Per-field mask geometry: right lane preserves each source icon */
#login-pass { padding-right: 56px; }
#create-username { padding-right: 56px; }
#create-email { padding-right: 52px; }
#create-confirm-pass { padding-right: 54px; }
#mew-name-field { padding: 5px 14px; }
#mew-name-field[data-has-value="true"] { background-color: #fefefe; }

.toast-overlay {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 344px;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  background: rgba(41, 33, 28, 0.92);
  color: #ffe64c;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  font-weight: 700;
  border: 2px solid #ffe64c;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  pointer-events: none;
  z-index: 100;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Feedback stays wholly inside the control's declared result region. */
.press-mark {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  border-radius: 6px;
  pointer-events: none;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px currentColor;
}
.press-mark-compact .press-mark-label {
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.press-pressed { color: #b74f19; background: rgba(255, 230, 76, .55); }
.press-select { color: #1c6b3a; background: rgba(120, 230, 150, .55); }
.press-unavailable { color: #8a1f1f; background: rgba(240, 130, 121, .55); }
.press-defer { color: #8a1f1f; background: rgba(240, 130, 121, .55); }