/* Theme: Harry Potter and the Philosopher's Stone — night sky, parchment, house colours.
   Ornaments are CSS / inline SVG; real artwork (Hedwig, the castle, badges) lives in img/ (sources: notes/hp-theme/sources.md).
   Sizes of every control are unchanged or larger. */
:root {
  --bg: #0d1330; --bg2: #1a2350; --ink: #3a2616; --soft: #7a5f45; --card: #f6ead0;
  --parch: #f4e6c4; --parch2: #ead6a8; --edge: #b8935a; --gold: #e3b53c; --gold2: #f6dc85; --gold-d: #9c7418;
  --scarlet: #9d1c20; --scarlet-d: #5e0b0e; --blue: #24418f; --blue-d: #121f4d; --green: #22613b; --green-d: #0f3520;
  --purple: #5b2d86; --emerald: #0b6e4f; --moon: #f5e9c8;
  --orange: #9d1c20; --teal: #24418f; --pink: #e3b53c; --yellow: #e3b53c;
  --hl: #f6d77a;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; color: var(--moon);
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", sans-serif; -webkit-user-select: none; user-select: none; }
html { background: var(--bg); }
body {
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23fff6d8'%3E%3Ccircle cx='18' cy='30' r='1.2' opacity='.8'/%3E%3Ccircle cx='92' cy='14' r='.8' opacity='.6'/%3E%3Ccircle cx='160' cy='52' r='1.4' opacity='.9'/%3E%3Ccircle cx='214' cy='22' r='.9' opacity='.5'/%3E%3Ccircle cx='60' cy='96' r='.9' opacity='.6'/%3E%3Ccircle cx='132' cy='120' r='1.1' opacity='.7'/%3E%3Ccircle cx='200' cy='150' r='.8' opacity='.5'/%3E%3Ccircle cx='30' cy='170' r='1.3' opacity='.8'/%3E%3Ccircle cx='100' cy='206' r='.8' opacity='.6'/%3E%3Ccircle cx='176' cy='224' r='1.2' opacity='.7'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% -10%, #2c3a7a 0%, rgba(44,58,122,0) 60%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg) 55%, #090d22 100%);
  background-attachment: fixed;
}
button, label.pill { font: inherit; color: inherit; border: none; cursor: pointer; }
input { -webkit-user-select: text; user-select: text; }
.screen { display: none; min-height: 100%; padding: 16px 18px 40px; }
.screen.active { display: block; }

/* coin-like round buttons (hint, back, close): a gold Galleon */
.hint, .back, .close, .zclose {
  color: var(--ink);
  background: radial-gradient(circle at 35% 30%, #fff3c0 0%, var(--gold2) 28%, var(--gold) 62%, var(--gold-d) 100%);
  box-shadow: inset 0 0 0 3px rgba(122, 86, 16, .55), inset 0 0 0 6px rgba(255, 240, 190, .5), 0 4px 0 #6d4f10, 0 6px 14px rgba(0,0,0,.35);
}
.hint:active, .back:active, .close:active, .zclose:active { transform: translateY(3px); }

.title { display: flex; align-items: center; gap: 14px; font-size: 34px; font-weight: 700; padding: 18px 6px 8px;
  font-family: var(--serif); color: var(--gold2); letter-spacing: 2px; text-shadow: 0 2px 0 #3b2a06, 0 0 18px rgba(246, 220, 133, .35); }
.title .bolt { width: 30px; height: 44px; flex: none; margin-left: -6px; filter: drop-shadow(0 0 6px rgba(246, 220, 133, .6)); }
.mascot { width: 94px; height: 100px; object-fit: contain; flex: none; margin: -14px 0 -10px -4px; animation: bob 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(245,233,200,.25)); }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-4deg); } }
.hint { margin-left: auto; font-size: 30px; width: 64px; height: 64px; border-radius: 50%; }

.home-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; margin-top: 20px; position: relative; z-index: 1; }
.b-photo, .b-voice, .b-hand { grid-column: span 2; }
.b-book, .b-review { grid-column: span 3; }
.big { position: relative; border-radius: 34px; min-height: 230px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; transition: transform .1s; color: #fff8e6; overflow: hidden;
  box-shadow: inset 0 0 0 4px var(--gold), inset 0 0 0 8px rgba(0,0,0,.25), inset 0 0 0 10px rgba(246,220,133,.55), 0 8px 0 rgba(0,0,0,.45), 0 14px 24px rgba(0,0,0,.35); }
.big::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
              radial-gradient(ellipse at 50% 120%, rgba(0,0,0,.35), rgba(0,0,0,0) 60%); }
