/* Мир раскрасок по номерам — более «детский» и дружелюбный мобильный UI
   - крупные тапы, «пузырьковые» кнопки
   - светлая пастельная тема
   - безопасные отступы (safe-area) для iOS
   Важно: стили не копируют чужой бренд/ассеты. */

:root{
  /* Safe area (iOS) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Colors */
  --bg: #f7fbff;
  --bg2:#fff3e6;
  --card:#ffffff;
  --card2:#fffaf4;
  --text:#1a2430;
  --muted:#5b6a7b;
  --accent:#6b5cff;
  --accent2:#23c6ff;
  --ok:#2ecc71;
  --danger:#ff4d4d;

  /* Style */
  --shadow: 0 10px 24px rgba(27, 57, 88, .14);
  --shadow2: 0 16px 34px rgba(27, 57, 88, .18);
  --radius: 22px;
  --radius-sm: 16px;
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color: transparent;
}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(600px 420px at 12% 10%, rgba(35,198,255,.26), transparent 60%),
    radial-gradient(680px 460px at 92% 18%, rgba(107,92,255,.18), transparent 62%),
    radial-gradient(820px 520px at 40% 110%, rgba(255,183,77,.28), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow:hidden;
}

#app{
  height:100%;
  display:flex;
  flex-direction:column;
}

/* ---------------------------
   Top bar
--------------------------- */
.topbar{
  padding: calc(10px + var(--safe-top)) calc(14px + var(--safe-right)) 10px calc(14px + var(--safe-left));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.topbar__left{display:flex; align-items:center; gap:10px; min-width:0;}
.topbar__right{display:flex; align-items:center; gap:10px;}

.brand{display:flex; align-items:center; gap:10px; min-width:0;}
.brand__logo{
  width:44px;height:44px;
  border-radius: 18px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(255,218,121,.95), rgba(35,198,255,.55));
  box-shadow: var(--shadow2);
  font-weight:900;
  font-size:20px;
}
.brand__text{min-width:0}
.brand__title{
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.05;
  font-size:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand__subtitle{font-size:12px;color:var(--muted)}

.iconbtn{
  border:none;
  background: rgba(255,255,255,.82);
  color:var(--text);
  border-radius: 16px;
  width:44px;height:44px;
  display:grid;place-items:center;
  cursor:pointer;
  box-shadow: var(--shadow);
  transition: transform .08s ease, filter .12s ease;
}
.iconbtn:active{transform:translateY(1px) scale(.98)}

.icon{display:inline-block;width:18px;height:18px; position:relative}
.icon--burger::before{
  content:"";
  position:absolute;left:0;right:0;top:3px;height:2px;background:currentColor;
  border-radius:2px;
  box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor;
}
.icon--coin{
  width:18px;height:18px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #ffeaa6, #ffbf3a);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.18);
}
.icon--back::before{
  content:"";
  position:absolute; inset:0;
  border-left:3px solid currentColor;
  border-bottom:3px solid currentColor;
  transform: rotate(45deg) translate(2px,-2px);
  border-radius:2px;
}
.icon--gear::before{
  content:"⚙️"; position:absolute; inset:-2px 0 0 0; font-size:18px; text-align:center;
}
.icon--gallery::before{content:"🖼️"; position:absolute; inset:-2px 0 0 0; font-size:18px; text-align:center;}
.icon--puzzle::before{content:"🧩"; position:absolute; inset:-2px 0 0 0; font-size:18px; text-align:center;}
.icon--spark::before{content:"✨"; position:absolute; inset:-2px 0 0 0; font-size:18px; text-align:center;}
.icon--bulb::before{content:"💡"; position:absolute; inset:-2px 0 0 0; font-size:18px; text-align:center;}
.icon--shop::before{content:"🛍️"; position:absolute; inset:-2px 0 0 0; font-size:18px; text-align:center;}

/* Bucket / fill icon (без эмодзи, чтобы работало везде) */
.icon--fill::before{
  content:"";
  position:absolute;
  left:4px; right:4px;
  bottom:2px;
  height:10px;
  border:2px solid currentColor;
  border-top:none;
  border-radius:0 0 4px 4px;
}
.icon--fill::after{
  content:"";
  position:absolute;
  left:3px;
  top:1px;
  width:12px;
  height:8px;
  border:2px solid currentColor;
  border-bottom:none;
  border-radius:10px 10px 0 0;
  opacity:.85;
}

.chip .icon{margin-right:8px; vertical-align:-3px}
.shopStat .icon{vertical-align:-3px}

.coins{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow2);
  font-weight:900;
}

