* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: #fff; overflow: hidden; }
body { font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
canvas.eb { image-rendering: pixelated; display: block; }
canvas { image-rendering: pixelated; }
button { font: inherit; color: inherit; }

/* EarthBound's plain window: black, white edge, rounded, a dark rim inside */
.win {
  background: #000;
  border: 2px solid #f0f0f8;
  border-radius: 7px;
  box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #000, inset 0 0 0 4px #585878;
  padding: 14px 16px;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #000; border: 2px solid #d8d8e8; border-radius: 5px;
  padding: 6px 12px; min-height: 40px; cursor: pointer;
}
.btn:hover, .btn:focus-visible { background: #202860; outline: none; }
.btn.primary { border-color: #f8d870; }
.btn.sq { min-width: 40px; padding: 6px; }

/* ---------------- ROM loader */
#loader { position: fixed; inset: 0; display: grid; place-content: center; gap: 12px; padding: 16px;
  background: radial-gradient(circle at 30% 20%, #3a2860, #10101c 70%); }
.loader-win { max-width: 560px; }
.loader-win h1 { margin: 0 0 8px; font-size: 28px; color: #f8d870; letter-spacing: .5px; }
.loader-win p { margin: 0 0 12px; color: #e8e8f8; }
.btn.big { font-weight: 700; font-size: 18px; padding: 12px 22px; margin: 4px 0 10px; }
.hint { font-size: 14px; color: #a8a8c8 !important; }
.error { color: #f8a0a0 !important; min-height: 1.4em; }
.fine { font-size: 12px; color: #8888a8; text-align: center; margin: 0; }
body.drag .loader-win { outline: 3px dashed #f8d870; outline-offset: 6px; }

/* ---------------- naming / design screen */
.screen.designer {
  position: fixed; inset: 0; overflow: auto; padding: 16px 12px 40px; z-index: 8;
  background-color: #1a1838;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 12px, transparent 12px 24px),
                    repeating-linear-gradient(-45deg, rgba(120,90,200,.08) 0 12px, transparent 12px 24px);
  animation: drift 18s linear infinite;
}
@keyframes drift { to { background-position: 240px 120px, -240px 120px; } }
.dz-head { max-width: 1000px; margin: 0 auto 14px; display: flex; flex-direction: column; gap: 6px; }
.dz-cols { max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.dz-look { flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px; }
.dz-names { flex: 2 1 440px; display: flex; flex-direction: column; gap: 8px; }
.dz-stage { display: grid; place-items: center; height: 230px; background: #18204a; border: 2px solid #383868; border-radius: 6px; cursor: pointer; padding: 0; }
.dz-stage .dz-preview, .dz-confirm .dz-preview { height: 200px; width: auto; }
.dz-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.dz-bodylabel { flex: 1; display: flex; justify-content: center; min-width: 110px; }
.dz-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { width: 36px; height: 36px; border: 2px solid #fff; border-radius: 5px; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 2px #000; }
.swatch:hover, .swatch:focus-visible { transform: scale(1.12); outline: none; }
.swatch.big { width: 44px; height: 44px; display: inline-block; cursor: default; }
.dz-field { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%;
  background: #000; border: 2px solid #3a3a60; border-radius: 6px; padding: 8px 12px; cursor: text; min-height: 48px; }
.dz-field.active { border-color: #f8d870; background: #0c0c24; }
.dz-value { display: flex; align-items: flex-end; gap: 2px; min-height: 32px; }
.caret { display: none; width: 14px; height: 4px; background: #fff; margin-bottom: 4px; animation: blink 1s steps(2, start) infinite; }
.dz-field.active .caret { display: inline-block; }
@keyframes blink { to { visibility: hidden; } }
.dz-grid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; margin: 4px 0; }
.key { display: grid; place-items: center; min-height: 36px; background: transparent; border: 1px solid #2c2c50; border-radius: 4px; cursor: pointer; padding: 0; }
.key:hover, .key:focus-visible { background: #202860; border-color: #8888c8; outline: none; }
.dz-kbd { position: fixed; left: -2000px; top: 0; width: 20px; opacity: 0; font-size: 16px; }
.dz-overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 10, .62); }
.dz-picker, .dz-all, .dz-confirm { max-width: min(640px, 94vw); max-height: 90vh; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.dz-presets { display: grid; grid-template-columns: repeat(8, 36px); gap: 7px; }
.dz-picker .dz-preview { height: 96px; width: auto; margin-left: auto; background: #18204a; border-radius: 6px; }
.dz-picker input[type=color] { width: 34px; height: 26px; border: 0; padding: 0; background: none; cursor: pointer; }
.dz-allgrid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 62vh; overflow: auto; padding: 2px; }
.dz-thumb { background: #1c2448; border: 2px solid transparent; border-radius: 5px; padding: 4px; cursor: pointer; display: grid; place-items: end center; min-width: 44px; min-height: 60px; }
.dz-thumb:hover, .dz-thumb:focus-visible { border-color: #8888c8; outline: none; }
.dz-thumb.active { border-color: #f8d870; }
.dz-confirm { align-items: center; text-align: center; }
.dz-lines { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.small { opacity: .9; }

@media (max-width: 640px) {
  .dz-grid { grid-template-columns: repeat(9, 1fr); }
  .dz-stage { height: 190px; }
  .dz-stage .dz-preview { height: 160px; }
  .dz-presets { grid-template-columns: repeat(6, 38px); }
}

/* ---------------- game */
#view { position: fixed; inset: 0; display: block; touch-action: none; }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 5; }
#fade.on { opacity: 1; }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 6; }
#status { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; padding: 6px 12px; }
#menu-btn { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 10px; pointer-events: auto; }
#talk-btn { position: absolute; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); pointer-events: auto; }
#chatlog { position: absolute; left: 10px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 52px); width: min(640px, calc(100vw - 110px));
  max-height: 38vh; overflow: hidden; display: flex; flex-direction: column; gap: 3px; }
#chatlog .line { align-self: flex-start; background: rgba(0, 0, 0, .62); padding: 3px 8px; border-radius: 5px; transition: opacity 1.2s; display: flex; flex-direction: column; }
#chatlog .line.old { opacity: 0; }
#hud.chatting #chatlog { overflow: auto; pointer-events: auto; }
#hud.chatting #chatlog .line.old { opacity: 1; }
#chatform { position: absolute; left: 10px; right: 100px; bottom: max(10px, env(safe-area-inset-bottom)); pointer-events: auto; }
#chatin { width: 100%; font: 16px ui-monospace, Consolas, monospace; background: #000; color: #fff; border: 2px solid #f0f0f8; border-radius: 6px; padding: 9px 10px; outline: none; }
#joy { position: fixed; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); pointer-events: none; z-index: 7; }
#joy > div { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
#panel { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 10, .35); }
.panel { min-width: min(380px, 92vw); max-width: 94vw; max-height: 86vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.panel .rows { display: flex; flex-direction: column; gap: 4px; }
.panel .row { display: flex; justify-content: space-between; align-items: center; gap: 18px; width: 100%; background: transparent; border: 2px solid transparent; border-radius: 5px; padding: 6px 10px; cursor: pointer; text-align: left; min-height: 44px; }
.panel .row:hover, .panel .row:focus-visible { border-color: #f0f0f8; background: #1c2450; outline: none; }
.panel .text { padding: 2px 4px; }
.card { display: flex; gap: 18px; align-items: center; padding: 6px; }

/* ---------------- HP box, command bar, battle */
#hpbox { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 46px); left: 10px; padding: 4px 10px; }
#partybox { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 84px); left: 10px; padding: 4px 10px; display: flex; flex-direction: column; gap: 2px; }
#cmdbar { position: absolute; right: 10px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 52px); display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
#cmdbar .btn { min-width: 84px; }
#battle { position: fixed; inset: 0; z-index: 12; display: block; touch-action: none; background: #000; }
.statrow { display: flex; justify-content: space-between; gap: 24px; padding: 1px 6px; }
body.building #cmdbar { display: none; }

/* ---------------- talking */
#dialog { position: fixed; left: 50%; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 56px); transform: translateX(-50%); z-index: 8; width: min(660px, calc(100vw - 24px)); cursor: pointer; }
.dialog { display: flex; flex-direction: column; gap: 4px; min-height: 96px; }
.dialog .more { align-self: flex-end; animation: blink 1s steps(2, start) infinite; }
.dialog.choices { min-height: 0; width: max-content; min-width: 200px; margin: 0 auto; }
.choice { background: transparent; border: 2px solid transparent; border-radius: 4px; padding: 4px 8px; text-align: left; cursor: pointer; }
.choice.on, .choice:hover { border-color: #f0f0f8; background: #1c2450; }
.digits { display: flex; gap: 2px; }                      /* the number roller (1F 52): one button per digit */
.digits .choice { padding: 4px 6px; text-align: center; }

/* ---------------- accounts */
.screen.acct { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 30% 20%, #3a2860, #10101c 70%); }
.acct-win { display: flex; flex-direction: column; gap: 10px; width: min(460px, 94vw); }
.acct-field { display: flex; flex-direction: column; gap: 4px; }
.acct-input { font: 16px ui-monospace, Consolas, monospace; background: #0c0c24; color: #fff; border: 2px solid #3a3a60; border-radius: 6px; padding: 9px 10px; outline: none; width: 100%; }
.acct-input:focus { border-color: #f8d870; }
textarea.acct-input { resize: vertical; min-height: 84px; }

/* ---------------- building */
.builder { position: fixed; left: 10px; top: 64px; bottom: 10px; width: 300px; z-index: 7; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.builder .grow { flex: 1; }
.builder .tools .btn { min-height: 34px; padding: 4px 8px; }
.builder .tools .btn.on { border-color: #f8d870; background: #2a2a10; }
.builder .tilebox { overflow: auto; max-height: 52vh; border: 2px solid #303050; border-radius: 4px; }
.builder canvas.tiles { display: block; width: 256px; cursor: crosshair; }
.builder .btn[disabled] { opacity: .5; cursor: default; }
body.building #chatlog { left: 320px; }
@media (max-width: 760px) {
  .builder { left: 6px; right: 6px; top: auto; width: auto; height: 46vh; }
  body.building #chatlog { left: 10px; bottom: calc(46vh + 20px); }
}