/* Game Make and Create — styles. Palette: "Soft Plum" (clean, calm, muted so the block art stands out).
   --accent (#8069BB) is for borders, fills and indicators. Anything with white text on it, or accent-coloured text,
   uses --accent-strong (#7561B0): white on it is 5.1:1, white on --accent is only 4.5:1 and --accent text on --panel is 4.3:1. */
:root {
  --bg: #F1EEF7;            /* background */
  --panel: #FAF9FD;         /* panels, bars, modals */
  --border: #C9C3DC;        /* borders, muted fills (decorative; never use as text) */
  --ink: #35304D;           /* text */
  --accent: #8069BB;
  --accent-strong: #7561B0;
  --hi: #BFB2E6;            /* highlight / selected */
  --danger: #C9707F;        /* icons and outlines only (white text on it is 3.4:1) */
  --success: #7FAE93;       /* dark text on it is 5.0:1 */
  --scrim: rgba(53, 48, 77, .55);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: system-ui, sans-serif; }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
.screen { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; }
.screen[hidden] { display: none; }
.title { font-size: 2.2rem; margin: 0; }
.version { opacity: .7; font-size: .8rem; margin: 0; }
.big-btn { font: inherit; font-size: 1.6rem; padding: .6rem 2.4rem; border: 0; border-radius: .6rem; background: var(--accent-strong); color: #fff; font-weight: 700; box-shadow: 0 2px 0 rgba(53, 48, 77, .25); }
.heading { margin: 0; font-size: 1.6rem; }
.mode-list { display: flex; flex-direction: column; gap: .8rem; width: min(90vw, 24rem); }
.mode-btn { display: flex; flex-direction: column; gap: .2rem; padding: 1rem; border: 2px solid var(--border); border-radius: .6rem; background: var(--panel); color: var(--ink); font: inherit; }
.mode-btn:hover { border-color: var(--accent); background: #fff; }
.mode-btn b { font-size: 1.3rem; letter-spacing: .05em; color: var(--accent-strong); }
.mode-btn span { opacity: .8; font-size: .9rem; }
.back-btn { background: none; border: 0; color: var(--ink); opacity: .8; font: inherit; text-decoration: underline; padding: .5rem; }

/* ---- build screen ---- */
html, body { overflow: hidden; }
#build { justify-content: flex-start; align-items: stretch; gap: 0; height: 100dvh; min-height: 0; text-align: left; overflow: hidden; }
.topbar, .palette { display: flex; align-items: center; gap: .4rem; padding: .4rem; background: var(--panel); flex-wrap: wrap; }
.topbar { border-bottom: 2px solid var(--border); }
.palette { border-top: 2px solid var(--border); }
.spacer { flex: 1; }
.build-title { font-weight: 700; padding: 0 .4rem; }
.tbtn { font: inherit; color: var(--ink); background: var(--bg); border: 2px solid var(--border); border-radius: .5rem; padding: .35rem .7rem; min-width: 2.4rem; }
.tbtn:hover:not(:disabled) { border-color: var(--accent); }
.tbtn:disabled { opacity: .45; cursor: default; }
.tbtn.on { background: var(--hi); border-color: var(--accent); font-weight: 700; }
.create-btn { font: inherit; font-weight: 800; border: 2px solid #6e9c82; border-radius: .5rem; padding: .35rem 1rem; background: var(--success); color: var(--ink); }
.canvas-wrap { flex: 1; min-height: 0; position: relative; }
#world { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
.palette { flex-direction: column; align-items: stretch; }
.tools { display: flex; gap: .4rem; }
.blocks { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; }
.block-btn { flex: 0 0 auto; padding: 3px; border: 3px solid transparent; border-radius: .4rem; background: var(--bg); }
.block-btn canvas { width: 40px; height: 40px; image-rendering: pixelated; display: block; }
.block-btn:hover { border-color: var(--border); }
.block-btn.on { border-color: var(--accent); background: var(--hi); }
.toast { position: fixed; left: 50%; bottom: 6rem; transform: translateX(-50%); background: var(--ink); color: var(--panel); padding: .6rem 1rem; border-radius: .6rem; z-index: 50; }
.toast[hidden] { display: none; }

/* ---- play mode ---- */
.edit-only { display: none; }
#build.playing .build-only { display: none !important; }
#build.playing .edit-only { display: inline-block; }
.touch-controls { position: absolute; inset: 0; pointer-events: none; display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 max(.8rem, env(safe-area-inset-right)) max(.8rem, env(safe-area-inset-bottom)) max(.8rem, env(safe-area-inset-left));
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.touch-controls[hidden] { display: none; }
.tc-group { display: flex; gap: .8rem; align-items: flex-end; }
.tc-group button { pointer-events: auto; touch-action: none; width: 4.4rem; height: 4.4rem; border-radius: 50%; border: 3px solid var(--accent);
  background: rgba(250, 249, 253, .85); color: var(--ink); font-size: 1.6rem; -webkit-tap-highlight-color: transparent; }
.tc-group button.down { background: var(--hi); }

/* ---- parkour rules ---- */
.hearts { color: var(--danger); font-size: 1.4rem; letter-spacing: .1em; margin-left: .6rem; }
.tabs { display: flex; gap: .4rem; }
.tab { font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 3px solid transparent; padding: .2rem .6rem; opacity: .75; }
.tab.on { opacity: 1; border-bottom-color: var(--accent); font-weight: 700; }
.overlay { position: absolute; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: 5; }
.overlay[hidden] { display: none; }
.panel { background: var(--panel); color: var(--ink); border: 3px solid var(--border); border-radius: .8rem; padding: 1.2rem 1.6rem; text-align: center; max-width: min(90vw, 24rem); box-shadow: 0 6px 24px rgba(53, 48, 77, .25); }
.panel h2 { margin: 0 0 .4rem; }
.ov-btns { display: flex; gap: .8rem; justify-content: center; margin-top: .8rem; flex-wrap: wrap; }

/* ---- character painter ---- */
.modal { position: fixed; inset: 0; background: var(--scrim); z-index: 60; display: flex; align-items: center; justify-content: center; overflow: auto; padding: .6rem; }
.modal[hidden] { display: none; }
.char-panel { max-width: 40rem; width: 100%; max-height: 100%; overflow: auto; }
.name-row { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; margin-bottom: .6rem; }
.name-row label { display: flex; flex-direction: column; text-align: left; font-size: .8rem; gap: .2rem; }
.name-row input { font: inherit; font-size: 1rem; padding: .35rem .5rem; border-radius: .4rem; border: 2px solid var(--border); background: #fff; color: var(--ink); width: 11rem; }
.name-row input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--hi); }
.painter { display: flex; gap: 1rem; justify-content: center; align-items: flex-start; flex-wrap: wrap; margin-bottom: .8rem; }
#charGrid { width: min(60vw, 224px); height: auto; aspect-ratio: 224 / 336; touch-action: none; border: 3px solid var(--border); border-radius: .4rem; background: #fff; cursor: crosshair; }
.painter-side { display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.preview-box { background: #9fd8f5; border-radius: .4rem; padding: .5rem 1rem; }  /* sky blue, like the game canvas */
#charPreview { width: 32px; height: 48px; image-rendering: pixelated; display: block; }
.swatches { display: grid; grid-template-columns: repeat(4, 2.2rem); gap: .3rem; }
.swatch { width: 2.2rem; height: 2.2rem; border: 3px solid var(--border); border-radius: .4rem; padding: 0; }
.swatch.on { border-color: var(--ink); outline: 2px solid var(--accent); outline-offset: 1px; }
.paint-tools { display: grid; grid-template-columns: repeat(3, auto); gap: .3rem; }

/* ---- saved games (step 7) ---- */
#title { justify-content: flex-start; height: 100dvh; min-height: 0; overflow-y: auto; }
.title-inner { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1rem; width: min(100%, 28rem); }
.games { width: 100%; }
.games-h { font-size: 1.1rem; margin: .4rem 0; }
.games-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.games-list li { display: flex; gap: .4rem; align-items: stretch; }
.game-open { flex: 1; display: flex; flex-direction: column; gap: .15rem; text-align: left; padding: .6rem .8rem; border: 2px solid var(--border); border-radius: .6rem; background: var(--panel); color: var(--ink); font: inherit; }
.game-open:hover { border-color: var(--accent); background: #fff; }
.game-open b { font-size: 1.05rem; overflow-wrap: anywhere; }
.game-open span { font-size: .8rem; opacity: .8; }
.game-del { font: inherit; font-size: .85rem; color: var(--ink); background: var(--bg); border: 2px solid var(--border); border-radius: .6rem; padding: 0 .7rem; }
.game-del:hover, .danger-btn:hover { border-color: var(--danger); }
.danger-btn { font: inherit; color: var(--ink); background: var(--panel); border: 2px solid var(--danger); border-radius: .6rem; padding: .5rem 1rem; }

/* ---- quest (step 8) ---- */
.objectives { position: absolute; top: .5rem; left: .5rem; z-index: 4; background: rgba(250, 249, 253, .92); border: 2px solid var(--border); border-radius: .6rem; padding: .4rem .7rem; font-size: .9rem; line-height: 1.5; pointer-events: none; }
.objectives[hidden] { display: none; }
.objectives .done { opacity: .65; text-decoration: line-through; }
.keydot { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--ink); margin-left: .25rem; font-size: .7rem; font-weight: 700; color: var(--ink); vertical-align: middle; }
#npcText { font: inherit; font-size: 1rem; padding: .45rem .6rem; border-radius: .4rem; border: 2px solid var(--border); background: #fff; color: var(--ink); width: min(80vw, 20rem); }
#npcText:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--hi); }

.legal { font-size: .8rem; opacity: .8; margin: 0; }
.legal a { color: var(--accent-strong); }

/* ---- sign-in ---- */
.account { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .4rem; min-height: 2.6rem; }
.account > div { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
#accountUser { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .6rem; }
#accountUser[hidden], #accountGuest[hidden] { display: none; }
.account .note { margin: 0; font-size: .8rem; opacity: .8; }
.avatar { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--border); }

/* ---- sound ---- */
.mute-btn { display: inline-flex; align-items: center; justify-content: center; padding: .35rem .5rem; }
.mute-btn svg { width: 1.25rem; height: 1.25rem; display: block; }
.mute-btn[aria-pressed="true"] { opacity: .65; }