/* ============================================================================
   Side A — the paper board.

   One geometry token drives the whole thing. --board-size sets --edge (the
   width of a ring tile), --corner is 1.55 edges, and every size on the board
   — type, padding, icons, the token — is a multiple of --edge. Change
   --board-size and the board rescales exactly, with nothing to re-tune.
   ============================================================================ */

:root{
  /* palette */
  --paper:#f3ead4; --tile:#f8f1de; --ink:#2a2622; --ink-2:#4a4035;
  --felt:#1d3a2c; --felt-lo:#15291f; --red:#d83a26; --red-deep:#b62b1c;
  --money:#2c6e4a; --money-lo:#1d4d33; --cream-edge:#e3d6b3;

  /* group colours */
  --g-brown:#7a4f2e; --g-lightblue:#9ad3e8; --g-pink:#d24f96; --g-orange:#e2872c;
  --g-red:#c5392f;   --g-yellow:#f0c021;    --g-green:#2f8a4f; --g-navy:#2b3f7a;

  /* geometry */
  --board-size: min(820px, calc(100vw - 28px), calc(100vh - 168px));
  --frame:  max(8px, calc(var(--board-size) * .018));
  --edge:   calc(var(--board-size) / 12.1);
  --corner: calc(var(--edge) * 1.55);

  /* type, all relative to one ring tile */
  --t-tile:   clamp(5px, calc(var(--edge) * .19), 9px);
  --t-deed:   calc(var(--edge) * .09);
  --t-corner: calc(var(--edge) * .14);
  --t-icon:   calc(var(--edge) * .40);

  --shadow-board: 0 28px 60px -20px rgba(0,0,0,.55),
                  0 6px 18px rgba(0,0,0,.35),
                  inset 0 0 0 1px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}

/* Any author `display` beats the UA rule for [hidden], and both stages set
   one — so hiding a side did nothing and the two rendered stacked. */
[hidden]{display:none!important}

html{min-height:100%;color-scheme:dark;background-color:var(--felt-lo);
  background-image:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.04) 0%, rgba(0,0,0,0) 50%),
    radial-gradient(ellipse at 50% 50%, var(--felt) 0%, var(--felt-lo) 70%, #0c1a13 100%);
}
body{min-height:100vh;min-height:100dvh;background:transparent;position:relative;
  overflow-x:hidden;color:var(--ink);font-family:"Lora",Georgia,serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.locked{overflow:hidden}
body.void{background:#000}
body.void::before,body.void::after{opacity:0}

/* felt grain */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:.18;mix-blend-mode:overlay;transition:opacity .4s;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
/* vignette */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  transition:opacity .4s;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%)}

.stage{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;padding:22px 14px 28px;gap:16px;min-height:100vh}

/* ------------------------------- the board -------------------------------- */

.board-wrap{position:relative;width:var(--board-size);height:var(--board-size)}

.board{position:relative;width:100%;height:100%;background:var(--paper);
  border:var(--frame) solid var(--ink);border-radius:4px;
  box-shadow:var(--shadow-board);overflow:hidden;display:grid;
  grid-template-columns:1.55fr repeat(9,1fr) 1.55fr;
  grid-template-rows:1.55fr repeat(9,1fr) 1.55fr}

/* paper grain inside the board */
.board::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='2'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .08  0 0 0 0 .05  0 0 0 .14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* --------------------------------- tiles ---------------------------------- */

.tile{position:relative;background:var(--tile);border:1px solid var(--ink);
  margin:-.5px;                       /* collapse the hairlines between cells */
  cursor:pointer;outline:none;font:inherit;color:var(--ink);overflow:hidden;
  transition:background .15s, transform .22s cubic-bezier(.4,0,.2,1), box-shadow .2s;
  animation:deal .5s cubic-bezier(.2,.75,.3,1.05) backwards;
  animation-delay:calc(.15s + var(--i,0)*.018s)}
@keyframes deal{from{opacity:0;transform:scale(.55) rotate(-10deg)}to{opacity:1;transform:none}}
.tile:hover{background:#fbf5e2;transform:scale(1.06);z-index:4;
  box-shadow:0 6px 14px rgba(0,0,0,.18)}
