/* Escape Tilt City v19: Master Games, an experience modal (Omar's mock mocks-inpanel/masters.html, Junk Food-style showcase).
   List of the 39 classics (mini final positions) -> a replay with a board, move stepping and autoplay. etc/masters-ui.js renders it. */
.mg-wrap{position:fixed;inset:0;z-index:220;display:none}
.mg-wrap.on{display:block}
.mg-scr{position:absolute;inset:0;background:rgba(21,30,40,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.mg-mod{position:absolute;inset:28px 64px;max-width:1500px;margin:0 auto;background:var(--bg);border:1px solid var(--line);border-radius:26px;box-shadow:0 30px 80px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.mg-wrap.on .mg-mod{animation:mgIn .28s cubic-bezier(.22,.8,.25,1)}}
@keyframes mgIn{from{transform:translateY(14px) scale(.985);opacity:0}to{transform:none;opacity:1}}
.mg-mod svg.i{width:18px;height:18px}
.mg-h{flex:none;display:flex;align-items:center;gap:12px;padding:14px 18px 12px;background:var(--paper);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.mg-h::after{content:"";position:absolute;right:70px;bottom:-4px;width:520px;height:64px;background:var(--accent);opacity:.09;pointer-events:none;-webkit-mask:url(skyline.svg) right bottom/auto 100% no-repeat;mask:url(skyline.svg) right bottom/auto 100% no-repeat}
.mg-crown{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;border:2px solid #8a6a1e;background:#2a2414;display:grid;place-items:center}
.mg-crown svg{width:100%;height:100%}
.mg-k{font:600 10px/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.mg-h h2{font:600 22px/1.1 var(--disp);color:var(--ink);margin-top:4px}
.mg-h .mg-tt{min-width:0}
.mg-x{margin-left:auto;flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;color:var(--muted);position:relative;z-index:1;cursor:pointer}
.mg-x:hover{border-color:var(--accent);color:var(--ink)}
.mg-back{flex:none;height:34px;padding:0 13px 0 9px;border-radius:999px;border:1px solid var(--line);background:var(--paper);display:inline-flex;align-items:center;gap:4px;font:600 13px var(--disp);color:var(--accent-ink);position:relative;z-index:1}
.mg-fl{display:flex;gap:6px;margin-left:22px;position:relative;z-index:1}
.mg-fl button{height:30px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font:600 13px/28px var(--disp);color:var(--muted);white-space:nowrap}
.mg-fl button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.mg-flp{display:none}
/* board */
.mg-bd{position:relative;width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:repeating-conic-gradient(#6E9468 0 25%,#EDEBD9 0 50%) 0 0/25% 25%;box-shadow:0 2px 10px rgba(var(--shade),.12);container-type:inline-size}
.mg-bd i{position:absolute;width:12.5%;height:12.5%;display:block}
.mg-bd i.l{background:rgba(155,199,0,.41)}
.mg-bd i.p{background-size:100% 100%;transition:left .22s ease,top .22s ease}
.mg-bd b{position:absolute;font:700 2.1cqw/1 var(--ui);pointer-events:none}
.mg-bd b.r{left:.5%;padding-top:.4%}.mg-bd b.f{bottom:.5%;padding-right:.6%;text-align:right;width:12.5%}
/* list */
.mg-grid{flex:1;min-height:0;overflow:auto;padding:16px 18px 18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-content:start;scrollbar-width:thin}
.mg-card{display:flex;gap:12px;padding:11px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 14px rgba(var(--shade),.06);min-width:0;text-align:left;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.mg-card:hover{border-color:var(--accent-hi);transform:translateY(-1px);box-shadow:0 8px 20px rgba(var(--shade),.10)}
.mg-card.on{border:2px solid var(--brandgold);padding:10px}
.mg-card .mg-mini{flex:none;width:92px}
.mg-card .mg-mini .mg-bd{border-radius:8px;box-shadow:none}
.mg-card .mg-mini .mg-bd b{display:none}
.mg-card .mg-t{min-width:0;display:flex;flex-direction:column;gap:3px}
.mg-no{font:600 11px var(--disp);letter-spacing:.14em;color:var(--soft)}
.mg-card .mg-t>b{font:600 15px/1.15 var(--disp);color:var(--ink)}
.mg-pl{font-size:12.5px;color:var(--muted);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mg-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:auto}
.mg-pill{display:inline-flex;align-items:center;height:21px;padding:0 8px;border-radius:999px;font:700 9.5px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.mg-pill.gold{background:var(--gold-tint);color:var(--gold)}
.mg-pill.ghost{background:var(--tint2);color:var(--muted);letter-spacing:.03em;text-transform:none;font-weight:600;font-size:11px}
.mg-pill.blk{background:#1b2733;color:#fff;height:24px;padding:0 10px;font-size:10.5px}
.mg-pill.wht{background:var(--paper);color:var(--ink);border:1.5px solid var(--dash);height:24px;padding:0 10px;font-size:10.5px}
:root[data-mode="dark"] .mg-pill.blk{background:#0b1016;border:1.5px solid #3a4652}
/* replay */
.mg-rp{flex:1;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:14px 18px}
.mg-lc{display:flex;flex-direction:column;gap:8px;min-height:0;justify-content:center}
.mg-lc .mg-bw{width:var(--mb,480px)}
.mg-c{background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 8px rgba(var(--shade),.05);padding:10px 12px;min-height:0}
.mg-pc{display:flex;align-items:center;gap:10px;padding:8px 10px;flex:none}
.mg-pc .mg-crown{width:38px;height:38px}
.mg-pn{font:700 15px/1.15 var(--ui);color:var(--ink);min-width:0}.mg-pn small{display:block;font:400 12.5px var(--ui);color:var(--muted)}
.mg-sp{flex:1}
.mg-rc{display:flex;flex-direction:column;gap:10px;min-height:0}
.mg-gc .mg-h3{font:600 24px/1.15 var(--disp);color:var(--ink);margin-top:4px}
.mg-sub{font-size:13px;color:var(--muted);line-height:1.3;margin-top:2px}
.mg-gc .mg-row{margin-top:7px;gap:6px}
.mg-why{border-left:3px solid var(--brandgold);padding:2px 0 2px 11px;font-size:14px;line-height:1.4;color:var(--ink);margin-top:10px}
.mg-why .mg-k{color:var(--soft);margin-bottom:4px;display:block}
.mg-mvs{flex:1;display:flex;flex-direction:column;gap:6px;min-height:80px}
.mg-mvh{display:flex;align-items:center}
.mg-mvh small{margin-left:auto;font-size:12px;color:var(--muted)}
.mg-moves{flex:1;min-height:0;overflow:auto;font:13.5px/1.75 "JetBrains Mono",ui-monospace,Menlo,monospace;color:var(--muted);scrollbar-width:thin}
.mg-moves .n{color:var(--soft)}
.mg-moves button{padding:1px 4px;border-radius:5px;white-space:nowrap;font:inherit;color:var(--ink);cursor:pointer}
.mg-moves button:hover{background:var(--tint)}
.mg-moves button.on{background:var(--accent);color:#fff}
.mg-ctr{display:flex;gap:6px;align-items:center;flex:none}
.mg-ctr button{display:inline-grid;place-items:center;width:46px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--accent-ink);cursor:pointer}
.mg-ctr button:hover{border-color:var(--accent)}
.mg-ctr button.g{width:60px;background:var(--brandgold);border-color:var(--brandgold);color:#1b2733}
.mg-ctr .mg-mn{margin-left:8px;font:600 14px var(--disp);color:var(--muted)}.mg-ctr .mg-mn b{color:var(--ink);font-size:18px}
.mg-strip{flex:none;display:flex;gap:8px;align-items:stretch}
.mg-strip .ar{flex:none;width:34px;border-radius:12px;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;color:var(--muted);cursor:pointer}
.mg-strip .sc{flex:1;min-width:0;display:flex;gap:8px;overflow:hidden}
.mg-strip .sc button{flex:1 1 0;min-width:0;padding:8px 11px;border-radius:12px;border:1px solid var(--line);background:var(--paper);text-align:left;cursor:pointer}
.mg-strip .sc button b{display:block;font:600 16px/1 var(--disp);color:var(--accent-ink)}
.mg-strip .sc button span{display:block;font:600 12.5px/1.2 var(--disp);color:var(--ink);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-strip .sc button small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-strip .sc button.on{background:var(--brandgold);border-color:var(--brandgold)}
.mg-strip .sc button.on b,.mg-strip .sc button.on small,.mg-strip .sc button.on span{color:#1b2733}
.mg-pills{display:none}
@media (max-width:899px) and (min-height:501px){
  .mg-mod{inset:0;border-radius:0;border:0}
  .mg-h{padding:max(12px,env(safe-area-inset-top)) 14px 10px;gap:10px}.mg-h h2{font-size:18px}.mg-crown{width:36px;height:36px}.mg-h::after{display:none}
  .mg-h .mg-fl{display:none}
  .mg-flp{display:flex;gap:6px;overflow-x:auto;padding:10px 14px 0;flex:none;scrollbar-width:none}
  .mg-flp::-webkit-scrollbar{display:none}
  .mg-flp button{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font:600 12.5px/28px var(--disp);color:var(--muted);white-space:nowrap}
  .mg-flp button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .mg-grid{grid-template-columns:1fr;padding:10px 14px max(14px,env(safe-area-inset-bottom));gap:8px}
  .mg-card .mg-mini{width:78px}
  .mg-rp{display:flex;flex-direction:column;padding:8px 10px max(10px,env(safe-area-inset-bottom));gap:8px;overflow:hidden}
  .mg-lc{flex:none;gap:6px}
  .mg-lc .mg-bw{width:100%;max-width:min(100%,calc(100dvh - 400px));align-self:center}
  .mg-pc{padding:6px 10px}.mg-pc .mg-crown{width:32px;height:32px}
  .mg-rc{flex:1;gap:8px}
  .mg-pills{display:flex;gap:4px;padding:3px;background:var(--tint2);border-radius:999px;flex:none}
  .mg-pills button{flex:1;text-align:center;font:600 12.5px/30px var(--disp);color:var(--muted);border-radius:999px;white-space:nowrap}
  .mg-pills button[aria-pressed="true"]{background:var(--paper);color:var(--accent-ink);box-shadow:0 1px 4px rgba(var(--shade),.12)}
  .mg-rc [data-pane]{display:none}
  .mg-rc [data-pane].show{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:auto}
  .mg-gc .mg-h3{font-size:18px}
  .mg-why{font-size:13.5px}
  .mg-ctr button{flex:1;width:auto}.mg-ctr .mg-mn{display:none}
  .mg-strip{display:none}
  .mg-all{display:flex;flex-direction:column;gap:6px}
  .mg-all button{display:flex;align-items:center;gap:10px;text-align:left;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--paper)}
  .mg-all button.on{border-color:var(--brandgold);box-shadow:inset 0 0 0 1px var(--brandgold)}
  .mg-all button b{font:600 13px var(--disp);color:var(--accent-ink);flex:none;width:22px}
  .mg-all button span{font:600 13.5px/1.2 var(--disp);color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (min-width:900px), (orientation:landscape) and (max-height:500px){.mg-all{display:none}}
@media (min-width:900px) and (max-width:1250px), (orientation:landscape) and (max-height:500px) and (max-width:1250px){.mg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mg-mod{inset:20px 24px}}
@media (max-width:899px) and (min-height:501px){
  .mg-rc [data-pane].show>*{flex:none}
  .mg-lc .mg-bw{max-width:min(100%,calc(100dvh - 330px))}
}
/* v19: phones held sideways: the laptop modal, compact for the short height */
@media (orientation:landscape) and (max-height:500px){
  .mg-mod{inset:6px 10px;border-radius:16px}
  .mg-h{padding:6px 12px;gap:10px}.mg-h h2{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mg-crown{width:32px;height:32px}.mg-h::after{display:none}
  .mg-k{font-size:9px}
  .mg-fl{margin-left:8px;gap:4px}.mg-fl button{height:26px;padding:0 9px;font-size:12px;line-height:24px}
  .mg-x{width:32px;height:32px}
  .mg-grid{padding:8px 12px 10px;gap:8px}
  .mg-card{padding:8px;gap:10px}.mg-card .mg-mini{width:70px}
  .mg-rp{padding:8px 12px;gap:12px}
  .mg-pc{padding:4px 8px}.mg-pc .mg-crown{width:26px;height:26px}.mg-pn{font-size:13px}.mg-pn small{display:none}
  .mg-gc .mg-h3{font-size:17px}.mg-why{font-size:12.5px;margin-top:6px}
  .mg-strip{display:none}
  .mg-ctr button{height:34px}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:760px){.mg-h .mg-fl{display:none}}