/*
 * Фирменный стиль Shirley English (по флаерам «周日绘本课堂»): кремовая бумага, тёмно-синий, коралл,
 * пастельные плашки (голубая, персиковая, мятная), жёлто-оранжево-голубые пятна фона, округлый «детский» шрифт.
 * Только системные шрифты (CJK-friendly), без внешних загрузок.
 */
:root{
  --cream:#FFF8EA; --paper:#FFFCF4; --line:#F1E6CF;
  --navy:#1F4F7C; --navy-dark:#163B5E; --ink:#1F3A5A; --ink-soft:#6B7889;
  --coral:#E5735A; --coral-dark:#C65A43;
  --sky-p:#DCEAF6; --peach-p:#FBE1D4; --mint-p:#DCEFDF; --lemon-p:#FFF1C2;
  --yellow:#F6D35B; --orange:#F2994A; --blue:#7DB2DF; --pink:#F58AB4;
  /* совместимость со старыми играми */
  --green:var(--navy); --green-dark:var(--navy-dark); --sun:#F6D35B; --sky:#DCEAF6; --leaf:#8BD35B;
  --card:var(--cream); --shadow:0 4px 12px rgba(31,79,124,.12);
  --font:"Nunito","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,Arial,sans-serif;
  --font-display:"Comic Neue","Chalkboard SE","Comic Sans MS","Marker Felt","PingFang SC","Microsoft YaHei",var(--font);
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--font); color:var(--ink); background:#F7F0E1; overflow-x:hidden}
button{font-family:inherit; cursor:pointer}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.display{font-family:var(--font-display)}

/* фон: тёплая бумага с еле заметными мягкими пятнами фирменных цветов */
.flyer-bg{
  background:
    radial-gradient(60vmax 50vmax at 100% 0%, rgba(242,153,74,.16), transparent 70%),
    radial-gradient(55vmax 45vmax at 0% 100%, rgba(125,178,223,.18), transparent 70%),
    radial-gradient(50vmax 40vmax at 15% 10%, rgba(246,211,91,.14), transparent 70%),
    #F7F0E1;
  background-attachment:fixed;
}

.big-btn{
  position:relative; overflow:hidden; border:0; border-radius:18px; background:var(--navy); color:#fff;
  font-weight:800; font-size:18px; letter-spacing:.3px; padding:13px 28px; min-height:52px;
  box-shadow:0 6px 16px rgba(31,79,124,.25); transition:transform .15s, box-shadow .15s, background .15s;
}
.big-btn:hover{background:#245A8C}
.big-btn:active{transform:translateY(2px); box-shadow:0 2px 6px rgba(31,79,124,.25)}
.big-btn.coral,.big-btn.alt{background:var(--coral); box-shadow:0 6px 16px rgba(229,115,90,.3)}
.big-btn.green{background:var(--navy)}
.big-btn.small{font-size:15px; padding:9px 18px; min-height:40px; border-radius:14px}
.big-btn:disabled{opacity:.6; cursor:default}
.ghost-btn{
  border:2px solid var(--line); background:var(--paper); border-radius:14px;
  padding:8px 16px; font-weight:700; font-size:14px; color:var(--ink); min-height:40px;
}
.ghost-btn:hover{border-color:#E4D3AE}
.ghost-btn.danger{color:#B8442E; border-color:#F2C6B8}
.icon-btn{
  border:0; background:var(--paper); border-radius:999px; height:42px; min-width:42px; padding:0 14px;
  font-size:18px; font-weight:800; box-shadow:var(--shadow); color:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none;
}
:is(button,a,input,select,textarea):focus-visible{outline:3px solid var(--coral); outline-offset:2px}

.overlay{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(22,59,94,.35); overflow-y:auto;
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
}
.overlay[hidden]{display:none}
.overlay:not([hidden]) > .card{animation:cardIn .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes cardIn{0%{opacity:0; transform:translateY(24px) scale(.95)}}
.card{
  position:relative; background:var(--cream); border-radius:28px; padding:26px 24px; width:min(520px,100%);
  box-shadow:0 18px 50px rgba(22,59,94,.25); text-align:center; margin:auto;
}
.card h1{font-family:var(--font-display); font-size:28px; font-weight:800; color:var(--navy); margin-bottom:8px; line-height:1.15}
.card p{color:var(--ink-soft); line-height:1.6; margin-bottom:10px}
.card .zh{color:var(--coral); font-weight:600; font-size:20px}
.card .emo{font-size:52px; line-height:1.1; margin-bottom:6px}
.name-input{
  width:100%; border:2px solid var(--line); border-radius:16px; padding:12px 16px; font-size:18px;
  font-family:inherit; font-weight:700; color:var(--ink); background:#fff;
}
.name-input:focus{border-color:var(--navy); outline:none; box-shadow:0 0 0 4px rgba(31,79,124,.12)}
.hint{font-size:13px; color:var(--ink-soft); min-height:18px; margin-top:6px}
.hint.err{color:#B8442E; font-weight:700}
.zh{font-weight:600}

/* пастельные плашки как на флаере */
.tile{border-radius:18px; padding:14px 18px}
.tile.sky{background:var(--sky-p)} .tile.peach{background:var(--peach-p)} .tile.mint{background:var(--mint-p)} .tile.lemon{background:var(--lemon-p)}
.band{background:var(--navy); color:#fff; border-radius:18px; padding:16px 20px; text-align:center}

@media (prefers-reduced-motion:reduce){ .overlay > .card{animation:none} }