/* iPad-first, kid-friendly UI */
:root{
  --bg1:#f1f6ff;
  --bg2:#e2f0ff;
  --primary:#1e88ff;
  --primary2:#6a1bff;
  --card:#ffffff;
  --shadow: 0 12px 24px rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "HiraginoSans-W3", "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(135deg,var(--bg1),var(--bg2));
  color:#1b1b1b;
}

#app{
  height:100%;
  display:flex;
  flex-direction:column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.top{
  padding:12px 12px 0 12px;
}

.bubble{
  display:flex;
  gap:12px;
  align-items:flex-end;
  background: rgba(30,136,255,.07);
  border-radius:24px;
  padding:10px 14px;
}

.teacher{
  font-size:48px;
  line-height:1;
  transform-origin: 50% 100%;
  animation: pop .35s ease-out;
}
@keyframes pop{ from{ transform:scale(.9);} to{ transform:scale(1);} }

.teacherName{
  font-weight:700;
  font-size:12px;
  color: var(--primary);
  margin-bottom:4px;
}
.message{
  font-weight:700;
  font-size:18px;
  white-space:pre-line;
}

.main{
  flex:1;
  display:grid;
  grid-template-columns: 1fr 150px;
  gap:14px;
  padding:10px 12px 12px 12px;
  min-height:0;
}

.board{
  min-height:0;
}
.boardInner{
  position:relative;
  height:100%;
  border-radius:24px;
  background: rgba(255,255,255,.85);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.grid{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(0,0,0,.10) 1px, transparent 1px) 50% 0/1px 100%,
    linear-gradient(to bottom, rgba(0,0,0,.10) 1px, transparent 1px) 0 50%/100% 1px,
    linear-gradient(45deg, rgba(0,0,0,.06) 1px, transparent 1px) 0 0/100% 100%,
    linear-gradient(-45deg, rgba(0,0,0,.06) 1px, transparent 1px) 0 0/100% 100%;
  opacity:.35;
  pointer-events:none;
}

.guide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.watermark{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:200;
  font-size:min(36vh, 280px);
  color: rgba(30,136,255,.07);
  pointer-events:none;
}

.draw{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  touch-action:none; /* IMPORTANT: prevent scroll/zoom while drawing */
}

.panel{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:8px;
}

.countCard{
  background: rgba(255,255,255,.9);
  border-radius:16px;
  box-shadow: 0 8px 16px rgba(30,136,255,.12);
  text-align:center;
  padding:12px 6px;
}
.countLabel, .countUnit{ font-size:12px; color:#666; }
.countValue{ font-size:34px; font-weight:800; color:#2a60ff; line-height:1.1; }
.stars{ margin-top:6px; font-size:14px; color:#ff9800; min-height:18px; }

.panelDivider{
  height:1px;
  background: rgba(0,0,0,.08);
  margin:2px 6px;
}

.btn{
  width:100%;
  border:1px solid rgba(30,136,255,.25);
  background: rgba(30,136,255,.10);
  color: var(--primary);
  font-weight:800;
  border-radius:14px;
  padding:12px 10px;
  font-size:14px;
  cursor:pointer;
}
.btn:active{ transform: translateY(1px); }
.btn.small{ padding:10px 8px; font-size:12px; }
.btn.good{ background: rgba(255,193,7,.14); border-color: rgba(255,193,7,.35); color:#a46b00; }
.btn.danger{ background: rgba(255,64,129,.12); border-color: rgba(255,64,129,.30); color:#d81b60; }
.row{ display:flex; gap:8px; }
.spacer{ flex:1; }

.mission{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.45);
  z-index: 999;
}
.mission.hidden{ display:none; }
.missionCard{
  width:min(560px, 86vw);
  border-radius:28px;
  padding:28px 22px;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 24px 48px rgba(0,0,0,.35);
  text-align:center;
  color:#fff;
}
.missionIcon{ font-size:56px; }
.missionText{ font-weight:900; font-size:26px; margin:8px 0 10px; white-space:pre-line; }
.missionHint{ opacity:.85; font-size:18px; }

@media (max-width: 920px){
  .main{ grid-template-columns: 1fr; }
  .panel{ flex-direction:row; flex-wrap:wrap; }
  .panel .btn{ width: calc(50% - 5px); }
  .countCard{ width:100%; }
  .row{ width:100%; }
}