/* Tidy Up: soft lilac and warm wood. Calm colours; no dark green or teal; nothing flashes. */
:root {
  --bg: #f7f5fc;
  --card: #ffffff;
  --ink: #2a2536;
  --ink-2: #5f5872;
  --rule: #e4dff2;
  --accent: #6a55c2;          /* white text on this is 5.8:1 */
  --accent-ink: #ffffff;
  --accent-soft: #ece7fb;
  --focus: #6a55c2;
  --floor: #efeafb;
  --floor-edge: #cfc5ef;
  --shadow: 0 1px 2px rgb(42 37 54 / .06), 0 8px 24px rgb(42 37 54 / .07);
  --font: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --it: 72px;                  /* size of one thing and one place */
  /* container looks: fill / edge */
  --cup: #fdf1e4;    --cup-edge: #e9c9a3;
  --tin: #eef2f8;    --tin-edge: #c3cee0;
  --box: #f7ecdd;    --box-edge: #d9bd98;
  --drawer: #fbeaf0; --drawer-edge: #e8b3c4;
  --bowl: #fbf5e0;   --bowl-edge: #e3d197;
  --shelf: #f5efe6;  --shelf-edge: #cdb392;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1824;
    --card: #252131;
    --ink: #f1eefa;
    --ink-2: #c3bcd6;
    --rule: #3a3450;
    --accent: #b8a8f0;
    --accent-ink: #1b1430;
    --accent-soft: #332c4a;
    --focus: #b8a8f0;
    --floor: #231f30;
    --floor-edge: #4a4266;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .3);
    --cup: #3a3026;  --tin: #2b313c;  --box: #3a3126;  --drawer: #3b2a32;  --bowl: #38331f;  --shelf: #352e27;
    --cup-edge: #7a6247; --tin-edge: #5a6680; --box-edge: #7f6547; --drawer-edge: #7e5566; --bowl-edge: #7b6d3c; --shelf-edge: #7d6750;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.55 var(--font);
  padding-inline: clamp(16px, 4vw, 40px);
}
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.top { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.25rem; }
.brand img { border-radius: 9px; }
.home-link { text-decoration: none; font-weight: 700; font-size: .95rem; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); white-space: nowrap; }

main { max-width: 1080px; margin: 0 auto; padding-bottom: 28px; }
#home, #play { display: grid; gap: 18px; }
h2 { margin: 8px 0 0; font-size: 1.35rem; }
h3 { margin: 0; font-size: 1.1rem; }
.lead { margin: 4px 0 0; font-size: clamp(1.1rem, 2.4vw, 1.3rem); max-width: 60ch; }
.lead.soft { color: var(--ink-2); }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow); }
.help { margin: 4px 0 0; color: var(--ink-2); font-size: .95rem; }

