/* =========================================================
   $ADBOARD
   1. theme variables (lights on / lights off)
   2. the wall scene — everything here pans and zooms together
   3. the board: frame + cork
   4. plots, pins, note styles
   5. dev / wallet panel, ghost, note editor
   6. fixed chrome: wordmark, hud, tooltip, toast
   ========================================================= */

/* ---------------------------------------------------------
   1. tokens
   --------------------------------------------------------- */
:root{
  /* geometry — app.js overwrites all of these from the photo in config.js */
  --cm: 10px;
  --board-w: 1200px;
  --board-h: 760px;
  --wall-w: 2644px;
  --wall-h: 1763px;
  --board-x: 863px;
  --board-y: 305px;
  --room-img: none;

  --wall-base:#e9e6e0;        /* only ever seen as a hairline behind the photo */

  --mast-face:#44362a;
  --mast-ext:#2b2118;
  --mast-ext2:#191310;
  --mast-glow:rgba(0,0,0,.2);
  --tagline:#6d6358;

  --glass-bg:rgba(255,255,255,.8);
  --glass-br:rgba(0,0,0,.1);
  --glass-fg:#45403a;
  --glass-hi:#211d18;

  --panel-bg:#f8f6f2;
  --panel-fg:#2d2922;
  --panel-br:rgba(0,0,0,.13);
  --field-bg:#ffffff;

  --ink:#2b2621;
  --paper:#f3ecdc;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  overflow:hidden;
  color:var(--glass-fg);
  font-family:'Space Grotesk', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}

.backdrop{ position:fixed; inset:0; z-index:0; background:var(--wall-base); }

/* ---------------------------------------------------------
   2. the scene — one photograph, panned and zoomed
   --------------------------------------------------------- */
.stage{
  position:fixed; inset:0; z-index:10;
  overflow:hidden; cursor:grab; touch-action:none;
}
.stage.dragging{ cursor:grabbing; }
body.placing .stage{ cursor:crosshair; }
body.placing .plots{ pointer-events:none; }

/* NOTE: will-change is applied ONLY while you are actually dragging or
   zooming (app.js adds .moving). Leaving it on permanently makes the browser
   rasterise this layer once and then scale the bitmap, which is what made the
   note images blurry until you hovered them — hovering forced a fresh raster. */
.world{ position:absolute; top:0; left:0; transform-origin:0 0; }
.world.moving{ will-change:transform; }

.wallscene{
  position:relative;
  width:var(--wall-w); height:var(--wall-h);
  background-image:var(--room-img);
  background-size:100% 100%;      /* the file can be any resolution */
  background-repeat:no-repeat;
}