.coins--mini{
  padding:7px 10px;
  gap:6px;
  font-size:14px;
  box-shadow: var(--shadow);
}
.coins__plus{
  width:30px;height:30px;border-radius: 12px;
  border:none; cursor:pointer;
  background: linear-gradient(135deg, rgba(35,198,255,.45), rgba(107,92,255,.28));
  color:var(--text);
  font-weight:900;
  box-shadow: 0 8px 16px rgba(27,57,88,.12);
  transition: transform .08s ease;
}
.coins__plus:active{transform:translateY(1px) scale(.98)}

.coins__plus--mini{
  width:28px;
  height:28px;
  border-radius: 12px;
  font-size:14px;
  margin-left:2px;
}

/* ---------------------------
   Main screens
--------------------------- */
.main{
  flex:1;
  overflow:hidden;
  padding: 0 calc(14px + var(--safe-right)) 10px calc(14px + var(--safe-left));
  display:flex;
  justify-content:center; /* на десктопе не растягиваем сетку на всю ширину */
}

.screen{
  width:100%;
  max-width: 1120px;
  overflow:auto;
  padding-bottom: calc(110px + var(--safe-bottom)); /* bottom nav */
}
.screen.hidden{display:none}

.screen__header{padding:6px 2px 10px 2px}
h1{font-size:24px; margin:8px 0 2px 0; letter-spacing:.2px}
.hint{font-size:13px; color:var(--muted)}
.hint--small{font-size:12px;}

/* Cards become a friendly grid on mobile */
.cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 360px){
  .cards{grid-template-columns: 1fr;}
}
@media (min-width: 560px){
  .cards{grid-template-columns: repeat(3, minmax(0, 1fr));}
}

/* Десктоп: больше колонок, чтобы карточки не становились огромными */
@media (min-width: 900px){
  .cards{grid-template-columns: repeat(4, minmax(0, 1fr));}
}
@media (min-width: 1200px){
  .cards{grid-template-columns: repeat(5, minmax(0, 1fr));}
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));
  border: 2px solid rgba(26,36,48,.07);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow2);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  cursor:pointer;
  transition: transform .10s ease, filter .12s ease;
}
.card:active{transform: translateY(1px) scale(.99)}

.card__preview{
  width:100%;
  aspect-ratio: 1/1;
  border-radius: 0;
  background:
    radial-gradient(14px 14px at 20% 22%, rgba(107,92,255,.16), transparent 60%),
    radial-gradient(16px 16px at 78% 28%, rgba(35,198,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,250,244,1), rgba(255,255,255,1));
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
}
.card__preview canvas{width:100%;height:100%;image-rendering: pixelated;}

.badge{
  position:absolute; left:10px; top:10px;
  background: rgba(255,255,255,.88);
  border:1px solid rgba(26,36,48,.10);
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}

.progressPill{
  position:absolute; right:10px; bottom:10px;
  background: rgba(255,255,255,.90);
  border:1px solid rgba(26,36,48,.12);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  min-width:74px;
  text-align:right;
  overflow:hidden;
}
.progressPill__bar{
  position:absolute; left:0; top:0; bottom:0;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(35,198,255,.65), rgba(255,218,121,.85));
  width:0%;
  z-index:0;
}
.progressPill span{position:relative; z-index:1; font-weight:900}

.card__meta{padding:10px 12px 12px 12px; min-width:0}
.card__title{font-weight:1000; margin-top:2px}
.card__desc{font-size:12px; color:var(--muted); margin-top:4px}

/* ---------------------------
   Bottom nav
--------------------------- */
.bottomnav{
  position:sticky;
  bottom:0;
  padding: 10px calc(14px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(14px + var(--safe-left));
  background: linear-gradient(180deg, rgba(247,251,255,0), rgba(247,251,255,.82) 26%, rgba(247,251,255,.96));
  backdrop-filter: blur(8px);
  display:flex;
  gap:10px;
  justify-content:space-between;
}

.navbtn{
  flex:1;
  border:none;
  background: rgba(255,255,255,.92);
  color:var(--text);
  border-radius: 22px;
  padding:12px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  box-shadow: var(--shadow);
  transition: transform .08s ease;
}
.navbtn:active{transform:translateY(1px) scale(.99)}

.navbtn--active{
  background: linear-gradient(135deg, rgba(255,218,121,.85), rgba(35,198,255,.38));
  border:2px solid rgba(26,36,48,.07);
}
.navbtn span:last-child{font-size:13px;font-weight:900}

/* ---------------------------
   Panels / settings
--------------------------- */
.panel{
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(26,36,48,.07);
  border-radius: calc(var(--radius) + 2px);
  padding:12px;
  box-shadow: var(--shadow2);
}

.row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:12px 8px;
}
.row + .row{border-top:1px dashed rgba(26,36,48,.16)}
.row__title{font-weight:1000}
.row__desc{color:var(--muted); font-size:12px; margin-top:4px; max-width:520px}

