:root { color-scheme: light dark; }
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
  background: radial-gradient(120% 120% at 50% 0%, #171826 0%, #0b0b0f 60%);
  color: #fff;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
  touch-action: manipulation;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.app { position: fixed; inset: 0; display: grid; grid-template-rows: 1fr; padding: env(safe-area-inset-top) 16px calc(env(safe-area-inset-bottom) + 28px); }
.screen { display: grid; grid-template-rows: 1fr; place-items: center; }
.hidden { display: none !important; }

.card { width: min(440px, 94vw); padding: 20px; border-radius: 22px; background: rgba(20,20,28,.75); border: 1px solid #232334; box-shadow: 0 10px 40px rgba(0,0,0,.45); backdrop-filter: blur(6px); }
.title { font-weight: 900; font-size: 28px; letter-spacing: .4px; margin: 8px 0 14px; text-align: center; }
.subtitle { opacity: .75; font-size: 13px; text-align: center; margin: -6px 0 18px; }

.btn { -webkit-tap-highlight-color: transparent; width: 100%; appearance: none; border: 0; border-radius: 14px; padding: 16px; font-size: 17px; font-weight: 800; letter-spacing: .3px; cursor: pointer; }
.btn.primary { background: linear-gradient(180deg,#7b66ff,#5a46ff); color: #fff; box-shadow: 0 10px 20px rgba(90,70,255,.35); }
.btn.ghost { background: #161620; color: #eaeaff; border: 1px solid #2a2a3a; }
.btn + .btn { margin-top: 12px; }

/* HUD */
.hud { width: min(520px, 98vw); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 14px; background: rgba(20,20,28,.75); border: 1px solid #232334; }
.hud .label { font-size: 11px; opacity: .7; margin-bottom: 3px; }
.hud .value { font-weight: 900; }
.hud-center { text-align: center; font-weight: 900; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hud-center .you, .hud-center .bot { background: #161620; border: 1px solid #2a2a3a; padding: 6px 8px; border-radius: 12px; }

/* Board */
.board { width: min(520px, 98vw); display: grid; place-items: center; gap: 12px; padding: 14px 0; }
.turns { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; margin-top: 8px; }
.turns .label { display:block; font-size: 11px; opacity: .7; margin-bottom: 4px; }
.dots { display: grid; grid-auto-flow: column; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #8ea0ff; box-shadow: 0 0 0 2px rgba(158,166,255,.25); }
.dot.empty { background: #262a44; box-shadow: 0 0 0 2px rgba(38,42,68,.35) inset; }

.dice-wrap { display: grid; grid-auto-flow: column; gap: 16px; }
.die { width: 96px; height: 96px; background: #f2f4ff; border-radius: 18px; border: 2px solid #9aa3ff; position: relative; box-shadow: inset 0 -6px 0 #d2d8ff; }
.pip { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #262d66; }

.turn-points { opacity: .9; font-weight: 800; }

.controls { width: min(520px, 98vw); display: grid; grid-auto-flow: column; gap: 10px; margin-bottom: 18px; }

.env { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); font-size: 11px; opacity: .75; padding: 6px 8px; border: 1px solid #24243a; background: #0f0f17; border-radius: 10px; }

/* Dice pip positions -- FIXED */
.die[data-v="1"] .p1 { left: 50%; top: 50%; transform: translate(-50%, -50%); }

.die[data-v="2"] .p1 { left: 20%; top: 20%; }
.die[data-v="2"] .p2 { right: 20%; bottom: 20%; }

.die[data-v="3"] .p1 { left: 20%; top: 20%; }
.die[data-v="3"] .p2 { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.die[data-v="3"] .p3 { right: 20%; bottom: 20%; }

.die[data-v="4"] .p1 { left: 20%; top: 20%; }
.die[data-v="4"] .p2 { right: 20%; top: 20%; }
.die[data-v="4"] .p3 { left: 20%; bottom: 20%; }
.die[data-v="4"] .p4 { right: 20%; bottom: 20%; }

.die[data-v="5"] .p1 { left: 20%; top: 20%; }
.die[data-v="5"] .p2 { right: 20%; top: 20%; }
.die[data-v="5"] .p3 { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.die[data-v="5"] .p4 { left: 20%; bottom: 20%; }
.die[data-v="5"] .p5 { right: 20%; bottom: 20%; }

.die[data-v="6"] .p1 { left: 20%; top: 20%; }
.die[data-v="6"] .p2 { right: 20%; top: 20%; }
.die[data-v="6"] .p3 { left: 20%; top: 50%; transform: translateY(-50%); }
.die[data-v="6"] .p4 { right: 20%; top: 50%; transform: translateY(-50%); }
.die[data-v="6"] .p5 { left: 20%; bottom: 20%; }
.die[data-v="6"] .p6 { right: 20%; bottom: 20%; }

/* Subtle pop animation for number changes */
@keyframes pop { 0% { transform: scale(1); } 20% { transform: scale(1.18); } 100% { transform: scale(1); } }
.pop { animation: pop 220ms ease-out; transform-origin: center; }

/* Red outline when die shows 1 */
.die.bust { border-color: #ff5d5d !important; box-shadow: inset 0 -6px 0 #ffc1c1, 0 0 0 2px rgba(255,93,93,.35); }

/* Dice roll wiggle */
@keyframes wiggle { 0%{ transform: rotate(0deg) scale(1);} 25%{ transform: rotate(6deg) scale(1.06);} 50%{ transform: rotate(0deg) scale(1);} 75%{ transform: rotate(-6deg) scale(1.06);} 100%{ transform: rotate(0deg) scale(1);} }
.die.rolling { animation: wiggle 500ms ease-in-out; }


/* Catalog grid */
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(120px,1fr)); gap: 12px; }
.gcard { user-select:none; -webkit-tap-highlight-color: transparent; background: #161620; border: 1px solid #2a2a3a; border-radius: 16px; padding: 12px; display: grid; place-items: center; gap: 6px; cursor: pointer; transition: transform .08s ease; }
.gcard:active { transform: scale(.98); }
.gcard .gthumb { font-size: 28px; }
.gcard .gtitle { font-weight: 800; }
.gcard .gsub { font-size: 12px; opacity: .7; }
.gcard.disabled { opacity: .55; cursor: default; position: relative; }
.gcard.disabled::after { content: "Скоро"; position: absolute; right: 8px; bottom: 6px; font-size: 11px; opacity: .8; }

/* Rules screen */
.card.rules { width: min(520px, 96vw); }
.rules-scroll { max-height: 52vh; overflow: auto; padding: 4px 2px; }
.rules-list { margin: 0 0 10px 18px; font-size: 14px; line-height: 1.35; }
.rules-list li + li { margin-top: 6px; }
.tips { background: #11111a; border: 1px solid #24243a; border-radius: 12px; padding: 10px; }
.tips-title { font-weight: 800; margin-bottom: 6px; font-size: 13px; }
.tips ul { margin: 0 0 0 18px; padding: 0; font-size: 13px; line-height: 1.35; }
.tips li + li { margin-top: 4px; }
.rules-actions { display: grid; grid-auto-flow: column; gap: 10px; margin-top: 12px; }

/* Final screen */
.card.final { width: min(520px, 96vw); }
.final-scores { display: grid; gap: 10px; margin-top: 6px; }
.final-row { display: grid; grid-template-columns: 1fr auto; align-items: center; background: #161620; border: 1px solid #2a2a3a; border-radius: 12px; padding: 10px 12px; }
.final-row .name { opacity: .9; font-weight: 700; }
.final-row .score { font-weight: 900; font-size: 28px; letter-spacing: .3px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
#screen-final .card { animation: fadeUp 320ms ease-out; }


.box { background:#161620; border:1px solid #2a2a3a; border-radius:12px; padding:12px; }