/* Tilewatch — five coasts, one tile wall.
   UI chrome, buttons and cards come from ../shared/shell.css and its --g-* vars.
   The backdrop and the top bar sit over representational art (sky, water, a city
   at night), so they use literal colors the way the tile ivory does, not theme
   variables: the ink has to stay readable on a dark scene in either theme. */
:root{
  --tw-water: 0%;
  --tw-poll: .28;
}

.tw-wrap{
  /* The stage lays children out in a row with align-items:flex-start, and every
     child of the wrap is absolutely positioned, so the wrap gets its height
     from here — not from its content. */
  position: relative; width: 100%;
  height: min(80vh, 680px); min-height: 480px;
}
.mj-game .mj-stage > .tw-wrap{ max-width: none; }

/* ---------------- backdrop ---------------- */
.tw-scene{ position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 14px; }

/* Night over water: deep indigo overhead, city glow on the horizon. */
.tw-sky{ position: absolute; inset: 0;
  background: linear-gradient(180deg,#080f26 0%, #12294c 38%, #24456b 68%, #5c5163 88%, #2d2b26 100%); }
.tw-haze{ position: absolute; inset: 0; opacity: var(--tw-poll); transition: opacity .9s linear;
  background: radial-gradient(130% 70% at 50% 96%, rgba(214,116,58,.55), rgba(150,62,50,.18) 46%, transparent 72%); }
.tw-stars{ position: absolute; inset: 0 0 45% 0; opacity: calc(.6 - var(--tw-poll) * .6); transition: opacity .9s; }
.tw-stars i{ position: absolute; width: 2px; height: 2px; background:#fff; border-radius: 50%;
  animation: tw-twinkle 3.4s ease-in-out infinite; }
@keyframes tw-twinkle{ 0%,100%{opacity:.22} 50%{opacity:.85} }

.tw-clouds{ position: absolute; inset: 0; }
.tw-clouds i{ position: absolute; height: 54px; border-radius: 50%; filter: blur(16px);
  background: rgba(186,206,230,.15); animation: tw-drift linear infinite; }
.tw-clouds .c1{ width: 260px; top: 14%; animation-duration: 120s; }
.tw-clouds .c2{ width: 180px; top: 26%; animation-duration: 88s; animation-delay: -30s; background: rgba(186,206,230,.11); }
.tw-clouds .c3{ width: 320px; top: 5%;  animation-duration: 150s; animation-delay: -70s; background: rgba(186,206,230,.09); }
@keyframes tw-drift{ from{ transform: translateX(-40vw) } to{ transform: translateX(115vw) } }

/* The city: three depths, so the air between them reads as distance. */
.tw-citysvg{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tw-far{ fill: #22374f; opacity: .5; }
.tw-mid{ fill: #0a121c; }
.tw-palms{ stroke: #0a121c; stroke-width: 4; fill: none; stroke-linecap: round; }
.tw-win-layer{ fill: #ffd9a0; opacity: .92; }
.tw-win-dark{ fill: #141d28; opacity: 1; }

/* The tide: translucent, so the wall and the drowned floors read through it. */
.tw-sea{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none;
  height: var(--tw-water); transition: height .22s linear;
  background: linear-gradient(180deg, rgba(140,214,238,.40) 0%, rgba(28,96,134,.68) 38%, rgba(7,32,52,.90) 100%); }
.tw-sea::after{ content:""; position: absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg, rgba(210,245,255,.15), rgba(210,245,255,.75), rgba(210,245,255,.15)); }
.tw-crest{ position:absolute; top:-12px; left:-6%; width:112%; height:24px; opacity:.55;
  background: radial-gradient(closest-side, rgba(205,242,255,.8), rgba(205,242,255,0));
  animation: tw-swell 4.6s ease-in-out infinite; }
@keyframes tw-swell{ 0%,100%{transform:translateY(0) scaleY(1)} 50%{transform:translateY(-6px) scaleY(1.5)} }

/* Street life behind the wall: cars and people on the avenue, gone when the
   water finally comes over the top. */
.tw-street{ position: absolute; left:0; right:0; z-index: 1; height: 34px;
  transition: opacity .7s linear; }
.tw-street.is-flooded{ opacity: 0; }
.tw-street::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: rgba(226,232,240,.18); }
.tw-car{ position:absolute; bottom:6px; width:24px; height:8px; border-radius:3px;
  background:#eee7d6; box-shadow:0 0 7px rgba(255,226,160,.5), 0 1px 4px rgba(0,0,0,.6);
  animation: tw-drive 17s linear infinite; }
.tw-car.b{ background:#c9d3dd; animation-duration:22s; animation-direction:reverse; bottom:18px; }
.tw-car.c{ background:#e0bd8c; animation-duration:27s; animation-delay:-7s; bottom:6px; }
@keyframes tw-drive{ from{ transform: translateX(-8vw) } to{ transform: translateX(108vw) } }
.tw-person{ position:absolute; bottom:4px; width:3px; height:9px; border-radius:2px;
  background:#f6ecd8; opacity:.9; animation: tw-walk 28s linear infinite; }
.tw-person.p2{ animation-duration:36s; animation-delay:-9s; bottom:17px; }
.tw-person.p3{ animation-duration:31s; animation-delay:-17s; }
.tw-person.p4{ animation-duration:40s; animation-delay:-25s; bottom:17px; }
@keyframes tw-walk{ from{ transform: translateX(-5vw) } to{ transform: translateX(105vw) } }

/* ---------------- readouts ---------------- */
.tw-hud{ position: absolute; top:0; left:0; right:0; z-index: 6; padding: 8px 11px 7px;
  background: linear-gradient(180deg, rgba(5,11,19,.86) 0%, rgba(5,11,19,.55) 62%, rgba(5,11,19,0) 100%);
  border-radius: 14px 14px 0 0; }
.tw-hud-row{ display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tw-place{ display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; }
.tw-place b{ font-size: 12.5px; font-weight: 600; color: #f4ecdb;
  text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.tw-place i{ font-size: 10.5px; font-style: normal; color: #a9c2d6;
  text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.tw-meter{ display: flex; align-items: center; gap: 6px; }
.tw-lab{ font-size: 10.5px; color: #cfdcea; opacity: .85; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.tw-bar{ display: block; width: 74px; height: 7px; border-radius: 6px; overflow: hidden;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.13); }
.tw-fill{ display: block; height: 100%; width: 100%; transition: width .2s linear; }
.tw-carbon{ background: linear-gradient(90deg,#e0584b,#e8b84b,#3fcf8e); }
.tw-tide{ width: 0%; background: linear-gradient(90deg,#5fb6e0,#1d5f8c); }
.tw-num{ font-size: 10.5px; min-width: 32px; text-align: right; color: #e8eef4;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.tw-gaps{ font-size: 11px; color: #7ff0b8; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.tw-gaps.is-bad{ color: #ff8a7a; }
.tw-clock{ font-size: 12.5px; font-weight: 600; min-width: 36px; text-align: right;
  color: #f4ecdb; font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.tw-shield{ margin-top: 4px; font-size: 11px; color: #b9cfe0;
  text-shadow: 0 1px 6px rgba(0,0,0,.95); }
.tw-shield b{ color: #7ff0b8; }

/* ---------------- action layer ---------------- */
/* Swells, shells, bursts and the cannon are all drawn on one canvas over the
   scene. It also takes every click: a swell means fire, a brick means pull. */
.tw-fx{ position: absolute; inset: 0; z-index: 5; display: block; touch-action: manipulation; }

/* The chain counter: the payoff for killing swells close together. */
.tw-chain{ position: absolute; left: 0; right: 0; top: 17%; z-index: 7; text-align: center;
  pointer-events: none; font: 800 30px/1 var(--sans, system-ui, sans-serif); letter-spacing: 2px;
  color: #ffe9a8; text-shadow: 0 0 18px rgba(255,190,80,.75), 0 3px 10px rgba(0,0,0,.9); }
.tw-chain[hidden]{ display: none; }
.tw-chain.is-pop{ animation: tw-chainpop .34s cubic-bezier(.2,1.7,.4,1); }
@keyframes tw-chainpop{ from{ transform: scale(.5); opacity: .2 } to{ transform: scale(1); opacity: 1 } }

/* The cannon: three chambered bricks and what they add up to. */
.tw-cannon{ position: absolute; left: 8px; bottom: 4px; z-index: 7;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; pointer-events: none; }
.tw-chamber{ display: flex; gap: 4px; }
.tw-slot{ width: 27px; height: 37px; border-radius: 5px; overflow: hidden;
  background: linear-gradient(180deg,#FDF9F0,#E9DFC8);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.55); }
.tw-slot .tl{ position: relative; width: 100%; height: 100%; display: block; background: none; border: 0; }
.tw-slot .tl svg{ width: 100%; height: 100%; display: block; }
.tw-slot .tl .cnr{ display: none; }
.tw-slot.is-empty{ background: rgba(8,16,26,.62); box-shadow: inset 0 0 0 1px rgba(214,192,140,.28); }
.tw-load{ font-size: 11px; font-weight: 600; letter-spacing: .3px; padding: 2px 9px;
  border-radius: 999px; color: #f3ead6; background: rgba(6,12,20,.72);
  border: 1px solid rgba(214,192,140,.26); text-shadow: 0 1px 5px rgba(0,0,0,.9); }
.tw-load.is-tidal{ color: #10240f; background: linear-gradient(90deg,#ffe08a,#fff3c4);
  border-color: #ffd76a; text-shadow: none; animation: tw-ready .8s ease-in-out infinite; }
.tw-load.is-pung{ color: #ffd9a8; border-color: rgba(255,180,110,.55); }
.tw-load.is-run{ color: #b6f0d4; border-color: rgba(126,232,178,.5); }
.tw-load.is-flush{ color: #cfe4f5; }
.tw-load.is-empty{ color: #9fb2c4; }
@keyframes tw-ready{ 0%,100%{ box-shadow: 0 0 0 0 rgba(255,215,106,.9) } 50%{ box-shadow: 0 0 0 8px rgba(255,215,106,0) } }

/* A swell landing, or a shell going off: the whole coast takes the hit. */
.tw-wrap.is-quake{ animation: tw-quake .16s linear infinite; }
@keyframes tw-quake{
  0%{ transform: translate(0,0) }
  25%{ transform: translate(calc(var(--tw-quake,1) * -2px), calc(var(--tw-quake,1) * 1.5px)) }
  50%{ transform: translate(calc(var(--tw-quake,1) * 1.5px), calc(var(--tw-quake,1) * -2px)) }
  75%{ transform: translate(calc(var(--tw-quake,1) * 2px), calc(var(--tw-quake,1) * 1px)) }
  100%{ transform: translate(0,0) }
}
.tw-wrap.is-alarm::after{ content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none;
  border-radius: 14px; box-shadow: inset 0 0 0 4px rgba(255,96,74,.9);
  animation: tw-alarm .44s ease-in-out infinite; }
@keyframes tw-alarm{ 0%,100%{ opacity: .12 } 50%{ opacity: 1 } }

/* ---------------- the sea wall ---------------- */
.tw-board{
  position: absolute; left: 0; right: 0; bottom: 7%; z-index: 2;
  display: grid; grid-template-columns: repeat(var(--tw-cols, 16), 1fr);
  gap: 3px; padding: 5px 6px 7px;
  background: linear-gradient(180deg, #171b18 0%, #0c0f0d 100%);
  border-top: 2px solid rgba(214,192,140,.30);
  box-shadow: 0 -10px 26px rgba(0,0,0,.55), 0 8px 22px rgba(0,0,0,.5);
}
/* Tile bodies are ivory: that is the physical tile, not a theme color. The face
   artwork is drawn by ../shared/tiles.js into the .tl wrapper inside. */
.tw-cell{
  position: relative; aspect-ratio: 3 / 4; border-radius: 6px; cursor: pointer;
  background: linear-gradient(180deg,#FDF9F0,#E9DFC8);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.20), 0 2px 4px rgba(0,0,0,.45);
  border: 2px solid transparent; transition: transform .09s, border-color .12s;
  overflow: hidden;
}
.tw-cell .tl{ position: relative; width: 100%; height: 100%; display: block;
  background: none; border: 0; box-shadow: none; }
.tw-cell .tl svg{ width: 100%; height: 100%; display: block; }
.tw-cell .tl .cnr{ position: absolute; top: 1px; left: 3px; z-index: 3;
  font: 600 10px/1 Georgia, 'Times New Roman', serif; color: #9A7B3F; }
/* Hand-made PNG faces (../shared/tiles.js TILE_OVERRIDES: bam-1..9, dot-7,
   joker-1, flower-1..4) must scale to the tile box. Without this rule the
   232x336 artwork renders at natural size and the cell's overflow:hidden
   clips it to its blank top-left corner — tiles read as empty, and bam-1
   shows only its baked-in red numeral. */
.tw-cell .tl .tl-img, .tw-slot .tl .tl-img, .tw-demo .tl .tl-img{
  width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; }
.tw-cell.is-sel{ border-color: #e8b84b; transform: translateY(-3px) scale(1.06); }
.tw-cell.is-hint{ border-color: #ffd76a; animation: tw-hint 1.1s ease-in-out infinite; }
@keyframes tw-hint{ 0%,100%{box-shadow:0 0 0 0 rgba(255,215,106,.9)} 50%{box-shadow:0 0 0 7px rgba(255,215,106,0)} }
.tw-cell.is-pop{ animation: tw-pop .22s forwards; }
@keyframes tw-pop{ to{ transform: scale(.15) rotate(12deg); opacity: 0 } }
/* A brick the surf tore out: hollow, and the harbor shows through it. */
.tw-cell.is-hole{
  background: linear-gradient(180deg, rgba(9,24,36,.94), rgba(5,14,24,.97));
  box-shadow: inset 0 3px 9px rgba(0,0,0,.8), inset 0 0 14px rgba(90,180,226,.30);
  cursor: pointer;
}
.tw-cell.is-hole::after{
  content: ""; position: absolute; inset: 24%; border-radius: 3px;
  background: radial-gradient(closest-side, rgba(150,215,245,.45), rgba(150,215,245,0));
}
/* A course hardened by a Run: the surf cannot bite through it. */
.tw-cell.is-hard{
  border-color: #ffd76a;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.20), 0 0 11px rgba(255,215,106,.5);
}
/* Under the waterline: the brick is still there, just drowned. */
.tw-cell.is-wet::before{
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(120,200,236,.28), rgba(10,44,70,.42));
}

/* ---------------- start / result card ---------------- */
.tw-overlay{ position: absolute; inset: 0; z-index: 10; display: flex; align-items: center;
  justify-content: center; padding: 14px; background: rgba(5,9,13,.84);
  backdrop-filter: blur(3px); border-radius: 14px; }
.tw-overlay[hidden]{ display: none; }
.tw-card{ width: min(100%, 420px); max-height: 100%; overflow: auto; text-align: center;
  background: var(--g-card); border: 1px solid var(--g-line); border-radius: 16px;
  padding: 18px; box-shadow: var(--g-shadow-lg); }
.tw-card h1{ margin: 0 0 4px; font-family: var(--serif, Georgia, serif); font-size: 24px; letter-spacing: 2px;
  color: var(--g-strong); }
.tw-sub{ margin: 0 0 10px; font-size: 12px; color: var(--g-muted); }
.tw-blurb{ margin: 0 0 12px; font-size: 13px; line-height: 1.65; color: var(--g-fg); }
.tw-rules{ display: flex; flex-direction: column; gap: 7px; margin-bottom: 6px; }
.tw-rule{ display: flex; align-items: center; gap: 9px; text-align: left;
  background: var(--g-card-soft, rgba(255,255,255,.04)); border: 1px solid var(--g-line);
  border-radius: 10px; padding: 8px 9px; }
.tw-demo{ display: flex; gap: 3px; flex: 0 0 auto; }
.tw-demo .tl{ width: 25px; height: 34px; border-radius: 5px; background: linear-gradient(180deg,#FDF9F0,#E9DFC8);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.tw-demo .tl svg{ width: 100%; height: 100%; display: block; }
.tw-demo .tl .cnr{ display: none; }
.tw-eff{ font-size: 12px; line-height: 1.5; color: var(--g-fg); }
.tw-eff b{ color: var(--g-accent); }
.tw-note{ margin: 10px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--g-muted); }

/* ---------------- help sheet ---------------- */
.tw-help{ position: absolute; inset: 0; z-index: 12; display: flex; align-items: center;
  justify-content: center; padding: 14px; background: rgba(4,8,12,.88); border-radius: 14px; }
.tw-help[hidden]{ display: none; }
.tw-help-card{ position: relative; width: min(100%, 460px); max-height: 100%; overflow: auto;
  background: var(--g-card); border: 1px solid var(--g-line); border-radius: 16px; padding: 20px;
  box-shadow: var(--g-shadow-lg); }
.tw-help-card h2{ margin: 0 0 10px; font-family: var(--serif, Georgia, serif); font-size: 19px; color: var(--g-strong); }
.tw-help-card h3{ margin: 14px 0 5px; font-size: 13.5px; color: var(--g-accent); }
.tw-help-card p{ margin: 6px 0; font-size: 13px; line-height: 1.7; color: var(--g-fg); }
.tw-help-lead{ color: var(--g-fg); }
.tw-help-note{ margin-top: 12px; font-size: 11.5px; color: var(--g-muted);
  border-top: 1px dashed var(--g-line); padding-top: 10px; }
.tw-help-x{ position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; font-size: 20px;
  line-height: 1; background: none; border: 0; color: var(--g-muted); cursor: pointer; }

@media (max-width: 560px){
  .tw-hud{ padding: 7px 8px 6px; }
  .tw-hud-row{ gap: 7px; }
  .tw-bar{ width: 52px; }
  .tw-place b{ font-size: 11.5px; }
  .tw-lab{ font-size: 10px; }
  .tw-board{ gap: 2px; padding: 4px 4px 5px; }
  .tw-chain{ font-size: 23px; top: 15%; }
  .tw-slot{ width: 23px; height: 32px; }
  .tw-load{ font-size: 10px; padding: 2px 7px; }
}