.btn{
  border:none;
  border-radius: 16px;
  padding:12px 14px;
  background: linear-gradient(135deg, rgba(107,92,255,.22), rgba(35,198,255,.18));
  color:var(--text);
  font-weight:1000;
  cursor:pointer;
  box-shadow: var(--shadow);
  min-width: 92px;
  transition: transform .08s ease;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:disabled{opacity:.55; filter:saturate(.7)}
.btn--danger{background: linear-gradient(135deg, rgba(255,77,77,.20), rgba(255,183,77,.18));}

/* ---------------------------
   Paint screen
--------------------------- */
#screenPaint{
  overflow:hidden;
}

.paintHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 2px 10px 2px;
}
.paintHeader__center{flex:1; text-align:center; min-width:0}
.paintHeader__right{display:flex; align-items:center; gap:8px;}
.paintTitle{font-weight:1000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.paintProgress{font-size:12px; color:var(--muted); margin-top:2px}
#coinProgress{color:#ff9f1a; font-weight:1000}

.chipCount{opacity:.85; font-weight:1000; margin-left:6px}

/* ---------------------------
   Shop
--------------------------- */
.shopHeader__top{display:flex; align-items:center; gap:10px}
.shopHeader__top h1{margin:8px 0 2px 0}

.shopStats{
  display:flex;
  gap:10px;
  margin-bottom:12px;
}
.shopStat{
  flex:1;
  background: rgba(26,36,48,.04);
  border-radius: 18px;
  padding:10px 12px;
  font-weight:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.shopGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
@media (min-width: 520px){
  .shopGrid{grid-template-columns: repeat(2, minmax(0,1fr));}
}

.shopCard{
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));
  border:2px solid rgba(26,36,48,.07);
  border-radius: calc(var(--radius) + 2px);
  padding:12px;
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.shopCard__left{min-width:0}
.shopCard__title{font-weight:1000}
.shopCard__title .icon{margin-right:6px; vertical-align:-3px}
.shopCard__desc{color:var(--muted); font-size:12px; margin-top:4px}
.shopCard__buy{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.pricePill{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 10px;
  border-radius: 999px;
  background: rgba(255,191,58,.18);
  border:1px solid rgba(26,36,48,.10);
  font-weight:1000;
}

/* Монеты: покупка за рекламу и платежи */
.coinInline{
  margin-top:10px;
  display:grid;
  gap:10px;
}
.btn--wide{
  width:100%;
  justify-content:center;
}
.coinShopGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
@media (min-width: 520px){
  .coinShopGrid{grid-template-columns: repeat(2, minmax(0,1fr));}
}

.coinCard{
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));
  border:2px solid rgba(26,36,48,.07);
  border-radius: calc(var(--radius) + 2px);
  padding:12px;
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.coinCard__title{font-weight:1000}
.coinCard__desc{color:var(--muted); font-size:12px; margin-top:4px}
.coinCard__right{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.coinPrice{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius: 999px;
  background: rgba(35,198,255,.14);
  border:1px solid rgba(26,36,48,.10);
  font-weight:1000;
}
.curIcon{width:18px;height:18px; display:block}

/* ---------------------------
   Locked cards
--------------------------- */
.card--locked{filter:none; opacity:.98}
.card--locked .card__preview{
  /* убираем цветные “пятна” на фоне, чтобы замок выглядел по‑серому */
  background: linear-gradient(180deg, rgba(242,244,247,1), rgba(255,255,255,1));
}
.card--locked .card__preview::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.35);
  pointer-events:none;
  z-index:1;
}
.card--locked .card__preview canvas{
  filter: grayscale(1) saturate(0) contrast(.95) brightness(.95);
  position:relative;
  z-index:0;
}
.card--locked .badge,
.card--locked .progressPill{
  filter: grayscale(1) saturate(0);
  z-index:2;
}
.card--locked .badge{z-index:2}
.card--locked .progressPill__bar{
  background: linear-gradient(90deg, rgba(26,36,48,.18), rgba(26,36,48,.08));
}
.card__lock{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:12px;
  pointer-events:none;
}
.lockPill{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(26,36,48,.78);
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  font-weight:1000;
  box-shadow: var(--shadow2);
}

