/* Przelewanka in the AleGry look: paper background, ink outlines, hard shadows; glass tubes with coloured layers. */
:root {
  --paper: #FFF7EA;
  --ink: #1D1533;
  --muted: #574D6E;
  --primary: #D93D22;
  --lemon: #FFD23F;
  --lemon-light: #FFF3C4;
  --plum-light: #EFE8FF;
  --mint-light: #DDF6EF;
  --sky-light: #E3F4FF;
  --sand-light: #F6EBD9;
  --tomato-light: #FFE3DC;
  --bar: var(--plum-light);
  --line: 3px solid var(--ink);
  --radius: 18px;
  --radius-sm: 10px;
  --font-heading: 'Fredoka', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --font-body: 'Nunito', 'Segoe UI', Verdana, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { background: var(--paper); color: var(--ink); }
body { margin: 0; padding: 4px 8px 12px 4px; font: 16px/1.5 var(--font-body); }
h2, h3 { font-family: var(--font-heading); line-height: 1.15; }
:focus-visible { outline: 3px solid #7A5CFA; outline-offset: 2px; }
.notice { margin: 1rem; padding: .75rem 1rem; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--lemon-light); }

.button { font: 700 1rem var(--font-heading); padding: .6rem 1.1rem; border: var(--line); border-radius: 999px; background: var(--primary); color: #fff; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
.button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.button:disabled { opacity: .45; cursor: default; transform: none; box-shadow: 3px 3px 0 var(--ink); }
.button--ghost { background: #fff; color: var(--ink); }
.button--small { font-size: .9rem; padding: .4rem .85rem; box-shadow: 2px 2px 0 var(--ink); }
.button[aria-pressed="false"] { opacity: .6; }

.board { background: #fff; border: var(--line); border-radius: var(--radius); box-shadow: 5px 5px 0 var(--ink); overflow: hidden; }
.board__bar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .7rem 1rem; background: var(--bar); border-bottom: var(--line); }
.board__bar p { margin: 0; }
.board__counters { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-weight: 700; font-size: .9rem; }
.board__counters strong { font: 700 1.1rem var(--font-heading); }
.board__actions { display: flex; gap: .5rem; }

.overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: .75rem; background: rgba(20, 15, 43, .55); overflow: auto; }
.overlay__box { width: min(100%, 26rem); padding: 1.1rem 1.25rem; border: var(--line); border-radius: var(--radius); background: #fff; box-shadow: 5px 5px 0 var(--ink); text-align: center; }
.overlay__box h2 { margin: 0 0 .4rem; font-size: 1.6rem; }
.overlay__box p { margin: 0 0 .8rem; }
.overlay__actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0 !important; }
.overlay__actions:empty { display: none; }

.board__options { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.board__label { font-weight: 700; font-size: .9rem; }
.board__options select { padding: .35rem .7rem; border: var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 700 .9rem var(--font-body); }
.info { min-height: 1.6em; margin: .6rem 1rem 0; text-align: center; font-weight: 700; }

.keys { margin: .6rem 1rem 1rem; text-align: center; font-size: .85rem; color: var(--muted); }

.mg-toast { position: fixed; left: 50%; top: 1rem; z-index: 50; max-width: calc(100% - 2rem); transform: translate(-50%, -6rem); visibility: hidden; padding: .6rem 1.1rem; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 800; text-align: center; transition: transform .25s ease, visibility .25s; }
.mg-toast.is-visible { transform: translate(-50%, 0); visibility: visible; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

:root { --bar: var(--sky-light); }
.score { justify-content: center; margin: .7rem 1rem 0; }
.puzzle-title { margin: .5rem 1rem 0; text-align: center; font-size: 1.15rem; }
.screen { position: relative; display: grid; align-items: center; max-width: 40rem; min-height: 16rem; margin: .5rem auto 0; padding: 1.6rem .6rem 1rem; border: var(--line); border-radius: var(--radius-sm); background: #FDFCF7; }
.overlay { border-radius: calc(var(--radius-sm) - 3px); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .7rem 1rem 0; }
.board__options select { max-width: 12rem; }

.rack { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 1.6rem .7rem; user-select: none; -webkit-user-select: none; }
.tube { position: relative; width: 3.1rem; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .18s ease; touch-action: manipulation; }
.tube__glass { position: relative; display: flex; flex-direction: column-reverse; height: 10.4rem; padding: 0 .2rem .2rem; overflow: hidden; border: var(--line); border-top: 0; border-radius: 0 0 1.6rem 1.6rem; background: rgba(227, 244, 255, .55); box-shadow: inset 6px 0 0 rgba(255, 255, 255, .7); }
.tube::before { content: ''; position: absolute; left: -.3rem; right: -.3rem; top: -.25rem; height: .5rem; border: var(--line); border-radius: 999px; background: #fff; z-index: 1; }
.tube__layer { flex: 0 0 calc((100% - .25rem) / 4); display: grid; place-items: center; background: var(--c); border-top: 2px solid rgba(29, 21, 51, .25); color: rgba(255, 255, 255, .9); font: 700 1.05rem var(--font-heading); text-shadow: 0 1px 0 rgba(29, 21, 51, .5); transition: background .2s; }
.tube__layer:last-child { border-top-color: rgba(255, 255, 255, .55); }
.tube__layer:first-child { border-radius: 0 0 1.3rem 1.3rem; }
.tube__layer span { opacity: 0; transition: opacity .2s; }
.rack.has-marks .tube__layer span { opacity: 1; }
.tube__num { display: block; margin-top: .3rem; text-align: center; font: 700 .8rem var(--font-body); color: var(--muted); }
.tube.is-picked { transform: translateY(-1.1rem); }
.tube.is-picked .tube__glass { box-shadow: inset 6px 0 0 rgba(255, 255, 255, .7), 0 0 0 4px var(--lemon); }
.tube.is-full .tube__glass { border-color: #20B69A; }
.tube.is-full::after { content: '✓'; position: absolute; left: 50%; top: -1.6rem; transform: translateX(-50%); font: 700 1rem var(--font-heading); color: #1F8A5B; }
.tube.is-hint .tube__glass { animation: blink .6s ease-in-out 3; }
.tube.is-pouring { transform: translateY(-1.1rem) rotate(var(--tilt, 0deg)); }
.tube.is-extra .tube__glass { border-style: dashed; }
.tube.is-shake { animation: shake .3s; }
.tube:focus { outline: none; }
.tube:focus-visible .tube__glass { outline: 3px solid #7A5CFA; outline-offset: 3px; }
@keyframes blink { 50% { box-shadow: 0 0 0 5px #7A5CFA; } }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

@media (max-width: 640px) {
  .board__bar { padding: .6rem .75rem; }
  .screen { margin: .5rem .4rem 0; padding: 1.3rem .3rem .8rem; }
  .rack { gap: 1.5rem .45rem; }
  .tube { width: 2.55rem; }
  .tube__glass { height: 8.8rem; }
}