.bce-ui, .bce-ui * { box-sizing: border-box; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; }
.bce-ui button { font: inherit; cursor: pointer; }
.bce-menu-btn { position: fixed; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); z-index: 20; width: 44px; height: 44px; border-radius: 12px; border: 2px solid rgba(255,255,255,.35); background: rgba(10,12,40,.55); color: #fff; font-size: 22px; line-height: 1; }
/* the author's other games: a quiet text link beside ≡ on the result screen, smaller than every button */
/* result-screen links next to ≡: other games, and following on X for updates (v0.4.2) */
.bce-endlinks { position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 7px); left: calc(max(10px, env(safe-area-inset-left)) + 58px); right: 8px; z-index: 20; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.bce-endlinks[hidden] { display: none; }
.bce-endlinks > a { pointer-events: auto; }
.bce-follow { padding: 6px 10px; border-radius: 999px; background: rgba(10,12,40,.45); color: #E6E1FF; font-size: 12px; line-height: 18px; text-decoration: none; white-space: nowrap; border: 1px solid rgba(255,255,255,.28); animation: bce-more-in .3s ease-out; }
.bce-follow:hover, .bce-follow:focus-visible { color: #fff; border-color: #fff; }
@media (max-width: 440px) { .bce-follow .handle { display: none; } }
.bce-start-follow { position: fixed; left: 50%; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 9%); transform: translateX(-50%); z-index: 41; }
.bce-more { padding: 6px 10px; border-radius: 999px; background: rgba(10,12,40,.45); color: #C9C3E8; font-size: 12px; line-height: 18px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; animation: bce-more-in .3s ease-out; }
.bce-more[hidden] { display: none; }
.bce-more:hover, .bce-more:focus-visible { color: #fff; }
@keyframes bce-more-in { from { opacity: 0; } }
.bce-fb { position: fixed; right: max(8px, env(safe-area-inset-right)); bottom: 24%; z-index: 20; display: flex; flex-direction: column; gap: 8px; }
.bce-fb button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); background: rgba(10,12,40,.55); font-size: 22px; }
.bce-fb button:active { transform: scale(.92); }
.bce-sheet { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; width: min(94vw, 440px); background: rgba(22,24,64,.96); border: 2px solid #FFE14D; border-radius: 18px; padding: 12px 14px 14px; color: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.4); animation: bce-up .18s ease-out; }
.bce-sheet.fb { bottom: auto; top: 50%; transform: translate(-50%, -50%); }
@keyframes bce-up { from { opacity: 0; transform: translate(-50%, 16px); } }
.bce-sheet .q { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.bce-sheet .q button { background: none; border: 0; color: #C9C3E8; font-size: 13px; white-space: nowrap; }
.bce-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bce-chips button { border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; border-radius: 999px; padding: 9px 14px; font-size: 14px; }
.bce-chips button.big { font-size: 22px; padding: 8px 16px; }
.bce-chips button:active, .bce-chips button:hover { background: rgba(255,225,77,.25); border-color: #FFE14D; }
.bce-toast { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 40; background: rgba(255,225,77,.95); color: #2A1A12; font-weight: 800; padding: 8px 16px; border-radius: 999px; pointer-events: none; animation: bce-fade 1.4s forwards; }
@keyframes bce-fade { 0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
.bce-menu[hidden] { display: none; }
.bce-menu { position: fixed; inset: 0; z-index: 35; background: rgba(7,10,34,.7); display: flex; align-items: flex-start; justify-content: flex-start; padding: max(62px, env(safe-area-inset-top)) 12px; }
.bce-menu .panel { background: #1B1F48; border: 2px solid rgba(255,255,255,.3); border-radius: 16px; padding: 8px; display: flex; flex-direction: column; min-width: 220px; }
.bce-menu .panel button { background: none; border: 0; color: #fff; text-align: left; padding: 12px 14px; border-radius: 10px; font-size: 16px; }
.bce-menu .panel button:hover { background: rgba(255,255,255,.08); }
.bce-dialog { position: fixed; inset: 0; z-index: 50; background: rgba(7,10,34,.8); display: flex; align-items: center; justify-content: center; }
.bce-dialog[hidden] { display: none; }
.bce-dialog .box { width: min(92vw, 460px); max-height: 86vh; overflow: auto; background: #1B1F48; color: #fff; border: 2px solid #FFE14D; border-radius: 18px; padding: 16px 18px; font-size: 14px; line-height: 1.7; }
.bce-dialog h2 { margin: 0 0 8px; font-size: 18px; }
.bce-dialog p { margin: 6px 0; color: #E6E1FF; }
.bce-dialog label { display: flex; gap: 8px; align-items: center; margin: 12px 0; font-weight: 700; }
.bce-dialog .status { color: #FFE14D; font-size: 13px; min-height: 1.4em; }
.bce-dialog .close { display: block; width: 100%; margin-top: 12px; padding: 10px; border-radius: 999px; border: 0; background: rgba(255,255,255,.15); color: #fff; }
.bce-notice { position: fixed; bottom: max(70px, calc(env(safe-area-inset-bottom) + 60px)); left: 50%; transform: translateX(-50%); z-index: 25; width: min(92vw, 420px); background: rgba(22,24,64,.95); color: #fff; border-radius: 14px; padding: 10px 12px; font-size: 13px; display: flex; gap: 8px; align-items: center; border: 1px solid rgba(255,255,255,.25); }
.bce-notice span { flex: 1; }
.bce-notice button { border: 0; border-radius: 999px; padding: 6px 12px; background: rgba(255,255,255,.15); color: #fff; font-size: 13px; }
.bce-notice button.ok { background: #FFE14D; color: #2A1A12; font-weight: 700; }
.bce-cattoast { position: fixed; left: 50%; top: 16%; transform: translateX(-50%); z-index: 40; width: min(92vw, 360px); display: flex; align-items: center; gap: 6px; background: rgba(22,24,64,.96); border: 2px solid #FFE14D; color: #fff; border-radius: 18px; padding: 4px 16px 4px 4px; pointer-events: none; animation: bce-fade 2.4s forwards; max-width: 94vw; }
.bce-cattoast canvas { width: 56px; height: 56px; flex: none; }
.bce-cattoast .lines { font-size: 14px; font-weight: 700; line-height: 1.45; }
.bce-cattoast .stamp { color: #FFE14D; }
.bce-cattoast .reward { color: #7CF0FF; }
.bce-cattoast .next { color: #C9C3E8; font-weight: 500; font-size: 12px; }
.bce-coach { box-sizing: border-box; position: fixed; left: 50%; top: max(64px, calc(env(safe-area-inset-top) + 56px)); transform: translateX(-50%); z-index: 28; width: min(92vw, 420px); display: flex; gap: 8px; align-items: center; background: #FFF6D6; color: #2A1A12; border: 3px solid #2A1A12; border-radius: 16px; padding: 10px 12px; font-size: 14px; font-weight: 700; line-height: 1.5; box-shadow: 0 6px 0 rgba(42,26,18,.35); animation: bce-coach-in .22s ease-out; }
.bce-coach.out { opacity: 0; transition: opacity .2s; }
.bce-coach b { font-size: 20px; }
.bce-coach span { flex: 1; }
.bce-coach button { border: 0; border-radius: 999px; background: #2A1A12; color: #FFE14D; font-weight: 800; padding: 6px 12px; font-size: 13px; }
@keyframes bce-coach-in { from { opacity: 0; } }
.bce-help { list-style: none; padding: 0; margin: 4px 0 0; }
.bce-help li { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; }
.bce-help i { font-style: normal; font-size: 20px; line-height: 1.4; flex: none; width: 26px; text-align: center; }
.bce-comment textarea { width: 100%; border-radius: 12px; border: 2px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 15px; padding: 10px; resize: vertical; min-height: 110px; }
.bce-comment .lead { color: #fff; }
.bce-comment .count { text-align: right; color: #C9C3E8; font-size: 12px; }
.bce-comment .note { font-size: 12px; color: #C9C3E8; }
.bce-comment .actions { display: flex; gap: 8px; }
.bce-comment .actions button { flex: 1; margin-top: 8px; padding: 11px; border-radius: 999px; border: 0; font-weight: 800; }
.bce-comment .send { background: #FFE14D; color: #2A1A12; }
.bce-comment .send:disabled { opacity: .4; }
.bce-comment .close { background: rgba(255,255,255,.15); color: #fff; display: block; }
.bce-fb .comment { font-size: 20px; }
.bce-opening { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; align-items: center; justify-content: center; }
.bce-opening video { width: 100%; height: 100%; object-fit: contain; }
.bce-opening .skip { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); border: 2px solid rgba(255,255,255,.5); background: rgba(0,0,0,.5); color: #fff; border-radius: 999px; padding: 10px 18px; font: 700 15px "Hiragino Sans", sans-serif; cursor: pointer; }
/* tall portrait screens (phones, the 470x960 itch frame): the 9:16 canvas leaves bands above and below it,
   so the buttons live in the bottom band instead of covering the right edge of the playfield */
@media (orientation: portrait) and (max-aspect-ratio: 1/2) {
  .bce-fb { flex-direction: row; right: auto; left: 50%; transform: translateX(-50%); bottom: max(8px, env(safe-area-inset-bottom)); gap: 12px; }
  .bce-fb button { width: 44px; height: 44px; font-size: 20px; }
  /* bottom sheets sit above that row instead of covering it */
  .bce-sheet:not(.fb):not(.inline) { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 62px); }
}
/* engine: the cards sit at the top, so hints go to the empty band between the cards and the tower */
/* v0.6.1 physics: hints sit above the jar, and taps outside OK go through to the game (they used to hide the floating cats and eat the tap) */
/* v0.8.0: coach.js places the bubble (outside the game when there is room); inside the game, taps go through it */
.bce-coach.inside { pointer-events: none; opacity: .96; }
.bce-coach.inside button { pointer-events: auto; }
/* v0.5.0: an old copy of the game (itch keeps serving old uploads) points to the itch page */
.bce-update { position: fixed; left: 16px; right: 16px; margin: 0 auto; width: fit-content; max-width: 560px; top: calc(max(8px, env(safe-area-inset-top)) + 4px); z-index: 40; display: flex; align-items: center; gap: 10px; box-sizing: border-box; padding: 8px 10px 8px 14px; border-radius: 12px; background: #FFE14D; color: #1B1B3A; font-weight: 700; font-size: 14px; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.bce-update a { color: #1B1B3A; background: #fff; border-radius: 8px; padding: 4px 10px; text-decoration: none; white-space: nowrap; }
.bce-update button { border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: #1B1B3A; }

/* v0.8.0: the Big Bang overlay (bigbang.js) */
.bce-bigbang { position: fixed; inset: 0; z-index: 60; background: #05061A; display: flex; align-items: center; justify-content: center; }
.bce-bigbang canvas { position: absolute; }
.bb-panel { position: relative; z-index: 2; width: min(92vw, 460px); max-height: 92vh; overflow: auto; box-sizing: border-box; background: rgba(20,22,60,.94); border: 2px solid #FFE14D; border-radius: 18px; padding: 14px 16px; color: #fff; font-size: 14px; line-height: 1.6; text-align: center; }
.bb-panel[hidden] { display: none; }
.bb-panel.bb-bottom { position: absolute; bottom: 6vh; background: none; border: 0; }
.bb-panel h2 { margin: 0 0 6px; font-size: 18px; color: #FFE14D; }
.bb-panel p { margin: 6px 0; color: #E6E1FF; font-size: 13px; }
.bb-photo { width: 100%; max-width: 280px; border-radius: 10px; display: block; margin: 6px auto; }
.bb-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.bb-panel button { border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; border-radius: 999px; padding: 9px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.bb-panel button.go { background: #FFE14D; color: #2A1A12; border-color: #FFE14D; font-size: 17px; padding: 11px 26px; }
.bb-panel .bb-law { display: block; width: 100%; text-align: left; margin: 8px 0; border-radius: 14px; padding: 10px 12px; }
.bb-law b { display: block; font-size: 16px; color: #FFE14D; }
.bb-law i { font-style: normal; color: #FFB23A; }
.bb-law span { display: block; font-size: 12px; color: #E6E1FF; font-weight: 400; }
.bb-law span.cost { color: #FFB0A0; }
.bb-law:hover, .bb-law:focus-visible { border-color: #FFE14D; }
/* the teaser video (bigbang.js, local test page only): three law cards face down */
.bb-panel.bb-teaser { background: none; border: 0; }
.bb-teaser h2 { font-size: 34px; text-shadow: 0 4px 0 #2A1A12; }
.bb-backs { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.bb-back { width: 30%; aspect-ratio: 2 / 3; border-radius: 14px; border: 3px solid #FFE14D; background: repeating-linear-gradient(45deg, #2A1F66 0 12px, #35287A 12px 24px); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 0 rgba(0,0,0,.4); animation: bb-deal .45s ease-out both; }
.bb-back b { font: 900 54px "Avenir Next Condensed", "Arial Black", sans-serif; color: #FFE14D; text-shadow: 0 4px 0 #2A1A12; }
@keyframes bb-deal { from { opacity: 0; transform: translateY(40px) rotate(-8deg) scale(.8); } }
/* v0.9.0: the daily layer (daily.js) */
.bce-daily-toast { position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 45; min-width: 220px; max-width: min(92vw, 420px); box-sizing: border-box; background: #1B1F48; border: 3px solid #FFE14D; border-radius: 16px; padding: 10px 14px; color: #fff; font: 700 14px/1.5 "Hiragino Sans", sans-serif; text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,.35); animation: bce-coach-in .25s ease-out; pointer-events: none; }
.bce-daily-toast.out { opacity: 0; transition: opacity .35s; }
.bce-daily-toast b { display: block; color: #FFE14D; font-size: 17px; }
.bce-daily-toast span { display: block; }
.bce-daily-toast i { display: block; font-style: normal; color: #7CF0FF; }
.bce-daily-toast em { display: block; font-style: normal; color: #B8FF6A; font-size: 18px; font-weight: 900; }
/* v0.11.0: stop the engine / keep it spinning (extend.js) */
.bce-extend { position: fixed; inset: 0; z-index: 42; display: flex; align-items: center; justify-content: center; background: rgba(5,6,26,.55); animation: bce-coach-in .25s ease-out; font-family: "Hiragino Sans", sans-serif; }
.bce-extend .box { width: min(92vw, 420px); box-sizing: border-box; background: #1B1F48; border: 3px solid #FFE14D; border-radius: 20px; padding: 16px 14px 14px; color: #fff; text-align: center; box-shadow: 0 8px 0 rgba(0,0,0,.4); }
.bce-extend .win { margin: 0 0 4px; font-size: 18px; font-weight: 900; color: #B8FF6A; }
.bce-extend .win em { font-style: normal; color: #FFE14D; }
.bce-extend .q { margin: 0 0 12px; font-size: 17px; font-weight: 800; line-height: 1.45; }
.bce-extend .q b { display: block; font-size: 23px; color: #FFE14D; }
.bce-extend .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bce-extend button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 108px; justify-content: center; border-radius: 16px; border: 3px solid #2A1A12; font: 900 16px/1.3 "Hiragino Sans", sans-serif; cursor: pointer; box-shadow: 0 5px 0 #2A1A12; }
.bce-extend button:active { transform: translateY(3px); box-shadow: 0 2px 0 #2A1A12; }
.bce-extend button i { font-style: normal; font-size: 30px; }
.bce-extend button small { font-size: 11px; font-weight: 700; opacity: .85; }
.bce-extend .stop { background: #E6E1FF; color: #2A1A12; }
.bce-extend .go { background: #FFE14D; color: #2A1A12; }
.bce-extend .note { margin: 12px 0 0; font-size: 11px; color: #C9C3E8; line-height: 1.5; }
.bce-extend .eta { margin: 6px 0 0; font-size: 13px; font-weight: 800; color: #7CF0FF; }
.bce-extend-badge { position: fixed; left: 50%; top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 27; display: flex; align-items: baseline; gap: 8px; background: rgba(27,31,72,.92); border: 2px solid #FFE14D; border-radius: 999px; padding: 4px 14px; color: #fff; font: 800 14px/1.3 "Hiragino Sans", sans-serif; pointer-events: none; white-space: nowrap; }
.bce-extend-badge b { color: #FFE14D; font-size: 17px; }
.bce-extend-badge small { color: #C9C3E8; font-size: 11px; }
.bce-extend .win small { display: block; font-size: 11px; color: #C9C3E8; font-weight: 700; }