.btn {
  font: 700 1rem/1.2 var(--font); color: var(--ink); background: var(--card);
  border: 2px solid var(--rule); border-radius: 12px; padding: 10px 16px; min-height: 48px; cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn:disabled { opacity: .45; cursor: default; border-color: var(--rule); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.big { font-size: 1.1rem; padding: 12px 22px; }
.btn.quiet { color: var(--ink-2); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- home ---------- */
.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.room h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mini { display: inline-grid; place-items: center; width: 40px; height: 40px; position: relative; flex: none; }
.mini .art { width: 100%; height: 100%; }
.mini .mark { position: absolute; inset-inline-end: -4px; top: -4px; }
.tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.tile {
  position: relative; width: 52px; height: 52px; border-radius: 14px; border: 2px solid var(--rule); background: var(--bg);
  font: 700 1.1rem var(--font); color: var(--ink); cursor: pointer; display: grid; place-items: center;
}
.tile:hover { border-color: var(--accent); }
.tile.done { background: var(--accent-soft); border-color: transparent; }
.tile.next { border-color: var(--accent); }
.tile .tick { position: absolute; width: 18px; height: 18px; inset-inline-end: 3px; bottom: 3px; color: var(--accent); }
.free-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.panel summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.setting { margin: 14px 0; }
.switch {
  display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: 700 1.02rem var(--font); color: var(--ink); min-height: 44px;
}
.switch .knob { width: 46px; height: 28px; border-radius: 999px; background: var(--rule); position: relative; flex: none; transition: background .2s; }
.switch .knob::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: inset-inline-start .2s; }
.switch[aria-pressed="true"] .knob { background: var(--accent); }
.switch[aria-pressed="true"] .knob::after { inset-inline-start: 21px; }

/* ---------- a level ---------- */
.play-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.play-top h2 { margin: 0; flex: 1 1 200px; font-size: 1.25rem; outline: none; }
.play-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rule { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; padding: 14px 18px; }
.rule-key { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rule-key:empty { display: none; }
.rule-key .mini.sw { width: 30px; height: 30px; }
.rule-text { margin: 0; font-weight: 700; font-size: 1.08rem; }
.eq { font-weight: 700; color: var(--ink-2); padding-inline: 2px; }
.eq.arrow::before, .ends .arrow::before { content: '→'; }
:root[dir="rtl"] .eq.arrow::before, :root[dir="rtl"] .ends .arrow::before { content: '←'; }

.board { display: grid; gap: 16px; border-radius: 22px; padding: 6px; transition: background .9s ease; }
.board.tidy { background: radial-gradient(ellipse at 50% 30%, color-mix(in oklab, #fff3c4 55%, transparent), transparent 70%); }
@media (prefers-color-scheme: dark) { .board.tidy { background: radial-gradient(ellipse at 50% 30%, rgb(255 236 170 / .12), transparent 70%); } }

.places { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.places.one { grid-template-columns: 1fr; }
.places.grid { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.places.pairs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr)); }

.place {
  --fill: var(--box); --edge: var(--box-edge);
  background: var(--fill); border: 2px solid var(--edge); border-radius: 18px; padding: 10px 12px 12px;
  display: grid; gap: 8px; align-content: start; transition: box-shadow .2s, transform .2s;
}
.place.look-cup { --fill: var(--cup); --edge: var(--cup-edge); border-radius: 14px 14px 30px 30px; }
.place.look-tin { --fill: var(--tin); --edge: var(--tin-edge); border-radius: 14px; }
.place.look-drawer { --fill: var(--drawer); --edge: var(--drawer-edge); border-radius: 12px; border-top-width: 6px; }
.place.look-bowl { --fill: var(--bowl); --edge: var(--bowl-edge); border-radius: 16px 16px 60px 60px; padding-bottom: 18px; }
.place.look-shelf { --fill: var(--shelf); --edge: var(--shelf-edge); border-radius: 10px; border-bottom-width: 9px; }
.place-label { display: flex; align-items: center; gap: 8px; font-weight: 700; min-height: 32px; }
.place-label .mini { width: 32px; height: 32px; }
.place-label .swatch { width: 24px; height: 24px; flex: none; }
.place-label > .mark { margin-inline-start: -14px; margin-top: -14px; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.place.order { justify-self: center; width: fit-content; max-width: 100%; min-width: min(100%, 300px); }
.place.order .slots { justify-content: center; gap: 10px; }
.slot {
  width: var(--it); height: var(--it); border-radius: 14px; border: 2px dashed color-mix(in oklab, var(--edge) 80%, transparent);
  background: color-mix(in oklab, var(--card) 45%, transparent); display: grid; place-items: center; flex: none;
}
.slot.filled { border-color: transparent; background: color-mix(in oklab, var(--card) 25%, transparent); }
.ends { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 700; font-size: .92rem; padding-inline: 4px; }
.ends .arrow { flex: 1; text-align: center; opacity: .6; }

/* Where can this go? While dragging or after picking something up, places invite a drop. */
.board.dragging .place, .board.picking .place { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.board.picking .place { cursor: pointer; }
.place.over, .place:focus-visible { box-shadow: 0 0 0 4px var(--accent) !important; outline: none; }
.slot[role="button"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.place.nope { background: color-mix(in oklab, var(--fill) 70%, var(--accent-soft)); }

.floor {
  background: var(--floor); border: 2px dashed var(--floor-edge); border-radius: 22px; padding: 12px 14px 16px;
  display: grid; gap: 10px;
}
.floor h3 { font-size: 1rem; color: var(--ink-2); }
.floor.over { border-style: solid; border-color: var(--accent); }
.floor-items { display: flex; flex-wrap: wrap; gap: 10px 12px; min-height: var(--it); }

/* A thing you can move */
.item {
  --rot: 0deg;
  position: relative; width: var(--it); height: var(--it); padding: 3px; margin: 0; border: 0; border-radius: 14px;
  background: transparent; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
  transform: rotate(var(--rot)); color: var(--ink);
}
.slot .item { transform: none; }
.item .art { width: 100%; height: 100%; display: block; pointer-events: none; filter: drop-shadow(0 2px 2px rgb(42 37 54 / .18)); }
.item .mark, .ghost .mark { position: absolute; inset-inline-end: 0; top: 0; pointer-events: none; }
.item:hover .art { filter: drop-shadow(0 4px 5px rgb(42 37 54 / .22)); }
.item.selected { background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent); transform: rotate(0) translateY(-3px); }
.item.lifting { opacity: .25; }
.item.locked { cursor: default; display: grid; place-items: center; }
.place.pairs-hint .item.locked { opacity: 1; }
.ghost {
  position: fixed; z-index: 50; pointer-events: none; padding: 3px; border-radius: 14px;
}
.ghost .art { width: 100%; height: 100%; display: block; }
.ghost.lifted { transform: scale(1.1); filter: drop-shadow(0 10px 14px rgb(42 37 54 / .28)); cursor: grabbing; }

.done-card { text-align: start; border-color: color-mix(in oklab, var(--accent) 35%, var(--rule)); }
.done-card h3 { font-size: 1.35rem; }
.done-card p { margin: 6px 0 12px; }

@media (prefers-reduced-motion: no-preference) {
  .item.settle { animation: settle .6s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes settle { 0% { transform: translateY(0); } 35% { transform: translateY(-7px); } 100% { transform: translateY(0); } }
  .done-card:not([hidden]) { animation: rise .5s ease-out both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
}

.foot { max-width: 1080px; margin: 0 auto; padding-block: 18px 32px; color: var(--ink-2); font-size: .92rem; border-top: 1px solid var(--rule); }
.foot p { margin: 0 0 8px; }

.toast {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 14px; display: flex; gap: 14px; align-items: center;
  box-shadow: var(--shadow); z-index: 60; max-width: calc(100vw - 32px); font-weight: 700;
}
.toast-btn { font: 700 1rem var(--font); background: transparent; color: var(--accent-soft); border: 2px solid currentColor; border-radius: 10px; padding: 4px 12px; cursor: pointer; min-height: 40px; }

@media (max-width: 560px) {
  :root { --it: 58px; }
  .place { padding: 8px 9px 10px; }
  .slots { gap: 6px; }
  .place.order .slots { gap: 6px; }
  .places { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
  .places.pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .places.grid { gap: 8px; }
  .play-top h2 { flex-basis: 100%; order: -1; }
}
@media (max-width: 560px) {
  .place.order { --it: 48px; }
}
@media (max-width: 400px) {
  :root { --it: 52px; }
  .place.order { --it: 44px; }
  .place.order .slots { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* English | العربية */
:root[lang="ar"] { --font: 'IBM Plex Sans Arabic', 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.fb-lang { order: -1; flex-basis: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: .95rem; color: var(--rule); }
.fb-lang button { font: inherit; font-weight: 700; color: var(--ink-2); background: none; border: 0; border-radius: 999px; padding: 4px 12px; min-height: 36px; cursor: pointer; }
.fb-lang button[lang="ar"] { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; font-size: 1.05rem; }
.fb-lang button[lang="en"] { font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; }
.fb-lang button[aria-pressed="true"] { color: var(--ink); background: color-mix(in oklab, var(--accent) 16%, transparent); }
.fb-lang button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fb-suggest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 4px; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); }
.fb-suggest p { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.fb-suggest [lang="ar"] { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; font-weight: 700; }
.fb-suggest [lang="en"] { font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; color: var(--ink-2); }
.fb-suggest-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-suggest button { font-weight: 700; padding: 8px 16px; border-radius: 999px; cursor: pointer; min-height: 40px; }
.fb-suggest .fb-ar { background: var(--accent); color: var(--accent-ink); border: 0; font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; }
.fb-suggest .fb-en { background: transparent; color: var(--ink); border: 2px solid var(--rule); }