:root {
  --bg: #1b1814; --panel: #26211b; --line: #3a332a; --text: #eee6d8; --muted: #a39684; --accent: #f3c77a;
  --bad: #f19a8a;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, "Segoe UI", sans-serif; display: flex; flex-direction: column; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
h1 { font-size: 17px; margin: 0; margin-right: auto; }
h2 { font-size: 14px; margin: 14px 0 6px; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
button { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font: inherit; cursor: pointer; }
button:hover { border-color: var(--muted); }
button.on { background: #4a3d26; border-color: var(--accent); }
button:disabled { opacity: .4; cursor: default; }
select { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; max-width: 260px; }
.tools, .actions { display: flex; flex-wrap: wrap; gap: 6px; }
.actions .height { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.actions .height input { width: 80px; }
.canvas-surface { position: relative; flex: 1; min-width: 0; min-height: 300px; }
.canvas-tools { position: absolute; z-index: 2; right: 14px; bottom: 14px; display: grid; grid-template-columns: repeat(5, auto); gap: 8px; padding: 0; border: 0; background: transparent; box-shadow: none; }   /* a see-through holder: only the buttons show */
.canvas-tools button { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; min-height: 0; padding: 0; font-size: 26px; line-height: 1; }
.terrain-icon { width: 32px; height: 32px; flex: none; }
.canvas-tools button[data-tool="manual"] { font: 700 17px/1 ui-monospace, Consolas, monospace; letter-spacing: -.5px; }
.canvas-tools button[data-tool="manual"] u { text-decoration-thickness: 3px; text-underline-offset: 4px; }
:root #tools.game button:not(#undo, #tile, #gl2, [data-tool="pan"]) { display: none; }   /* a game keeps only Undo, Tile, Pan and Game in the panel */
:root #tools:not(.game) #tile { display: none; }   /* Tile is a game button */
#tools.game { grid-template-columns: repeat(4, auto); }
.canvas-tools button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
main { flex: 1; display: flex; min-height: 0; }
.stage { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 12px 16px; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }   /* the WebGL layer over #view */
#view.pan-mode { cursor: grab; }
#view.pan-mode.panning { cursor: grabbing; }
.legal { flex: none; padding: 5px 16px; border-top: 1px solid var(--line); font-size: 12px; text-align: center; color: var(--muted); }
.legal a { color: var(--accent); }
.status { margin-top: 8px; min-height: 20px; color: var(--muted); }
.status.bad { color: var(--bad); }
.mobile-actions { display: none; }
#builder-options { width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; overflow: auto; overscroll-behavior: contain; }
#builder-options::backdrop { background: rgba(0,0,0,.5); }
.options-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; top: -12px; z-index: 1; background: var(--panel); padding: 8px 0; }
#options-close { min-width: 44px; min-height: 44px; }
#builder-options header { padding: 12px 8px; margin: 0; border-radius: 0; }
#builder-options :is(.actions button, select) { min-height: 44px; }
/* The same breakpoint is used when moving the secondary controls into the mobile dialog. */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 500px) {
  body { height: 100dvh; overflow: hidden; overscroll-behavior: none; }
  body > main { width: 100%; flex: 1; min-height: 0; }
  .legal { display: none; }   /* the copyright line leaves the phone layout, where every pixel is canvas */
  main > .stage { position: relative; padding: 0; height: 100%; overflow: hidden; }
  .stage > .canvas-surface { min-height: 0; }
  body main .stage .canvas-surface #view { border: 0; border-radius: 0; box-shadow: none; }
  .mobile-actions { position: absolute; z-index: 2; display: flex; gap: 6px; left: max(10px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); }
  .stage .canvas-tools { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); grid-template-columns: repeat(5, 48px); gap: 6px; }
  .stage .canvas-tools button { width: 48px; height: 48px; }
  .stage .terrain-icon { width: 28px; height: 28px; }
  .mobile-actions button { display: flex; justify-content: center; align-items: center; min-width: 44px; min-height: 44px; padding: 6px; font-size: 24px; }
  .stage #status { position: absolute; z-index: 2; left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); max-width: calc(100% - 300px - env(safe-area-inset-left) - env(safe-area-inset-right)); min-height: 0; margin: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; background: var(--panel); pointer-events: none; opacity: 0; transition: opacity .15s; }
  .stage #status.active { opacity: 1; }
  #builder-options h1 { width: 100%; }
  #builder-options .stylepick { margin-left: 0; }
}
@media (max-width: 1000px) and (max-height: 500px) {
  .stage #status { max-width: calc(100% - 300px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
}

[hidden] { display: none !important; }

.tile-info, .hint { background: var(--panel); background: color-mix(in srgb, var(--panel) 82%, transparent); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; line-height: 1.35; }
.tile-info { background: var(--panel); position: fixed; top: 6px; left: 50%; transform: translateX(-50%); z-index: 10; max-width: min(520px, calc(100% - 20px)); padding: 6px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.25); display: grid; gap: 4px; }   /* on desktop it floats over the header, centred at the top of the screen */
.tile-info button { font-size: 11px; padding: 2px 8px; min-height: 0; }
.hint { position: absolute; top: 56px; right: 10px; z-index: 2; padding: 4px 8px; pointer-events: none; opacity: .85; }   /* typing mode's one-line reminder */
.hud { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; gap: 8px; pointer-events: none; }   /* the clicks left, the tiles left and the score, upper right */
.score { padding: 6px 12px; font: 700 18px/1.2 ui-monospace, Consolas, monospace; pointer-events: none; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; }   /* a counter (the glass look below replaces its colours) */
.pop { position: absolute; z-index: 3; pointer-events: none; font: 800 20px/1 ui-monospace, Consolas, monospace; -webkit-text-stroke: 4px #111; paint-order: stroke fill; }   /* the +# that leaves the score */
#deal { position: absolute; top: 56px; right: 10px; left: auto; bottom: auto; margin: 0; z-index: 2; padding: 8px 10px; background: transparent; color: var(--text); border: 0; box-shadow: none; text-align: center; }   /* the dealt tile and the one after it, upper right under the counters: no box, they sit on the water */
#deal .pic { position: relative; display: inline-block; line-height: 0; }
#deal .pic svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 2px #000); }   /* the edge key drawn over a tile's picture */
#deal .pic line { stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
#deal form { position: relative; display: grid; gap: 8px; justify-items: center; padding: 22px 18px 0 0; }   /* room for the next tile to peek out above and to the right */
#deal img { width: 80px; height: auto; }
#deal .pic { z-index: 1; }
#deal .then { position: absolute; top: 0; right: 0; z-index: 0; opacity: .7; }   /* the tile coming next peeks out from behind the tile in hand, like the top of a deck */
.tile-info[hidden] { display: none; }
.tile-file { display: grid; gap: 1px; }
.tile-file-name { font-weight: 600; word-break: break-all; }
.tile-file small { overflow-wrap: anywhere; color: var(--muted); user-select: text; }
.tile-actions { display: flex; gap: 6px; margin-top: 2px; }
.debug-panel { position: absolute; bottom: 14px; right: 340px; z-index: 2; padding: 8px 10px; pointer-events: none; font: 11px/1.45 ui-monospace, Consolas, monospace; color: #d7ecff; background: rgba(8, 20, 32, .78); border-radius: 8px; }
.debug-panel[hidden] { display: none; }
.debug-panel pre { margin: 0; font: inherit; white-space: pre; }
#debug-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 8px; pointer-events: auto; }
#debug-chips button { font: inherit; padding: 2px 6px; color: inherit; background: rgba(215, 236, 255, .14); border: 1px solid rgba(215, 236, 255, .35); border-radius: 4px; cursor: pointer; }
@media (max-width: 760px), (max-width: 1000px) and (max-height: 500px) {
  .tile-info { position: absolute; top: 10px; right: 10px; left: auto; transform: none; z-index: 3; }   /* on phones the card stays inside the canvas */
}
/* Glass look for the game: see-through pills and round buttons, white icons on the water (icons stand in for the words Clicks, Tiles and Score) */
:root .hud .score { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255,255,255,.28); color: #fff; border: 1.5px solid rgba(255,255,255,.7); border-radius: 999px; box-shadow: none; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.hud .score::before { content: ""; width: 18px; height: 18px; background: center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
#clicks::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Cpath%20d='M6%204l12%206.5-5.2%201.6L11%2018z'/%3E%3C/svg%3E"); }
#tiles::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Cpath%20d='M5%205v14h14z'/%3E%3C/svg%3E"); }
#score::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Cpath%20d='M12%203l2.7%205.6%206.1.9-4.4%204.3%201%206.1L12%2017l-5.4%202.9%201-6.1L3.2%209.5l6.1-.9z'/%3E%3C/svg%3E"); }
/* Panel buttons and Skip: round glass buttons, in the builder as well as in a game. */
:root #tools button, :root #deal #deal-skip { width: 48px; height: 48px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.28); color: #fff; border: 1.5px solid rgba(255,255,255,.7); border-radius: 50%; box-shadow: none; transform: none; }
:root #tools button:hover:not(:disabled), :root #deal #deal-skip:hover:not(:disabled) { background: rgba(255,255,255,.45); border-color: #fff; color: #fff; }
:root #tools button.on, :root #tools button.on:hover:not(:disabled) { background: rgba(255,255,255,.7); color: #2f2a60; border-color: #fff; }
:root #tools button.typing, :root #tools button.typing:hover:not(:disabled) { background: #1fa855; color: #fff; border-color: #0b5a2c; }   /* typing mode: green */
body.game > header { display: none; }   /* a game hides the header; the Game button in the panel turns it off again */
#mult::before { display: none; }   /* the multiplier is just ×n */
.hud .tinted::before { filter: brightness(0); }   /* a coloured pill gets a dark icon, like its number */