.tile.is-corner:hover{transform:scale(1.04)}
.tile:focus-visible{background:#fbf5e2;box-shadow:inset 0 0 0 3px var(--red);z-index:5}
.tile.here{background:#fff7df;box-shadow:inset 0 0 0 2px var(--red)}

/* The inner layer is what rotates, never the cell. Left and right columns get
   their width and height swapped first, so a line of text breaks against the
   dimension it will actually occupy once rotated. */
.tile-inner{position:absolute;top:50%;left:50%;display:flex;flex-direction:column;
  align-items:stretch;justify-content:flex-start;transform-origin:center center;
  pointer-events:none;width:100%;height:100%;transform:translate(-50%,-50%)}
.tile.side-top   .tile-inner{transform:translate(-50%,-50%) rotate(180deg)}
.tile.side-left  .tile-inner{width:var(--edge);height:var(--corner);
  transform:translate(-50%,-50%) rotate(90deg)}
.tile.side-right .tile-inner{width:var(--edge);height:var(--corner);
  transform:translate(-50%,-50%) rotate(-90deg)}

/* property */
.prop-band{flex:0 0 auto;height:calc(var(--edge) * .30);
  border-bottom:1.5px solid var(--ink)}
.prop-body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;gap:calc(var(--edge) * .06);
  padding:calc(var(--edge) * .10) calc(var(--edge) * .05) calc(var(--edge) * .08)}
.prop-name{font-family:"Bungee","Oswald",sans-serif;font-size:var(--t-tile);
  line-height:1;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);
  word-break:break-word;text-wrap:balance;hyphens:auto}
/* --t-tile is capped at 9px, so on a short viewport (where --edge falls to
   ~60px) a seven-letter word in Bungee is already wider than the tile. The
   steps have to start early and bite hard. */
.name-md .prop-name{font-size:calc(var(--t-tile) * .80)}
.name-sm .prop-name{font-size:calc(var(--t-tile) * .68)}
.name-xs .prop-name{font-size:calc(var(--t-tile) * .58)}

/* a square with nothing written in it yet — a ruled line, waiting */
.tile.is-blank .prop-body::after,
.tile.is-blank .spec::after{content:"";width:58%;height:0;
  border-bottom:1px dashed rgba(42,38,34,.26)}

.g-brown .prop-band{background:var(--g-brown)}
.g-lightblue .prop-band{background:var(--g-lightblue)}
.g-pink .prop-band{background:var(--g-pink)}
.g-orange .prop-band{background:var(--g-orange)}
.g-red .prop-band{background:var(--g-red)}
.g-yellow .prop-band{background:var(--g-yellow)}
.g-green .prop-band{background:var(--g-green)}
.g-navy .prop-band{background:var(--g-navy)}

/* chance, chest, station, utility, tax */
.spec{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:calc(var(--edge) * .07);
  padding:calc(var(--edge) * .08) calc(var(--edge) * .05)}
.spec-label{font-family:"Oswald",sans-serif;font-weight:600;font-size:var(--t-tile);
  text-transform:uppercase;letter-spacing:.04em;line-height:1.05;text-wrap:balance}
.spec-icon{width:var(--t-icon);height:var(--t-icon);display:block}

/* -------------------------------- corners --------------------------------- */

.corner-cell{position:relative;width:100%;height:100%;display:flex;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--corner) * .10);gap:calc(var(--corner) * .05);
  background:var(--tile);overflow:hidden}
