:root {
  --page-bg: #f5f0e8;
  --card-bg: #fffdf8;
  --ink: #211d17;
  --muted: #655d52;
  --accent: #8d1f2d;
  --accent-2: #f4ca64;
  --line: #d9cdbb;
  --tile-w: 85px;
  --tile-h: 111px;
  --piece-w: 82px;
  --piece-h: 108px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(244, 202, 100, .35), transparent 28rem),
    linear-gradient(180deg, #fffaf1, var(--page-bg));
}

.site-header {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 16px 10px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.brand-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--accent);
  color: white;
  font-size: 30px;
  box-shadow: 0 8px 20px rgba(60, 33, 12, .16);
}
h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; letter-spacing: -.04em; }
.site-header p { margin: 6px 0 0; color: var(--muted); }

.page-shell {
  max-width: 1180px;
  margin: 0 auto 48px;
  padding: 0 16px;
}
.game-card, .instructions {
  background: rgba(255, 253, 248, .94);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(79, 49, 18, .13);
}
.game-card { padding: 12px; }
.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 10px;
}
.status {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff5d8;
  border: 1px solid #efd087;
  font-weight: 700;
}
.meta { color: var(--muted); font-size: .95rem; white-space: nowrap; }

.board-frame {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  border-radius: 14px;
  border: 1px solid #cabba4;
  background-color: #385f55;
  background-image: url("pics/back2.gif"), radial-gradient(circle at center, rgba(255,255,255,.14), transparent 25rem);
  background-repeat: repeat;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16);
}
.board {
  position: relative;
  flex: 0 0 auto;
  overflow: visible;
  background: transparent;
  touch-action: manipulation;
  user-select: none;
  transform-origin: top center;
}
.tile {
  position: absolute;
  width: var(--tile-w);
  height: var(--tile-h);
  padding: 0;
  cursor: pointer;
  background-color: transparent;
  background-image: url("pics/82.l.blank.gif");
  background-repeat: no-repeat;
  border: 0;
  border-radius: 10px;
  box-shadow: 5px 7px 0 rgba(37, 28, 18, .34);
  transition: filter .12s ease, transform .12s ease, box-shadow .12s ease;
}
.tile::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: calc(var(--piece-w) - 6px);
  height: calc(var(--piece-h) - 6px);
  background-image: url("pics/82.l.gif");
  background-repeat: no-repeat;
  background-position: calc(var(--sprite-x) * -1) calc(var(--sprite-y) * -1);
  pointer-events: none;
}
.tile.free { filter: none; }
.tile.locked { filter: grayscale(1) brightness(.72); cursor: not-allowed; }
.tile.selected, .tile.hint {
  background-image: url("pics/82.h.blank.gif");
  transform: translateY(-3px);
  box-shadow: 6px 9px 0 rgba(37, 28, 18, .36), 0 0 0 4px rgba(250, 210, 50, .9);
}
.tile.selected::before, .tile.hint::before { background-image: url("pics/82.h.gif"); }
.tile.left-free { border-left: 4px solid #fff200; }
.tile.right-free { border-right: 4px solid #111; }
.tile.removed { display: none; }

.win-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
  background: rgba(17, 12, 8, .18);
}
.win-graphic {
  position: relative;
  width: min(600px, calc(100% - 24px));
  aspect-ratio: 600 / 400;
}
.win-graphic img {
  display: block;
  width: 100%;
  height: auto;
}
.win-fortune-box {
  position: absolute;
  left: 53.3%;
  top: 80.7%;
  width: 39.4%;
  height: 11.8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #111;
  line-height: 1.05;
  overflow: hidden;
}
.win-fortune {
  font-size: clamp(8px, 1.05vw, 11px);
  font-weight: 700;
  padding: 0 8px;
}
.win-lucky {
  margin-top: 3px;
  font-size: clamp(7px, .95vw, 10px);
  color: rgb(244, 33, 172);
  font-weight: 700;
}
.win-time {
  margin-top: 4px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  color: #111;
  text-shadow:
    -1px -1px 0 rgb(235,239,204),
     1px -1px 0 rgb(235,239,204),
    -1px  1px 0 rgb(235,239,204),
     1px  1px 0 rgb(235,239,204),
     2px  2px 0 rgb(222,60,22);
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 12px 2px 0;
}
button, .check {
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid #bdab90;
  background: #fffaf0;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}
button { padding: 0 14px; cursor: pointer; }
button:hover { background: #fff0c4; }
.check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}

.instructions {
  margin-top: 18px;
  padding: 22px;
  line-height: 1.55;
}
.instructions h2 { margin-top: 0; }
.asset-note { color: var(--muted); }
code { background: #f3eadb; padding: 2px 5px; border-radius: 5px; }

@media (max-width: 720px) {
  .site-header { align-items: flex-start; padding-top: 14px; }
  .brand-mark { width: 46px; height: 46px; border-radius: 13px; font-size: 26px; }
  .game-card { padding: 8px; }
  .status-row { align-items: stretch; flex-direction: column; }
  button, .check { flex: 1 1 auto; justify-content: center; }
  .instructions { padding: 18px; }
  .win-panel { padding: 12px; }
  .win-graphic { width: min(600px, 100%); }
}

/* v5 controls */
#newWinnableGame {
  background: linear-gradient(#9f2a39, #761927);
  color: #fff;
  border-color: #5d101d;
}
#newRandomGame {
  background: linear-gradient(#fffdf8, #f2e6d1);
}


/* v6 JGames page shell additions */
.jgames-home-badge{
  position:fixed;
  top:12px;
  right:12px;
  z-index:10000;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(11,46,131,.18);
  box-shadow:0 8px 22px rgba(11,46,131,.18);
  transition:transform .12s ease, box-shadow .12s ease;
}
.jgames-home-badge img{
  width:32px;
  height:32px;
  display:block;
}
.jgames-home-badge:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(11,46,131,.22);
}
.footer{
  margin:34px auto 0;
  padding:22px 14px 28px;
  max-width:1180px;
  color:#58607a;
  text-align:center;
  font:14px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  border-top:1px solid rgba(11,46,131,.16);
}
.footer nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 14px;
  margin-bottom:12px;
  font-weight:700;
}
.footer a{
  color:#0B2E83;
  text-decoration:none;
}
.footer a:hover{
  color:#D80D16;
  text-decoration:underline;
}
.footer p{
  margin:6px 0 0;
}
@media (max-width:720px){
  .jgames-home-badge{
    width:40px;
    height:40px;
    border-radius:13px;
  }
  .jgames-home-badge img{
    width:29px;
    height:29px;
  }
  .site-header{
    padding-right:60px;
  }
}