/* TGP 2048 on the site's /games/2048/ page. The window frame, title bar, buttons, status bar, fonts and colors
   are the site's own (site.css: .window, .titlebar, .btn98, .mp-status, --navy ...); everything here is p2-*. */
.p2048 {
  --p2-red: var(--red); --p2-pink: var(--hot); --p2-green: #18b46a; --p2-blue: var(--blue);
  --p2-outline: 2px 0 var(--navy), -2px 0 var(--navy), 0 2px var(--navy), 0 -2px var(--navy),
                2px 2px var(--navy), -2px -2px var(--navy), 2px -2px var(--navy), -2px 2px var(--navy);
  --p2-slide: 110ms; /* view.js SLIDE */
  /* The window's width. The board is that minus 26px; the window's other parts take about 290px of height, so
     it all fits between the top of the screen and the taskbar where it can. */
  --p2-win: min(520px, 100%, max(300px, calc(100vh - 290px - var(--taskbar-h))));
  width: var(--p2-win);
  margin: 0 auto;
}
@supports (height: 100dvh) {
  .p2048 { --p2-win: min(520px, 100%, max(300px, calc(100dvh - 290px - var(--taskbar-h)))); }
}
.p2048 > h1, .p2048 > p { margin: 0 0 10px; color: #fff; text-shadow: 1px 1px 0 var(--navy); } /* before the script runs */

.p2-win .titlebar-btns a {
  margin-left: 2px; width: 18px; height: 16px; display: grid; place-items: center; background: var(--silver); box-shadow: var(--bevel-out);
  font: 700 14px/1 var(--f-ui); color: #000; text-shadow: none; text-decoration: none;
}
.p2-win .titlebar-btns a:active { box-shadow: var(--bevel-in); }
.p2-body { background: var(--cream); margin-top: 3px; padding: 10px; font: 13px/1.5 var(--f-body); container-type: inline-size; }

/* ---------- header: band name as tall as "2048", score boxes, New game ---------- */
.p2-head {
  /* The TGP logo (the site's tgp-rainbow.svg, Bauhaus 93 like the band name) as tall as "2048": the digits' ink is
     0.734 of the font size plus the 2px outline, and the logo's ink is 0.647 of its picture's height, so the
     picture is 1.134em + 6px tall (and 1.442 times as wide). Both shrink to stay on one line: 100cqi is the width
     inside .p2-body. */
  --p2-size: min(44px, calc((100cqi - 30px) / 4));
  /* the buttons drop to a line of their own only if they can't fit beside the scores (big scores, small phones) */
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px;
}
.p2-head h1 { flex: 0 0 100%; margin: 0; display: flex; align-items: center; gap: 10px; font-size: var(--p2-size); line-height: 1; }
.p2-head h1:focus { outline: 0; }
.p2-head h1 img { width: auto; height: calc(var(--p2-size) * 1.134 + 6px); max-width: none; filter: drop-shadow(1px 1px 0 var(--navy)); }
.p2-big { display: flex; padding-top: .08em; font: 400 1em/1 var(--f-bubbly); letter-spacing: .02em; text-shadow: var(--p2-outline), 4px 4px 0 var(--navy); }
.p2-big i { font-style: normal; color: var(--p2-red); }
.p2-big i:nth-child(2) { color: var(--p2-pink); }
.p2-big i:nth-child(3) { color: var(--p2-green); }
.p2-big i:nth-child(4) { color: var(--p2-blue); }
.p2-scores { display: flex; gap: 6px; }
.p2-score { position: relative; min-width: 76px; padding: 3px 8px 4px; background: #fff; box-shadow: var(--bevel-in); }
.p2-score span { display: block; font: 400 8px/1.4 var(--f-pixel); text-transform: uppercase; letter-spacing: .08em; color: #555; }
.p2-score b { display: block; font: 700 17px/1.1 var(--f-ui); color: var(--navy); font-variant-numeric: tabular-nums; }
.p2-plus {
  position: absolute; right: 8px; bottom: 4px; font: 400 16px/1 var(--f-bubbly); color: var(--p2-pink); text-shadow: 1px 1px 0 var(--navy);
  pointer-events: none; animation: p2-rise .7s ease-in forwards;
}
@keyframes p2-rise { to { translate: 0 -34px; opacity: 0; } }
.p2-btns { display: flex; gap: 6px; margin-left: auto; }
.p2-btns .btn98 { min-width: 0; padding: 6px 12px; }
.p2-short { display: none; }
.p2-how { margin: 8px 0 10px; font-size: 11px; line-height: 1.5; color: #333; }

/* ---------- the board ---------- */
.p2-board {
  --gap: 8px;
  position: relative; aspect-ratio: 1; background: var(--navy); box-shadow: var(--bevel-in);
  container-type: inline-size; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.p2-board:focus { outline: 0; }
.p2-board:focus-visible { outline: 2px dotted #000; outline-offset: 3px; }
.p2-cells, .p2-tiles { position: absolute; inset: calc(var(--gap) + 2px); }
.p2-cells { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: var(--gap); }
.p2-cells i { background: rgba(255,255,255,.09); box-shadow: inset 1px 1px rgba(0,0,0,.55), inset -1px -1px rgba(255,255,255,.14); }

.p2-tile {
  position: absolute; left: 0; top: 0; width: calc((100% - 3 * var(--gap)) / 4); aspect-ratio: 1; overflow: hidden;
  background: #000;
  translate: calc(var(--c) * (100% + var(--gap))) calc(var(--r) * (100% + var(--gap)));
  transition: translate var(--p2-slide) ease-in-out;
}
.p2-tile img, .p2-art img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.is-split img + img { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.p2-tile.is-beyond { background: var(--navy); }
.p2-tile.is-beyond img { object-fit: contain; padding: 8%; }
/* raised Win98 edge over the cover */
.p2-tile::after { content: ""; position: absolute; inset: 0; box-shadow: inset 1px 1px rgba(255,255,255,.75), inset -1px -1px rgba(0,0,0,.7), inset 2px 2px rgba(255,255,255,.25), inset -2px -2px rgba(0,0,0,.3); }
.p2-tile b {
  position: absolute; right: 5%; bottom: 3%; z-index: 1;
  font: 400 7.5cqi/1 var(--f-bubbly); color: #fff; letter-spacing: .02em;
  text-shadow: var(--p2-outline), 3px 3px 0 var(--navy);
}
.p2-tile:is([data-v="32"], [data-v="64"], [data-v="128"], [data-v="256"]) b { color: var(--yellow); }
.p2-tile:is([data-v="512"], [data-v="1024"]) b { color: var(--p2-pink); }
.p2-tile[data-v="2048"] b { color: #7dffb0; }
.p2-tile:is([data-v="128"], [data-v="256"], [data-v="512"]) b { font-size: 6.4cqi; }
.p2-tile:is([data-v="1024"], [data-v="2048"], .is-beyond) b { font-size: 5.4cqi; }
.p2-tile.is-new { animation: p2-appear 150ms ease-out var(--p2-slide) backwards; }
.p2-tile.is-merged { z-index: 2; animation: p2-pop 190ms ease-out var(--p2-slide) backwards; }
@keyframes p2-appear { from { scale: 0; opacity: 0; } }
@keyframes p2-pop { 0% { scale: 0; } 55% { scale: 1.14; } 100% { scale: 1; } }

/* ---------- win / game over ---------- */
.p2-dialog { position: absolute; z-index: 5; left: 50%; top: 50%; translate: -50% -50%; width: min(86%, 340px); }
.p2-dialog.is-over .titlebar { background: var(--gloss), linear-gradient(90deg, #b00018, #ff4d6d); }
.p2-dialog-body { margin-top: 3px; padding: 12px 12px 10px; font: 12px/1.45 var(--f-ui); color: #000; }
#p2-dialog-text { display: flex; gap: 12px; align-items: center; }
#p2-dialog-text p { margin: 0; }
#p2-dialog-text .p2-art { flex: none; width: 72px; }
.p2-dialog-btns { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.p2-dialog-btns .btn98 { min-width: 86px; }
.p2-board:has(.p2-dialog:not([hidden])) .p2-tiles { filter: brightness(.6); }

/* ---------- high scores (scores.js): a Win98 list view, and the initials box ---------- */
#p2-hi-slot:not(:empty) { margin-top: 10px; }
#p2-dialog-text:empty + #p2-hi-slot { margin-top: 0; }
.p2-hi h3 { margin: 0 0 3px; font: 400 9px/1.4 var(--f-pixel); text-transform: uppercase; letter-spacing: .08em; color: #555; text-shadow: none; }
.p2-hi-box { padding: 2px; background: #fff; box-shadow: var(--bevel-in); }
.p2-hi table { width: 100%; border-collapse: collapse; font: 11px/15px var(--f-ui); }
.p2-hi th { padding: 1px 5px 2px; text-align: left; font-weight: 400; background: var(--silver); box-shadow: var(--bevel-out); }
.p2-hi td { padding: 1px 5px; white-space: nowrap; }
.p2-hi td:nth-child(2) { font: 400 13px/15px var(--f-bubbly); letter-spacing: .08em; color: var(--navy); }
.p2-hi .p2-hi-n { width: 1%; text-align: right; color: #666; }
.p2-hi .p2-hi-score { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.p2-hi th.p2-hi-score { font-weight: 400; }
.p2-hi td:last-child { width: 1%; }
/* the player's own row: Win98's selection colors, blinking like an arcade (each cell's color reaches 1px into
   the next, or thin seams show between them on high-density screens) */
.p2-hi tr.is-mine td { background: var(--navy); box-shadow: 1px 0 var(--navy); color: #fff; animation: p2-blink 1.1s steps(1) infinite; }
.p2-hi tr.is-mine td:last-child { box-shadow: none; }
@keyframes p2-blink { 50% { color: var(--yellow); } }
.p2-hi-rec { display: flex; align-items: center; gap: 4px; }
.p2-hi-rec .p2-art { flex: none; width: 15px; }
.p2-hi-rec b { font: 400 8px/1 var(--f-pixel); }
.p2-art.is-beyond { background: var(--navy); }
.p2-art.is-beyond img { object-fit: contain; padding: 1px; }
.p2-hi-none { margin: 0; text-align: center; color: #333; }

.p2-hi-form { display: grid; gap: 6px; justify-items: center; text-align: center; }
.p2-hi-form label { font-weight: 700; }
.p2-hi-row { display: flex; gap: 8px; align-items: center; }
/* 16px or more, or iPhones zoom in on it; letter-spacing leaves a gap after the last letter, so the left padding
   evens it out */
.p2-hi-form input {
  width: 4.4em; margin: 0; padding: 5px 0 4px .32em; text-align: center; letter-spacing: .32em; text-transform: uppercase;
  font: 400 22px/1 var(--f-pixel); color: var(--navy); background: #fff; border: 0; border-radius: 0; box-shadow: var(--bevel-in);
  -webkit-user-select: text; user-select: text; caret-color: var(--p2-pink);
}
.p2-hi-form input:focus { outline: 1px dotted #000; outline-offset: 2px; }
.p2-hi-form input:read-only { color: #666; }
.p2-hi-form .btn98 { min-width: 64px; }
.p2-hi-form .btn98:disabled { color: #808080; text-shadow: 1px 1px #fff; cursor: default; }
.p2-hi-msg:empty { display: none; }
.p2-hi-msg.is-error { color: #b00018; font-weight: 700; }

/* ---------- records shelf ---------- */
.p2-shelf { margin-top: 10px; }
.p2-shelf h2 { margin: 0 0 4px; font: 400 9px/1.4 var(--f-pixel); text-transform: uppercase; letter-spacing: .08em; color: #555; text-shadow: none; }
.p2-shelf h2 span { text-transform: none; letter-spacing: .04em; }
.p2-shelf ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.p2-shelf li { display: grid; gap: 2px; justify-items: center; }
.p2-shelf a { display: block; width: 100%; }
.p2-art { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: #000; box-shadow: 0 0 0 1px #000; }
.p2-shelf a:hover .p2-art, .p2-shelf a:focus-visible .p2-art { outline: 2px solid var(--p2-pink); }
.p2-art.is-unknown { display: grid; place-items: center; background: var(--navy); color: rgba(255,255,255,.4); font: 400 15px/1 var(--f-bubbly); }
.p2-shelf b { font: 400 8px/1 var(--f-pixel); color: var(--navy); }

/* ---------- status bar (the site's .mp-status) ---------- */
.p2-status span { min-height: 21px; line-height: 1.1; }
.p2-status span:first-child { flex: 1; min-width: 0; }
.p2-status a { font-weight: 700; }

@media (max-width: 480px) {
  .p2-board { --gap: 6px; }
  .p2-score { min-width: 64px; }
  .p2-shelf ol { gap: 2px; }
  .p2-art.is-unknown { font-size: 11px; }
}
/* a narrow window (small phones, short laptop screens): "Scores" instead of "High scores" and slimmer boxes, so
   the scores and both buttons still fit on one line (100cqi is the width inside .p2-body) */
@container (max-width: 320px) {
  .p2-score { min-width: 56px; padding: 3px 6px 4px; }
  .p2-score b { font-size: 15px; }
  .p2-btns .btn98 { padding: 6px 7px; }
  .p2-long { display: none; }
  .p2-short { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .p2-tile { transition: none; }
  .p2-tile.is-new, .p2-tile.is-merged, .p2-plus, .p2-hi tr.is-mine td { animation: none; }
}