.corner-cell::before{content:"";position:absolute;width:80%;height:80%;z-index:0}
.corner-go::before{bottom:0;right:0;clip-path:polygon(100% 0,100% 100%,0 100%);
  background:linear-gradient(135deg,#f6dab0 0%,#f0c98c 100%)}
.corner-jail::before{bottom:0;left:0;clip-path:polygon(0 0,100% 100%,0 100%);
  background:linear-gradient(225deg,#c8dfe9 0%,#a8c8d8 100%)}
.corner-parking::before{top:0;left:0;clip-path:polygon(0 0,100% 0,0 100%);
  background:linear-gradient(315deg,#cbe2c0 0%,#a8caa3 100%)}
/* The hole is already here, from the first second. It is the one corner that
   is not paper — a cream tile with a dark wedge left the label unreadable and,
   worse, made it look like just another corner. */
.corner-blackhole{background:radial-gradient(ellipse at 72% 26%,
  #23232c 0%, #131318 55%, #08080b 100%)}
.corner-blackhole::before{top:0;right:0;clip-path:polygon(0 0,100% 0,100% 100%);
  background:linear-gradient(45deg,rgba(226,135,44,0) 0%,rgba(226,135,44,.22) 100%)}
.corner-cell > *{position:relative;z-index:1}

.corner-label{font-family:"Bungee","Oswald",sans-serif;font-size:var(--t-corner);
  text-transform:uppercase;letter-spacing:.02em;line-height:.95;color:var(--ink)}
.corner-art{width:calc(var(--corner) * .34);height:calc(var(--corner) * .34);
  display:block}

.corner-go .corner-label{color:var(--red);font-size:calc(var(--t-corner) * 1.9)}
.corner-go .corner-art{width:calc(var(--corner) * .42);height:calc(var(--corner) * .42)}
.corner-jail .corner-label{font-size:calc(var(--t-corner) * .78)}
.corner-blackhole .corner-label{font-size:calc(var(--t-corner) * .84);
  color:#f3ead4;text-shadow:0 0 10px rgba(255,180,90,.55),0 1px 2px #000}

/* jail bars, drawn rather than iconised */
.jail-art{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  width:calc(var(--corner) * .32);height:calc(var(--corner) * .32)}
.jail-art span{background:var(--ink);border-radius:1px}

/* the P badge */
.park-badge{width:calc(var(--corner) * .38);height:calc(var(--corner) * .38);
  border:3px solid var(--money);border-radius:50%;display:grid;place-items:center;
  font-family:"Bungee","Oswald",sans-serif;font-size:calc(var(--corner) * .22);
  color:var(--money);background:var(--tile)}

/* --------------------------------- crest ---------------------------------- */

.crest{position:absolute;inset:var(--corner);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--edge) * .35);gap:calc(var(--edge) * .22);
  z-index:1;pointer-events:none;user-select:none;overflow:hidden;isolation:isolate}
.crest::before{content:"";position:absolute;inset:-10%;z-index:-1;opacity:.85;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,245,215,.55) 0deg 9deg, transparent 9deg 18deg);
  mask:radial-gradient(circle at center, black 12%, rgba(0,0,0,.85) 60%, transparent 95%);
  -webkit-mask:radial-gradient(circle at center, black 12%, rgba(0,0,0,.85) 60%, transparent 95%);
  animation:sunspin 120s linear infinite;transform-origin:50% 50%}
@keyframes sunspin{to{transform:rotate(360deg)}}
.crest::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse at center, rgba(243,234,212,.55) 0%, transparent 65%)}

.ribbon-wrap{position:relative;display:inline-block;
  width:min(calc(var(--edge) * 7.2), 78%);aspect-ratio:5.6/1;
  transform:rotate(-2deg);filter:drop-shadow(0 12px 18px rgba(0,0,0,.35));
  margin:calc(var(--edge) * .06) 0}
.ribbon-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ribbon-text{position:absolute;inset:0;display:grid;place-items:center;
  font-family:"Bungee","Oswald",sans-serif;font-size:calc(var(--edge) * .78);
  letter-spacing:.02em;color:var(--paper);line-height:1;
  text-shadow:0 3px 0 rgba(0,0,0,.22);padding:0 calc(var(--edge) * .6)}

.crest-tagline{font-family:"Lora",serif;font-style:italic;
  font-size:calc(var(--edge) * .26);color:var(--ink);max-width:75%;line-height:1.25}
.crest-bio{font-family:"Oswald",sans-serif;font-weight:500;
  font-size:calc(var(--edge) * .16);text-transform:uppercase;letter-spacing:.18em;
  color:var(--ink-2);max-width:88%;line-height:1.4}

/* --------------------------------- token ---------------------------------- */

.token{position:absolute;z-index:3;width:calc(var(--edge) * .62);
  pointer-events:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45));
  transition:left .28s cubic-bezier(.4,0,.2,1), top .28s cubic-bezier(.4,0,.2,1)}
.token svg{display:block;width:100%;height:auto}

/* -------------------------------- play bar -------------------------------- */

.playbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  justify-content:center;color:var(--paper);
  animation:rise .6s ease-out both .8s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.dice{display:flex;gap:12px}
.die{width:52px;height:52px;background:var(--tile);border-radius:9px;
  display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:8px;gap:2px;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.10), inset 0 0 0 2px var(--cream-edge),
             0 4px 0 rgba(0,0,0,.35), 0 8px 14px rgba(0,0,0,.45)}
.die.rolling{animation:shake .09s linear infinite}
@keyframes shake{0%,100%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(-2px,1px) rotate(-6deg)}
  50%{transform:translate(2px,-2px) rotate(5deg)}
  75%{transform:translate(-1px,-1px) rotate(-3deg)}}
.pip{align-self:center;justify-self:center;width:9px;height:9px;border-radius:50%;
  background:var(--ink);opacity:0}
