/* GLAZEWORKS — the interface: the loading screen, the title, the buttons, the two panels. The table itself is drawn in js/render.js.
   The colours are these variables; the glazes of the title's letters are the .z-… classes below (the same eight as js/config.js). */
:root {
	--night: #171019; --night-warm: #1d1110;
	--ink: #f6ead6; --ink-dim: #b9a48e;
	--ember: #ff7a2f; --ember-hot: #ffd27a; --ember-deep: #b8401a;
	--panel: rgba(24, 15, 14, 0.94); --line: rgba(255, 226, 190, 0.16);
	--clay: #7a573d;
	--font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--lt: 50px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; position: fixed; inset: 0; background: var(--night-warm); color: var(--ink);
	font: 600 15px/1.35 var(--font); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; touch-action: none; -webkit-text-size-adjust: 100%; }
#stage { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
button { font: inherit; color: inherit; border: 0; margin: 0; padding: 0; background: none; cursor: pointer; touch-action: manipulation; -webkit-appearance: none; appearance: none; }
h2, p { margin: 0; }

/* ── the name, in glazed tiles ─────────────────────────────────────────────────────────────────────────────────────────────── */
.logo { display: grid; gap: calc(var(--lt) * 0.16); justify-items: center; }
.logo-row { display: flex; gap: calc(var(--lt) * 0.12); }
.lt { --g: #86c5a2; --d: #356f59; --l: #dcf6e6; --on: #1d4737; --on-edge: rgba(255, 255, 255, 0.4);
	position: relative; width: var(--lt); height: var(--lt); border-radius: 22%; display: grid; place-items: center;
	font: 900 calc(var(--lt) * 0.6)/1 var(--font); color: var(--on); text-shadow: 0 1px 0 var(--on-edge); padding-bottom: calc(var(--lt) * 0.04);
	background:
		radial-gradient(34% 15% at 30% 20%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 100%),
		radial-gradient(95% 52% at 50% 0%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 100%),
		radial-gradient(82% 82% at 50% 46%, rgba(0, 0, 0, 0) 52%, var(--d) 132%),
		linear-gradient(180deg, var(--l) -34%, var(--g) 42%, var(--d) 168%);
	box-shadow: 0 calc(var(--lt) * 0.09) 0 var(--clay), 0 calc(var(--lt) * 0.2) calc(var(--lt) * 0.3) rgba(0, 0, 0, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.62), inset 0 calc(var(--lt) * -0.07) calc(var(--lt) * 0.1) rgba(0, 0, 0, 0.2); }