/* contract address, on a plate under the board */
.ca{
  position:absolute;
  left:calc(var(--board-x) + (var(--board-w) - 720px) / 2);
  top:calc(var(--board-y) + var(--board-h) + 70px);
  width:720px; height:92px;
  display:flex; align-items:center; gap:18px;
  padding:0 30px;
  border:0; border-radius:5px; cursor:pointer;
  font:400 30px/1 'Space Grotesk', sans-serif;
  color:#ece8e0;
  background:linear-gradient(168deg, #4a4e52 0%, #33373a 45%, #24272a 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -2px 5px rgba(0,0,0,.35) inset,
    0 12px 26px rgba(0,0,0,.22);
}
.ca:hover{ filter:brightness(1.12); }
.ca-lab{
  font-weight:700; font-size:23px; letter-spacing:.2em;
  padding:7px 13px; border-radius:3px;
  background:rgba(255,255,255,.12);
}
.ca-val{
  flex:1; text-align:left;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ca.empty .ca-val{ opacity:.5; font-style:italic; }
.ca-screw{
  position:absolute; top:50%; width:12px; height:12px; margin-top:-6px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #d7dade, #6a6e72);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}
.ca-screw.l{ left:11px; } .ca-screw.r{ right:11px; }

/* ---------------------------------------------------------
   3. the cork — an invisible layer sat exactly over the real
      cork in the photo. The notes do all the work.
   --------------------------------------------------------- */
.cork{
  position:absolute;
  left:var(--board-x); top:var(--board-y);
  width:var(--board-w); height:var(--board-h);
  overflow:hidden;
}

/* real cork, tiled, fading in as you zoom past the photo's own resolution */
.corktex{
  position:absolute; inset:0; pointer-events:none;
  opacity:0;                       /* app.js drives this from the zoom level */
  background-image:var(--cork-img);
  background-size:var(--cork-tile) var(--cork-tile);
  background-repeat:repeat;
}
.corktex::after{                   /* match the photo's light and frame shading */
  content:''; position:absolute; inset:0;
  background:linear-gradient(158deg,
    rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,.055) 100%);
  box-shadow:
    inset 0 7px 16px rgba(70,40,10,.16),
    inset 0 -7px 16px rgba(70,40,10,.12),
    inset 8px 0 16px rgba(70,40,10,.12),
    inset -8px 0 16px rgba(70,40,10,.12);
}

.grid{
  position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .3s ease;
  background-image:
    linear-gradient(to right,  rgba(62,34,8,.2) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(62,34,8,.2) 1px, transparent 1px);
  background-size:
    calc(var(--cm) * 10) calc(var(--cm) * 10),
    calc(var(--cm) * 10) calc(var(--cm) * 10);
}
.cork.zoomed .grid, body.placing .grid{ opacity:1; }

/* ---------------------------------------------------------
   4. plots, pins, note styles
   --------------------------------------------------------- */
.slot{
  position:absolute;
  left:calc(var(--x) * var(--cm));
  top:calc(var(--y) * var(--cm));
  width:calc(var(--w) * var(--cm));
  height:calc(var(--h) * var(--cm));
  z-index:var(--z, 1);
}
.slot:hover{ z-index:400; }
.slot.leaving{ animation:leave .26s ease forwards; }
@keyframes leave{ to{ opacity:0; transform:translateY(16px) scale(.88); } }

.tile{
  position:absolute; inset:0;
  container-type:size;
  overflow:hidden; border-radius:2px; cursor:pointer;
  transform:rotate(var(--r));
  transform-origin:var(--pinx) 3px;   /* swings from the pin, like real paper */
  transition:transform .45s cubic-bezier(.2,.85,.3,1), box-shadow .3s ease;
  box-shadow:0 2px 3px rgba(44,22,0,.4), 0 6px 11px rgba(44,22,0,.28);
}
.tile::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:overlay; opacity:.5;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23t)' opacity='0.3'/%3E%3C/svg%3E"),
    linear-gradient(168deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 32%,
                            rgba(0,0,0,.05) 70%, rgba(0,0,0,.14) 100%);
  background-size:90px 90px, 100% 100%;
}

.slot:hover .tile{
  transform:rotate(var(--r)) scale(1.06);
  box-shadow:0 8px 13px rgba(30,14,0,.44), 0 20px 34px rgba(30,14,0,.38);
  animation:rustle .62s ease-out;
}
@keyframes rustle{
  0%   { transform:rotate(var(--r))                scale(1); }
  18%  { transform:rotate(calc(var(--r) + 1.7deg)) scale(1.05); }
  40%  { transform:rotate(calc(var(--r) - 1.2deg)) scale(1.07); }
  62%  { transform:rotate(calc(var(--r) + .65deg)) scale(1.06); }
  82%  { transform:rotate(calc(var(--r) - .28deg)) scale(1.06); }
  100% { transform:rotate(var(--r))                scale(1.06); }
}
.slot.landing .tile{ animation:land .55s cubic-bezier(.2,.9,.3,1.1); }
@keyframes land{
  0%   { transform:rotate(calc(var(--r) - 7deg)) scale(1.3); opacity:0; }
  55%  { transform:rotate(calc(var(--r) + 2deg)) scale(.97); opacity:1; }
  100% { transform:rotate(var(--r))              scale(1); }
}

.pin{
  position:absolute; left:var(--pinx); top:0;
  width:17px; height:17px; margin:-7px 0 0 -8.5px;
  border-radius:50%; z-index:25; pointer-events:none;
  background:
    radial-gradient(circle at 33% 28%, rgba(255,255,255,.95) 0 8%, rgba(255,255,255,.4) 19%, transparent 44%),
    radial-gradient(circle at 72% 80%, rgba(0,0,0,.5) 0 26%, transparent 62%),
    var(--pin);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.5), 0 6px 9px rgba(0,0,0,.3);
  transition:transform .3s ease;
}
.pin::after{
  content:''; position:absolute; left:50%; top:58%;
  width:15px; height:8px; transform:translateX(-44%) rotate(14deg);
  border-radius:50%; z-index:-1;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.42), transparent 70%);
}
.slot:hover .pin{ transform:translateY(-1px) scale(1.1); }
.loose{ position:absolute; left:calc(var(--x) * var(--cm)); top:calc(var(--y) * var(--cm)); }