.die[data-v="1"] .pip:nth-child(5),
.die[data-v="2"] .pip:nth-child(1),.die[data-v="2"] .pip:nth-child(9),
.die[data-v="3"] .pip:nth-child(1),.die[data-v="3"] .pip:nth-child(5),.die[data-v="3"] .pip:nth-child(9),
.die[data-v="4"] .pip:nth-child(1),.die[data-v="4"] .pip:nth-child(3),.die[data-v="4"] .pip:nth-child(7),.die[data-v="4"] .pip:nth-child(9),
.die[data-v="5"] .pip:nth-child(1),.die[data-v="5"] .pip:nth-child(3),.die[data-v="5"] .pip:nth-child(5),.die[data-v="5"] .pip:nth-child(7),.die[data-v="5"] .pip:nth-child(9),
.die[data-v="6"] .pip:nth-child(1),.die[data-v="6"] .pip:nth-child(3),.die[data-v="6"] .pip:nth-child(4),.die[data-v="6"] .pip:nth-child(6),.die[data-v="6"] .pip:nth-child(7),.die[data-v="6"] .pip:nth-child(9){opacity:1}

.roll-btn{font-family:"Bungee","Oswald",sans-serif;font-size:15px;letter-spacing:.03em;
  color:#fff5e6;background:var(--red);border:none;padding:15px 26px;border-radius:10px;
  cursor:pointer;box-shadow:0 5px 0 var(--red-deep), 0 10px 18px -6px rgba(0,0,0,.6);
  transition:transform .08s ease, box-shadow .08s ease}
.roll-btn:hover{transform:translateY(-2px);
  box-shadow:0 7px 0 var(--red-deep), 0 14px 22px -6px rgba(0,0,0,.6)}
.roll-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--red-deep)}
.roll-btn[disabled]{opacity:.55;cursor:wait;transform:none;
  box-shadow:0 5px 0 var(--red-deep)}
.hint{width:100%;text-align:center;font-style:italic;color:rgba(243,234,212,.72);
  font-size:14px;min-height:1.4em}

/* --------------------------------- modal ---------------------------------- */

.overlay{position:fixed;inset:0;z-index:60;background:rgba(12,26,19,.78);
  backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;
  padding:22px}
.overlay.open{display:flex}
.card{width:min(92vw,340px);background:var(--tile);border:3px solid var(--ink);
  border-radius:10px;overflow:hidden;animation:pop .3s cubic-bezier(.2,.8,.3,1.2);
  box-shadow:0 26px 50px -14px rgba(0,0,0,.7)}
@keyframes pop{from{opacity:0;transform:scale(.8) translateY(12px)}to{opacity:1;transform:none}}
.card-head{padding:16px 18px;border-bottom:3px solid var(--ink);position:relative}
.card-kind{font-family:"Oswald",sans-serif;text-transform:uppercase;
  letter-spacing:.28em;font-size:.62rem;font-weight:600;opacity:.85}
.card-title{font-family:"Bungee",sans-serif;font-size:1.3rem;line-height:1.05;margin-top:6px}
.card-body{padding:18px 20px 22px;text-align:center}
.card-body p{font-family:"Lora",serif;font-size:.98rem;line-height:1.55}
.card-body .unwritten{font-family:"Oswald",sans-serif;text-transform:uppercase;
  letter-spacing:.14em;font-size:.7rem;opacity:.42}
.x{position:absolute;top:8px;right:10px;width:28px;height:28px;border-radius:50%;
  border:2px solid currentColor;background:transparent;color:inherit;cursor:pointer;
  font-family:"Oswald",sans-serif;font-size:1rem;display:grid;place-items:center}
.x:hover{background:rgba(255,255,255,.18)}

/* --------------------------------- mobile --------------------------------- */

@media (max-width:620px){
  :root{--board-size: min(calc(100vw - 16px), calc(100vh - 230px))}
  .tile:not(.is-corner) .prop-name,
  .tile:not(.is-corner) .spec-label{display:none}
  .tile.is-blank .prop-body::after,.tile.is-blank .spec::after{display:none}
  .prop-band{height:calc(var(--edge) * .38)}
  .spec-icon{width:calc(var(--edge) * .52);height:calc(var(--edge) * .52)}
  .corner-label{font-size:calc(var(--t-corner) * .92)}
  .die{width:44px;height:44px}
  .pip{width:7px;height:7px}
}
@media (prefers-reduced-motion:reduce){
  .tile,.playbar{animation:none!important}
  .tile:hover{transform:none}
  .token{transition:none}
  .die.rolling{animation:none}
  .crest::before{animation:none}
}