.lt:nth-child(1) { transform: rotate(-3deg); } .lt:nth-child(2) { transform: rotate(1.5deg) translateY(2%); } .lt:nth-child(3) { transform: rotate(-1deg) translateY(-3%); }
.lt:nth-child(4) { transform: rotate(2.5deg); } .lt:nth-child(5) { transform: rotate(-2deg) translateY(2%); }
.logo-row + .logo-row .lt:nth-child(odd) { transform: rotate(2deg) translateY(-2%); } .logo-row + .logo-row .lt:nth-child(even) { transform: rotate(-2.5deg) translateY(1%); }
.z-celadon { --g: #86c5a2; --d: #356f59; --l: #dcf6e6; --on: #1d4737; }
.z-cobalt { --g: #3a6bd2; --d: #172f78; --l: #b4cbff; --on: #f4f7ff; --on-edge: rgba(8, 18, 60, 0.6); }
.z-oxblood { --g: #c2442f; --d: #6a1a12; --l: #f7ae98; --on: #fff1e6; --on-edge: rgba(60, 10, 4, 0.6); }
.z-honey { --g: #e7aa35; --d: #96590c; --l: #ffe7ab; --on: #5a3303; }
.z-cream { --g: #f0e5cf; --d: #b29c74; --l: #fffbf2; --on: #5d4a2c; }
.z-turquoise { --g: #2fb7b0; --d: #0f6b69; --l: #baf3ed; --on: #063f3d; }
.z-plum { --g: #9355a8; --d: #48215c; --l: #e3bef0; --on: #fbeeff; --on-edge: rgba(40, 10, 54, 0.6); }
.z-shino { --g: #ee8a55; --d: #9c401a; --l: #ffd5b8; --on: #5e2408; }
/* the heat that runs through the letters while the game loads */
.logo.firing .lt { animation: fired 1.9s ease-in-out infinite; animation-delay: calc(var(--i) * 0.12s); }
@keyframes fired { 0%, 52%, 100% { filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgba(255, 150, 60, 0)); } 24% { filter: brightness(1.42) saturate(1.25) drop-shadow(0 0 calc(var(--lt) * 0.24) rgba(255, 150, 60, 0.95)); } }

/* ── the loading screen ────────────────────────────────────────────────────────────────────────────────────────────────────── */
#loading { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
	background: radial-gradient(120% 70% at 50% 112%, rgba(255, 122, 47, 0.42), rgba(255, 122, 47, 0.08) 52%, rgba(255, 122, 47, 0) 76%),
		radial-gradient(90% 60% at 12% 0%, rgba(120, 140, 255, 0.14), rgba(120, 140, 255, 0) 70%),
		linear-gradient(180deg, #191627, #1d1110); }
.load-box { display: grid; justify-items: center; gap: 26px; --lt: clamp(38px, 11.5vmin, 62px); transform: translateY(-4vh); }
.kiln { width: min(250px, 62vw); height: 12px; border-radius: 7px; padding: 2px; background: #0c0706; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 226, 190, 0.1); overflow: hidden; }
.kiln i { display: block; height: 100%; width: 0; min-width: 8px; border-radius: 5px; background: linear-gradient(90deg, #ff5a2a, #ff9838 55%, #ffd27a); box-shadow: 0 0 14px rgba(255, 122, 47, 0.9); transition: width 0.22s ease; animation: breathe 1.1s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
.phase { font: 700 12px/1 var(--font); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); min-height: 12px; }
/* embers drifting up from the kiln */
#loading .spark { position: absolute; left: var(--x); bottom: -12px; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle, #fff3dc, #ffb347 45%, rgba(255, 122, 47, 0) 72%); box-shadow: 0 0 9px 2px rgba(255, 140, 50, 0.6); opacity: 0; animation: spark var(--t) linear infinite; animation-delay: var(--d); }
@keyframes spark { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 8% { opacity: 0.95; } 70% { opacity: 0.55; } 100% { transform: translate(var(--sx), -52vh) scale(0.45); opacity: 0; } }

/* ── the front of the game: the name above the table, the way in below it (turned: left of it, right of it) ─────────────────── */
#title { position: fixed; inset: 0; z-index: 20; }
.title-top { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + var(--tt, 56px)); height: var(--th, 150px); display: grid; align-content: center; justify-items: center; gap: 10px; }
.tag { font: 700 13px/1.35 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); text-align: center; }
.tag span { white-space: nowrap; display: inline-block; margin: 0 0.3em; }
/* the way in sits on the shelf, where the pieces will wait */
.title-low { position: absolute; left: var(--sx, 16px); top: var(--sy, 590px); width: var(--sw, 358px); height: var(--sh, 150px); padding: 0 16px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 10px; }
.row { display: flex; gap: 10px; justify-content: center; align-items: center; }
.tag b { color: var(--ink); font-weight: 800; letter-spacing: 0.05em; }

/* a button is a glazed tile too */
.big { position: relative; width: 100%; height: 60px; border-radius: 19px; font: 900 25px/1 var(--font); letter-spacing: 0.04em; color: #4a1a06; text-shadow: 0 1px 0 rgba(255, 240, 210, 0.55);
	background: radial-gradient(60% 46% at 28% 12%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #ffd27a, #ff9838 46%, #ff6a2a);
	box-shadow: 0 6px 0 var(--ember-deep), 0 14px 26px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -5px 9px rgba(160, 50, 10, 0.3); transition: transform 0.06s ease, box-shadow 0.06s ease; }
.big:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ember-deep), 0 6px 14px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -5px 9px rgba(160, 50, 10, 0.3); }
.big.small { height: 54px; font-size: 21px; }
.pill-btn { min-height: 46px; padding: 0 18px; border-radius: 23px; font: 800 15px/1.1 var(--font); color: var(--ink); background: rgba(26, 16, 15, 0.82); border: 1px solid var(--line);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 226, 190, 0.08); display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.pill-btn:active, .round:active { transform: translateY(2px); background: rgba(46, 30, 26, 0.9); }
.pill-btn.wide, .pill-btn.stack { flex-direction: column; gap: 2px; justify-content: center; }      /* two lines: what it is, and where it stands */
.pill-btn.wide { flex: 1; min-width: 0; padding: 0 12px; } .pill-btn.stack { padding: 0 15px; }
.pill-btn.ready em { text-shadow: 0 0 10px rgba(255, 190, 90, 0.9); } .pill-btn.ready { border-color: rgba(255, 210, 122, 0.55); }
.pill-btn em { font: 700 12px/1.1 var(--font); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-hot); }
.round { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(26, 16, 15, 0.82); border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 226, 190, 0.08); }
.round svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.round .spk { fill: var(--ink); stroke-width: 1.4; }
.round .cut { display: none; stroke: var(--ember); }
.round[aria-pressed="false"] .wave { display: none; } .round[aria-pressed="false"] .cut { display: inline; } .round[aria-pressed="false"] .spk { fill: var(--ink-dim); stroke: var(--ink-dim); }

/* ── the run: two small buttons in the corners; the score and the heat are drawn on the table ──────────────────────────────── */
#hud .round { position: fixed; z-index: 15; top: calc(env(safe-area-inset-top, 0px) + 8px); }
#menu { left: calc(env(safe-area-inset-left, 0px) + 12px); }
#mute { right: calc(env(safe-area-inset-right, 0px) + 12px); }

/* ── the two panels: paused, and the end of a run ──────────────────────────────────────────────────────────────────────────── */
#sheet, #over, #sets { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; }
#sets { background: rgba(10, 6, 6, 0.9); }
#sets:not([hidden]) ~ #mosa-port-credits-open, #sets:not([hidden]) ~ #mosa-port-room { display: none !important; }      /* the shelf is open: nothing of the kit over it */
#over { place-items: end center; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); }
#sheet { background: rgba(10, 6, 6, 0.74); }
.panel { width: min(340px, 100%); max-height: 100%; overflow: auto; padding: 22px 20px 20px; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 226, 190, 0.1); display: grid; gap: 12px; justify-items: stretch; text-align: center; animation: rise 0.28s cubic-bezier(0.2, 1.2, 0.3, 1) both; }
@keyframes rise { from { transform: translateY(26px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.panel h2 { font: 800 15px/1.2 var(--font); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); }
.panel .row .pill-btn { flex: 1; padding: 0 10px; }
.rules { font: 600 14px/1.5 var(--font); color: var(--ink-dim); }
/* the glaze sets */
/* the shelf's name and its Back stay put; the sets between them scroll when there are more than the screen holds (a short phone, or a
   mod with a dozen sets), and the last one in sight fades to say so */
#sets .panel { display: flex; flex-direction: column; gap: 10px; overflow: hidden; background: rgb(24, 15, 14); }
#sets .panel > * { flex: none; }
#sets #set-list { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: none; align-content: start; border-radius: 16px; }
#set-list::-webkit-scrollbar { display: none; }
#set-list.more { -webkit-mask-image: linear-gradient(#000 calc(100% - 34px), transparent); mask-image: linear-gradient(#000 calc(100% - 34px), transparent); }
.purse { font: 600 14px/1.4 var(--font); color: var(--ink-dim); } .purse b { color: var(--ember-hot); font-weight: 800; }
#set-list { display: grid; gap: 8px; }
.set { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 10px 12px 12px; border-radius: 16px; background: rgba(255, 226, 190, 0.045); border: 1px solid var(--line); text-align: left; }
.set.on { border-color: rgba(255, 210, 122, 0.6); background: rgba(255, 170, 70, 0.09); }
.swatches { grid-column: 1 / -1; display: flex; gap: 5px; --lt: 26px; padding: 2px 0 4px; }
.set-name { font: 800 16px/1.2 var(--font); color: var(--ink); } .set-name small { display: block; font: 600 12px/1.3 var(--font); color: var(--ink-dim); }
.set .pill-btn { min-height: 44px; min-width: 96px; padding: 0 14px; } .set .pill-btn.buy { color: var(--ember-hot); } .set .pill-btn[disabled] { opacity: 0.5; }
.over-score { font: 900 58px/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 34px rgba(255, 150, 60, 0.35); }
.over-best { font: 800 13px/1.2 var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); min-height: 16px; }
.over-best.new { color: var(--ember-hot); }
.over-rows { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font: 600 14px/1.3 var(--font); color: var(--ink-dim); margin-bottom: 4px; }
#over-embers { color: var(--ember-hot); }
.over-reach { font: 700 13px/1.3 var(--font); letter-spacing: 0.04em; color: var(--ember-hot); margin: -4px 0 2px; } .over-reach:empty { display: none; }
.over-rows b { color: var(--ink); font-weight: 800; }

/* ── what the port kit paints, in this game's own hand: friends' live scores, the credits ──────────────────────────────────── */
#mosa-port-room { font: 700 13px/1.35 var(--font) !important; color: var(--ink) !important; background: rgba(22, 13, 12, 0.86) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; padding: 7px 12px !important;
	left: 50% !important; transform: translateX(-50%); text-align: center; max-width: calc(100vw - 132px) !important; top: calc(env(safe-area-inset-top, 0px) + 9px) !important; }
#mosa-port-room b { color: var(--ember-hot); font-weight: 800; } #mosa-port-room small { font-size: 12px !important; opacity: 0.8 !important; }
/* in a run, upright, the chip never grows down onto the score: friends' scores keep to one line (a long room is cut with an ellipsis), the
   room's best to a second — and on a short phone that second line is left out */
@media (orientation: portrait) {
	body:not([data-state="title"]) #mosa-port-room { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
	body:not([data-state="title"]) #mosa-port-room small { overflow: hidden; text-overflow: ellipsis; }
}
@media (orientation: portrait) and (max-height: 700px) { body:not([data-state="title"]) #mosa-port-room small { display: none !important; } }
/* the kit's one chip says two things: the invitation to share (its first seconds) and friends' live scores. The invitation belongs to
   the title, at the foot of the screen; in a run only the scores show, between the two corner buttons. (While the loading screen is
   up the kit paints nothing of its own.) */
body:not([data-state="title"]) #mosa-port-room.gw-invite { display: none !important; }
body[data-state="title"] #mosa-port-room { top: auto !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); max-width: calc(100vw - 24px) !important; font-size: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
@media (orientation: portrait) and (max-height: 719px) { body[data-state="title"] #mosa-port-room { display: none !important; } }
body[data-state="title"][data-crowded="1"] #mosa-port-room { display: none !important; }      /* no room under the shelf (a tablet upright): the invitation is not laid over it */
/* (the kit looks at `creditsVisible` twice a second: for that half second into a run its button would sit on the sound button) */
body:not([data-state="title"]) #mosa-port-credits-open { display: none !important; }
#mosa-port-credits-open { width: 46px !important; height: 46px !important; border-radius: 50% !important; background: rgba(26, 16, 15, 0.82) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; font: italic 700 20px Georgia, serif !important; top: calc(env(safe-area-inset-top, 0px) + 8px) !important; }
.mp-credits { background: rgba(14, 8, 8, 0.95) !important; color: var(--ink) !important; font: 600 15px/1.55 var(--font) !important; }
.mp-credits h2 { font: 900 24px/1.2 var(--font) !important; color: var(--ember-hot); letter-spacing: 0.02em; }
.mp-credits button { min-height: 48px; padding: 0 26px !important; border-radius: 24px !important; background: linear-gradient(180deg, #ffd27a, #ff9838 46%, #ff6a2a) !important; color: #4a1a06 !important; font: 900 16px/1 var(--font) !important; }

/* ── the phone turned: the name at the left of the table, the way in at the right ──────────────────────────────────────────── */
@media (orientation: landscape) {
	.title-top { left: env(safe-area-inset-left, 0px); right: auto; top: 0; height: 100%; width: calc(var(--bl, 240px) - env(safe-area-inset-left, 0px)); }
	body[data-state="title"] #mosa-port-room { white-space: normal; max-width: calc(var(--bl, 240px) - 26px) !important; }
	.title-low { padding: 0 12px; }
	.title-low .row { flex-wrap: wrap; } .title-low .pill-btn.wide { flex: 1 1 100%; } .title-low .pill-btn.stack { flex: 1; padding: 0 10px; }      /* a narrow shelf: the daily batch takes a line, the glazes and the sound the next */
	.tag { font-size: 12px; letter-spacing: 0.1em; max-width: 90%; }
	#mute { right: auto; left: calc(env(safe-area-inset-left, 0px) + 66px); }
	#mosa-port-room { left: calc(env(safe-area-inset-left, 0px) + 12px) !important; transform: none; top: auto !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); max-width: calc(var(--bl, 240px) - 26px) !important; text-align: left; }
	.panel { padding: 16px 18px; gap: 9px; }
	#over { place-items: center; padding-bottom: 16px; }
	.over-score { font-size: 46px; }
	.pill-btn.wide { padding: 0 10px; }
	#sets .panel { width: min(660px, 100%); } #set-list { grid-template-columns: 1fr 1fr; }
}
@media (max-height: 400px) { .big.small { height: 48px; } .panel h2 { font-size: 13px; } }
@media (orientation: portrait) and (max-height: 700px) { .title-low { gap: 8px; } .title-low .big { height: 52px; font-size: 22px; } }
/* a short screen: the sets are packed closer, so that the four of them are in sight */
@media (orientation: portrait) and (max-height: 700px) {
	#sets { padding: 12px; } #sets .panel { padding: 16px 14px 14px; gap: 8px; } #sets .big.small { height: 48px; }
	#sets #set-list { gap: 6px; } .set { padding: 8px 10px 9px; gap: 5px 10px; } .swatches { --lt: 22px; padding: 0 0 2px; }
}
@media (orientation: portrait) and (max-width: 350px) { .swatches { --lt: 20px; gap: 4px; } .purse { font-size: 13px; } }
@media (orientation: landscape) and (max-height: 430px) { .set { padding: 7px 10px 8px; gap: 4px 10px; } .swatches { --lt: 22px; padding: 0 0 2px; } }