/* ══════════════════════════════════════════
   MONOPOLY — City Edition  |  style.css
   ══════════════════════════════════════════ */

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

:root {
  --bg:       #0A1628;
  --bg2:      #0D2137;
  --accent:   #1E88E5;
  --gold:     #FFD700;
  --gold2:    #FFC107;
  --card:     rgba(255,255,255,.07);
  --border:   rgba(255,255,255,.12);
  --text:     #E8EAF6;
  --muted:    rgba(255,255,255,.45);
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.hidden { display: none !important; }
.screen { width:100vw; height:100dvh; overflow:hidden; position:fixed; inset:0; }

/* ════════════════════════════
   SPLASH
   ════════════════════════════ */
#splash {
  position: fixed; inset: 0; z-index: 999;
  background: radial-gradient(ellipse at 50% 60%, #0f2545 0%, #070e1a 100%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease;
}
.splash-inner { display:flex; flex-direction:column; align-items:center; gap:20px; width:80vw; max-width:320px; }
.splash-board {
  position:relative; width:220px; height:220px;
  border:3px solid var(--gold); border-radius:8px;
  background:radial-gradient(ellipse at center, #0e2040 0%, #070e1a 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 60px rgba(255,215,0,.25), 0 0 120px rgba(30,136,229,.15);
}
.s-corner { position:absolute; width:14px; height:14px; border-color:var(--gold); border-style:solid; border-width:0; }
.s-corner.tl { top:8px;  left:8px;  border-top-width:2px; border-left-width:2px; }
.s-corner.tr { top:8px;  right:8px; border-top-width:2px; border-right-width:2px; }
.s-corner.bl { bottom:8px; left:8px;  border-bottom-width:2px; border-left-width:2px; }
.s-corner.br { bottom:8px; right:8px; border-bottom-width:2px; border-right-width:2px; }
.splash-logo { text-align:center; }
.logo-top  { font-size:11px; letter-spacing:4px; color:var(--muted); }
.logo-main { font-size:36px; font-weight:900; letter-spacing:6px; color:var(--gold);
             text-shadow:0 0 30px rgba(255,215,0,.6); }
.logo-sub  { font-size:10px; letter-spacing:5px; color:var(--muted); }
.splash-dice-wrap { display:flex; gap:16px; }
.mini-dice { font-size:36px; animation:diceSpin 2s ease-in-out infinite alternate; filter:drop-shadow(0 0 6px var(--gold)); }
.mini-dice.d2 { animation-delay:.7s; animation-direction:alternate-reverse; }
@keyframes diceSpin { from{transform:rotate(-15deg) scale(.9);} to{transform:rotate(15deg) scale(1.1);} }
.splash-loading { width:100%; }
.load-bar  { height:4px; background:rgba(255,255,255,.12); border-radius:4px; overflow:hidden; }
.load-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--gold)); border-radius:4px; transition:width .04s linear; width:0; }
.load-pct  { text-align:center; font-size:11px; color:var(--muted); margin-top:6px; letter-spacing:1px; }

/* ════════════════════════════
   REVEAL SCREEN
   ════════════════════════════ */
