/* Shared look: paper, sheets, buttons, album cards, toast, level card. */
/* Layout: one full-screen woodblock "print" (canvas) per level; each level prints on its own paper colour; ink-on-paper overlays */
:root{
  color-scheme: light;
  --paper:#e2b43c;
  --paper-hi:#efcb62;
  --ink:#1d1915;
  --son:#a3332a;
  --la:#2f6a4c;
  --diep:#f2ecde;
  --display:'Playfair Display','Times New Roman',serif;
  --body:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --han:'Ma Shan Zheng','KaiTi','STKaiti',serif;
}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:var(--paper);color:var(--ink);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:var(--body);transition:background-color .6s}
*{touch-action:manipulation;-webkit-touch-callout:none}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.ov{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:14px;padding:16px;box-sizing:border-box;text-align:center;z-index:5;overflow-y:auto}
.sheet{background:rgba(242,236,222,.94);border:3px solid var(--ink);outline:1px solid var(--ink);outline-offset:4px;padding:24px 28px 22px;max-width:min(560px,92vw);box-shadow:6px 6px 0 rgba(29,25,21,.25);box-sizing:border-box}
.sheet.wide{max-width:min(860px,94vw);width:100%}
.sheet h1,.sheet h2{font-family:var(--display);font-weight:900;margin:0;letter-spacing:.02em;line-height:1.05;text-wrap:balance}
.sheet h1{font-size:clamp(34px,7vw,56px)}
.sheet h2{font-size:clamp(26px,5vw,38px)}
.sheet .han{font-family:var(--han);font-size:28px;color:var(--son);margin:4px 0 8px;letter-spacing:.2em}
.sheet p{margin:8px auto 0;font-size:15px;line-height:1.55;max-width:46ch}
.sheet .how{font-size:13px;color:#4a3f33;margin-top:12px}
#instPeek{position:fixed;left:0;bottom:0;z-index:9;display:flex;align-items:flex-end;pointer-events:none}
#instPeek canvas{width:120px;height:120px;margin-bottom:calc(-8px + env(safe-area-inset-bottom) * 0);flex:none}
#instPeek .bub{pointer-events:auto;position:relative;margin:0 10px calc(70px + env(safe-area-inset-bottom)) -18px;max-width:min(250px,62vw);background:#f2ecde;border:2.5px solid var(--ink);border-radius:14px;padding:10px 12px;box-shadow:3px 3px 0 rgba(29,25,21,.3);font-family:var(--body);font-size:14px;line-height:1.4;text-align:left;animation:instIn .4s ease-out}
#instPeek .bub::before{content:"";position:absolute;left:-12px;bottom:14px;border:10px solid transparent;border-right-color:var(--ink);border-left:0}
#instPeek .bub p{margin:0}
#instPeek .bt{display:flex;gap:8px;margin-top:8px}
#instPeek .btn{font-size:14px;padding:6px 12px}
#instArrow{position:fixed;z-index:10;pointer-events:none;width:44px;height:60px}
#instArrow.down{animation:instBobD .8s ease-in-out infinite}
#instArrow.up{transform:rotate(180deg);animation:instBobU .8s ease-in-out infinite}
@keyframes instBobD{0%,100%{translate:0 -10px}50%{translate:0 0}}
@keyframes instBobU{0%,100%{translate:0 10px}50%{translate:0 0}}
@keyframes instIn{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
#bChapTop{position:fixed;z-index:6;top:calc(12px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));width:46px;height:46px;border-radius:50%;border:2.5px solid var(--ink);background:#f2ecde;color:var(--ink);font-size:24px;font-weight:700;line-height:1;cursor:pointer;box-shadow:2px 2px 0 rgba(29,25,21,.35);display:grid;place-items:center;padding:0}
#album{padding-top:calc(66px + env(safe-area-inset-top))}
#bChapTop:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(29,25,21,.35)}
#install{background:rgba(29,25,21,.55);z-index:8}
#install ol{list-style:none;padding:0;margin:14px 0 0;text-align:left;max-width:46ch;align-self:center}
#install li{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:15px;line-height:1.45}
#install li .n{flex:none;width:26px;height:26px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--son);color:var(--diep)}
#install li .ic{flex:none;width:30px;display:grid;place-items:center}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.btn{font-family:var(--display);font-weight:700;font-size:18px;color:var(--diep);background:var(--son);border:2px solid var(--ink);padding:9px 20px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.btn.alt{background:var(--diep);color:var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn:focus-visible,.card:focus-visible{outline:2px dashed var(--ink);outline-offset:3px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:16px}
.card{position:relative;border:3px solid var(--ink);padding:14px 12px 12px;cursor:pointer;text-align:center;box-shadow:4px 4px 0 rgba(29,25,21,.3);font-family:var(--body);color:var(--ink);min-width:0}
.card .num{font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600}
.card .ch{font-family:var(--han);font-size:44px;line-height:1.1;margin:6px 0 2px}
.card b{display:block;font-family:var(--display);font-weight:900;font-size:22px}
.card .st{display:inline-block;margin-top:8px;font-size:12px;font-weight:600;border:1.5px solid var(--ink);padding:2px 8px;background:rgba(242,236,222,.8)}
.card .st.done{background:var(--son);color:var(--diep)}
.card[disabled]{cursor:not-allowed;filter:grayscale(.85);opacity:.6}
.tag{font-family:var(--body);font-weight:600;font-size:13px;background:rgba(242,236,222,.9);border:2px solid var(--ink);padding:5px 10px}
#toast{position:fixed;left:16px;right:16px;top:20%;text-align:center;z-index:4;pointer-events:none;opacity:0;transition:opacity .4s}
#toast.on{opacity:1}
#toast span{display:inline-block;font-family:var(--display);font-weight:700;font-size:clamp(16px,2.5vw,21px);background:var(--diep);border:2px solid var(--ink);padding:8px 16px;max-width:38ch}
#lvCard{position:fixed;left:0;right:0;top:34%;text-align:center;z-index:3;pointer-events:none;opacity:0;transition:opacity .9s}
#lvCard.on{opacity:1}
#lvCard .han{font-family:var(--han);font-size:clamp(48px,9vw,86px);line-height:1;color:var(--ink)}
#lvCard b{display:inline-block;margin-top:8px;font-family:var(--display);font-weight:900;font-size:clamp(20px,3.4vw,30px);background:var(--diep);border:2px solid var(--ink);padding:4px 14px}
#err{position:fixed;inset:0;display:grid;place-items:center;padding-inline:16px;text-align:center;background:var(--diep);font-size:18px;z-index:9}
.sec{grid-column:1/-1;font-family:var(--display);font-weight:900;font-size:18px;text-align:left;border-bottom:2px solid var(--ink);padding-bottom:2px;margin-top:4px}
.card .cd{font-size:12px;line-height:1.4;margin:8px 0 0;font-weight:400}
@media (max-width:560px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card{padding:10px 6px 8px}.card .ch{font-size:34px}.card b{font-size:17px}.sheet{padding:18px 16px 16px}.sheet.wide{padding:16px 12px}}
@media (prefers-reduced-motion:reduce){#lvCard,#toast{transition:none}}

/* Vietnamese first and large, Hán characters under it and small (owner's rule) */
.sheet{display:flex;flex-direction:column;align-items:center}
.sheet > *{order:3}
.sheet > h1,.sheet > h2{order:1}
.sheet > .han{order:2;font-size:18px;margin:6px 0 0;letter-spacing:.15em}
.sheet > .grid,.sheet > .row{align-self:stretch}
.card{display:flex;flex-direction:column;align-items:center}
.card .num{order:1}
.card b{order:2;margin-top:6px}
.card .ch{order:3;font-size:18px;line-height:1.2;margin:4px 0 0;opacity:.8}
.card .cd{order:4}
.card .st{order:5}
#lvCard{display:flex;flex-direction:column;align-items:center}
#lvCard b{order:1;margin-top:0;font-size:clamp(24px,4.6vw,38px)}
#lvCard .han{order:2;font-size:clamp(18px,3.2vw,28px);margin-top:8px}