/* ---------------------------
   Coin fly FX
--------------------------- */
#flyLayer{position:fixed; inset:0; pointer-events:none; z-index:60;}
.flycoin{
  position:fixed;
  width:22px;
  height:22px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #ffeaa6, #ffbf3a);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.18), 0 10px 18px rgba(27,57,88,.18);
  transform: translate(-50%, -50%) scale(1);
  will-change: transform, left, top, opacity;
}
.flycoin__label{
  position:absolute;
  left:50%;
  top:-18px;
  transform:translateX(-50%);
  font-weight:1000;
  font-size:12px;
  color: rgba(26,36,48,.92);
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

/* ---------------------------
   Modal
--------------------------- */
.modal{position:fixed; inset:0; z-index:70; display:grid; place-items:center;}
.modal.hidden{display:none}
.modal__backdrop{position:absolute; inset:0; background: rgba(26,36,48,.45); backdrop-filter: blur(6px);}
.modal__panel{
  position:relative;
  width:min(420px, calc(100% - 28px));
  background: rgba(255,255,255,.96);
  border:2px solid rgba(26,36,48,.10);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow2);
  padding:14px;
}
.modal__title{font-weight:1000; font-size:18px; margin-bottom:6px}
.modal__text{color:var(--muted); font-size:13px; line-height:1.35; white-space: pre-line}
.modal__actions{display:flex; gap:10px; justify-content:flex-end; margin-top:12px}

/* Welcome / Daily rich text (icons instead of emoji for better compatibility) */
.modal__text .welcomeText,
.modal__text .dailyText{white-space: normal;}
.modal__text .infoLead{font-weight:1000; color:var(--text); margin:4px 0 8px}
.modal__text .welcomeSteps{margin:0 0 10px 20px; padding:0}
.modal__text .welcomeSteps li{margin:4px 0}
.modal__text .infoLine{display:flex; gap:8px; align-items:flex-start; margin:8px 0}
.modal__text .infoLine .icon{margin-top:1px; flex:0 0 auto; color:var(--text)}
.modal__text .welcomeEmoji{display:inline-block; width:18px; height:18px; line-height:18px; text-align:center; flex:0 0 auto; margin-top:1px}
.modal__text .bonusLine{margin-top:10px; font-weight:1000; color:var(--text)}
.modal__text .dailyHint{margin-top:8px}

.modal--okonly .modal__actions{justify-content:center}
.modal--okonly #modalOk{flex:1}

.modal--welcome .modal__panel{background: linear-gradient(180deg, rgba(255,240,188,.98), rgba(255,255,255,.96));}
.modal--welcome .modal__title::before{content:'👋 ';}

.modal--daily .modal__panel{background: linear-gradient(180deg, rgba(216,255,232,.98), rgba(255,255,255,.96));}
.modal--daily .modal__title::before{content:'🎁 ';}

/* ---------------------------
   Coin modal (bottom sheet)
--------------------------- */
.coinModal{position:fixed; inset:0; z-index:75; display:grid; place-items:end center; padding-bottom: calc(10px + var(--safe-bottom));}
.coinModal.hidden{display:none}
.coinModal__backdrop{position:absolute; inset:0; background: rgba(26,36,48,.45); backdrop-filter: blur(6px);}
.coinModal__panel{
  position:relative;
  width:min(520px, calc(100% - 20px));
  background: rgba(255,255,255,.96);
  border:2px solid rgba(26,36,48,.10);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: var(--shadow2);
  padding:14px;
}
.coinModal__head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.coinModal__title{font-weight:1000; font-size:18px}
.coinModal__content{display:grid; gap:12px}
.coinModal__sectionTitle{font-weight:1000; margin-bottom:8px}
.coinOffer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border-radius: calc(var(--radius) + 2px);
  border:2px solid rgba(26,36,48,.07);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));
  box-shadow: var(--shadow);
}
.coinOffer__title{font-weight:1000}
.coinOffer__desc{color:var(--muted); font-size:12px; margin-top:4px}