#reveal {
  background:radial-gradient(ellipse at 50% 50%, #0f2545 0%, #040b16 100%);
  display:flex; align-items:center; justify-content:center;
}
.reveal-bg { width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.reveal-particles { position:absolute; inset:0; pointer-events:none; }
.reveal-particle  { position:absolute; border-radius:50%; animation:revealFloat linear infinite; }
@keyframes revealFloat { 0%{transform:translateY(100vh) scale(0);opacity:0;} 20%{opacity:1;} 80%{opacity:.7;} 100%{transform:translateY(-20vh) scale(1.5) rotate(360deg);opacity:0;} }
.reveal-center { position:relative; text-align:center; z-index:2; }
.reveal-ring   { width:120px; height:120px; border:2px solid rgba(255,215,0,.3); border-radius:50%; margin:0 auto 20px; animation:revealRing 2s linear infinite; }
@keyframes revealRing { to{transform:rotate(360deg);} }
.reveal-icon  { font-size:52px; position:absolute; top:34px; left:50%; transform:translateX(-50%); animation:revealBounce 1s ease-in-out infinite alternate; }
@keyframes revealBounce { from{transform:translateX(-50%) scale(.9);} to{transform:translateX(-50%) scale(1.1);} }
.reveal-title { font-size:24px; font-weight:900; letter-spacing:6px; color:var(--gold); text-shadow:0 0 20px rgba(255,215,0,.5); margin-top:16px; }
.reveal-sub   { font-size:12px; color:var(--muted); letter-spacing:2px; margin-top:4px; margin-bottom:18px; }
.reveal-bar   { width:200px; margin:0 auto; height:3px; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden; }
.reveal-fill  { height:100%; background:linear-gradient(90deg,var(--accent),var(--gold)); width:0; transition:width .03s linear; border-radius:3px; }

/* ════════════════════════════
   LANDING
   ════════════════════════════ */
#landing {
  background:radial-gradient(ellipse at 20% 10%, #0f2545 0%, var(--bg) 70%);
  display:flex; flex-direction:column;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.land-header { padding:18px 20px 0; display:flex; align-items:center; justify-content:space-between; }
.land-logo   { font-size:20px; font-weight:900; letter-spacing:4px; color:var(--gold); }
.land-badge  { font-size:9px; font-weight:700; letter-spacing:2px; background:rgba(255,215,0,.15); border:1px solid rgba(255,215,0,.3); color:var(--gold); padding:3px 8px; border-radius:20px; }
.land-body   { padding:0 20px 20px; display:flex; flex-direction:column; gap:16px; }
.land-board-preview {
  position:relative; background:var(--bg2); border-radius:12px;
  border:1px solid var(--border); height:110px;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  overflow:hidden; margin-top:12px;
}
.prev-corner { display:flex; align-items:center; justify-content:center; font-size:22px; border:1px solid var(--border); }
.prev-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; background:var(--bg2); padding:6px 14px; border-radius:8px; border:1px solid var(--border); }
.prev-title  { font-size:12px; font-weight:900; letter-spacing:3px; color:var(--gold); }
.prev-sub    { font-size:8px; color:var(--muted); letter-spacing:1px; }
h2.land-welcome { font-size:22px; font-weight:700; }
.land-desc   { font-size:13px; color:var(--muted); line-height:1.6; }
.land-stats  { display:flex; align-items:center; gap:8px; background:var(--card); border-radius:10px; border:1px solid var(--border); padding:12px 16px; }
.stat        { display:flex; flex-direction:column; align-items:center; flex:1; }
.stat-n      { font-size:22px; font-weight:900; color:var(--gold); }
.stat-l      { font-size:10px; color:var(--muted); letter-spacing:1px; }
.stat-div    { width:1px; height:30px; background:var(--border); }
.btn-play {
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg,#1565C0,#1E88E5);
  border:none; border-radius:14px; padding:16px 20px;
  font-size:16px; font-weight:900; letter-spacing:3px; color:#fff;
  cursor:pointer; box-shadow:0 6px 24px rgba(30,136,229,.4);
  transition:transform .12s, box-shadow .12s; width:100%;
}
.btn-play:active { transform:scale(.96); box-shadow:0 2px 8px rgba(30,136,229,.3); }
.btn-dice-icon   { font-size:22px; animation:diceSpin 2s ease-in-out infinite alternate; }
.btn-arrow       { margin-left:4px; opacity:.7; }

/* ════════════════════════════
   GAME BOARD
   ════════════════════════════ */
#game {
  display:flex; flex-direction:column;
  background:radial-gradient(ellipse at 30% 20%, #0e2040 0%, #060e1c 100%);
}
.game-bar  { display:flex; align-items:center; gap:8px; padding:10px 12px; background:rgba(0,0,0,.3); border-bottom:1px solid var(--border); flex-shrink:0; }
.game-logo { font-size:13px; font-weight:900; letter-spacing:3px; color:var(--gold); }
.game-info { flex:1; font-size:11px; color:var(--muted); text-align:center; }
.game-pos  { font-size:11px; color:var(--accent); font-weight:600; }
.board-wrap { position:relative; flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.board {
  display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr);
  width:min(92vw, calc(92dvh - 80px)); aspect-ratio:1;
  background:linear-gradient(135deg,#0e2040 0%,#071428 100%);
  border:2px solid rgba(255,215,0,.4); border-radius:10px; overflow:hidden;
  box-shadow:0 0 40px rgba(255,215,0,.1), 0 0 80px rgba(30,136,229,.08);
  position:relative;
}

.sq { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
      overflow:hidden; cursor:default;
      border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);
      transition:background .2s, box-shadow .2s; }
.sq.active { background:rgba(30,136,229,.18) !important; box-shadow:inset 0 0 12px rgba(30,136,229,.4) !important; }
.sq.done   { background:rgba(255,215,0,.05); }

.sq-prop   { flex-direction:column; padding:3px 2px; gap:1px; }
.prop-band { width:100%; height:7px; background:var(--band,#888); border-radius:1px; }
.prop-icon { font-size:15px; }
.prop-name { font-size:6.5px; font-weight:700; color:var(--text); text-align:center; line-height:1.2; }
.prop-city { font-size:5.5px; color:var(--muted); text-align:center; }
.prop-price{ font-size:6px; color:var(--gold); font-weight:700; }
.sq-final  { box-shadow:inset 0 0 8px rgba(255,215,0,.15); }

.sq-corner { gap:2px; }
.corner-icon  { font-size:22px; }
.corner-tag   { font-size:7px; font-weight:900; letter-spacing:1px; }
.go-tag       { color:var(--gold); }
.fp-tag       { color:#4CAF50; }
.corner-arrow { font-size:18px; color:var(--gold); position:absolute; top:3px; right:5px; }
.corner-sub   { font-size:6px; color:var(--muted); }

.board-center { display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.06); }
.center-map   { position:absolute; inset:0; opacity:.3; }
.map-grid     { position:absolute; inset:0; background-image:linear-gradient(rgba(30,136,229,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(30,136,229,.2) 1px,transparent 1px); background-size:20px 20px; }
.map-route    { position:absolute; inset:10px; border:1px dashed rgba(255,215,0,.3); border-radius:50%; }
.map-cities   { position:absolute; inset:0; }
.map-city-dot { position:absolute; font-size:10px; display:flex; flex-direction:column; align-items:center; }
.map-city-dot small { font-size:7px; color:var(--muted); }
.center-content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; padding:8px; }
.center-logo  { font-size:10px; font-weight:900; letter-spacing:4px; color:var(--gold); opacity:.6; }

/* 3D Dice */
.dice-scene { width:56px; height:56px; perspective:160px; cursor:pointer; }
.dice-cube  { width:100%; height:100%; transform-style:preserve-3d; transform:rotateX(-12deg) rotateY(28deg); transition:transform .65s cubic-bezier(.2,.8,.2,1); }
.dice-face  { position:absolute; width:56px; height:56px; border:2px solid rgba(255,215,0,.55); border-radius:8px; background:linear-gradient(135deg,#163a6a 0%,#0e2748 100%); display:flex; align-items:center; justify-content:center; backface-visibility:hidden; box-shadow:inset 0 0 8px rgba(30,136,229,.3); }
.face-front  { transform:translateZ(28px); }
.face-back   { transform:rotateY(180deg) translateZ(28px); }
.face-right  { transform:rotateY(90deg) translateZ(28px); }
.face-left   { transform:rotateY(-90deg) translateZ(28px); }
.face-top    { transform:rotateX(90deg) translateZ(28px); }
.face-bottom { transform:rotateX(-90deg) translateZ(28px); }
.dot-grid    { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:6px; width:100%; height:100%; }
.dot-grid span   { border-radius:50%; background:transparent; }
.dot-grid span.d { background:var(--gold); box-shadow:0 0 4px rgba(255,215,0,.8); }
.dice-result { font-size:11px; color:var(--gold); font-weight:700; min-height:15px; text-align:center; }
.btn-roll    { background:linear-gradient(135deg,#1565C0,#1E88E5); border:none; border-radius:10px; padding:8px 16px; font-size:12px; font-weight:800; color:#fff; cursor:pointer; transition:transform .1s; box-shadow:0 4px 14px rgba(30,136,229,.4); letter-spacing:1px; }
.btn-roll:active { transform:scale(.93); }
.roll-hint   { font-size:9px; color:var(--muted); letter-spacing:1px; }

/* Token — Telegram profile photo */
.token {
  position:absolute; z-index:10; pointer-events:none;
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,#1565C0,#FFD700);
  border:2.5px solid var(--gold);
  box-shadow:0 0 12px rgba(255,215,0,.6);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; overflow:hidden; transition:none;
}
.token #token-fallback { font-size:14px; line-height:1; }
.token.bounce { animation:tokenBounce .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes tokenBounce { 0%,100%{transform:translateY(0);} 20%{transform:translateY(-14px);} 50%{transform:translateY(-7px);} 80%{transform:translateY(-3px);} }

/* ════════════════════════════
   PROPERTY MODAL
   ════════════════════════════ */
.modal { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.65); backdrop-filter:blur(6px); display:flex; align-items:flex-end; }
.modal-sheet { width:100%; border-radius:20px 20px 0 0; background:linear-gradient(180deg,#0e2040 0%,#0a1628 100%); border-top:1px solid var(--border); padding:0 0 28px; animation:sheetUp .35s cubic-bezier(.25,.8,.25,1); }
@keyframes sheetUp { from{transform:translateY(100%);} to{transform:translateY(0);} }
.modal-handle { width:36px; height:4px; background:rgba(255,255,255,.18); border-radius:4px; margin:10px auto 0; }
.modal-band   { height:8px; width:100%; background:#1E88E5; }
.modal-icon   { text-align:center; font-size:44px; margin:14px 0 4px; }
.modal-group  { text-align:center; font-size:9px; letter-spacing:2px; color:var(--muted); }
.modal-name   { text-align:center; font-size:22px; font-weight:900; margin:4px 0; padding:0 20px; }
.modal-loc    { text-align:center; font-size:12px; color:var(--muted); }
.modal-divider{ height:1px; background:var(--border); margin:14px 20px; }
.modal-card   { margin:0 20px 16px; background:rgba(30,136,229,.1); border:1px solid rgba(30,136,229,.25); border-radius:12px; padding:14px 16px; }
.card-label   { font-size:9px; letter-spacing:2px; color:var(--accent); font-weight:700; margin-bottom:8px; }
.card-text    { font-size:14px; line-height:1.65; color:var(--text); }
.btn-done     { display:block; width:calc(100% - 40px); margin:0 auto; background:linear-gradient(135deg,#1565C0,#1E88E5); border:none; border-radius:12px; padding:14px; font-size:14px; font-weight:700; color:#fff; cursor:pointer; }

/* ════════════════════════════
   TOAST
   ════════════════════════════ */
.toast { position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:200;
         background:rgba(13,33,55,.95); border:1px solid var(--border); border-radius:20px;
         padding:10px 18px; display:flex; align-items:center; gap:8px;
         font-size:13px; animation:toastIn .3s ease; max-width:80vw; text-align:center; }
@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(-12px);} to{opacity:1;transform:translateX(-50%) translateY(0);} }

/* ════════════════════════════
   CONFESSION — paper letter
   ════════════════════════════ */
#confession {
  background:radial-gradient(ellipse at 50% 30%, #0f2545 0%, #040810 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.conf-scene {
  position:relative; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:20px 18px;
}
.conf-stars    { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.conf-star-el  { position:absolute; top:110%; animation:starFloat linear infinite; pointer-events:none; opacity:.7; }
@keyframes starFloat { 0%{top:110%;opacity:0;} 10%{opacity:.8;} 90%{opacity:.6;} 100%{top:-10%;opacity:0;} }

/* Name at top — floats above the paper */
.conf-to {
  position:relative; z-index:2;
  font-size:28px; font-weight:900;
  color:var(--gold);
  letter-spacing:2px;
  text-shadow:0 0 24px rgba(255,215,0,.5);
  margin-bottom:16px;
  animation:nameAppear .6s cubic-bezier(.25,.8,.25,1) both;
}
@keyframes nameAppear {
  from { opacity:0; transform:translateY(-16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Perspective wrapper for 3-D unfold */
.letter-perspective {
  perspective: 900px;
  perspective-origin: 50% -10%;
  position:relative; z-index:2;
  width:100%; max-width:360px;
}

/* Paper card — starts folded, unfolds on .unfolded class */
.letter-paper {
  position:relative;
  background:#FFFEF2;
  border-radius:4px;
  padding:16px 18px 14px;
  box-shadow:0 8px 40px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);
  transform-origin:top center;
  transform:rotateX(-90deg);
  opacity:0;
  /* lined paper */
  background-image:linear-gradient(transparent calc(100% - 1px), rgba(100,140,200,.18) 1px);
  background-size:100% 26px;
}
.letter-paper.unfolded {
  animation:paperUnfold 1.3s cubic-bezier(.25,.8,.25,1) forwards;
}
@keyframes paperUnfold {
  0%   { transform:rotateX(-90deg); opacity:0; }
  45%  { transform:rotateX(10deg);  opacity:1; }
  65%  { transform:rotateX(-5deg);  opacity:1; }
  82%  { transform:rotateX(3deg);   opacity:1; }
  100% { transform:rotateX(0deg);   opacity:1; }
}

/* Red margin line (classic lined paper) */
.letter-lines { position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none; border-radius:4px; overflow:hidden; }
.letter-lines::before {
  content:''; position:absolute; left:30px; top:0; bottom:0; width:1px;
  background:rgba(255,120,120,.28);
}

.letter-header {
  display:flex; align-items:center; gap:6px;
  margin-bottom:10px; padding-bottom:8px;
  border-bottom:1px solid rgba(100,140,200,.2);
}
.letter-park-tag { font-size:9px; font-weight:900; letter-spacing:2px; color:#1A237E; opacity:.65; }
.letter-star     { font-size:13px; }

.letter-body {
  font-size:14px;
  line-height:1.78;
  color:#1a2a1a;
  font-family:'Georgia','Times New Roman',serif;
  white-space:pre-line;
  padding-left:4px;
}

.letter-sign {
  margin-top:14px;
  font-size:13px;
  font-style:italic;
  color:#c0392b;
  text-align:right;
  opacity:.7;
}

.letter-actions {
  display:flex; flex-direction:column; gap:10px;
  margin-top:16px;
}
.btn-respond-yes, .btn-respond-no {
  border:none; border-radius:10px; padding:13px 16px;
  font-size:14px; font-weight:700; cursor:pointer; width:100%;
  transition:transform .12s, box-shadow .12s;
}
.btn-respond-yes {
  background:linear-gradient(135deg,#1565C0,#1E88E5);
  color:#fff;
  box-shadow:0 4px 16px rgba(30,136,229,.4);
}
.btn-respond-no  {
  background:rgba(0,0,0,.08);
  color:#555;
  border:1px solid rgba(0,0,0,.12);
}
.btn-respond-yes:active { transform:scale(.96); }
.btn-respond-no:active  { transform:scale(.96); }

/* ════════════════════════════
   RESPONSE SCREEN
   ════════════════════════════ */
#response {
  background:radial-gradient(ellipse at 50% 40%, #0f2545 0%, #040810 100%);
  display:flex; align-items:center; justify-content:center;
}
.response-inner { text-align:center; padding:30px 24px; animation:fadeIn .6s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
.r-emoji { font-size:72px; display:block; margin-bottom:18px; }
.r-title  { font-size:22px; font-weight:900; color:var(--gold); margin-bottom:14px; }
.r-text   { font-size:15px; line-height:1.7; color:var(--muted); }