.k-paper{
  background-color:var(--paper);
  background-image:linear-gradient(160deg, #f8f2e4 0%, #efe6d2 100%);
  color:var(--ink);
}
.k-card{ background-image:linear-gradient(145deg, var(--c1), var(--c2)); color:#fff; }
.k-polaroid{ background:#fcfaf5; color:var(--ink); padding:5% 5% 17%; }
.k-polaroid .shot{
  position:absolute; left:5%; right:5%; top:5%; bottom:17%;
  background-image:linear-gradient(140deg, var(--c1), var(--c2));
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow:inset 0 0 12px rgba(0,0,0,.22);
}
.k-photo{
  background-image:linear-gradient(140deg, var(--c1), var(--c2));
  border:3px solid #fbf8f1; color:#fff;
}

.inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3cqmin; padding:7cqmin; text-align:center;
}
.art{ font-size:38cqmin; line-height:1; }
.tt{ font-weight:700; font-size:14cqmin; line-height:1.05; letter-spacing:.03em; text-transform:uppercase; }
.ts{ font-size:9.5cqmin; line-height:1.15; opacity:.62; }
.k-card .tt{ font-size:22cqmin; letter-spacing:.01em; }
.cap{
  position:absolute; left:0; right:0; bottom:2%;
  font-family:'Caveat', cursive; font-size:13cqmin; color:#4a4038; text-align:center;
}
.pic{ display:block; width:100%; height:100%; object-fit:cover; }
.pic-in{ width:auto; max-width:88%; max-height:58%; object-fit:contain; border-radius:2px; }

/* ---------------------------------------------------------
   5. dev / wallet panel, ghost, editor
   --------------------------------------------------------- */
.ghost{
  position:absolute;
  left:calc(var(--x) * var(--cm)); top:calc(var(--y) * var(--cm));
  width:calc(var(--w) * var(--cm)); height:calc(var(--h) * var(--cm));
  z-index:500; pointer-events:none; border-radius:3px;
  display:grid; place-items:center;
  border:2px dashed rgba(255,255,255,.9);
  background:rgba(55,185,110,.32);
  box-shadow:0 0 0 2px rgba(0,0,0,.2), 0 14px 28px rgba(0,0,0,.35);
}
.ghost[hidden]{ display:none; }   /* needed: display:grid above beats the UA [hidden] rule */
.ghost.bad{ background:rgba(222,62,46,.34); }
.ghost.shake{ animation:shake .4s ease; }
@keyframes shake{ 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }
.glabel{
  font-size:12px; font-weight:700; letter-spacing:.04em; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}

.kill{
  position:absolute; right:-9px; top:-9px;
  width:22px; height:22px; padding:0;
  display:none; place-items:center;
  border-radius:50%; border:1px solid rgba(255,255,255,.55);
  background:#d9372b; color:#fff;
  font:700 14px/1 'Space Grotesk', sans-serif; cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,.45); z-index:40;
}
body.dev-on .slot:hover .kill{ display:grid; }          /* dev wallet: delete anything */
body.wallet-in .slot.mine:hover .kill{ display:grid; }  /* holder: only your own */
body.placing .kill{ display:none !important; }

.dev{
  position:fixed; left:16px; top:16px; z-index:35;
  width:246px;
  border-radius:14px; overflow:hidden;
  border:1px solid var(--glass-br);
  background:var(--glass-bg);
  backdrop-filter:blur(10px);
  box-shadow:0 14px 40px rgba(0,0,0,.3);
  color:var(--glass-fg);
  font-size:13px;
  transition:background .5s ease, border-color .5s ease;
}
.dev-head{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  font-weight:700; font-size:11.5px; letter-spacing:.14em;
  color:var(--glass-hi);
  border-bottom:1px solid var(--glass-br);
}
.dev-head .dot{
  flex:0 0 7px;
  width:7px; height:7px; border-radius:50%;
  background:#dcab52; box-shadow:0 0 8px #dcab52;
}
.dev-head .dot.dev{ background:#36c76a; box-shadow:0 0 8px #36c76a; }
.dev-min{
  margin-left:auto; width:22px; height:22px; padding:0;
  display:grid; place-items:center;
  border:1px solid var(--glass-br); border-radius:6px;
  background:transparent; color:inherit; cursor:pointer; font-size:14px;
}
.dev.mini .dev-body{ display:none; }
.dev-body{ padding:12px; display:flex; flex-direction:column; gap:9px; }
.dev-body[hidden]{ display:none; }

.wrow{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.waddr{
  font-size:12.5px; font-weight:600; color:var(--glass-hi);
  font-variant-numeric:tabular-nums;
}
.bal{ font-size:15px; color:var(--glass-hi); }
.bal b{ font-weight:700; }
.allow{ font-size:11.5px; line-height:1.45; opacity:.78; }
.allow b{ color:var(--glass-hi); }

.lab{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.6; }
.sizes{ display:flex; gap:6px; }
.sizes[hidden]{ display:none; }
.size, .chip{
  flex:1; padding:7px 4px;
  font:600 12px/1 'Space Grotesk', sans-serif;
  color:inherit; cursor:pointer;
  border:1px solid var(--glass-br); border-radius:8px;
  background:transparent;
  transition:background .15s ease, border-color .15s ease;
}
.size.on, .chip.on{ background:rgba(240,179,42,.28); border-color:rgba(240,179,42,.7); color:var(--glass-hi); }
.size:hover, .chip:hover{ border-color:rgba(240,179,42,.5); }

.custom{ display:flex; align-items:center; gap:6px; font-size:12px; opacity:.85; }
.custom input{
  width:56px; padding:7px;
  font:inherit; font-size:13px; color:var(--panel-fg);
  border:1px solid var(--glass-br); border-radius:7px; background:var(--field-bg);
}
.cost{ font-size:11.5px; opacity:.85; }
.cost b{ color:var(--glass-hi); }
.cost.short{ color:#d9674b; opacity:1; }

.buy{
  padding:10px; margin-top:2px;
  font:700 13px/1 'Space Grotesk', sans-serif; color:#2a1f12;
  border:1px solid rgba(255,255,255,.35); border-radius:9px;
  background:linear-gradient(180deg,#f3cf84,#dcab52);
  box-shadow:0 2px 0 rgba(255,255,255,.35) inset;
  cursor:pointer;
}
.buy:hover:not(:disabled){ filter:brightness(1.05); }
.buy:disabled{ opacity:.45; cursor:not-allowed; }

.dev-note{ margin:0; font-size:11px; line-height:1.45; opacity:.65; }
.dev-note.big{ font-size:12.5px; opacity:.85; margin-bottom:2px; }
.dev-note.sim{ text-align:center; opacity:.5; }
.dev-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; border-top:1px solid var(--glass-br);
  font-size:11px; opacity:.75;
}
.link{
  padding:0; border:0; background:none; cursor:pointer;
  font:inherit; color:#d9674b; text-decoration:underline;
}

/* --- the note editor --- */
.modal-back{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center; padding:20px;
  background:rgba(12,9,6,.55); backdrop-filter:blur(3px);
}
.modal-back[hidden]{ display:none; }
.modal{
  width:min(640px, 100%); max-height:90vh; overflow:auto;
  padding:22px; border-radius:16px;
  border:1px solid var(--panel-br);
  background:var(--panel-bg); color:var(--panel-fg);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.modal h2{ margin:0 0 16px; font-size:17px; }
.modal-grid{ display:flex; gap:20px; flex-wrap:wrap; }
.fields{ flex:1 1 280px; display:flex; flex-direction:column; gap:10px; }
.fields label{ display:flex; flex-direction:column; gap:5px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.7; }
.fields input{
  padding:9px 10px;
  font:400 14px/1.2 'Space Grotesk', sans-serif;
  text-transform:none; letter-spacing:normal;
  color:var(--panel-fg);
  border:1px solid var(--panel-br); border-radius:8px; background:var(--field-bg);
}
.fields input[type=file]{ padding:7px; font-size:12px; }
.chips{ display:flex; gap:5px; }
.swatches{ display:flex; gap:7px; }
.swatch{
  width:24px; height:24px; padding:0;
  border-radius:50%; border:2px solid transparent; cursor:pointer;
  box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.swatch.on{ border-color:var(--panel-fg); transform:scale(1.12); }

.preview-wrap{ flex:0 0 268px; display:flex; flex-direction:column; gap:6px; }
.preview-cork{
  flex:1; min-height:200px; display:grid; place-items:center;
  border-radius:10px;
  background-color:#c2955c;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.30 0 0 0 0 0.17 0 0 0 0 0.06 1.0 0.5 0.3 0 -0.62'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23a)'/%3E%3C/svg%3E"),
    radial-gradient(130% 100% at 50% 0%, #dcb882, #ab7e47);
  background-size:160px 160px, 100% 100%;
  box-shadow:inset 0 4px 12px rgba(55,28,4,.5);
}
.preview{ position:relative; }
.preview .tile{ cursor:default; }
.preview .tile:hover{ transform:none; }
.preview .pin{ top:0; }

.modal-actions{ display:flex; justify-content:flex-end; gap:9px; margin-top:18px; }
.primary, .ghostbtn{ padding:10px 18px; font:700 13px/1 'Space Grotesk', sans-serif; cursor:pointer; border-radius:9px; }
.primary{ color:#2a1f12; border:1px solid rgba(255,255,255,.35); background:linear-gradient(180deg,#f3cf84,#dcab52); }
.ghostbtn{ color:inherit; border:1px solid var(--panel-br); background:transparent; }

/* ---------------------------------------------------------
   6. fixed chrome
   --------------------------------------------------------- */
.masthead{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; flex-direction:column; align-items:center;
  padding:22px 16px 0;
  pointer-events:none;
  transition:opacity .45s ease, transform .45s ease;
}
.masthead h1{
  margin:0;
  font-family:'Alfa Slab One', Georgia, serif; font-weight:400;
  font-size:clamp(36px, 7.6vw, 94px); line-height:.95;
  color:var(--mast-face);
  text-shadow:
    0 1px 0 var(--mast-ext), 0 2px 0 var(--mast-ext), 0 3px 0 var(--mast-ext2),
    0 4px 0 var(--mast-ext2), 0 12px 24px var(--mast-glow);
  transition:color .5s ease;
}
.tagline{
  margin:10px 0 0;
  font-size:clamp(11px, 1.3vw, 14px); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--tagline);
  transition:color .5s ease;
}
body.zoomed-in .masthead{ opacity:0; transform:translateY(-10px); }

.hud{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding:0 22px 20px;
  pointer-events:none;
}
.hud > *{ pointer-events:auto; }

.zoomctl{
  display:flex; align-items:center; gap:6px; padding:6px;
  border-radius:13px; border:1px solid var(--glass-br);
  background:var(--glass-bg); backdrop-filter:blur(9px);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition:background .5s ease;
}
button.z{
  font:600 16px/1 'Space Grotesk', sans-serif;
  width:34px; height:34px; display:grid; place-items:center;
  color:var(--glass-fg);
  background:transparent; border:1px solid var(--glass-br); border-radius:9px;
  cursor:pointer; transition:background .15s ease;
}
button.z:hover{ background:rgba(240,179,42,.25); }
button.z.wide{ width:auto; padding:0 13px; font-size:13px; }
.zlabel{ min-width:52px; text-align:center; font-size:12.5px; font-variant-numeric:tabular-nums; opacity:.8; }

.stat{
  font-size:12.5px; line-height:1.5; text-align:right;
  padding:9px 13px; border-radius:11px;
  border:1px solid var(--glass-br); background:var(--glass-bg);
  backdrop-filter:blur(9px); color:var(--glass-fg);
  transition:background .5s ease;
}
.stat b{ color:var(--glass-hi); font-weight:700; }

.hint{
  position:fixed; left:24px; bottom:76px; z-index:29;
  font-size:12px; letter-spacing:.06em; color:var(--glass-fg); opacity:.55;
  pointer-events:none; transition:opacity .6s ease;
}
.hint.gone{ opacity:0; }

.tip{
  position:fixed; z-index:45; pointer-events:none;
  opacity:0; transform:translateY(5px);
  transition:opacity .15s ease, transform .15s ease;
  max-width:280px; padding:9px 12px;
  font-size:12px; line-height:1.5;
  border-radius:10px; border:1px solid rgba(255,255,255,.13);
  background:rgba(18,14,10,.93); backdrop-filter:blur(8px);
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  color:#cdbfa9;
}
.tip.on{ opacity:1; transform:none; }
.tip .tname{ font-weight:700; color:#f3e4c8; }
.tip .taddr{ font-size:11px; color:#8e8068; }

.toast{
  position:fixed; left:50%; bottom:76px; z-index:70;
  transform:translate(-50%, 10px);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  padding:10px 16px; border-radius:10px;
  font-size:13px; font-weight:600; color:#f3e4c8;
  background:rgba(18,14,10,.94);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 36px rgba(0,0,0,.5);
}
.toast.on{ opacity:1; transform:translate(-50%, 0); }

/* ---------------------------------------------------------
   7. small screens + reduced motion
   --------------------------------------------------------- */
@media (max-width: 860px){
  .dev{ left:10px; top:10px; width:206px; }
  .stat{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .slot:hover .tile, .slot.landing .tile{ animation:none; }
  .tile{ transition:box-shadow .3s ease; }
}