:root{
  --ink:#2b1a10; --cream:#fff5df; --cream2:#f7e6c2; --sand:#f4c46a; --orange:#f2852b; --yellow:#ffd23f;
  --yellow2:#ffb01c; --teal:#22958d; --green:#45c25a; --green2:#2a9c43; --red:#e2453c; --blue:#3b8fd9;
  --muted:#7b6650; --gut:16px;
  --font:-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#f2c67a;font-family:var(--font);color:var(--ink);
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
#gl{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;touch-action:none;outline:none}
#ui{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#ui button{pointer-events:auto;font-family:var(--font)}
.hidden{display:none!important}

/* ── 아이콘 (인라인 SVG) */
.ic{display:inline-block;width:1.15em;height:1.15em;background:center/contain no-repeat;vertical-align:-.2em;flex:none}
.ic-coin{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ffcf3a' stroke='%232b1a10' stroke-width='2.4'/%3E%3Ccircle cx='12' cy='12' r='5.6' fill='none' stroke='%23d99512' stroke-width='2'/%3E%3C/svg%3E")}
.ic-fire{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 4 6 6 6 12a6 6 0 0 1-12 0c0-3 2-5 3-6 0 2 1 3 2 3 0-3 0-6 1-9z' fill='%23ff8a1f' stroke='%232b1a10' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 13c1 1.5 3 2.5 3 4.5a3 3 0 0 1-6 0c0-1.5 1.5-2.5 3-4.5z' fill='%23ffd23f'/%3E%3C/svg%3E")}
.ic-vase{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6v3c3 2 4 5 4 8 0 4-3 7-7 7s-7-3-7-7c0-3 1-6 4-8z' fill='%23e0864a' stroke='%232b1a10' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M6 13h12' stroke='%239c4f2a' stroke-width='2'/%3E%3C/svg%3E")}
.ic-glass{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12M6 22h12M7 2c0 6 5 7 5 10s-5 4-5 10M17 2c0 6-5 7-5 10s5 4 5 10' fill='none' stroke='%232b1a10' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M9 19l3-3 3 3z' fill='%23f2a93b'/%3E%3C/svg%3E")}
.ic-brush{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='10' y='1.5' width='4' height='10' rx='1.6' fill='%23a8703f' stroke='%232b1a10' stroke-width='1.8'/%3E%3Cpath d='M7 12h10l1 9H6z' fill='%23ffd23f' stroke='%232b1a10' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M9 15v5M12 15v5M15 15v5' stroke='%23c98b12' stroke-width='1.4'/%3E%3C/svg%3E")}
.ic-chisel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3l7 7-3 3-7-7z' fill='%238d97a3' stroke='%232b1a10' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12.5 8.5L4 17l3 3 8.5-8.5' fill='%23a8703f' stroke='%232b1a10' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ic-sound{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z' fill='%23fff5df' stroke='%232b1a10' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='%232b1a10' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.muted .ic-sound{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z' fill='%23fff5df' stroke='%232b1a10' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' stroke='%23e2453c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.ic-star{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 .8-5.2 4.8 1.5 7L12 17.6 5.7 21.1l1.5-7L2 9.3l7-.8z' fill='%23ffd23f' stroke='%232b1a10' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ic-star0{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 .8-5.2 4.8 1.5 7L12 17.6 5.7 21.1l1.5-7L2 9.3l7-.8z' fill='%23e6d3ad' stroke='%232b1a10' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ic-lock{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='10' width='16' height='12' rx='3' fill='%23ffd23f' stroke='%232b1a10' stroke-width='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='%232b1a10' stroke-width='2.4'/%3E%3C/svg%3E")}

/* ── 공용 버튼·칩 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;
  border:3px solid var(--ink);border-radius:16px;background:var(--cream);color:var(--ink);font-weight:900;font-size:18px;
  box-shadow:0 5px 0 var(--ink);cursor:pointer;letter-spacing:-.01em;transition:transform .06s,box-shadow .06s}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.btn.big{min-height:66px;font-size:26px;border-radius:20px}
.btn.sm{min-height:44px;font-size:16px;padding:0 14px;box-shadow:0 4px 0 var(--ink)}
.btn.yellow{background:linear-gradient(#ffe066,var(--yellow) 45%,var(--yellow2))}
.btn.green{background:linear-gradient(#7fe08a,var(--green) 50%,var(--green2));color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn.orange{background:linear-gradient(#ffa95a,var(--orange));color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn.cream{background:var(--cream)}
.btn[disabled]{opacity:.55;filter:grayscale(.4)}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:3px solid var(--ink);border-radius:12px;
  background:var(--cream);font-weight:900;font-size:15px;box-shadow:0 3px 0 var(--ink);white-space:nowrap}
.hbtn{min-width:44px;min-height:44px;border:3px solid var(--ink);border-radius:12px;background:var(--cream);font-weight:900;font-size:16px;
  box-shadow:0 3px 0 var(--ink);cursor:pointer;color:var(--ink)}
.hbtn.sm{min-height:40px;min-width:40px;font-size:13px;padding:0 10px}
.mute{position:fixed;right:calc(var(--gut) + env(safe-area-inset-right));top:calc(10px + env(safe-area-inset-top));width:48px;height:48px;
  border:3px solid var(--ink);border-radius:14px;background:var(--cream);box-shadow:0 3px 0 var(--ink);font-size:22px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:30}
.playing .mute{top:auto;bottom:calc(196px + env(safe-area-inset-bottom))}
html.land.playing .mute{bottom:auto;top:auto;bottom:calc(200px + env(safe-area-inset-bottom))}

/* ── 타이틀 */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;
  padding:calc(14px + env(safe-area-inset-top)) var(--gut) calc(18px + env(safe-area-inset-bottom))}
.t-top{display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
.logo{display:flex;flex-direction:column;align-items:center;transform-origin:50% 80%;animation:bob 3.2s ease-in-out infinite;margin-top:6px}
.logo .l1{font-size:17px;font-weight:900;color:#fff;background:var(--teal);border:3px solid var(--ink);border-radius:999px;padding:3px 14px;
  box-shadow:0 3px 0 var(--ink);transform:rotate(-2deg);margin-bottom:-4px;z-index:1}
.logo .l2{display:flex;gap:10px;font-size:64px;font-weight:900;line-height:1.02;letter-spacing:-.04em}
.logo .l2 b{color:var(--yellow);text-shadow:
  0 3px 0 var(--ink),3px 0 0 var(--ink),-3px 0 0 var(--ink),0 -3px 0 var(--ink),3px 3px 0 var(--ink),-3px 3px 0 var(--ink),3px -3px 0 var(--ink),-3px -3px 0 var(--ink),
  0 9px 0 var(--ink),4px 8px 0 var(--ink),-4px 8px 0 var(--ink)}
.logo .l2 b:last-child{color:#fff}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-6px) rotate(1.2deg)}}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;pointer-events:auto}
.daily{pointer-events:auto;display:flex;align-items:center;gap:12px;background:var(--cream);border:3px solid var(--ink);border-radius:16px;
  padding:8px 10px 8px 14px;box-shadow:0 4px 0 var(--ink);animation:pop .4s cubic-bezier(.2,1.6,.4,1)}
.daily div{display:flex;flex-direction:column;font-size:14px;font-weight:700}
.daily b{font-size:17px;font-weight:900;color:var(--orange)}
.t-menu{display:flex;flex-direction:column;gap:12px;width:100%;max-width:420px;margin:auto auto 0}
.t-menu .row{display:flex;gap:12px}
.t-menu .row .btn{flex:1}
.btn.pack{min-height:48px;font-size:16px;justify-content:flex-start;background:#fffaf0}
.btn.pack .k{background:var(--teal);color:#fff;border-radius:8px;padding:2px 8px;font-size:13px}
.btn.pack #packName{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tip{align-self:center;max-width:520px;background:var(--cream);border:3px solid var(--ink);border-radius:14px;padding:8px 14px;font-size:14px;
  font-weight:700;text-align:center;box-shadow:0 3px 0 var(--ink);margin-top:10px}
html.land #title{display:grid;grid-template-columns:minmax(320px,420px) 1fr;grid-template-rows:auto 1fr auto;gap:0 24px;padding-left:calc(28px + env(safe-area-inset-left))}
html.land #title.hidden{display:none}
html.land .t-top{grid-column:1;grid-row:1;align-items:flex-start}
html.land .logo{align-items:flex-start}
html.land .logo .l2{font-size:76px}
html.land .chips{justify-content:flex-start}
html.land .t-menu{grid-column:1;grid-row:2;align-self:center;margin:0}
html.land .tip{margin-top:0}
html.land .tip{grid-column:1/3;grid-row:3;justify-self:start}

/* ── 플레이 HUD */
#hud{position:absolute;inset:0}
#board{position:absolute;left:8px;right:8px;top:calc(8px + env(safe-area-inset-top));background:var(--cream);border:3px solid var(--ink);
  border-radius:18px;box-shadow:0 5px 0 var(--ink);padding:8px 12px 10px;pointer-events:auto}
html.land #board{left:50%;right:auto;transform:translateX(-50%);width:min(1120px,calc(100vw - 32px))}
.b-top{display:flex;align-items:center;gap:8px}
.plot-chip{background:var(--orange);color:#fff;font-weight:900;font-size:15px;border:3px solid var(--ink);border-radius:10px;padding:3px 9px;white-space:nowrap;
  text-shadow:0 1px 0 rgba(0,0,0,.3)}
.timer{flex:1;display:flex;align-items:center;gap:6px;min-width:0}
.timer .bar{flex:1;height:14px;border:3px solid var(--ink);border-radius:99px;background:#e9d5ad;overflow:hidden;min-width:30px}
.timer .bar i{display:block;height:100%;width:100%;background:linear-gradient(#ffd56a,#f2a93b);transform-origin:left;border-radius:99px}
.timer.low .bar i{background:linear-gradient(#ff8c7a,var(--red))}
.timer.low{animation:shake .5s infinite}
#timerTxt{font-weight:900;font-size:16px;min-width:22px;text-align:right;font-variant-numeric:tabular-nums}
.permits{display:flex;gap:3px}
.permits i{width:20px;height:20px;border-radius:50%;border:3px solid var(--ink);background:radial-gradient(circle at 40% 35%,#ff8a7a,var(--red));display:block}
.permits i.off{background:#d8c7a8;opacity:.6}
.coins{display:flex;align-items:center;gap:3px;font-weight:900;font-size:16px;font-variant-numeric:tabular-nums}
.prompt{font-size:20px;font-weight:800;line-height:1.45;margin-top:8px;word-break:keep-all;overflow-wrap:anywhere}
html.mid .prompt{font-size:24px}
html.land .prompt{font-size:28px;line-height:1.4}
.prompt sup,.feedback sup{font-size:.62em;vertical-align:.5em;line-height:0}
.fr{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;font-size:.8em;line-height:1.08;margin:0 .14em}
.fr>span:first-child{border-bottom:.1em solid currentColor;padding:0 .14em}
.fr>span:last-child{padding:0 .14em}
.feedback{margin-top:6px;font-size:17px;font-weight:800;line-height:1.4;border-radius:12px;padding:6px 10px;border:3px solid var(--ink);word-break:keep-all}
html.land .feedback{font-size:22px}
.feedback.ok{background:#d9f7d2}
.feedback.bad{background:#ffe0d6}
.feedback .nx{float:right;margin-left:8px}
.rule{margin-top:6px;font-size:13px;font-weight:700;color:var(--muted)}
html.land .rule{font-size:15px}
.lesson{position:absolute;left:8px;right:8px;background:var(--cream);border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink);
  padding:8px 10px;pointer-events:auto}
html.land .lesson{left:16px;right:auto;width:300px}
.ls-head{display:flex;align-items:center;gap:8px}
.ls-head b{flex:1;font-size:17px}
.ls-tag{background:var(--orange);color:#fff;font-weight:900;font-size:13px;border:3px solid var(--ink);border-radius:9px;padding:1px 7px}
#lsList{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
#lsList li{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800}
#lsList li i{width:22px;height:22px;border:3px solid var(--ink);border-radius:7px;background:#fff;flex:none}
#lsList li.done{color:var(--muted);text-decoration:line-through}
#lsList li.done i{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/90% no-repeat}
html.port #lsList li:not(.cur){display:none}
html.land #lsList li.cur{background:#fff3c4;border-radius:8px}
#world{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wl{position:absolute;left:0;top:0;will-change:transform;pointer-events:none;white-space:nowrap}
.pct{font-weight:900;font-size:14px;background:rgba(43,26,16,.78);color:#fff;border-radius:99px;padding:2px 8px;transform-origin:50% 50%}
.pct.hot{background:var(--orange)}
.pct.read{background:var(--teal)}
.bubble{font-weight:900;font-size:15px;background:var(--red);color:#fff;border:3px solid var(--ink);border-radius:12px;padding:4px 10px;box-shadow:0 3px 0 var(--ink)}
.bubble.warn{background:var(--cream);color:var(--ink);font-size:13px}
.popnum{font-weight:900;font-size:26px;color:#fff;text-shadow:0 3px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink)}
.popnum.bad{color:#ff7a6a}
.popnum.good{color:var(--yellow)}
.joy{position:absolute;left:calc(14px + env(safe-area-inset-left));bottom:calc(16px + env(safe-area-inset-bottom));width:132px;height:132px;pointer-events:none}
.joy-base{position:absolute;inset:0;border-radius:50%;background:rgba(255,245,223,.55);border:3px solid rgba(43,26,16,.7)}
.joy-knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px;border-radius:50%;background:var(--cream);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.joy-cap{position:absolute;left:0;right:0;bottom:-2px;text-align:center;font-size:12px;font-weight:900;color:var(--ink);opacity:.7}
html.fine .joy{display:none}
#tools{position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.tool{width:84px;height:84px;border-radius:24px;border:3px solid var(--ink);background:var(--cream);box-shadow:0 5px 0 var(--ink);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0;color:var(--ink)}
.tool .ic{width:32px;height:32px}
.tool span{font-size:17px;font-weight:900;line-height:1.1}
.tool em{font-style:normal;font-size:11px;font-weight:800;color:var(--muted)}
.tool.on{background:linear-gradient(#ffe066,var(--yellow2));transform:translateY(-2px)}
.tool.on em{color:var(--ink)}
.tool:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
html.land #tools{flex-direction:row}
.keyhint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));background:var(--cream);border:3px solid var(--ink);
  border-radius:12px;padding:6px 12px;font-size:14px;font-weight:800;box-shadow:0 3px 0 var(--ink);white-space:nowrap}
html:not(.fine) .keyhint{display:none}
.toast{position:absolute;left:50%;bottom:calc(122px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:calc(100vw - 32px);
  background:var(--yellow);border:3px solid var(--ink);border-radius:14px;padding:8px 14px;font-size:16px;font-weight:900;text-align:center;
  box-shadow:0 4px 0 var(--ink);word-break:keep-all;animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
html.land .toast{bottom:calc(70px + env(safe-area-inset-bottom))}
@keyframes pop{0%{transform:translateX(-50%) scale(.6);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}
.daily{animation:none}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}

/* ── 모달 */
.modal{position:absolute;inset:0;background:rgba(43,26,16,.45);display:flex;align-items:center;justify-content:center;pointer-events:auto;
  padding:calc(12px + env(safe-area-inset-top)) var(--gut) calc(12px + env(safe-area-inset-bottom));z-index:40}
.card{position:relative;width:min(560px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--cream);border:3px solid var(--ink);
  border-radius:24px;box-shadow:0 7px 0 var(--ink);padding:30px 18px 18px;animation:cardin .32s cubic-bezier(.2,1.5,.4,1)}
.card.wide{width:min(860px,100%)}
@keyframes cardin{0%{transform:scale(.8);opacity:0}100%{transform:none;opacity:1}}
.card .tag{position:absolute;left:50%;top:-20px;transform:translateX(-50%);background:var(--orange);color:#fff;font-weight:900;font-size:19px;
  border:3px solid var(--ink);border-radius:14px;padding:5px 18px;white-space:nowrap;box-shadow:0 4px 0 var(--ink);text-shadow:0 2px 0 rgba(0,0,0,.25)}
.card .tag.red{background:var(--red)}
.card .tag.green{background:var(--green2)}
.card .tag.teal{background:var(--teal)}
.card h2{margin:4px 0 6px;text-align:center;font-size:28px;font-weight:900;letter-spacing:-.02em}
.card .xbtn+p{padding:0 44px}
.card p{margin:4px 0;text-align:center;font-weight:700;font-size:16px;line-height:1.45;word-break:keep-all}
.card .scroll{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;margin:8px -6px 0;padding:4px 6px 8px;min-height:0}
.card .acts{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.card .acts .btn{flex:1;min-width:120px}
.xbtn{position:absolute;right:10px;top:10px;width:44px;height:44px;border:3px solid var(--ink);border-radius:12px;background:#fff;font-weight:900;
  font-size:20px;cursor:pointer;box-shadow:0 3px 0 var(--ink);color:var(--ink)}
.stars{display:flex;justify-content:center;gap:6px;margin:6px 0}
.stars .ic{width:52px;height:52px;animation:starin .5s cubic-bezier(.2,1.7,.4,1) both}
.stars .ic:nth-child(2){animation-delay:.18s;transform:translateY(-8px)}
.stars .ic:nth-child(3){animation-delay:.36s}
@keyframes starin{0%{transform:scale(0) rotate(-40deg)}100%{transform:scale(1)}}
.statrow{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:8px 0}
.statrow .chip{height:40px}
.stamp{margin:8px auto;transform:rotate(-8deg);border:5px solid var(--red);color:var(--red);font-weight:900;font-size:30px;padding:4px 14px;border-radius:12px;
  animation:stampin .45s cubic-bezier(.3,1.8,.4,1) both;background:rgba(255,255,255,.4)}
@keyframes stampin{0%{transform:scale(2.4) rotate(-8deg);opacity:0}100%{transform:scale(1) rotate(-8deg);opacity:1}}
.sites{display:grid;gap:12px}
.site{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:10px;box-shadow:0 4px 0 var(--ink)}
.site .pic{width:72px;height:72px;border-radius:14px;border:3px solid var(--ink)}
.site h3{margin:0;font-size:19px;font-weight:900}
.site q{display:block;font-size:14px;font-weight:700;color:var(--muted);margin-top:2px;quotes:"「" "」"}
.site .who{font-size:12px;font-weight:800;color:var(--teal)}
.site .st{display:flex;gap:2px;margin-top:3px}
.site .st .ic{width:20px;height:20px}
.site.locked{opacity:.7}
.shop{display:grid;gap:10px}
.up{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:8px 10px}
.up .ico{width:52px;height:52px;border-radius:12px;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;background:var(--sand)}
.up .ico .ic{width:34px;height:34px}
.up h4{margin:0;font-size:17px;font-weight:900}
.up small{display:block;font-size:13px;font-weight:700;color:var(--muted)}
.up .lv{display:flex;gap:3px;margin-top:3px}
.up .lv i{width:16px;height:8px;border-radius:4px;background:#e2d1b0;border:2px solid var(--ink)}
.up .lv i.on{background:var(--green)}
.museum{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.art{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:6px;text-align:center;box-shadow:0 3px 0 var(--ink)}
.art img,.art .q{width:100%;aspect-ratio:1;border-radius:10px;background:radial-gradient(circle,#fff6dc,#f0d9a8);display:block;object-fit:contain}
.art .q{display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:900;color:#c7ad80}
.art b{display:block;font-size:13px;margin-top:4px;word-break:keep-all;line-height:1.25}
.art.locked b{color:#a89273}
.art small{font-size:11px;font-weight:800;color:var(--muted)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:4px 0}
.tabs button{min-height:44px;min-width:56px;border:3px solid var(--ink);border-radius:12px;background:#fff;font-weight:900;font-size:15px;cursor:pointer;color:var(--ink)}
.tabs button.on{background:var(--yellow)}
.units{display:grid;gap:8px}
.unit{display:flex;align-items:center;gap:10px;min-height:52px;border:3px solid var(--ink);border-radius:14px;background:#fff;padding:6px 12px;font-weight:800;font-size:16px;
  text-align:left;cursor:pointer;color:var(--ink)}
.unit .k{font-size:12px;font-weight:900;background:var(--cream2);border-radius:8px;padding:2px 6px;white-space:nowrap}
.unit.on{background:#fff2b8}
.unit span:nth-child(2){flex:1}
.unit small{color:var(--muted);font-weight:800}
.lessoncard ul{list-style:none;padding:10px 12px;margin:8px 0;border:3px solid var(--ink);border-radius:14px;background:#fff}
.lessoncard li{font-weight:800;font-size:16px;padding:3px 0;display:flex;gap:8px;align-items:center}
.lessoncard li i{width:20px;height:20px;border:3px solid var(--ink);border-radius:50%;flex:none}
.dots{display:flex;gap:6px;justify-content:center}
.dots i{width:16px;height:16px;border-radius:50%;border:3px solid var(--ink);background:#fff}
.dots i.on{background:var(--yellow)}
.newart{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.newart img{width:64px;height:64px;border:3px solid var(--ink);border-radius:12px;background:#fff6dc}
.help li{font-weight:700;font-size:15px;line-height:1.45;margin:4px 0;word-break:keep-all}
@media (max-height:700px){.logo .l2{font-size:52px}.btn.big{min-height:58px}.t-menu{gap:9px}}
@media (max-width:360px){.logo .l2{font-size:52px}.btn{font-size:16px}}