* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden;
  background: radial-gradient(130% 110% at 50% 0%, #243049 0%, #141c2c 45%, #0c111b 100%);
  font-family: "Avenir Next", "Helvetica Neue", system-ui, sans-serif; color: #fff;
  -webkit-user-select: none; user-select: none; touch-action: manipulation; overscroll-behavior: none; }
button { font-family: inherit; border: none; }
.hidden { display: none !important; }

.glass { background: rgba(22, 32, 52, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255,255,255,.3); border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.glass-light { background: rgba(255, 252, 245, .97); color: #1d2433; border-radius: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }

/* ---- top bar: same buttons, same places, every screen ---- */
.topbar { position: fixed; inset: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) auto max(16px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 14px; z-index: 6; }
.topright { margin-left: auto; display: flex; gap: 12px; }
.btn { width: 86px; height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 30px; color: #fff; background: rgba(22,32,52,.55); }
.btn span { font-size: 12px; font-weight: 700; margin-top: 3px; }
.btn:active { transform: scale(.95); }
.btn.on { background: rgba(255, 200, 61, .92); color: #1d2433; }
.stars { padding: 12px 20px; font-size: 24px; font-weight: 800; white-space: nowrap; }

.big-btn { font: 800 23px "Avenir Next", system-ui; padding: 18px 32px; border-radius: 20px;
  background: #ffc83d; color: #1d2433; box-shadow: 0 5px 0 #d99b12; }
.big-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #d99b12; }
.big-btn.go { background: #4ade80; box-shadow: 0 5px 0 #22a355; }
.big-btn.calm-ghost { background: #eef2f8; box-shadow: 0 5px 0 #c9d1de; }
.big-btn[disabled] { opacity: .4; box-shadow: 0 5px 0 rgba(0,0,0,.2); }

/* ---- screens ---- */
#screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
.pad { width: 100%; height: 100%; padding: calc(max(14px, env(safe-area-inset-top)) + 104px) 34px 30px;
  display: flex; align-items: center; justify-content: center; gap: 40px; }

/* start */
.start { text-align: center; }
.start-title { font-size: 72px; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 8px 30px rgba(0,0,0,.45); }
.start-sub { font-size: 24px; margin: 6px 0 30px; opacity: .85; }

/* hub */
.tiles { display: grid; grid-template-columns: repeat(2, 310px); gap: 26px; }
.tile { height: 230px; border-radius: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: #fff; background: rgba(22,32,52,.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255,255,255,.3); box-shadow: 0 14px 34px rgba(0,0,0,.3); }
.tile:active { transform: scale(.97); }
.tile-icon { font-size: 60px; line-height: 1; }
.tile-sym { font-size: 62px; font-weight: 800; line-height: 1; }
.tile-name { font-size: 27px; font-weight: 800; }
.tile-sub { font-size: 17px; opacity: .8; }
.tile.soon { opacity: .4; }

/* ---- the baseplate and the bricks ---- */
.stage { --plate: min(64vh, 46vw, 470px); --u: calc(var(--plate) / 10); flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.plate-wrap { display: flex; gap: 12px; align-items: flex-end; }
.sidelabel { font-size: 30px; font-weight: 800; color: #ffd98a; width: 44px; text-align: center; }
.sidelabel.bottom { width: auto; margin-left: 56px; }
.plate { position: relative; width: var(--plate); height: var(--plate); border-radius: 14px;
  background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.14); box-shadow: inset 0 2px 20px rgba(0,0,0,.35); }
.lattice { position: absolute; inset: 0; display: grid; grid-template: repeat(10, 1fr) / repeat(10, 1fr); }
.lattice i { display: grid; place-items: center; }
.lattice i::after { content: ''; width: 26%; height: 26%; border-radius: 50%; background: rgba(255,255,255,.1); }
.bricks { position: absolute; left: 0; bottom: 0; display: grid; gap: 0; }
.brick { position: relative; width: var(--u); height: var(--u); border-radius: 7px; background: var(--c);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.24), inset 0 4px 0 rgba(255,255,255,.34), 0 2px 5px rgba(0,0,0,.35);
  transform: scale(0); animation: drop .34s cubic-bezier(.3,1.5,.5,1) forwards; }

@keyframes drop { to { transform: scale(1); } }
.brick.ring { outline: 4px solid #ffd23f; outline-offset: -4px; z-index: 2; }
/* the stud is the number: she can read the count straight off the brick */
.brick b { position: absolute; inset: 15%; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 253, 246, .9); color: #1d2433; font-size: calc(var(--u) * .36); font-weight: 800;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.16), inset 0 2px 2px rgba(255,255,255,.7); z-index: 3; }
.brick.ring b { background: #fffdf6; color: #1d2433; }
.rulerside { position: absolute; left: -6px; bottom: 0; width: 4px; border-radius: 2px; background: #ffd98a; }
.rulerbot { position: absolute; left: 0; bottom: -6px; height: 4px; border-radius: 2px; background: #ffd98a; }

/* ---- the panel beside the plate ---- */
.panel { width: min(430px, 38vw); display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.chips { display: flex; gap: 10px; }
.chip { flex: 1; padding: 13px 0; border-radius: 15px; font: 800 18px "Avenir Next", system-ui;
  background: rgba(255,255,255,.14); color: #fff; }
.chip.on { background: #ffc83d; color: #1d2433; }
.ask { font-size: 27px; font-weight: 800; line-height: 1.2; }
.ask small { display: block; font-size: 18px; font-weight: 600; opacity: .8; margin-top: 6px; }
.eq { font-size: 40px; font-weight: 800; letter-spacing: .01em; }
.eq .pow { font-size: 40px; }
.eq sup { font-size: .55em; vertical-align: super; }
.eq .res { color: #ffd23f; }
.eqline { font-size: 23px; font-weight: 700; opacity: .88; }
.stepper { display: flex; align-items: center; gap: 14px; }
.stepper button { width: 92px; height: 82px; border-radius: 20px; font-size: 40px; font-weight: 800; color: #1d2433;
  background: #eef2f8; box-shadow: 0 5px 0 #c9d1de; }
.stepper button:active { transform: translateY(3px); box-shadow: 0 2px 0 #c9d1de; }
.stepper button[disabled] { opacity: .35; }
.stepper .val { flex: 1; text-align: center; font-size: 46px; font-weight: 800; }
.count { font-size: 22px; font-weight: 700; }
.count b { color: #ffd23f; font-size: 26px; }
.opts { display: flex; gap: 12px; }
.opts .big-btn { flex: 1; padding: 24px 0; font-size: 34px; background: #eef2f8; box-shadow: 0 5px 0 #c9d1de; }
.opts .big-btn.right { background: #4ade80; box-shadow: 0 5px 0 #22a355; color: #fff; }
.opts .big-btn.try { background: #ffe0a3; box-shadow: 0 5px 0 #e8b95c; }
.msg { font-size: 22px; font-weight: 700; min-height: 32px; }
.msg.good { color: #7ff0a8; }
.rowbtns { display: flex; gap: 12px; }
.rowbtns .big-btn { flex: 1; text-align: center; }

/* ---- overlays ---- */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(12, 17, 27, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 10; }
#calm { flex-direction: column; gap: 26px; -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(160deg, rgba(120,170,220,.92), rgba(170,140,220,.92)); }
.breathe { width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,.55);
  animation: breathe 8s ease-in-out infinite; box-shadow: 0 0 60px rgba(255,255,255,.7); }
@keyframes breathe { 0%, 100% { transform: scale(.7); } 50% { transform: scale(1.25); } }
.calm-text { font-size: 36px; font-weight: 800; }

.calc { width: min(440px, 86vw); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.calc-disp { background: #eef2f8; color: #1d2433; border-radius: 16px; padding: 16px 20px; font: 800 42px "Avenir Next", system-ui;
  text-align: right; min-height: 76px; overflow: hidden; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.calc-keys button { height: 76px; border-radius: 16px; font: 800 30px "Avenir Next", system-ui; color: #1d2433;
  background: #eef2f8; box-shadow: 0 4px 0 #c9d1de; }
.calc-keys button:active { transform: translateY(2px); box-shadow: 0 2px 0 #c9d1de; }
.calc-keys button.op { background: #ffe0a3; box-shadow: 0 4px 0 #e8b95c; }
.calc-keys button.eq { background: #4ade80; box-shadow: 0 4px 0 #22a355; color: #fff; }

.stars.win { animation: starpop 1.1s ease-out; background: rgba(255, 200, 61, .92); color: #1d2433; }
@keyframes starpop { 0% { transform: scale(1); } 30% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* ---- portrait: plate on top, panel underneath ---- */
@media (orientation: portrait) {
  .pad { flex-direction: column; gap: 20px; padding: calc(max(14px, env(safe-area-inset-top)) + 94px) 24px 20px; }
  .stage { --plate: min(32vh, 66vw, 400px); }
  .panel { width: min(620px, 100%); gap: 13px; padding: 20px; }
  .ask { font-size: 24px; } .eq { font-size: 34px; } .eqline { font-size: 20px; }
  .stepper button { height: 72px; } .stepper .val { font-size: 40px; }
  .opts .big-btn { padding: 20px 0; }
  .tiles { grid-template-columns: repeat(2, 300px); }
  .btn { width: 76px; height: 76px; font-size: 26px; }
  .start-title { font-size: 58px; }
}