.big > * { position: relative; }
.big:active { transform: translateY(5px); box-shadow: inset 0 0 0 4px var(--gold), inset 0 0 0 8px rgba(0,0,0,.25), inset 0 0 0 10px rgba(246,220,133,.55), 0 3px 0 rgba(0,0,0,.45); }
.big .ico { font-size: 96px; line-height: 1; filter: drop-shadow(0 5px 6px rgba(0,0,0,.4)); }
.big .lbl { font-size: 30px; font-weight: 700; font-family: var(--serif); letter-spacing: 2px; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.b-photo, .b-voice, .b-hand { min-height: 300px; }
.b-photo { background: linear-gradient(160deg, #c22a2e 0%, var(--scarlet) 45%, var(--scarlet-d) 100%); }
.b-photo input { display: none; }
.b-photo .ico, .b-voice .ico, .b-hand .ico { font-size: 120px; }
.b-hand { background: linear-gradient(160deg, #2f8250 0%, var(--green) 45%, var(--green-d) 100%);
  box-shadow: inset 0 0 0 4px #c9ced6, inset 0 0 0 8px rgba(0,0,0,.25), inset 0 0 0 10px rgba(235,240,245,.55), 0 8px 0 rgba(0,0,0,.45), 0 14px 24px rgba(0,0,0,.35); }
.b-voice { background: linear-gradient(160deg, #3557b3 0%, var(--blue) 45%, var(--blue-d) 100%);
  box-shadow: inset 0 0 0 4px #c98a4b, inset 0 0 0 8px rgba(0,0,0,.25), inset 0 0 0 10px rgba(233,180,120,.55), 0 8px 0 rgba(0,0,0,.45), 0 14px 24px rgba(0,0,0,.35); }
.b-book { background: linear-gradient(160deg, #8a5530 0%, #6b3c1d 50%, #3f210d 100%); }
.b-book, .b-review { min-height: 160px; flex-direction: row; }
.b-book .ico, .b-review .ico { font-size: 64px; }
.b-review { background: linear-gradient(160deg, #f6d977 0%, var(--gold) 50%, #b5841c 100%); color: var(--ink); }
.b-review .lbl { text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.badge { position: absolute; top: 14px; right: 18px; color: #fff; font-size: 24px; font-weight: 700;
  min-width: 48px; height: 48px; border-radius: 24px; display: flex; align-items: center; justify-content: center; padding: 0 10px;
  background: radial-gradient(circle at 35% 30%, #d8433f, var(--scarlet) 55%, var(--scarlet-d)); box-shadow: inset 0 0 0 3px rgba(0,0,0,.25), 0 3px 6px rgba(0,0,0,.4); text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.badge:empty { display: none; }

/* home scene: the real Hogwarts castle on a Gryffindor scarf — below the buttons, never under text */
.scene { position: relative; height: 260px; margin: 26px -18px -40px; pointer-events: none; overflow: hidden; }
.scene .castle { position: absolute; left: 0; right: 0; top: 0; bottom: 52px; background: url("img/castle.webp") center 62% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34%); mask-image: linear-gradient(to bottom, transparent 0, #000 34%); }
.scene .scarf { position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 2px, rgba(255,255,255,0) 2px 5px),
    repeating-linear-gradient(90deg, #740001 0 70px, #d3a625 70px 84px, #740001 84px 98px, #d3a625 98px 112px);
  box-shadow: 0 -3px 0 #d3a625, 0 -6px 0 #5a0001, 0 -10px 18px rgba(0,0,0,.55); }
.scene .scarf::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 40%, rgba(0,0,0,.25)); }
.scene .candle { position: absolute; width: 16px; height: 54px; animation: float 5s ease-in-out infinite; }
.scene .candle::before { content: ""; position: absolute; left: 0; bottom: 0; width: 16px; height: 40px; border-radius: 3px;
  background: linear-gradient(90deg, #e8dcc0, #fffaf0 45%, #d8caa8); }
.scene .candle::after { content: ""; position: absolute; left: 3px; top: 0; width: 10px; height: 16px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff 0, #ffe27a 35%, #ff9c2a 70%, rgba(255,120,0,0) 100%);
  box-shadow: 0 0 14px 6px rgba(255, 196, 80, .45); animation: flick 1.6s ease-in-out infinite; }
.scene .c1 { left: 7%; top: 14px; } .scene .c2 { left: 30%; top: 40px; animation-delay: -1.5s; }
.scene .c3 { left: 86%; top: 22px; animation-delay: -3s; }
/* golden snitch: film-prop photo in three layers; each wing flutters around its root, the whole snitch drifts and hovers */
.scene .snitch { position: absolute; left: 50%; top: 26px; width: 120px; height: 151px; margin-left: -60px; z-index: 1; animation: zip 13s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 214, 110, .55)) drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.scene .sn-tilt { position: absolute; inset: 0; transform: scale(.72) rotate(-8deg); transform-origin: 50% 70%; animation: hover 2.6s ease-in-out infinite; }
.scene .snitch img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.scene .sn-wl { transform-origin: 19.6% 77%; transform: rotate(-38deg); animation: flapL .16s ease-in-out infinite alternate; }
.scene .sn-wr { transform-origin: 74.5% 77%; transform: rotate(38deg); animation: flapR .16s ease-in-out infinite alternate; }
@keyframes flapL { from { transform: rotate(-58deg); } to { transform: rotate(-16deg); } }
@keyframes flapR { from { transform: rotate(58deg); } to { transform: rotate(16deg); } }
@keyframes hover { 50% { transform: scale(.72) translateY(-10px) rotate(6deg); } }
@keyframes float { 50% { transform: translateY(-10px); } }
@keyframes flick { 0%, 100% { transform: scale(1) rotate(-2deg); opacity: 1; } 50% { transform: scale(.88, 1.08) rotate(3deg); opacity: .85; } }
@keyframes zip { 0%, 100% { transform: translate(0, 0); } 18% { transform: translate(-200px, 26px); } 30% { transform: translate(-230px, 4px); }
  52% { transform: translate(-30px, -10px); } 70% { transform: translate(190px, 30px); } 84% { transform: translate(230px, 0); } }
@media (orientation: landscape) { .scene { height: max(160px, calc(100vh - 770px)); } .scene .castle { background-position: center 34%; bottom: 40px; }
  .scene .scarf { height: 40px; } .scene .c1 { left: 12%; } .scene .c3 { left: 80%; } .scene .c2, .scene .snitch { top: 16px; } }

.bar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, rgba(227,181,60,0), rgba(227,181,60,.8) 20%, rgba(227,181,60,.8) 80%, rgba(227,181,60,0)) 1; }
.back { font-size: 34px; width: 72px; height: 72px; border-radius: 50%; }
.bar-title { font-size: 30px; font-weight: 700; font-family: var(--serif); color: var(--gold2); letter-spacing: 1px; text-shadow: 0 2px 0 #2a1d04; }
.bar .hint, .bar .pill, .bar .prog { margin-left: auto; }
.prog { font-size: 24px; color: var(--gold2); }

/* parchment pills */
.pill { display: inline-flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 600; padding: 14px 24px;
  border-radius: 40px; color: var(--ink);
  background: linear-gradient(180deg, #fbf1d8, var(--parch) 60%, var(--parch2));
  box-shadow: inset 0 0 0 2px var(--edge), 0 4px 0 #6e5232, 0 6px 12px rgba(0,0,0,.3); }
.pill:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--edge), 0 1px 0 #6e5232; }
.pill input { display: none; }

.photo-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.p-cam { background: linear-gradient(180deg, #c22a2e, var(--scarlet) 60%, var(--scarlet-d)); color: #fff8e6; font-size: 32px; padding: 20px 34px;
  box-shadow: inset 0 0 0 3px var(--gold), 0 5px 0 #3d0608, 0 8px 14px rgba(0,0,0,.35); text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.p-cam:active { box-shadow: inset 0 0 0 3px var(--gold), 0 2px 0 #3d0608; }
.p-lib { font-size: 30px; padding: 20px 30px; }
.wait { text-align: center; font-size: 90px; padding: 60px; }
.spin { display: inline-block; animation: look 1.2s ease-in-out infinite; filter: drop-shadow(0 0 16px rgba(246,220,133,.6)); }
.wait .spin { animation: fly 1.4s ease-in-out infinite; }
.wait.reading .spin { animation: look 1.2s ease-in-out infinite; }
@keyframes fly { 50% { transform: translateY(-14px) rotate(-6deg); } }
.wait-stage { font-size: 44px; font-family: var(--serif); font-weight: 700; color: var(--gold2); letter-spacing: 3px; margin-top: 18px;
  text-shadow: 0 2px 0 #2a1d04, 0 0 18px rgba(246, 220, 133, .35); }
.wait-bar { position: relative; width: min(80%, 560px); height: 34px; margin: 26px auto 0; border-radius: 17px; overflow: hidden;
  background: rgba(10, 14, 40, .65); box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 6px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.4); }
.wait-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 17px; transition: width .25s linear;
  background: linear-gradient(180deg, #c22a2e, var(--scarlet) 60%, var(--scarlet-d)); box-shadow: inset 0 0 0 3px var(--gold); }
.wait.reading .wait-bar i { width: 34%; transition: none; animation: sweep 1.3s ease-in-out infinite alternate;
  background: linear-gradient(90deg, var(--gold-d), var(--gold2), var(--gold-d)); box-shadow: 0 0 14px rgba(246,220,133,.7); }
@keyframes sweep { from { left: 0; } to { left: 66%; } }
@keyframes look { 50% { transform: translateX(30px) rotate(15deg); } }
.empty { text-align: center; font-size: 90px; padding: 50px 10px; color: var(--gold2); }
.empty small, .empty span { font-size: 26px; display: inline-block; margin-top: 8px; color: var(--moon); }

/* aged parchment surface used by pages, cards and panels */
#page, .card, #zoom, .rv-char, .wtile, .cand, .row, .hbtn, #hand-pad, #writer, .tip, .pk-grid button, .pk-sel .sel, .zalt, .heard input, .readings button {
  background-color: var(--parch);
}
#page { border-radius: 22px; padding: 18px 12px; color: var(--ink);
  background: radial-gradient(ellipse at 50% 40%, #fbf3dc 0%, var(--parch) 60%, #e3cc98 100%);
  box-shadow: inset 0 0 0 2px var(--edge), inset 0 0 40px rgba(140, 100, 40, .25), 0 8px 22px rgba(0,0,0,.4); }
#page:empty { display: none; }
.ppara { display: flex; flex-wrap: wrap; padding: 4px 0 14px; }
.ppara + .ppara::before { content: ""; width: 120px; flex: none; }   /* paragraph indent = two characters; the first paragraph may continue the previous page */
.tile.low { outline: 2px dotted #a07a4c; outline-offset: -4px; }
.tile.low.demo { display: inline-block; width: 44px; height: 44px; font-size: 30px; line-height: 44px; vertical-align: middle; color: var(--ink); background: var(--parch); }
.low-note { color: var(--moon); font-size: 16px; margin: 10px 4px; }
.tip { display: block; width: 100%; margin: 6px 0 12px; padding: 10px 14px; border-radius: 16px; color: #5a3d22; font-size: 20px; text-align: left;
  background: linear-gradient(90deg, #f9eed2, var(--parch)); box-shadow: inset 0 0 0 1px var(--edge); }
.tile { width: 60px; height: 66px; font-size: 44px; line-height: 66px; text-align: center; border-radius: 12px; background: transparent; padding: 0;
  font-family: var(--serif); color: var(--ink); }
.tile:active, .tile.hit { background: var(--hl); }
.tile.seen { color: var(--purple); }
.punct { width: 30px; height: 66px; font-size: 34px; line-height: 66px; text-align: center; color: #a68d6c; }

.talk-row { display: flex; gap: 22px; }
.talk { flex: 1; border-radius: 34px; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: #fff8e6; touch-action: none; -webkit-touch-callout: none; position: relative;
  box-shadow: inset 0 0 0 4px var(--gold), inset 0 0 0 8px rgba(0,0,0,.25), inset 0 0 0 10px rgba(246,220,133,.5), 0 8px 0 rgba(0,0,0,.45), 0 14px 24px rgba(0,0,0,.35); }
.talk .ico { font-size: 96px; filter: drop-shadow(0 5px 6px rgba(0,0,0,.4)); }
.talk .lbl { font-size: 28px; font-weight: 700; font-family: var(--serif); letter-spacing: 2px; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.t-ctx { background: linear-gradient(160deg, #3557b3 0%, var(--blue) 45%, var(--blue-d) 100%); flex: 1.4; }
.t-shape { background: linear-gradient(160deg, #7a45ad 0%, var(--purple) 45%, #2f1250 100%); }
.talk.on { transform: scale(.96); box-shadow: inset 0 0 0 4px var(--gold), 0 0 0 10px rgba(246, 220, 133, .85), 0 0 40px 14px rgba(246, 220, 133, .45); }
.talk.on .ico { animation: pulse .8s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.15); } }
.heard { display: flex; align-items: center; gap: 8px; margin: 18px 0; font-size: 26px; flex-wrap: wrap; }
.heard input { flex: 1; min-width: 160px; font-size: 26px; padding: 12px 16px; border-radius: 16px; border: 3px solid var(--edge); color: var(--ink);
  font-family: var(--serif); }
.heard input::placeholder { color: #9a8160; }
.note { font-size: 30px; text-align: center; color: var(--moon); }
#cands { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 10px; }
.cand { width: 150px; border-radius: 26px; padding: 12px 6px; text-align: center; color: var(--ink);
  background: radial-gradient(ellipse at 50% 35%, #fdf6e2 0%, var(--parch) 65%, #e6cf9d 100%);
  box-shadow: inset 0 0 0 2px var(--edge), 0 6px 0 #6e5232, 0 9px 16px rgba(0,0,0,.35); }
.cand:active { transform: translateY(4px); box-shadow: inset 0 0 0 2px var(--edge), 0 2px 0 #6e5232; }
.cand .ch { font-size: 96px; line-height: 1.1; font-family: var(--serif); }
.cand .ctx { font-size: 16px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cand .ctx b { color: var(--scarlet); }

#words { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 18px; }
.wtile { position: relative; border-radius: 24px; padding: 10px 4px 12px; text-align: center; color: var(--ink);
  background: radial-gradient(ellipse at 50% 35%, #fdf6e2 0%, var(--parch) 65%, #e6cf9d 100%);
  box-shadow: inset 0 0 0 2px var(--edge), 0 5px 0 #6e5232, 0 8px 14px rgba(0,0,0,.35); }
.wtile .ch { font-size: 76px; line-height: 1.1; font-family: var(--serif); }
.wtile .p { font-size: 20px; color: var(--soft); }
.wtile .n { position: absolute; top: 6px; right: 8px; font-size: 16px; background: var(--gold); color: var(--ink); border-radius: 12px; padding: 1px 8px; }
.wtile .stars { font-size: 14px; }

#rv-card { text-align: center; }
.rv-char { font-size: 220px; line-height: 1.15; margin: 10px auto; width: 300px; height: 300px; border-radius: 40px; color: var(--ink);
  font-family: var(--serif); display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #fdf6e2 0%, var(--parch) 60%, #ddc38c 100%);
  box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 8px var(--parch), inset 0 0 0 10px var(--edge), 0 6px 0 #6e5232, 0 0 40px rgba(246,220,133,.25); }
.rv-py { font-size: 54px; color: var(--gold2); font-weight: 700; text-shadow: 0 2px 0 #2a1d04; }
.rv-kid { font-size: 26px; margin: 6px 20px; color: var(--moon); }
.rv-btns { display: flex; gap: 24px; justify-content: center; margin-top: 22px; }
.rv { width: 220px; height: 170px; border-radius: 34px; font-size: 80px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; color: #fff8e6;
  box-shadow: inset 0 0 0 4px var(--gold), inset 0 0 0 8px rgba(0,0,0,.2), 0 7px 0 rgba(0,0,0,.45), 0 12px 20px rgba(0,0,0,.3); }
.rv:active { transform: translateY(4px); }
.rv span { font-size: 28px; font-weight: 700; font-family: var(--serif); text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.rv.yes { background: linear-gradient(160deg, #2f8250, var(--green) 50%, var(--green-d)); }
.rv.no { background: linear-gradient(160deg, #c22a2e, var(--scarlet) 50%, var(--scarlet-d)); }
.rv.sound, .rv.open, .rv.next { width: 150px; color: var(--ink); background: linear-gradient(180deg, #fbf1d8, var(--parch) 60%, var(--parch2));
  box-shadow: inset 0 0 0 2px var(--edge), 0 6px 0 #6e5232, 0 9px 16px rgba(0,0,0,.3); }

/* the character card: a Hogwarts letter */
.overlay { position: fixed; inset: 0; background: rgba(6, 9, 26, .72); display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 18px; z-index: 10; }
.overlay[hidden] { display: none; }
.card { position: relative; width: 100%; max-width: 860px; border-radius: 34px; padding: 22px 24px 26px; color: var(--ink);
  background:
    radial-gradient(ellipse at 15% 10%, rgba(255,255,255,.55), rgba(255,255,255,0) 40%),
    radial-gradient(ellipse at 50% 50%, #fbf2da 0%, var(--parch) 55%, #e2c891 100%);
  box-shadow: inset 0 0 0 3px var(--gold-d), inset 0 0 0 7px var(--parch), inset 0 0 0 9px var(--edge), inset 0 0 60px rgba(150, 105, 40, .25), 0 14px 40px rgba(0,0,0,.6);
  animation: pop .25s ease-out; }
.card::before { /* wax seal on the top edge, decoration only */
  content: ""; position: absolute; left: 50%; top: -14px; width: 58px; height: 58px; margin-left: -29px; pointer-events: none; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.38' cy='.32' r='.75'%3E%3Cstop offset='0' stop-color='%23d4474a'/%3E%3Cstop offset='.6' stop-color='%239d1c20'/%3E%3Cstop offset='1' stop-color='%235e0b0e'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M30 2c4 0 5 3 9 4s7-1 9 2 0 6 2 9 5 4 5 8-3 5-4 9 1 7-2 9-6 0-9 2-4 5-8 5-5-3-9-4-7 1-9-2 0-6-2-9-5-4-5-8 3-5 4-9-1-7 2-9 6 0 9-2 4-5 8-5z'/%3E%3Ccircle cx='30' cy='30' r='15' fill='none' stroke='%23f0a0a0' stroke-opacity='.45' stroke-width='1.5'/%3E%3Cpath fill='%23f6dc85' d='M33 16 23 32h6l-3 12 11-17h-6z'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.4)); }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }
.close { position: absolute; top: 14px; right: 14px; font-size: 30px; width: 68px; height: 68px; border-radius: 50%; z-index: 2; }
.card-top { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.writer-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* 米字格 in red-brown ink on fresh parchment */
#writer { width: 290px; height: 290px; border-radius: 24px; border: 4px solid var(--edge); touch-action: none; position: relative;
  background-color: #fffaf0;
  background-image:
    linear-gradient(rgba(157,28,32,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(157,28,32,.28) 1px, transparent 1px),
    linear-gradient(45deg, transparent calc(50% - .5px), rgba(157,28,32,.14) calc(50% - .5px), rgba(157,28,32,.14) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(-45deg, transparent calc(50% - .5px), rgba(157,28,32,.14) calc(50% - .5px), rgba(157,28,32,.14) calc(50% + .5px), transparent calc(50% + .5px));
  background-size: 50% 50%, 50% 50%, 100% 100%, 100% 100%; background-position: -1px -1px, -1px -1px, 0 0, 0 0;
  box-shadow: inset 0 0 0 3px #fffaf0, inset 0 0 0 5px rgba(227,181,60,.7), 0 4px 10px rgba(90,60,20,.25); }
.writer-btns { display: flex; gap: 12px; }
.writer-btns .pill { font-size: 22px; padding: 12px 18px; }
.py-wrap { flex: 1; min-width: 240px; }
.py-row { display: flex; align-items: center; gap: 14px; }
.py { font-size: 76px; font-weight: 700; color: var(--scarlet); text-shadow: 0 2px 0 rgba(227,181,60,.45); }
.readings { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.readings button { font-size: 26px; padding: 8px 18px; border-radius: 24px; border: 3px solid var(--edge); color: var(--ink); }
.readings button.on { background: var(--scarlet); color: #fff8e6; border-color: var(--gold); }
.star { font-size: 54px; margin-top: 10px; opacity: 0; }
.star.go { animation: star 1.6s ease-out; }
@keyframes star { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.3) rotate(20deg); } 100% { opacity: 1; transform: scale(1); } }
/* read-aloud buttons: gold coins */
.say { flex: none; width: 64px; height: 64px; border-radius: 50%; font-size: 30px;
  background: radial-gradient(circle at 35% 30%, #fff3c0 0%, var(--gold2) 28%, var(--gold) 62%, var(--gold-d) 100%);
  box-shadow: inset 0 0 0 3px rgba(122, 86, 16, .55), inset 0 0 0 6px rgba(255, 240, 190, .5), 0 4px 0 #6d4f10; }
.say:active { transform: translateY(3px); box-shadow: inset 0 0 0 3px rgba(122, 86, 16, .55), 0 1px 0 #6d4f10; }
.rows { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 14px; border-radius: 22px; padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255,251,240,.92), rgba(250,240,214,.92)); box-shadow: inset 0 0 0 1.5px rgba(184,147,90,.8), 0 2px 4px rgba(90,60,20,.12); }
.row .tag { font-size: 34px; flex: none; }
.row .txt { flex: 1; font-size: 28px; line-height: 1.45; }
.row.en .txt { font-size: 26px; font-family: Georgia, "Times New Roman", serif; color: #0b4f39; }
.row.en .txt b { font-family: -apple-system, "PingFang SC", sans-serif; color: var(--ink); }
.word { flex: 1; display: flex; gap: 6px; }
ruby { font-size: 48px; ruby-position: over; font-family: var(--serif); }
rt { font-size: 18px; color: var(--soft); font-family: -apple-system, sans-serif; }
.sent { font-family: var(--serif); }
.sent mark { background: var(--hl); color: var(--scarlet-d); border-radius: 6px; padding: 0 2px; box-shadow: 0 0 0 2px rgba(227,181,60,.6); }

#toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #1a2350; color: var(--gold2); font-size: 26px;
  padding: 14px 26px; border-radius: 30px; z-index: 20; box-shadow: inset 0 0 0 2px var(--gold), 0 6px 18px rgba(0,0,0,.5); }
#toast[hidden] { display: none; }

@media (max-width: 700px) {
  .big .ico { font-size: 70px; } .big { min-height: 170px; }
  .tile { width: 48px; height: 56px; font-size: 36px; line-height: 56px; }
  .ppara + .ppara::before { width: 96px; }
  #writer { width: 240px; height: 240px; }
}

.said-row { width: 100%; text-align: center; font-size: 30px; margin-top: 8px; color: var(--moon); }
.cand.said { width: 110px; background: #fbf5e4; }
.cand.said .ch { font-size: 72px; }

/* ---------- 写字找字 ---------- */
#hand.active { touch-action: manipulation; }
.hand-wrap { display: flex; gap: 22px; align-items: stretch; justify-content: center; flex-wrap: wrap; }
#hand-pad { width: min(560px, 92vw); height: min(560px, 92vw); border-radius: 30px; border: 5px solid var(--edge);
  touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; display: block;
  background-color: #fffaf0;
  background-image:
    linear-gradient(rgba(157,28,32,.3) 2px, transparent 2px), linear-gradient(90deg, rgba(157,28,32,.3) 2px, transparent 2px),
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0) 60%, rgba(200,160,90,.25) 100%);
  background-size: 50% 50%, 50% 50%, 100% 100%; background-position: -1px -1px, -1px -1px, 0 0;
  box-shadow: inset 0 0 0 4px #fffaf0, inset 0 0 0 7px rgba(227,181,60,.75), 0 10px 26px rgba(0,0,0,.45); }
.hand-btns { display: flex; flex-direction: column; gap: 22px; }
.hbtn { width: 170px; flex: 1; min-height: 150px; border-radius: 30px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; color: var(--ink);
  background: radial-gradient(ellipse at 50% 35%, #fdf6e2 0%, var(--parch) 65%, #e6cf9d 100%);
  box-shadow: inset 0 0 0 2px var(--edge), inset 0 0 0 6px rgba(255,250,235,.7), 0 6px 0 #6e5232, 0 10px 18px rgba(0,0,0,.35); }
.hbtn:active { transform: translateY(4px); box-shadow: inset 0 0 0 2px var(--edge), 0 2px 0 #6e5232; }
.hbtn .ico { font-size: 64px; line-height: 1; }
.hbtn .lbl { font-size: 26px; font-weight: 700; font-family: var(--serif); }
#hand-cands { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 22px; min-height: 140px; }
#hand-cands .cand { width: 140px; }
#hand-cands .cand .ch { font-size: 100px; }
#hand-cands .cand.mine { box-shadow: inset 0 0 0 3px var(--gold), 0 6px 0 var(--gold-d), 0 0 18px rgba(246,220,133,.55); }
@media (max-width: 860px) and (orientation: portrait) {
  .hand-btns { flex-direction: row; width: min(560px, 92vw); }
  .hbtn { min-height: 110px; flex-direction: row; gap: 12px; }
}

/* photo view: her photo, tap a character on it */
.p-view { font-size: 26px; padding: 20px 26px; }
#pv { position: relative; overflow: hidden; border-radius: 18px; background: #1c1610; touch-action: none;
  box-shadow: 0 0 0 3px var(--gold-d), 0 0 0 5px rgba(246,220,133,.4), 0 10px 26px rgba(0,0,0,.5); }
#pv-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
#pv-img { display: block; }
#pv-mark { position: absolute; border: 3px solid var(--gold); border-radius: 6px; background: rgba(246, 220, 133, .28);
  box-shadow: 0 0 12px 2px rgba(246, 220, 133, .8); pointer-events: none; }
#pv-hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: rgba(13, 19, 48, .82);
  color: var(--gold2); font-size: 20px; padding: 6px 16px; border-radius: 20px; pointer-events: none; white-space: nowrap; box-shadow: inset 0 0 0 1.5px rgba(227,181,60,.7); }
#zoom { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 16px;
  border-radius: 26px; padding: 14px 18px; color: var(--ink);
  background: radial-gradient(ellipse at 50% 40%, #fbf2da 0%, var(--parch) 60%, #e2c891 100%);
  box-shadow: inset 0 0 0 3px var(--gold-d), inset 0 0 0 6px var(--parch), inset 0 0 0 8px var(--edge), 0 -4px 24px rgba(0, 0, 0, .55); }
#zoom[hidden] { display: none; }
#zoom-crop { width: 330px; height: 140px; border-radius: 14px; background: #fff; flex: none; box-shadow: inset 0 0 0 2px var(--edge), 0 2px 6px rgba(90,60,20,.3); }
.zoom-arrow { font-size: 34px; }
.zchar { width: 140px; height: 140px; border-radius: 24px; color: #fff8e6; font-size: 100px; line-height: 1; flex: none; font-family: var(--serif);
  background: linear-gradient(160deg, #c22a2e, var(--scarlet) 50%, var(--scarlet-d)); text-shadow: 0 3px 0 rgba(0,0,0,.4);
  box-shadow: inset 0 0 0 4px var(--gold), inset 0 0 0 8px rgba(0,0,0,.2), 0 6px 0 #3d0608, 0 0 20px rgba(246,220,133,.45); }
.zchar:active { transform: translateY(4px); box-shadow: inset 0 0 0 4px var(--gold), 0 2px 0 #3d0608; }
#zoom-alts { display: flex; flex-direction: column; gap: 10px; }
.zalt { width: 64px; height: 64px; border-radius: 16px; font-size: 44px; color: var(--ink); font-family: var(--serif);
  background: linear-gradient(180deg, #fffaf0, var(--parch)); box-shadow: inset 0 0 0 2px var(--edge), 0 3px 0 #6e5232; }
.zclose { margin-left: auto; font-size: 26px; width: 56px; height: 56px; border-radius: 50%; align-self: flex-start; }
@media (max-width: 700px) {
  #zoom-crop { width: 200px; height: 100px; }
  .zchar { width: 100px; height: 100px; font-size: 72px; }
  .zoom-arrow { display: none; }
}

/* ✋ 长什么样：点一点偏旁 */
#shape { padding-bottom: 24px; }
.pk-top { position: sticky; top: 0; z-index: 5; background: linear-gradient(180deg, var(--bg2), var(--bg)); padding: 6px 0 8px;
  box-shadow: 0 8px 14px -8px rgba(0,0,0,.6); }
.pk-sel { display: flex; align-items: center; gap: 12px; }
.pk-sel .sel { width: 92px; height: 92px; border-radius: 22px; font-size: 64px; line-height: 92px; color: var(--ink); font-family: var(--serif);
  background: linear-gradient(180deg, #fffaf0, var(--parch)); box-shadow: inset 0 0 0 3px var(--gold), 0 5px 0 #6e5232; }
.pk-sel .sel.empty { color: rgba(246,220,133,.75); background: rgba(255,255,255,.04); border: 3px dashed rgba(227,181,60,.7); box-shadow: none; }
.pk-sel .plus { font-size: 34px; }
.pk-sel .pill { margin-left: auto; }
.pk-cands { display: flex; gap: 10px; min-height: 120px; margin-top: 10px; overflow-x: auto; }
.pk-cands .cand { width: 112px; flex: 0 0 auto; padding: 6px 4px; }
.pk-cands .cand .ch { font-size: 78px; }
.pk-cands .cand.mine { box-shadow: inset 0 0 0 3px var(--gold), 0 6px 0 var(--gold-d), 0 0 14px rgba(246,220,133,.5); }
.pk-cands .note { font-size: 26px; color: var(--moon); align-self: center; }
.pk-row { margin-top: 12px; }
.pk-lbl { font-size: 24px; font-weight: 700; margin: 4px 2px 8px; color: var(--gold2); font-family: var(--serif); }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.pk-grid button { height: 70px; border-radius: 16px; font-size: 46px; line-height: 70px; color: var(--ink); font-family: var(--serif);
  background: linear-gradient(180deg, #fdf5e0, var(--parch) 70%, var(--parch2)); box-shadow: inset 0 0 0 1.5px var(--edge), 0 4px 0 #6e5232; }
.pk-grid button.on { background: linear-gradient(180deg, var(--gold2), var(--gold)); transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--gold-d), 0 2px 0 #6d4f10, 0 0 14px rgba(246,220,133,.7); }
.pk-grid button.pair { background: linear-gradient(180deg, #eef7ea, #d9ecd2); box-shadow: inset 0 0 0 1.5px #5d8a62, 0 4px 0 #2f5a37; }
.pk-talk { margin-top: 16px; }
.talk-s { font-size: 26px; font-weight: 700; padding: 14px 22px; border-radius: 22px; color: #fff8e6;
  background: linear-gradient(180deg, #3557b3, var(--blue) 60%, var(--blue-d)); box-shadow: inset 0 0 0 2px var(--gold), 0 5px 0 #070e2a; }
.talk-s.on { box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 8px rgba(246, 220, 133, .85); }
.pk-grid button.more { background: linear-gradient(180deg, var(--gold2), var(--gold)); font-size: 36px; }



/* ---------- review game ---------- */
.cup { margin-left: 6px; font-size: 40px; width: 84px; height: 84px; border-radius: 50%; color: var(--ink);
  background: radial-gradient(circle at 35% 30%, #fff3c0 0%, var(--gold2) 28%, var(--gold) 62%, var(--gold-d) 100%);
  box-shadow: inset 0 0 0 3px rgba(122, 86, 16, .55), inset 0 0 0 6px rgba(255, 240, 190, .5), 0 4px 0 #6d4f10, 0 6px 14px rgba(0,0,0,.35); }
.cup:active { transform: translateY(3px); }
.score { display: flex; gap: 16px; justify-content: center; margin: 4px 0 14px; }
.sc { display: flex; align-items: center; gap: 8px; padding: 8px 22px 8px 14px; border-radius: 40px; min-width: 150px; justify-content: center;
  background: linear-gradient(180deg, rgba(116,0,1,.9), rgba(70,0,1,.95)); box-shadow: inset 0 0 0 3px #d3a625, 0 4px 0 rgba(0,0,0,.4); }
.sc .ico { font-size: 40px; line-height: 1; }
.sc b { font-size: 46px; color: var(--gold2); font-family: Georgia, var(--serif); text-shadow: 0 2px 0 #2a1d04; min-width: 1.2em; text-align: center; }
.sc small { font-size: 20px; color: var(--moon); font-family: var(--serif); }
.rv-ask-row { display: flex; gap: 22px; justify-content: center; align-items: center; margin: 6px 0 4px; }
.listen { display: flex; align-items: center; gap: 14px; height: 120px; padding: 0 40px; border-radius: 60px; color: #fff8e6;
  background: linear-gradient(160deg, #c22a2e, var(--scarlet) 50%, var(--scarlet-d));
  box-shadow: inset 0 0 0 4px var(--gold), inset 0 0 0 8px rgba(0,0,0,.2), 0 7px 0 rgba(0,0,0,.45), 0 12px 20px rgba(0,0,0,.3); }
.listen:active { transform: translateY(4px); }
.listen .ico { font-size: 64px; }
.listen .lbl { font-size: 32px; font-weight: 700; font-family: var(--serif); letter-spacing: 2px; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.hintcoin { width: 120px; height: 120px; border-radius: 50%; font-size: 60px; color: var(--ink);
  background: radial-gradient(circle at 35% 30%, #fff3c0 0%, var(--gold2) 28%, var(--gold) 62%, var(--gold-d) 100%);
  box-shadow: inset 0 0 0 3px rgba(122, 86, 16, .55), inset 0 0 0 6px rgba(255, 240, 190, .5), 0 5px 0 #6d4f10, 0 8px 16px rgba(0,0,0,.35); }
.hintcoin:disabled { opacity: .45; }
.choices { display: flex; gap: 26px; justify-content: center; margin: 22px 0 6px; flex-wrap: wrap; }
.choice { width: 220px; height: 220px; border-radius: 36px; font-size: 160px; line-height: 1; font-family: var(--serif); color: var(--ink);
  background: radial-gradient(ellipse at 50% 40%, #fdf6e2 0%, var(--parch) 60%, #ddc38c 100%);
  box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 8px var(--parch), inset 0 0 0 10px var(--edge), 0 7px 0 #6e5232, 0 12px 22px rgba(0,0,0,.35);
  transition: transform .15s, opacity .3s, filter .3s; }
.choice:active { transform: translateY(4px); }
.choice.wrong { opacity: .35; filter: grayscale(.7); animation: wobble .5s; }
.choice.gone { opacity: .15; }
.choice.right { box-shadow: inset 0 0 0 5px #d3a625, inset 0 0 0 10px var(--parch), 0 0 0 6px #f6dc85, 0 0 40px 10px rgba(246,220,133,.75); animation: pop .5s; }
.choices.solved > :not(.right) { opacity: .15; }
@keyframes wobble { 25% { transform: rotate(-4deg); } 50% { transform: rotate(3deg); } 75% { transform: rotate(-2deg); } }
@keyframes pop { 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.plus1 { position: absolute; left: 50%; margin-left: 70px; margin-top: -250px; font-size: 64px; font-weight: 800; color: var(--gold2);
  text-shadow: 0 3px 0 #5a3d05, 0 0 20px rgba(246,220,133,.8); font-family: Georgia, serif; animation: rise 1.2s ease-out forwards; pointer-events: none; }
@keyframes rise { 0% { transform: translateY(20px) scale(.6); opacity: 0; } 30% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { transform: translateY(-60px) scale(1); opacity: 0; } }
#rv-card { position: relative; }
.rv-crest { display: block; width: 150px; margin: 40px auto 0; opacity: .85; pointer-events: none; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
@media (orientation: landscape) { .rv-crest { display: none; } .bd-name { font-size: 20px; } }
.done-btns { display: inline-flex; gap: 20px; margin-top: 22px; }
#rv-sum { font-size: 34px; color: var(--gold2); font-family: var(--serif); }

/* ---------- badges ---------- */
.medal { position: relative; width: 150px; height: 150px; border-radius: 50%; margin: 0 auto;
  filter: drop-shadow(0 6px 4px rgba(0,0,0,.45)) drop-shadow(0 10px 14px rgba(0,0,0,.35)); }
/* art fills the disc inside the shared engraved frame (img/badges/frame.webp, rim = outer 13.5%) */
.medal .art { position: absolute; inset: 7%; width: 86%; height: 86%; border-radius: 50%; object-fit: cover; }
.medal .frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.medal::after { content: ""; position: absolute; inset: 7%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 35% 22%, rgba(255,255,255,.26), rgba(255,255,255,0) 46%); }
.bd { background: none; padding: 10px 4px 12px; border-radius: 24px; color: var(--moon); }
.bd:active { transform: translateY(3px); }
.bd.locked .medal .frame { filter: saturate(.25) brightness(.78); }
.bd.locked .medal::after { opacity: .35; }
.bd .q { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 60px; color: rgba(246,220,133,.8);
  font-family: var(--serif); text-shadow: 0 2px 6px #000; }
.bd-name { font-size: 22px; font-weight: 700; font-family: var(--serif); color: var(--gold2); margin-top: 10px; text-shadow: 0 2px 0 #2a1d04; }
.bd.locked .bd-name { color: rgba(246,220,133,.55); }
.bd-how { font-size: 16px; color: rgba(245,233,200,.7); margin-top: 4px; }
.bd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; }
@media (orientation: landscape) { .bd-grid { grid-template-columns: repeat(6, 1fr); } }
.bd-stats { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; font-size: 22px; margin: 0 0 18px; color: var(--moon); }
.bd-stats b { font-size: 30px; color: var(--gold2); font-family: Georgia, var(--serif); }
#badges { background: linear-gradient(180deg, rgba(13,19,48,.55), rgba(9,13,34,.92) 70%), url("img/greathall.webp") center top / cover no-repeat fixed; }

/* unlock: the badge flies in with golden rays */
.unlock { align-items: center; background: rgba(6, 9, 26, .86); z-index: 20; }
.ul-box { position: relative; text-align: center; padding: 30px 40px 34px; }
.ul-rays { position: absolute; left: 50%; top: 46%; width: 900px; height: 900px; margin: -450px 0 0 -450px; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(rgba(246,220,133,.22) 0 9deg, rgba(246,220,133,0) 9deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 62%); mask-image: radial-gradient(circle, #000 0, transparent 62%); }
.unlock.go .ul-rays { animation: spin 14s linear infinite; }
.ul-title { position: relative; font-size: 40px; font-family: var(--serif); font-weight: 700; color: var(--gold2); text-shadow: 0 2px 0 #2a1d04, 0 0 20px rgba(246,220,133,.6); }
.big-medal { width: 300px; height: 300px; margin: 22px auto 16px; }
.big-medal { filter: drop-shadow(0 0 30px rgba(246,220,133,.55)) drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
.unlock.go .big-medal { animation: medal-in 1.1s cubic-bezier(.2,1.4,.4,1) both; }
.ul-name { position: relative; font-size: 46px; font-family: var(--serif); font-weight: 700; color: #fff8e6; text-shadow: 0 3px 0 #5e0b0e, 0 0 24px rgba(246,220,133,.7); }
.unlock.go .ul-name { animation: fade-up .8s .6s both; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes medal-in { 0% { transform: scale(.1) rotate(-200deg); opacity: 0; } 70% { opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes fade-up { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body.busy #zoom-main, body.busy .zalt { opacity: .55; transform: scale(.96); transition: none; }

/* ---------- 读书 (reader.js): the 了了的图书馆 reader in the house style ---------- */
.b-read { grid-column: span 6; min-height: 160px; flex-direction: row;
  background: linear-gradient(160deg, #7a4bb0 0%, var(--purple) 50%, #2f1450 100%); }
.b-read .ico { font-size: 72px; }
.b-read .lbl { font-size: 34px; }
.b-read .sub { font-size: 20px; color: var(--gold2); margin-left: 8px; align-self: center; }
.offline-note, .pack-note { margin: 18px 4px 0; padding: 14px 20px; border-radius: 18px; font-size: 22px; text-align: center;
  color: var(--ink); background: linear-gradient(180deg, #fbf1d8, var(--parch)); box-shadow: inset 0 0 0 2px var(--edge); position: relative; z-index: 1; }
.pack-note { font-size: 18px; padding: 8px 16px; color: var(--soft); }
body.offline .b-photo, body.offline .b-voice, body.offline .b-hand { filter: grayscale(.85) brightness(.7); }
body.offline .b-photo::after, body.offline .b-voice::after, body.offline .b-hand::after { content: "要连网"; position: absolute; top: 14px; right: 16px;
  font-size: 20px; font-weight: 700; padding: 4px 12px; border-radius: 14px; background: var(--parch); color: var(--ink); }

#lib-list { display: flex; flex-direction: column; gap: 18px; padding: 8px 0 30px; }
.lib-book { display: flex; align-items: center; gap: 24px; text-align: left; min-height: 120px; padding: 18px 24px; border-radius: 26px;
  color: var(--ink); background: linear-gradient(180deg, #fbf1d8, var(--parch) 60%, var(--parch2));
  box-shadow: inset 0 0 0 3px var(--edge), 0 5px 0 #6e5232, 0 8px 16px rgba(0,0,0,.35); }
.lib-book:active { transform: translateY(4px); }
.lib-spine { flex: none; width: 58px; height: 84px; border-radius: 6px 10px 10px 6px;
  background: linear-gradient(90deg, #4a0d0f 0 10px, var(--scarlet) 10px); box-shadow: inset 0 0 0 2px var(--gold), 0 3px 6px rgba(0,0,0,.35); }
.lib-get .lib-spine { background: linear-gradient(90deg, #26164a 0 10px, var(--purple) 10px); }
.lib-txt { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.lib-txt b { font-size: 32px; font-family: var(--serif); }
.lib-txt small { font-size: 22px; color: var(--soft); }
.lib-bar { display: block; height: 14px; border-radius: 7px; background: rgba(0,0,0,.12); overflow: hidden; margin-top: 6px; }
.lib-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold2)); }
.lib-msg { font-size: 26px; text-align: center; color: var(--moon); padding: 30px 10px; }
.lib-retry { margin-top: 22px; min-height: 88px; padding: 0 40px; font-size: 32px; }

.rt-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#rt-list { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 30px; }
.rt-item { display: block; width: 100%; min-height: 76px; padding: 14px 26px; text-align: left; font-size: 28px; font-family: var(--serif);
  border-radius: 22px; color: var(--ink); background: linear-gradient(180deg, #fbf1d8, var(--parch) 60%, var(--parch2));
  box-shadow: inset 0 0 0 2px var(--edge), 0 4px 0 #6e5232; }
.rt-item:active { transform: translateY(3px); }
.rt-item.has-kids { font-size: 32px; font-weight: 700; }
.rt-item.rt-start { background: linear-gradient(180deg, #f6d977, var(--gold)); }
.rt-continue { margin: 0 0 18px; font-weight: 700; background: linear-gradient(180deg, #f6d977, var(--gold)); }

#reader.active { display: flex; flex-direction: column; position: fixed; inset: 0; min-height: 0; padding: 10px 14px 12px; }
.rd-bar { flex: none; margin-bottom: 8px; }
.rd-bar .pill { margin-left: 0; }
.rd-title { flex: 1; min-width: 0; font-size: 24px; font-family: var(--serif); color: var(--gold2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rd-sq { min-width: 72px; min-height: 64px; justify-content: center; font-size: 28px; }
#rd-page { flex: 1; position: relative; overflow: hidden; padding: 30px 40px; border-radius: 18px; touch-action: none;
  color: #2b1d14; background: linear-gradient(180deg, #fbf3df, var(--parch) 70%, #efdcb2);
  box-shadow: inset 0 0 0 3px var(--edge), inset 0 0 40px rgba(122, 86, 16, .18), 0 8px 20px rgba(0,0,0,.45);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#rd-flow { height: 100%; column-fill: auto; font-family: var(--serif); line-height: 1.8; text-align: justify; will-change: transform; }
#rd-flow p { margin: 0 0 .35em; text-indent: 2em; orphans: 1; widows: 1; }
#rd-flow h2 { font-size: 1.25em; text-align: center; margin: .6em 0 .8em; color: var(--scarlet); break-after: avoid; }
#rd-flow p.note { font-size: .75em; text-indent: 0; line-height: 1.6; color: var(--soft); }
#rd-flow p.note::before { content: "注　"; font-weight: 700; }
#rd-flow .pic { text-align: center; margin: .4em 0; break-inside: avoid; -webkit-column-break-inside: avoid; }
#rd-flow .pic img { max-width: 100%; max-height: calc(var(--colh, 800px) - 1em); object-fit: contain; filter: sepia(.25); }
#rd-flow .pic.small-pic img { max-height: 4.5em; }
#rd-hl { position: absolute; border-radius: 8px; pointer-events: none; background: rgba(246, 215, 122, .45); box-shadow: 0 0 0 3px var(--gold); }
.rd-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; }
.rd-turn { min-width: 200px; min-height: 72px; justify-content: center; font-size: 28px; }
.rd-turn:disabled { opacity: .4; }
#rd-pn { font-size: 22px; color: var(--gold2); text-align: center; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- review question types: 看字找图 (pic), 补上缺的字 (blank), 看字选读音 (sound) ---------- */
.rv-q:empty { display: none; }
.rv-q { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 16px 0 0; }
.qchar { width: 190px; height: 190px; display: flex; align-items: center; justify-content: center; font-size: 150px; line-height: 1;
  font-family: var(--serif); color: var(--ink); border-radius: 30px;
  background: radial-gradient(ellipse at 50% 40%, #fdf6e2 0%, var(--parch) 60%, #ddc38c 100%);
  box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 8px var(--parch), inset 0 0 0 10px var(--scarlet), 0 0 0 4px rgba(246,220,133,.5), 0 0 34px rgba(246,220,133,.45); }
.qword { font-size: 54px; font-family: var(--serif); color: var(--moon); letter-spacing: 4px; }
.qword b { color: var(--gold2); }
.qblank { font-size: 120px; line-height: 1.15; font-family: var(--serif); color: var(--ink); letter-spacing: 10px; padding: 6px 30px 10px 40px; border-radius: 30px;
  background: radial-gradient(ellipse at 50% 40%, #fdf6e2 0%, var(--parch) 60%, #ddc38c 100%);
  box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 8px var(--parch), inset 0 0 0 10px var(--edge), 0 8px 18px rgba(0,0,0,.35); }
.gap { display: inline-block; width: 1em; height: 1em; line-height: 1em; vertical-align: -0.08em; text-align: center; font-size: .9em; color: rgba(116, 0, 1, .5);
  border: 6px dashed var(--scarlet); border-radius: .16em; margin: 0 .04em; background: rgba(255,255,255,.35); }
.gap.filled { font-size: 1em; width: 1.04em; height: 1.08em; line-height: 1.08em; vertical-align: -0.12em; color: var(--scarlet); border-style: solid; border-color: var(--gold); background: rgba(246,220,133,.35); animation: pop .5s; }
.qsent { max-width: 92%; font-size: 30px; line-height: 1.5; color: var(--moon); font-family: var(--serif); text-align: center; }
.qsent .gap { border-width: 3px; border-color: var(--gold2); color: transparent; background: none; }
.choice.pic { font-size: 130px; font-family: system-ui; }
.c-pic .choice, .c-listen .choice, .c-blank .choice { width: 210px; height: 210px; }
.c-listen .choice, .c-blank .choice { font-size: 150px; }
.c-sound { gap: 22px; }
.sndopt { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 210px; padding: 16px 0 18px; border-radius: 34px;
  background: rgba(255, 248, 225, .08); box-shadow: inset 0 0 0 3px rgba(246,220,133,.35); transition: opacity .3s, filter .3s; }
.sndplay { width: 150px; height: 150px; border-radius: 50%; font-size: 76px; display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.35), inset 0 -10px 20px rgba(0,0,0,.25), 0 6px 0 rgba(0,0,0,.4), 0 10px 18px rgba(0,0,0,.35); }
.sndplay:active { transform: translateY(4px); }
.s-red .sndplay { background: radial-gradient(circle at 40% 30%, #e0565b, #a3141a 60%, #5e0b0e); }
.s-blue .sndplay { background: radial-gradient(circle at 40% 30%, #6d8be0, #2c4aa8 60%, #142a66); }
.s-green .sndplay { background: radial-gradient(circle at 40% 30%, #5bbf88, #1f7a4a 60%, #0d4127); }
.sndopt.heard { box-shadow: inset 0 0 0 4px var(--gold2), 0 0 26px rgba(246,220,133,.45); }
.choice.sndpick { width: 180px; height: 84px; border-radius: 24px; font-size: 34px; font-family: var(--sans, system-ui); font-weight: 700; }
.sndopt.wrong { opacity: .35; filter: grayscale(.7); animation: wobble .5s; }
.sndopt.gone { opacity: .15; }
.sndopt.right { box-shadow: inset 0 0 0 5px #d3a625, 0 0 0 6px #f6dc85, 0 0 40px 10px rgba(246,220,133,.75); animation: pop .5s; }
@media (orientation: landscape) { .qchar { width: 150px; height: 150px; font-size: 118px; } .qblank { font-size: 90px; }
  .c-pic .choice, .c-listen .choice, .c-blank .choice { width: 180px; height: 180px; } .c-listen .choice, .c-blank .choice { font-size: 130px; } .choice.pic { font-size: 110px; } }
/* 冒险 must fit on one iPad screen without scrolling (landscape 1024x768 and up, portrait 768x1024 and up): smaller gaps and
   character tile, never smaller buttons. Landscape: the character sits beside the choices (pic, sound) and the answer beside 🔊 🔍 ➡️. */
#review { padding-bottom: 12px; }
#review .score { margin: 0 0 8px; }
#review .rv-q { margin-top: 8px; }
#review .choices { margin: 12px 0 4px; }
.c-sound .sndopt { padding: 12px 0; gap: 10px; }
.choice.sndpick { white-space: nowrap; padding: 0; }
#review .rv-py { line-height: 1.1; }
#review .rv-btns { margin-top: 12px; }
@media (orientation: portrait) { .q-pic .qchar, .q-sound .qchar { width: 160px; height: 160px; font-size: 126px; } .rv-q.answered .qword { display: none; } }
@media (orientation: landscape) {
  #review .bar { margin-bottom: 8px; }
  #rv-card { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 34px; }
  #rv-card > * { flex: 0 0 100%; }
  #rv-card > .q-pic, #rv-card > .q-sound, #rv-card > .c-pic, #rv-card > .c-sound { flex: 0 0 auto; margin-top: 8px; }
  #rv-card > .q-pic, #rv-card > .q-sound { min-width: 150px; }
  #rv-card > #rv-answer { flex: 0 1 auto; max-width: 430px; }
  #rv-card > #rv-next-row { flex: 0 0 auto; }
  #review .qblank { font-size: 80px; }
}

/* ---------- round 4: 冒险 (wand logo), 魔法地图, 魔咒书 (world.js) ---------- */
.b-review .ico .wand-logo { width: 96px; height: 96px; display: block; filter: drop-shadow(0 4px 4px rgba(60,40,0,.45)); }
.wand-mini { width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: 6px; filter: drop-shadow(0 0 6px rgba(246,220,133,.7)); }
.pill-wand .wand-mini { filter: none; margin-right: 0; }
/* 金加隆 (galleon): a gold coin drawn inline (#gal-sym in index.html); the 🪙 emoji is a silver coin on iPad. Sized like the emoji it replaces */
.gal { width: 1em; height: 1em; vertical-align: -0.14em; display: inline-block; flex: none; }
.rv-title { white-space: nowrap; }
#review .bar .prog { margin-left: auto; }
#review .bar .cup { flex: none; }
.rv.go { width: 230px; font-size: 34px; font-weight: 700; font-family: var(--serif); color: #fff8e6;
  background: linear-gradient(160deg, #7a4bb0, var(--purple) 50%, #2f1450); box-shadow: inset 0 0 0 3px var(--gold), 0 6px 0 #1d0b33, 0 10px 18px rgba(0,0,0,.35); }
.done-btns + br + .done-btns { margin-top: 18px; }
#ul-art.ul-region { background-repeat: no-repeat; background-color: #e9d7ac; }
#ul-art.ul-spell svg, .sp-medal .art svg { width: 100%; height: 100%; display: block; border-radius: 50%; }

/* the map: a tall parchment picture under dark fog; labels, portraits and locks on top */
#map-stage { position: relative; width: 100%; aspect-ratio: 1600 / 3880; border-radius: 18px; overflow: hidden;
  background: #05081a center / 100% 100% no-repeat;   /* world.js sets the tiny blurred map (world.json "tiny") at once */
  box-shadow: 0 0 0 3px var(--gold-d), 0 0 0 6px rgba(246,220,133,.35), 0 12px 30px rgba(0,0,0,.6); }
#map-fog, #map-fx, #map-art, #map-shimmer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the map picture comes in bands (world.json "bands"), each fades in when it has loaded */
#map-art img { position: absolute; left: 0; width: 100%; display: block; opacity: 0; transition: opacity .6s; }
#map-art img.in { opacity: 1; }
/* while a band is still loading: a soft gold shimmer over the blurred map (only visible where the fog is open) */
#map-shimmer { pointer-events: none; opacity: 0; transition: opacity .6s;
  background: linear-gradient(105deg, rgba(246,220,133,0) 30%, rgba(255,244,205,.38) 50%, rgba(246,220,133,0) 70%) 0 0 / 200% 100%; }
#map-shimmer.on { opacity: 1; animation: map-shim 2.2s linear infinite; }
@keyframes map-shim { from { background-position: 150% 0; } to { background-position: -50% 0; } }
#map-wait { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 12; display: flex; align-items: center; gap: 12px;
  padding: 14px 30px; border-radius: 40px; font-size: 26px; font-family: var(--serif); font-weight: 700; color: var(--gold2);
  background: rgba(14, 18, 48, .9); box-shadow: inset 0 0 0 2px rgba(246,220,133,.6), 0 8px 24px rgba(0,0,0,.5); pointer-events: none; }
#map-wait[hidden] { display: none; }
#map-wait .mw-ic { display: inline-block; animation: mw-unroll 1.6s ease-in-out infinite; }
@keyframes mw-unroll { 50% { transform: rotate(-10deg) scale(1.15); } }
#map-fx { pointer-events: none; }
#map-fog { pointer-events: none; }
#map-pins { position: absolute; inset: 0; }
#map-pins > * { position: absolute; transform: translate(-50%, -50%); }
.mp-label { min-height: 56px; padding: 8px 20px; font-size: 22px; font-weight: 700; font-family: var(--serif); color: #fff8e6; white-space: nowrap;
  border-radius: 12px; background: linear-gradient(180deg, #b52a2e, var(--scarlet) 55%, var(--scarlet-d));
  box-shadow: inset 0 0 0 2px var(--gold), 0 4px 0 #3d0608, 0 6px 12px rgba(0,0,0,.45); text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.mp-label::before, .mp-label::after { content: ""; position: absolute; top: 10px; width: 16px; height: 36px; background: var(--scarlet-d); z-index: -1; }
.mp-label::before { left: -10px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.mp-label::after { right: -10px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.mp-label:active { transform: translate(-50%, -46%); }
.mp-tok { width: 66px; height: 66px; padding: 0; border-radius: 50%; overflow: hidden; background: var(--parch);
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px rgba(59,42,6,.8), 0 6px 12px rgba(0,0,0,.55); }
.mp-tok img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-tok.loading { background: linear-gradient(105deg, #e9d7ac 30%, #fff4cd 50%, #e9d7ac 70%) 0 0 / 200% 100%; animation: map-shim 1.6s linear infinite; }
.mp-tok.loading img { opacity: 0; }
.mp-tok:active { transform: translate(-50%, -46%) scale(.96); }
.mp-tok.ping { animation: tok-ping .6s; }
@keyframes tok-ping { 40% { box-shadow: 0 0 0 3px var(--gold), 0 0 0 12px rgba(246,220,133,.6), 0 0 30px rgba(246,220,133,.9); } }
.mp-lock { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 120px; min-height: 76px; padding: 6px 14px;
  border-radius: 20px; color: var(--gold2); background: rgba(14, 18, 48, .78); box-shadow: inset 0 0 0 2px rgba(246,220,133,.55), 0 0 18px rgba(246,220,133,.15); }
.mp-lock .q { font-size: 34px; font-family: var(--serif); line-height: 1; }
.mp-lock small { font-size: 18px; color: rgba(245,233,200,.85); margin-top: 4px; white-space: nowrap; }
.mp-lock.later { opacity: .8; }
.mp-hide { visibility: hidden; }
.mp-in { animation: mp-in .9s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes mp-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.mp-panel { align-items: flex-end; z-index: 15; }
.mp-box { position: relative; width: 100%; max-width: 980px; padding: 26px 24px 36px; border-radius: 30px 30px 0 0; color: var(--ink);
  background: radial-gradient(ellipse at 50% 20%, #fdf6e2 0%, var(--parch) 60%, #e3cc98 100%);
  box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 7px var(--parch), inset 0 0 0 9px var(--edge), 0 -10px 30px rgba(0,0,0,.5); }
.mp-box .close { position: absolute; top: 18px; right: 18px; }
.mp-head { display: flex; align-items: center; gap: 16px; padding-right: 90px; }
.mp-name { font-size: 40px; font-weight: 700; font-family: var(--serif); color: var(--scarlet); }
.mp-who { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 22px; justify-content: center; }
.mp-person { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 170px; padding: 10px 0; background: none; color: var(--ink); }
.mp-person img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 4px var(--gold), 0 0 0 7px #6e5232, 0 8px 14px rgba(0,0,0,.35); }
.mp-person span { font-size: 24px; font-weight: 700; font-family: var(--serif); text-align: center; }
.mp-person:active img { transform: scale(.95); }

/* the spell book */
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 14px; padding-bottom: 30px; }
@media (orientation: landscape) { .sp-grid { grid-template-columns: repeat(4, 1fr); } }
.sp-card { position: relative; padding: 18px 8px 16px; border-radius: 26px; color: var(--ink);
  background: radial-gradient(ellipse at 50% 30%, #fdf6e2 0%, var(--parch) 60%, #ddc38c 100%);
  box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 7px var(--parch), inset 0 0 0 9px var(--edge), 0 6px 0 #6e5232, 0 10px 18px rgba(0,0,0,.35); }
.sp-card:active { transform: translateY(4px); }
.sp-medal { width: 150px; height: 150px; }
.sp-medal .art { position: absolute; inset: 7%; border-radius: 50%; overflow: hidden; }
.sp-card.locked { background: radial-gradient(ellipse at 50% 30%, #d9d2c2 0%, #bdb3a0 100%); }
.sp-card.locked .sp-medal .art { filter: grayscale(1) brightness(.35); }
.sp-card.locked .sp-medal .frame { filter: saturate(.25) brightness(.78); }
.sp-card .q { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 46px; }
.sp-name { font-size: 26px; font-weight: 700; font-family: var(--serif); margin-top: 12px; line-height: 1.25; }
.sp-en { font-size: 16px; color: var(--soft); margin-top: 4px; font-style: italic; font-family: Georgia, serif; }
.sp-how { font-size: 18px; color: #4d4436; margin-top: 6px; }
.sp-card.new { animation: sp-glow 1.6s ease-in-out infinite; }
@keyframes sp-glow { 50% { box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 7px var(--parch), inset 0 0 0 9px var(--edge), 0 6px 0 #6e5232, 0 0 34px 10px rgba(246,220,133,.8); } }
.sp-newtag { position: absolute; top: 10px; right: 12px; font-size: 22px; font-weight: 800; color: #fff8e6; padding: 2px 12px; border-radius: 14px;
  background: var(--scarlet); box-shadow: inset 0 0 0 2px var(--gold); }
#spells { background: linear-gradient(180deg, rgba(13,19,48,.55), rgba(9,13,34,.92) 70%), url("img/greathall.webp") center top / cover no-repeat fixed; }

/* casting a spell: a 600 x 600 stage; every effect ends in its resting state (that is what reduced motion shows) */
.cast { align-items: center; background: rgba(4, 6, 20, .92); z-index: 22; }
.cast-box { text-align: center; padding: 10px 20px 24px; }
.cast-stage { position: relative; width: min(600px, 92vw); height: min(600px, 92vw, 62vh); margin: 0 auto; overflow: hidden; border-radius: 30px;
  background: radial-gradient(ellipse at 50% 60%, #26346e 0%, #10173d 60%, #080b22 100%); box-shadow: inset 0 0 0 3px var(--gold-d), 0 0 40px rgba(0,0,0,.6); }
.cast-name { font-size: 50px; font-weight: 700; font-family: var(--serif); color: var(--gold2); margin-top: 18px; text-shadow: 0 3px 0 #2a1d04, 0 0 24px rgba(246,220,133,.6); }
.cast-tell { font-size: 26px; color: var(--moon); margin: 8px auto 0; max-width: 640px; line-height: 1.5; }
.cast-stage > * { position: absolute; }
.cw-wand { left: 2%; bottom: 0; width: 46%; height: 46%; z-index: 3; }
.cast.go .cw-wand { animation: cw-flick .7s ease-out both; transform-origin: 10% 95%; }
@keyframes cw-flick { 0% { transform: rotate(-14deg); } 45% { transform: rotate(8deg); } 100% { transform: rotate(0); } }
.cw-star { width: calc(28px * var(--s)); height: calc(28px * var(--s)); margin: -14px; z-index: 4;
  background: radial-gradient(circle, #fffbe8 0 18%, rgba(255,240,180,.55) 30%, rgba(255,240,180,0) 62%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.cast.go .cw-star { animation: twinkle 1.2s ease-in-out both; animation-iteration-count: 3; }
@keyframes twinkle { 0% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1.2) rotate(45deg); opacity: 1; } 100% { transform: scale(.8) rotate(90deg); opacity: .9; } }
/* 荧光闪烁: dark, then the wand tip lights up */
.cw-dark { inset: 0; background: #02030b; opacity: .2; z-index: 1; }
.cast.go .cw-dark { animation: cw-dark 2.4s ease-out both; }
@keyframes cw-dark { 0%, 25% { opacity: .95; } 100% { opacity: .2; } }
.cw-dark.blue { background: #020615; }
.cw-light { left: 36%; top: 30%; width: 300px; height: 300px; margin: -150px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle, #ffffff 0 6%, #fff6c8 12%, rgba(255,236,160,.55) 30%, rgba(255,236,160,.12) 55%, rgba(255,236,160,0) 70%); }
.cast.go .cw-light { animation: cw-light 2.2s .5s cubic-bezier(.2,1.3,.4,1) both, cw-pulse 2s 2.7s ease-in-out infinite; }
@keyframes cw-light { 0% { transform: scale(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1); } }
@keyframes cw-pulse { 50% { transform: scale(1.08); } }
/* 羽加迪姆勒维奥萨: the feather floats up */
.cw-feather { left: 50%; top: 8%; width: 84px; height: 280px; margin-left: -42px; z-index: 2; transform-origin: 50% 100%; filter: drop-shadow(0 0 12px rgba(255,240,190,.7)); }
.cw-feather svg { width: 100%; height: 100%; }
.cast.go .cw-feather { animation: cw-float 3s .4s ease-out both, cw-sway 2.4s 3.4s ease-in-out infinite; }
@keyframes cw-float { 0% { transform: translateY(260px) rotate(70deg); } 40% { transform: translateY(150px) rotate(-12deg); } 70% { transform: translateY(40px) rotate(10deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes cw-sway { 0%, 100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(8deg) translateY(-12px); } }
/* 阿拉霍洞开: the lock springs open and the door swings open on golden light */
.cw-doorway { left: 50%; top: 8%; width: 220px; height: 320px; margin-left: -80px; perspective: 700px; z-index: 2; }
.cw-glow { position: absolute; inset: 0; border-radius: 110px 110px 0 0; background: radial-gradient(ellipse at 50% 60%, #fffbe8, #ffe18a 40%, #c98a1a 100%);
  box-shadow: 0 0 60px 20px rgba(255,220,120,.6); }
.cw-door { position: absolute; inset: 0; transform-origin: 0 50%; transform: rotateY(-75deg); }
.cw-door svg, .cw-lock svg { width: 100%; height: 100%; display: block; }
.cast.go .cw-door { animation: cw-door 1.6s 1.3s ease-in-out both; }
@keyframes cw-door { from { transform: rotateY(0); } to { transform: rotateY(-75deg); } }
.cw-lock { left: 140px; top: 150px; width: 80px; height: 100px; opacity: 0; }
.cast.go .cw-lock { animation: cw-lock 1.4s .2s ease-in both; }
.cast.go .cw-shackle { animation: cw-shackle .5s .5s ease-out both; }
@keyframes cw-lock { 0%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(200px) rotate(40deg); } }
@keyframes cw-shackle { to { transform: translateY(-14px); } }
/* 统统石化: arms snap to the sides, the colour drains to stone grey, the figure tips over */
.cw-person { left: 50%; top: 14%; width: 140px; height: 280px; margin-left: -20px; z-index: 2; transform-origin: 50% 100%;
  transform: rotate(-90deg) translate(-40px, 30px); filter: grayscale(1) brightness(1.2) contrast(.8); }
.cw-person svg { width: 100%; height: 100%; }
.cast.go .cw-person { animation: cw-stone 3s .3s ease-in both; }
@keyframes cw-stone { 0% { transform: none; filter: none; } 15% { transform: translateY(-14px); } 30% { transform: none; filter: none; }
  55% { transform: none; filter: grayscale(1) brightness(1.2) contrast(.8); } 100% { transform: rotate(-90deg) translate(-40px, 30px); filter: grayscale(1) brightness(1.2) contrast(.8); } }
.cw-ray { left: 30%; top: 50%; width: 40%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(200,220,255,0), #e8f0ff); opacity: 0; z-index: 2; }
.cast.go .cw-ray { animation: cw-ray .6s .7s ease-out both; }
@keyframes cw-ray { 0% { opacity: 0; transform: scaleX(0); transform-origin: 0 50%; } 50% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; } }
/* 恢复如初: the two halves of the glasses fly together */
.cw-glasses { left: 50%; top: 30%; width: 240px; height: 80px; margin-left: -90px; z-index: 2; transform: scale(1.5); }
.cw-gl { position: absolute; top: 0; width: 120px; height: 80px; }
.cw-gl.l { left: 0; } .cw-gl.r { left: 120px; }
.cast.go .cw-gl.l { animation: cw-gl-l 1.6s .3s ease-in-out both; }
.cast.go .cw-gl.r { animation: cw-gl-r 1.6s .3s ease-in-out both; }
@keyframes cw-gl-l { 0% { transform: translate(-60px, 40px) rotate(-30deg); } 100% { transform: none; } }
@keyframes cw-gl-r { 0% { transform: translate(70px, -30px) rotate(40deg); } 100% { transform: none; } }
.cw-flash { left: 50%; top: 50%; width: 160px; height: 160px; margin: -80px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff, rgba(255,240,180,.5) 40%, rgba(255,240,180,0) 70%); }
.cast.go .cw-flash { animation: cw-flash .8s 1.8s ease-out both; }
@keyframes cw-flash { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
/* 飞来咒: the broom flies from far away into her hand */
.cw-broom { left: 18%; top: 44%; width: 300px; height: 80px; z-index: 2; transform: rotate(-38deg); }
.cw-broom svg { width: 100%; height: 100%; }
.cast.go .cw-broom { animation: cw-broom 1.5s .4s cubic-bezier(.5,0,.3,1.2) both; }
@keyframes cw-broom { 0% { transform: translate(260px, -280px) rotate(-38deg) scale(.15); opacity: 0; } 20% { opacity: 1; } 100% { transform: rotate(-38deg); } }
.cw-whoosh { left: 30%; top: 20%; width: 60%; height: 40%; z-index: 1; opacity: 0;
  background: repeating-linear-gradient(-38deg, rgba(246,220,133,0) 0 22px, rgba(246,220,133,.35) 22px 25px); -webkit-mask-image: linear-gradient(225deg, #000, transparent); }
.cast.go .cw-whoosh { animation: cw-flash 1.2s .5s ease-out both; }
/* 滑稽滑稽: the boggart shivers, poof, and a rubber duck in a party hat */
.cw-boggart { left: 50%; top: 12%; width: 200px; height: 240px; margin-left: -60px; z-index: 2; opacity: 0; }
.cw-boggart svg, .cw-duck svg { width: 100%; height: 100%; }
.cast.go .cw-boggart { animation: cw-bog 1.8s ease-in both; }
@keyframes cw-bog { 0% { opacity: 0; transform: scale(.8); } 20% { opacity: 1; transform: scale(1); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60%, 80% { transform: translateX(8px); } 90% { opacity: 1; } 100% { opacity: 0; transform: scale(.4); } }
.cw-poof { left: 50%; top: 32%; width: 260px; height: 260px; margin: -130px 0 0 -100px; border-radius: 50%; opacity: 0; z-index: 3;
  background: radial-gradient(circle at 40% 40%, #fff 0 20%, rgba(230,230,240,.8) 35%, rgba(230,230,240,0) 70%); }
.cast.go .cw-poof { animation: cw-flash .9s 1.5s ease-out both; }
.cw-duck { left: 50%; top: 16%; width: 220px; height: 220px; margin-left: -80px; z-index: 2; }
.cast.go .cw-duck { animation: cw-duck .9s 1.7s cubic-bezier(.2,1.6,.4,1) both, cw-bob 1.4s 2.6s ease-in-out infinite; }
@keyframes cw-duck { from { transform: scale(0) rotate(-30deg); } to { transform: none; } }
@keyframes cw-bob { 50% { transform: rotate(-6deg) translateY(-8px); } }
/* 除你武器: a red flash, the other wand spins away */
.cw-beam { left: 36%; top: 26%; width: 50%; height: 10px; border-radius: 5px; transform-origin: 0 50%; transform: rotate(-30deg) scaleX(0); z-index: 2;
  background: linear-gradient(90deg, #ff7a6b, #ff2a1a); box-shadow: 0 0 18px 6px rgba(255,60,40,.7); }
.cast.go .cw-beam { animation: cw-beam .9s .4s ease-out both; }
@keyframes cw-beam { 0% { transform: rotate(-30deg) scaleX(0); opacity: 1; } 50% { transform: rotate(-30deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-30deg) scaleX(1); opacity: 0; } }
.cw-flash2 { left: 80%; top: 10%; width: 200px; height: 200px; margin: -100px; border-radius: 50%; opacity: 0; z-index: 3;
  background: radial-gradient(circle, #fff, rgba(255,90,70,.7) 35%, rgba(255,90,70,0) 70%); }
.cast.go .cw-flash2 { animation: cw-flash .7s .8s ease-out both; }
.cw-foe { right: -2%; top: 0; width: 55%; height: 55%; z-index: 2; transform: translate(-120px, -40px) rotate(-560deg) scale(.6); opacity: .9; }
.cw-foe svg { width: 100%; height: 100%; }
.cast.go .cw-foe { animation: cw-foe 1.6s .8s ease-out both; }
@keyframes cw-foe { 0% { transform: none; opacity: 1; } 100% { transform: translate(-120px, -40px) rotate(-560deg) scale(.6); opacity: .9; } }
/* 清水如泉: a fountain from the wand tip */
.cw-water { left: 36%; top: 30%; width: 0; height: 0; z-index: 2; }
.cw-water i { position: absolute; left: 0; top: 0; width: 14px; height: 18px; margin: -9px -7px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #8fd3ff 50%, #3a8fd6); opacity: .9; transform: translate(var(--dx), calc(var(--h) * -.6)); }
.cast.go .cw-water i { animation: cw-drop 1.4s ease-in infinite; }
@keyframes cw-drop { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 10% { opacity: 1; }
  45% { transform: translate(calc(var(--dx) * .6), calc(var(--h) * -1)); } 100% { transform: translate(calc(var(--dx) * 1.4 + 40px), 120px) scale(.8); opacity: 0; } }
.cw-pool { left: 36%; top: 60%; width: 280px; height: 50px; margin-left: -60px; border-radius: 50%; z-index: 1;
  background: radial-gradient(ellipse, rgba(140,210,255,.75), rgba(60,140,220,.25) 60%, rgba(60,140,220,0) 75%); }
.cast.go .cw-pool { animation: cw-light 2.2s .6s ease-out both; }
/* 飞鸟群群: birds burst out of the wand */
.cw-birds { left: 36%; top: 30%; width: 0; height: 0; z-index: 2; }
.cw-birds i { position: absolute; left: 0; top: 0; width: 96px; height: 48px; margin: -24px -48px; transform: translate(var(--x), var(--y)); }
.cw-birds svg { width: 100%; height: 100%; overflow: visible; }
.cast.go .cw-birds i { animation: cw-bird 2.2s ease-out both; }
.cast.go .cw-birds .wg { animation: cw-flap .3s ease-in-out infinite alternate; transform-origin: 50% 70%; }
@keyframes cw-bird { 0% { transform: translate(0, 0) scale(.2); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1); } }
@keyframes cw-flap { to { transform: scaleY(.35); } }
/* 呼神护卫: silver mist and the silver stag */
.cw-mist { inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 70%, rgba(190,225,255,.45), rgba(120,170,255,0) 60%); }
.cast.go .cw-mist { animation: cw-light 2.4s .3s ease-out both; }
.cw-stag { left: 50%; top: 4%; height: 92%; width: auto; margin-left: -28%; z-index: 2; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); }
.cast.go .cw-stag { animation: cw-stag 2.6s .5s ease-out both, cw-shine 2.4s 3.1s ease-in-out infinite; }
@keyframes cw-stag { 0% { opacity: 0; transform: translate(-30%, 12%) scale(.3); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes cw-shine { 50% { filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { #map-shimmer.on, .mp-tok.loading, #map-wait .mw-ic { animation: none; } }

/* 生字本: long-press a word to take it out (ask -> 撤销 for a few seconds); no iOS callout or text selection on the tiles */
#words .wtile { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; transition: transform .15s; }
#words .wtile.hold { transform: scale(.96); }
.wd-ask { position: fixed; inset: 0; background: rgba(5, 8, 25, .72); z-index: 60; display: flex; align-items: center; justify-content: center; }
.wd-ask[hidden], .wd-undo[hidden] { display: none; }
.wd-box { background: #f6ecd2; color: var(--ink); border-radius: 28px; padding: 28px 34px; text-align: center; min-width: 420px;
  border: 4px solid var(--gold); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.wd-ch { font-size: 110px; line-height: 1.1; font-family: var(--serif); }
.wd-q { font-size: 30px; margin: 8px 0 22px; }
.wd-btns { display: flex; gap: 24px; justify-content: center; }
.wd-btns button { min-width: 160px; min-height: 76px; font-size: 30px; border-radius: 22px; border: 3px solid #7a5410; }
.wd-yes { background: #b8322c; color: #fff; }
.wd-no { background: var(--gold); color: var(--ink); }
.wd-undo { position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%); z-index: 61; background: #1d2346; color: #fff;
  border: 2px solid var(--gold); border-radius: 22px; padding: 12px 14px 12px 26px; display: flex; gap: 18px; align-items: center; font-size: 26px; }
.wd-undo button { min-height: 64px; min-width: 140px; font-size: 26px; border-radius: 18px; background: var(--gold); color: var(--ink); border: 0; }

/* ---------- 宠物 (pets.js) ---------- */
/* home: the top row (photo / voice / handwriting) is smaller (owner: used less now); 读书 and 宠物 share the second row */
.b-photo, .b-voice, .b-hand { min-height: 200px; }
.b-photo .ico, .b-voice .ico, .b-hand .ico { font-size: 84px; }
.b-photo .lbl, .b-voice .lbl, .b-hand .lbl { font-size: 26px; }
.b-read { grid-column: span 3; }
.b-read .sub { display: none; }
.b-pet { grid-column: span 3; min-height: 160px; flex-direction: row;
  background: linear-gradient(160deg, #3f8f8a 0%, #1f6b6a 50%, #0f3f40 100%); }
.b-pet .ico { font-size: 72px; width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; }
.b-pet .lbl { font-size: 34px; }
.b-pet .badge { background: radial-gradient(circle at 35% 30%, #f6d977, var(--gold) 55%, #9c7418); color: var(--ink); text-shadow: none; }

/* the pet picture: art (img) or the placeholder emoji; worn accessories on three spots */
.pf { position: relative; display: inline-flex; align-items: flex-end; justify-content: center; }
.pf .pbody { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; }
.pf .pi { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0,0,0,.35)); }
.pf .pe { line-height: 1; filter: drop-shadow(0 8px 8px rgba(0,0,0,.35)); }
.pf .pw { position: absolute; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.pf .pw-head { top: 2%; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 22%; }
.pf .pw-neck { top: 52%; left: 50%; transform: translateX(-50%); font-size: 18%; }
.pf .pw-side { bottom: 4%; right: 2%; font-size: 22%; transform: rotate(12deg); }
.pf.lg { width: 380px; height: 380px; font-size: 300px; }
.pf.mid { width: 120px; height: 120px; font-size: 96px; }
.pf.mini { width: 100px; height: 100px; font-size: 80px; }
.pf.rare .pbody { filter: drop-shadow(0 0 18px rgba(255,236,150,.95)) drop-shadow(0 0 40px rgba(255,200,90,.6)) saturate(1.3); }
.pf.lg .pbody { animation: pt-breathe 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.pf.lg.st-egg .pbody { animation: pt-wobble 2.6s ease-in-out infinite; }
@keyframes pt-breathe { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-10px) scale(1.02, .98); } }
@keyframes pt-wobble { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-7deg); } 86% { transform: rotate(6deg); } 93% { transform: rotate(-3deg); } }
.pf.hop .pbody { animation: pt-hop .6s ease-out; }
.pf.wiggle .pbody { animation: pt-wig .9s ease-in-out; }
.pf.fx-spin .pbody { animation: pt-spin 1.2s ease-in-out; }
.pf.fx-float .pbody { animation: pt-float 2.4s ease-in-out; }
.pf.fx-glow .pbody { animation: pt-glow 2s ease-in-out; }
.pf.fx-rainbow .pbody { animation: pt-rainbow 2.4s linear; }
@keyframes pt-hop { 40% { transform: translateY(-46px) scale(1.04, .96); } 70% { transform: translateY(0) scale(1.06, .94); } }
@keyframes pt-wig { 20% { transform: rotate(-6deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(3deg); } }
@keyframes pt-spin { to { transform: rotate(360deg); } }
@keyframes pt-float { 40%, 60% { transform: translateY(-90px); } }
@keyframes pt-glow { 50% { filter: drop-shadow(0 0 40px #fff6c8) drop-shadow(0 0 80px #ffe58a) brightness(1.25); } }
@keyframes pt-rainbow { to { filter: hue-rotate(360deg); } }

#pet { background: linear-gradient(180deg, rgba(13,19,48,.4), rgba(9,13,34,.9) 75%), url("img/map/world-b.webp") center top / cover no-repeat fixed; }
.pt-scroll { font-size: 30px; min-width: 120px; }
.pt-scroll b { font-size: 30px; }
.pt-scroll.has { background: linear-gradient(180deg, #fff3c0, var(--gold)); color: var(--ink); animation: pt-pulse 1.8s ease-in-out infinite; }
@keyframes pt-pulse { 50% { box-shadow: 0 0 0 6px rgba(246,220,133,.35), 0 0 28px rgba(246,220,133,.7); } }
.pt-stage { position: relative; height: 420px; display: flex; align-items: flex-end; justify-content: center; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  background: radial-gradient(ellipse 46% 12% at 50% 94%, rgba(0,0,0,.35), rgba(0,0,0,0) 70%),
              radial-gradient(ellipse 60% 60% at 50% 55%, rgba(251,241,216,.9), rgba(239,224,190,.75) 55%, rgba(239,224,190,0) 72%); }
.pt-name { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px auto 10px; background: none; color: var(--gold2); }
.pt-name b { font-size: 40px; font-family: var(--serif); text-shadow: 0 2px 0 #2a1d04; }
.pt-st { font-size: 24px; color: var(--moon); }
.pt-bar { position: relative; display: block; width: 86%; height: 56px; margin: 0 auto 8px; border-radius: 28px; overflow: hidden;
  background: rgba(10,14,38,.75); box-shadow: inset 0 0 0 3px var(--gold); }
.pt-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #6fcf97, #f6d977); border-radius: 28px; transition: width .8s; }
.pt-bar span { position: relative; font-size: 24px; color: #fff8e6; text-shadow: 0 1px 2px #000; line-height: 56px; }
.pt-h { font-family: var(--serif); color: var(--gold2); font-size: 26px; margin: 18px 6px 8px; }
.pt-slots, .pt-bag { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pt-bag { grid-template-columns: repeat(2, 1fr); }
.pt-slot, .pt-bagpet { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 130px;
  border-radius: 26px; background: linear-gradient(180deg, #fbf1d8, var(--parch)); color: var(--ink); box-shadow: inset 0 0 0 3px var(--edge), 0 5px 0 rgba(0,0,0,.35); }
.pt-slot:active, .pt-bagpet:active, .pt-skill:active, .pt-choice:active { transform: translateY(3px); }
.ps-i { font-size: 60px; line-height: 1; }
.pt-slot:not(.on) .ps-i { color: var(--soft); }
.ps-n, .pb-n { font-size: 22px; font-weight: 700; }
.pb-s { font-size: 18px; color: var(--soft); }
.pb-e { font-size: 60px; color: var(--soft); }
.pt-bagpet { min-height: 190px; }
.pt-bagpet.free { opacity: .7; }
.pt-skills { display: flex; flex-wrap: wrap; gap: 14px; }
.pt-skill { display: inline-flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 700; padding: 0 26px; min-height: 76px; border-radius: 38px;
  background: linear-gradient(180deg, #3b2a6e, #22174a); color: var(--gold2); box-shadow: inset 0 0 0 3px var(--gold), 0 4px 0 rgba(0,0,0,.4); }
.pt-skill span { font-size: 36px; }
.pt-note { font-size: 22px; color: var(--moon); text-align: center; }
.pt-egg { display: block; width: 100%; min-height: 76px; margin-bottom: 10px; font-size: 26px; border-radius: 22px;
  background: linear-gradient(180deg, #fff3c0, var(--gold)); color: var(--ink); animation: pt-pulse 1.8s ease-in-out infinite; }
.pt-ask { font-size: 32px; text-align: center; color: var(--gold2); font-family: var(--serif); margin: 6px 0 4px; }
.pt-group { font-family: var(--serif); color: var(--gold2); font-size: 26px; margin: 16px 6px 8px; }
.pt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pt-choice { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 14px; min-height: 180px; border-radius: 24px;
  background: linear-gradient(180deg, #fbf1d8, var(--parch)); color: var(--ink); font-size: 22px; font-weight: 700; box-shadow: inset 0 0 0 3px var(--edge), 0 5px 0 rgba(0,0,0,.35); }
/* a scroll gives a reward, a sheet asks a question: big buttons */
.pt-sheet, .pt-open, .pt-grow { position: fixed; inset: 0; z-index: 60; background: rgba(5,8,25,.78); display: flex; align-items: center; justify-content: center; }
.pt-sheet[hidden], .pt-open[hidden], .pt-grow[hidden] { display: none; }
.sh-box, .po-box, .pg-box { width: min(620px, 90vw); max-height: 92vh; overflow: auto; padding: 26px 22px; border-radius: 30px; text-align: center; color: var(--ink);
  background: linear-gradient(180deg, #fbf1d8, var(--parch)); box-shadow: inset 0 0 0 4px var(--gold), 0 18px 40px rgba(0,0,0,.6); }
.sh-body .pf.lg, .po-res .pf.lg, .pg-fig .pf.lg { width: 300px; height: 300px; font-size: 230px; }
.sh-t { font-size: 30px; font-family: var(--serif); margin: 10px 0 4px; }
.sh-btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 18px; }
.sh-b { min-width: 160px; min-height: 76px; padding: 0 26px; font-size: 28px; font-weight: 700; border-radius: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #efe0be; color: var(--ink); box-shadow: inset 0 0 0 3px var(--edge), 0 4px 0 rgba(0,0,0,.3); }
.sh-b.yes { background: linear-gradient(180deg, #fff3c0, var(--gold)); }
.sh-b.on { box-shadow: inset 0 0 0 4px var(--scarlet), 0 4px 0 rgba(0,0,0,.3); }
.sh-b.pet { min-height: 120px; }
.sh-b .sh-e { font-size: 44px; }
.sh-b .pf.mini { width: 90px; height: 90px; font-size: 70px; }
.po-scroll { position: relative; min-height: 380px; display: flex; align-items: center; justify-content: center; }
.po-roll { font-size: 200px; line-height: 1; }
.pt-open.go .po-roll { animation: po-shake 1.4s ease-in-out both; }
.pt-open.done .po-roll { display: none; }
.po-paper { position: absolute; inset: 10px 0; display: flex; align-items: center; justify-content: center; transform: scaleX(0); border-radius: 18px;
  background: repeating-linear-gradient(0deg, rgba(150,110,50,.05) 0 4px, rgba(0,0,0,0) 4px 9px), linear-gradient(180deg, #fff8e2, #f2dfb0);
  box-shadow: inset 0 0 0 3px #c9a463, 0 0 40px rgba(255,230,140,.8); }
.pt-open.done .po-paper { animation: po-unroll .7s cubic-bezier(.2,1.2,.4,1) forwards; }
.po-res { display: flex; flex-direction: column; align-items: center; font-size: 34px; font-family: var(--serif); }
.po-res p { margin: 8px 0 0; } .po-res small { font-size: 22px; color: var(--soft); }
.po-big { font-size: 180px; line-height: 1.1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
.po-ok, .pg-ok { margin-top: 16px; }
@keyframes po-shake { 0% { transform: scale(.3) rotate(-20deg); opacity: 0; } 30% { transform: scale(1.1) rotate(6deg); opacity: 1; }
  45% { transform: rotate(-8deg); } 60% { transform: rotate(8deg); } 75% { transform: rotate(-5deg) scale(1.05); } 100% { transform: rotate(0) scale(1.15); } }
@keyframes po-unroll { to { transform: scaleX(1); } }
.pg-t { font-size: 44px; font-family: var(--serif); color: #8a5a0a; }
.pg-s { font-size: 28px; margin-top: 8px; }
.pt-grow.go .pg-fig { animation: medal-in 1.1s cubic-bezier(.2,1.4,.4,1) both; }
.ptc { position: absolute; font-size: 54px; pointer-events: none; animation: ptc-rise 2.2s ease-out forwards; opacity: 0; }
.ptc-rise { animation-name: ptc-rise; } .ptc-fall { animation-name: ptc-fall; } .ptc-burst { animation-name: ptc-burst; }
@keyframes ptc-rise { 10% { opacity: 1; } 100% { transform: translate(var(--dx), -260px) scale(1.3); opacity: 0; } }
@keyframes ptc-fall { 10% { opacity: 1; } 100% { transform: translate(var(--dx), 420px) rotate(180deg); opacity: 0; } }
@keyframes ptc-burst { 10% { opacity: 1; transform: scale(.4); } 100% { transform: translate(var(--dx), var(--dy)) scale(1.4); opacity: 0; } }
/* reader: the pet that is out, small, between the page buttons */
.rd-pet { width: 76px; height: 76px; border-radius: 50%; padding: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #fff8e2, #ecd9aa); box-shadow: inset 0 0 0 3px var(--gold), 0 3px 0 rgba(0,0,0,.3); }
.rd-pet[hidden] { display: none; }
.rd-pet .pf.mini { width: 70px; height: 70px; font-size: 84px; }
.rd-pet.hop, .b-pet .ico .pf.hop { animation: pt-hop .6s ease-out; }
.bd-group { font-family: var(--serif); color: var(--gold2); font-size: 30px; margin: 30px 6px 12px; text-align: center; }
.bd-group span { font-size: 22px; color: var(--moon); margin-left: 10px; }
.bd.pa .medal .pa-e { position: absolute; inset: 7%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 72px;
  background: radial-gradient(circle at 45% 35%, #2f4a8a, #142257 70%); }
.bd.pa.locked .medal .pa-e { color: rgba(246,220,133,.7); font-family: var(--serif); font-size: 60px; background: radial-gradient(circle at 45% 35%, #3a3f55, #1c1f30 70%); }
@media (prefers-reduced-motion: reduce) {
  .pf .pbody, .pf.lg .pbody, .pt-scroll.has, .pt-egg, .ptc, .pt-open.go .po-roll, .rd-pet.hop { animation: none !important; }
  .pt-open.done .po-paper { animation: none; transform: scaleX(1); }
}
#rd-pn { white-space: normal; line-height: 1.3; }
#rd-pn .pn-ch { display: block; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* pet art grows with the stage (same square picture size, bottom-aligned) */
.pf .pi { object-position: 50% 100%; }
.pf.st-egg .pi { height: 52%; } .pf.st-baby .pi { height: 64%; } .pf.st-child .pi { height: 78%; } .pf.st-teen .pi { height: 90%; }
.pf.mini .pi, .pf.mid .pi { height: 100%; }
.pf .pe[hidden], .pf .pi[hidden] { display: none; }
/* pick card of a pet whose picture is not drawn yet */
.pt-choice.drawing { opacity: .85; filter: saturate(.35); }
.pt-choice.drawing em { font-style: normal; font-size: 20px; color: #6b5330; }
.pt-sil { display: block; width: 96px; height: 120px; margin: 8px auto 2px; border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  background: radial-gradient(ellipse at 42% 38%, rgba(120,90,50,.28), rgba(120,90,50,.12) 72%); box-shadow: inset 0 0 18px rgba(90,65,30,.18); filter: blur(1.5px); }
/* the pet picture must not start an image drag: stroking the pet is a gesture on #pt-stage */
.pf .pi { pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
#pt-stage { touch-action: none; }
/* pick screen: the baby picture fills its card (the growth scaling is for the pet page) */
.pt-choice .pf .pi { height: 88%; }

/* species line above a film pet name */
.pk { display: block; font-style: normal; font-size: .8em; line-height: 1.15; opacity: .85; }
.pt-name b .pk { font-size: 24px; }

/* ---------- treasures: 5 rarity tiers (pets.json tiers), worn items on the pet, 宝物图鉴 ---------- */
.pf .pw2 { position: absolute; transform: translate(-50%, -50%); line-height: 1; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.pf .pw2 .ai { width: 100%; height: auto; }
.pf .pw2 .ae { font-size: 100%; }
.ai { width: 72px; height: 72px; object-fit: contain; }
.ps-i .ai { width: 84px; height: 84px; }
.sh-e .ai { width: 60px; height: 60px; vertical-align: middle; }
.sh-st { font-style: normal; font-size: 18px; color: var(--gold2); margin-left: 6px; }
.tier-1 { --tc: #8a6a3c; --tg: transparent; } .tier-2 { --tc: #9fb0c0; --tg: rgba(200,220,240,.35); }
.tier-3 { --tc: #e2b43c; --tg: rgba(255,214,90,.45); } .tier-4 { --tc: #e0482a; --tg: rgba(255,120,40,.6); }
.tier-5 { --tc: #7fd4ff; --tg: rgba(150,220,255,.8); }
.pt-slot.on { border-color: var(--tc) !important; box-shadow: 0 0 18px var(--tg); }
.pt-coll-btn { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: center; width: 100%; min-height: 84px; margin: 14px 0 0;
  font-size: 26px; border-radius: 22px; border: 3px solid var(--gold); background: rgba(40,24,12,.55); color: var(--parch, #f4e6c4); }
.pt-coll-btn b { color: var(--gold2); font-size: 30px; } .pt-coll-btn .pc-c { font-size: 22px; opacity: .9; }
.pt-skill.locked { opacity: .55; border-style: dashed; }
.po-tre { display: inline-flex; align-items: center; justify-content: center; width: 240px; height: 240px; border-radius: 28px; border: 6px solid var(--tc);
  background: radial-gradient(circle, var(--tg) 0%, transparent 70%), #f3e5c2; box-shadow: 0 0 30px var(--tg); }
.po-tre .po-pic { width: 200px; height: 200px; } .po-tre .ae { font-size: 150px; }
.po-stars { font-size: 34px; color: var(--tc); font-weight: 800; margin: 8px 0 0; letter-spacing: 2px; }
.pt-coll { position: fixed; inset: 0; z-index: 60; background: #14101c; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pc-box { max-width: 1000px; margin: 0 auto; padding: 18px 18px 60px; }
.pc-close { min-height: 76px; font-size: 26px; }
.pc-top { display: flex; gap: 26px; align-items: baseline; justify-content: center; font-size: 26px; color: #f4e6c4; margin: 14px 0; }
.pc-top b { font-family: var(--serif); font-size: 36px; color: var(--gold2); }
.pc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.pc-tab { min-height: 80px; font-size: 28px; font-weight: 700; border-radius: 20px; border: 3px solid #6b5a3a; background: #2a1d10; color: #f4e6c4; }
.pc-tab.on { border-color: var(--gold); background: #5a3a12; }
.pc-row { display: flex; gap: 14px; align-items: stretch; margin: 12px 0; }
.pc-tier { flex: 0 0 96px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 20px; font-weight: 800; color: var(--tc);
  border-radius: 16px; border: 3px solid var(--tc); background: rgba(255,255,255,.04); line-height: 1.3; }
.pc-items { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pc-it { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 170px; padding: 8px;
  border-radius: 18px; border: 4px solid var(--tc); background: radial-gradient(circle at 50% 40%, var(--tg), transparent 70%), #f3e5c2; color: #3a2a14; }
.pc-it .ai { width: 108px; height: 108px; } .pc-it .ae { font-size: 80px; }
.pc-n { font-size: 20px; font-weight: 700; } .pc-h { font-size: 17px; color: #6a4a1a; }
.pc-it.miss { background: #2a2418; color: #cdbb95; }
.pc-it.miss .pc-pic { filter: brightness(0) opacity(.45); }
.pc-it.got.tier-5 { animation: pc-twinkle 2.4s ease-in-out infinite; }
@keyframes pc-twinkle { 50% { box-shadow: 0 0 26px var(--tg); } }
@media (prefers-reduced-motion: reduce) { .pc-it.got.tier-5 { animation: none; } }
.po-res small { display: block; margin-top: 10px; font-size: 20px; }