.paintCanvasWrap{
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(26,36,48,.07);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow2);
  overflow:hidden;
  position:relative;
  /* Mobile-friendly height: use svh when supported */
  height: calc(100svh - 290px - var(--safe-top) - var(--safe-bottom));
  min-height: 280px;
}
@supports not (height: 100svh){
  .paintCanvasWrap{height: calc(100vh - 290px);}
}

#paintCanvas{
  width:100%;
  height:100%;
  touch-action:none; /* кастомные жесты */
  image-rendering: pixelated;
  display:block;
  background:
    radial-gradient(circle at 18px 18px, rgba(26,36,48,.05) 1.2px, transparent 1.3px) 0 0/18px 18px;
}

.paintBottom{
  margin-top:10px;
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(26,36,48,.07);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow2);
  padding:10px;
}

.paintTools{
  display:flex;
  gap:10px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom:4px;
  margin-bottom:10px;
}
.paintTools::-webkit-scrollbar{height:0}

.chip{
  flex:0 0 auto;
  border:none;
  border-radius: 999px;
  padding:11px 14px;
  background: rgba(26,36,48,.04);
  color:var(--text);
  font-weight:1000;
  cursor:pointer;
  box-shadow: 0 8px 16px rgba(27,57,88,.10);
  white-space:nowrap;
  transition: transform .08s ease;
}
.chip:active{transform:translateY(1px) scale(.99)}
.chip--active{background: linear-gradient(135deg, rgba(255,218,121,.75), rgba(35,198,255,.24)); border:2px solid rgba(26,36,48,.06)}
.chip--disabled{opacity:.55; filter:saturate(.7)}

.palette{
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom:2px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.palette.palette--drag{cursor: grabbing;}
.palette::-webkit-scrollbar{height:0}

.colorbtn{
  flex:0 0 auto;
  width:52px;
  height:52px;
  border-radius: 18px;
  border: 3px solid rgba(255,255,255,.72);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-weight:1000;
  color: rgba(255,255,255,.96);
  /* чтобы цифра не терялась на светлых цветах */
  -webkit-text-stroke: 1px rgba(0,0,0,.65);
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.65),
     1px -1px 0 rgba(0,0,0,.65),
    -1px  1px 0 rgba(0,0,0,.65),
     1px  1px 0 rgba(0,0,0,.65),
     0 2px 6px rgba(0,0,0,.35);
  box-shadow: 0 10px 18px rgba(27,57,88,.14);
  scroll-snap-align: start;
}
.colorbtn--active{outline: 4px solid rgba(35,198,255,.55)}

.toast{
  position:absolute;
  left:50%;
  bottom:12px;
  transform: translateX(-50%);
  background: rgba(26,36,48,.86);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  padding:10px 12px;
  border-radius: 14px;
  font-size:13px;
  box-shadow: var(--shadow2);
  max-width: calc(100% - 24px);
  text-align:center;
}
.toast.hidden{display:none}

.hintbtn{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:6;
}

.hintbtn{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index: 5;
}

.zoombtns{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.zoombtn{
  font-size:22px;
  font-weight:900;
  line-height:1;
}

/* Respect accessibility */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important;}
}

/* ---------------------------------
   Prevent pull-to-refresh / overscroll
   --------------------------------- */
html, body { overscroll-behavior: none; }
.screen { overscroll-behavior: contain; }

/* Do not allow text selection/callout anywhere in the WebApp */
html, body, #app{
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

button, .screen, canvas{ -webkit-tap-highlight-color: transparent; }

/* Long-tap shouldn't open callouts / selection */
#paintCanvas{
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---------------------------------
   Fullscreen & stretch during gameplay (paint screen)
   --------------------------------- */
body.paintmode .main{
  padding: 0;
  justify-content: stretch;
}
body.paintmode .screen{
  max-width: none;
  padding-bottom: 0;
  overflow: hidden;
}
body.paintmode #screenPaint{
  /* occupy full viewport; keep iOS safe areas */
  height: 100svh;
  width: 100%;
  box-sizing: border-box;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  display: flex;
  flex-direction: column;
  gap: 0;
}
@supports not (height: 100svh){
  body.paintmode #screenPaint{ height: 100vh; }
}

body.paintmode .paintHeader{
  padding: 10px 10px 8px 10px;
}
body.paintmode .paintCanvasWrap{
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
body.paintmode .paintBottom{
  margin-top: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: rgba(255,255,255,.94);
  padding-bottom: var(--safe-bottom);
}


/* simple select styling */
.select{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
  box-shadow: var(--shadow1);
  min-width: 140px;
}