:root {
  --font: 'Rubik', system-ui, sans-serif;
  --water: #27b8d6; --ink: #24203a; --panel: #ffffff; --accent: #ffcf1b; --accent-ink: #3a2a00;
  --good: #19c23a; --chip: #e9f7fb; --chip-on: #0f9ac2; --hud-bg: rgba(255, 255, 255, .92);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--water); color: var(--ink); font-family: var(--font); -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }
/* ---- the game screen: one grid on the real visible viewport (visualViewport height, safe areas). The canvas sits
   behind the whole screen (the water); the level is drawn only inside #board, and the HUD and the touch controls have
   their own cells, so nothing readable or clickable is ever over the board. */
html.playing, html.playing body { overflow: hidden; overscroll-behavior: none; touch-action: none; position: fixed; inset: 0; width: 100%; }
#game { position: fixed; left: 0; top: var(--vvt, 0px); width: 100%; height: var(--vvh, 100dvh); overflow: hidden; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none;
  direction: ltr; display: grid; gap: 6px;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "hudl hudr" "board board"; }
[dir=rtl] #game { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "hudr hudl" "board board"; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
#game > .hud, #game > .pad, #game > .actzone, #game > #board { position: relative; z-index: 1; }
#board { grid-area: board; min-height: 0; pointer-events: none; }
.hud { display: flex; align-items: center; gap: 6px; min-width: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-l { grid-area: hudl; } .hud-r { grid-area: hudr; justify-content: flex-end; }
[dir=rtl] .hud-l, [dir=rtl] .hud-r, [dir=rtl] .overlay, [dir=rtl] .toast { direction: rtl; }
.icon { width: 48px; height: 48px; border: 0; background: none; padding: 0; flex: none; touch-action: manipulation; }
.icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.icon.round { background: var(--hud-bg); border-radius: 50%; color: var(--ink); width: 44px; height: 44px; box-shadow: 0 2px 0 rgba(0,0,0,.25); border: 3px solid var(--ink); display: grid; place-items: center; }
.icon.round svg { width: 24px; height: 24px; }
.icon.map.on { background: var(--accent); }
.icon.sound .x { display: none; } .icon.sound.off .x { display: inline; } .icon.sound.off .wave { display: none; }
[dir=rtl] .icon.back img { transform: scaleX(-1); }
/* touch controls: hidden with a mouse and keyboard, shown on touch screens (html.touch) */
.pad, .actzone { display: none; }
.touch .pad { display: block; grid-area: pad; touch-action: none; min-height: 0; }
.touch .actzone { display: grid; grid-area: act; place-items: center; min-height: 0; }
.pad-base { position: absolute; left: var(--bx, 50%); top: var(--by, 50%); width: var(--pad, 128px); height: var(--pad, 128px); margin: calc(var(--pad, 128px) / -2) 0 0 calc(var(--pad, 128px) / -2);
  border-radius: 50%; background: rgba(255, 255, 255, .28); border: 3px solid rgba(36, 32, 58, .55); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); pointer-events: none; }
.pad.active .pad-base { background: rgba(255, 255, 255, .42); }
.pad-knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 3px 0 rgba(0,0,0,.3); transform: translate(var(--kx, 0px), var(--ky, 0px)); }
.pad .ar { position: absolute; width: 0; height: 0; border: 9px solid transparent; opacity: .8; }
.pad .ar.u { left: 50%; top: 7px; margin-left: -9px; border-bottom: 12px solid var(--ink); border-top: 0; }
.pad .ar.d { left: 50%; bottom: 7px; margin-left: -9px; border-top: 12px solid var(--ink); border-bottom: 0; }
.pad .ar.l { top: 50%; left: 7px; margin-top: -9px; border-right: 12px solid var(--ink); border-left: 0; }
.pad .ar.r { top: 50%; right: 7px; margin-top: -9px; border-left: 12px solid var(--ink); border-right: 0; }
.pad .ar.on { opacity: 1; filter: drop-shadow(0 0 3px #fff); }
.act { width: var(--act, 104px); height: var(--act, 104px); border-radius: 50%; border: 4px solid var(--ink); background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 5px 0 rgba(0,0,0,.3); display: grid; place-content: center; justify-items: center; gap: 0; padding: 0; touch-action: none; font-weight: 800; font-size: 14px; line-height: 1.1; }
.act svg { width: 36px; height: 36px; }
.act .down { display: none; } .act.place .down { display: inline; } .act.place .up { display: none; }
.act.place { background: #fff; }
.act.idle { opacity: .6; }
.act.pressed { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.3); }
#act-label { max-width: calc(var(--act, 104px) - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* phone portrait (touch): HUD row, board, controls row (stick on the left, action on the right in every language) */
.touch #game { --ctrl: clamp(132px, calc(var(--vvh, 100dvh) * .21), 190px);
  grid-template-rows: auto minmax(0, 1fr) var(--ctrl); grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "hudl hudr" "board board" "pad act"; }
.touch[dir=rtl] #game { grid-template-columns: auto minmax(0, 1fr) var(--act, 104px); grid-template-areas: "hudr hudl hudl" "board board board" "pad pad act"; }
.touch .icon { width: 42px; height: 42px; } .touch .icon.round { width: 40px; height: 40px; }
.touch .pill { font-size: 14px; padding: 3px 10px; display: flex; flex-direction: column; line-height: 1.25; border-radius: 13px; }
.touch .pill .sep { display: none; }
.touch .pill > span { overflow: hidden; text-overflow: ellipsis; }
.pill { flex: 1; min-width: 0; max-width: 560px; background: var(--hud-bg); border: 3px solid var(--ink); border-radius: 16px; padding: 8px 14px; font-weight: 700; font-size: 17px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.pill .sep { margin: 0 6px; opacity: .5; }
#doors { color: #0b6f91; }
.toast { position: fixed; z-index: 4; left: 50%; top: 40%; transform: translate(-50%, -50%); background: #fff; border: 4px solid var(--ink); border-radius: 18px; padding: 14px 22px; font-weight: 800; font-size: 24px; box-shadow: 0 5px 0 rgba(0,0,0,.25); }
.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(15, 40, 60, .45); padding: 16px; z-index: 5; }
.card { background: var(--panel); border: 4px solid var(--ink); border-radius: 24px; padding: 22px 22px 18px; max-width: 460px; width: 100%; box-shadow: 0 7px 0 rgba(0,0,0,.25); text-align: center; position: relative; }
.card h2 { margin: 6px 0 10px; font-size: 28px; font-weight: 800; }
.tips .bok { width: 74px; height: 74px; margin-top: -58px; }
.tips ul { list-style: none; padding: 0; margin: 0 0 16px; text-align: start; display: grid; gap: 10px; }
.tips li { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; line-height: 1.35; }
.tips .n { flex: none; width: 28px; height: 28px; border-radius: 8px; background: #b98fe0; border: 3px solid var(--ink); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 15px; }
.big, .ghost { display: inline-block; border: 4px solid var(--ink); border-radius: 16px; padding: 10px 22px; font-size: 20px; font-weight: 800; background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 0 rgba(0,0,0,.3); text-decoration: none; }
.ghost { background: #fff; color: var(--ink); }
.big:active, .ghost:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.end .disc { width: 150px; height: 150px; margin: -95px auto 0; position: relative; }
.end .disc img { width: 100%; height: 100%; animation: spin 9s linear infinite; }
.end .disc .score { position: absolute; inset: 0; display: grid; place-items: center; font-size: 44px; font-weight: 800; color: var(--ink); text-shadow: 0 0 6px #fff, 0 0 2px #fff; }
.end .stars { font-size: 40px; letter-spacing: 6px; color: #d8d8e0; -webkit-text-stroke: 2px var(--ink); }
.end .stars .on { color: var(--accent); }
.end .lines p { margin: 4px 0; font-size: 17px; }
.end .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

#browser { max-width: 1180px; margin: 0 auto; padding: 18px 16px 40px; }
.b-head { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.b-head h1 { margin: 6px 0 0; font-size: 40px; font-weight: 800; }
.b-head p { margin: 4px 0 14px; font-size: 18px; font-weight: 600; }
.filters { background: #fff; border: 4px solid var(--ink); border-radius: 20px; padding: 12px; display: grid; gap: 8px; box-shadow: 0 5px 0 rgba(0,0,0,.2); margin-bottom: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips .lbl { font-weight: 700; min-width: 70px; }
.chips button { border: 2px solid var(--ink); background: var(--chip); border-radius: 999px; padding: 5px 12px; font-size: 15px; font-weight: 600; }
.chips button.on { background: var(--chip-on); color: #fff; }
#f-text { border: 2px solid var(--ink); border-radius: 12px; padding: 8px 12px; font: inherit; font-size: 16px; width: 100%; }
#b-count { font-weight: 700; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.card.skin-Forest, .grid .card { text-align: start; padding: 12px 14px; border-radius: 16px; display: grid; gap: 4px; color: var(--ink); text-decoration: none; background: linear-gradient(#fff, #fff) padding-box; border-width: 3px; box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.grid .card { border-inline-start: 10px solid #9ed761; }
.grid .card.skin-ForestWinter { border-inline-start-color: #9fdcec; }
.grid .card.skin-Desert { border-inline-start-color: #e6d269; }
.grid .card.skin-ForestMix, .grid .card.skin-Mixed { border-inline-start-color: #c3dd5e; }
.grid .card b { font-size: 16px; }
.grid .card small { color: #677; font-size: 12px; unicode-bidi: isolate; text-align: start; }
.grid .card .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.grid .card i { font-style: normal; font-size: 12px; background: var(--chip); border-radius: 6px; padding: 2px 6px; }
.grid .card:hover { transform: translateY(-2px); }
#notfound .card a { margin-top: 10px; }
@media (max-width: 560px) {
  .pill { font-size: 14px; padding: 4px 10px; display: flex; flex-direction: column; line-height: 1.25; }
  .pill > span { overflow: hidden; text-overflow: ellipsis; } .pill .sep { display: none; }
  .card h2 { font-size: 24px; } .tips li { font-size: 15px; }
  .b-head h1 { font-size: 32px; }
}
/* phone landscape (touch): the board takes the full height; HUD and controls in the two side columns */
@media (orientation: landscape) and (max-height: 560px) {
  .touch #game, .touch[dir=rtl] #game { --side: clamp(128px, 19vw, 176px); --pad: min(124px, calc(var(--vvh, 100dvh) * .36)); --act: min(96px, calc(var(--vvh, 100dvh) * .27));
    grid-template-rows: auto minmax(0, 1fr); grid-template-columns: var(--side) minmax(0, 1fr) var(--side);
    grid-template-areas: "hudl board hudr" "pad board act"; }
  .touch[dir=rtl] #game { grid-template-areas: "hudr board hudl" "pad board act"; }
  .touch .hud-l { flex-direction: column; align-items: stretch; }
  .touch .hud-l .back { align-self: flex-start; }
  .touch .hud-r { flex-wrap: wrap; justify-content: center; align-content: flex-start; align-self: start; }
  .touch .pill { font-size: 12.5px; padding: 3px 8px; }
  .overlay { padding: 8px; }
  .card { padding: 14px 16px 12px; max-height: calc(var(--vvh, 100dvh) - 16px); overflow: auto; }
  .card h2 { font-size: 22px; margin: 2px 0 6px; }
  .tips .bok { width: 48px; height: 48px; margin-top: 0; }
  .tips ul { gap: 6px; margin-bottom: 10px; } .tips li { font-size: 14px; }
  .end .disc { width: 84px; height: 84px; margin: 0 auto; } .end .disc .score { font-size: 28px; }
  .end .stars { font-size: 28px; } .end .row { margin-top: 8px; } .big, .ghost { padding: 6px 16px; font-size: 17px; }
}