:root{
  --bg:#FFF4D6; --ink:#211B3A; --sub:#5A5178;
  --grape:#5B3FF0; --yellow:#FFC93C; --coral:#FF6A5C; --mint:#1DBE8E; --amber:#FFB02E;
  --warn-soft:#FFE3B0; --ok-soft:#C9F5E5; --surface2:#FFE9A8;
  --edge:#211B3A; --card:#fff; --line:#e9dcb8; --on-light:#211B3A;
  --t-grape:#EFE9FF; --t-grape2:#E6DEFF; --t-grape3:#F4F1FF; --t-coral:#FFE1DC; --t-coral2:#FFD9D4; --t-coral3:#FFEDEA; --t-coral4:#FFD3CC; --t-mint:#E6FAF2;
  color-scheme:light;
  --disp:'Fredoka','Nunito',system-ui,sans-serif;
  --ui:'Nunito',system-ui,-apple-system,sans-serif;
  --jp:'M PLUS Rounded 1c','Hiragino Maru Gothic ProN','Hiragino Sans',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--ui);}
body{min-height:100vh;min-height:100dvh;}
/* iPhone app: keep the status bar area (clock, camera) clear. Pages without the tab bar
   scroll under this strip instead of under the clock. Zero on the website. */
body::before{content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top);background:var(--bg);z-index:4;pointer-events:none;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
#app{max-width:460px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom);}
#tabs{display:flex;gap:6px;padding:calc(10px + env(safe-area-inset-top)) 12px 6px;position:sticky;top:0;background:var(--bg);z-index:5;}
.tab-btn{flex:1;min-width:0;height:40px;padding:0 4px;border-radius:16px;border:2.5px solid var(--edge);background:var(--card);font:800 14px/1 var(--ui);color:var(--ink);cursor:pointer;}
.tab-btn.active{background:var(--grape);color:#fff;box-shadow:0 4px 0 var(--edge);}
.view{flex:1;padding:8px 20px 32px;display:flex;flex-direction:column;gap:16px;}
.view[hidden]{display:none;}

.card{position:relative;background:var(--card);border:2.5px solid var(--edge);border-radius:24px;box-shadow:0 5px 0 var(--edge);padding:16px;}
.card.mint{background:var(--mint);}
.card.warn{background:var(--warn-soft);}
.card.yellow{background:var(--yellow);}

h1{font:600 30px/1.15 var(--disp);margin:12px 0 0;}
h2{font:600 24px/1.15 var(--disp);margin:0;}
p.sub{font:600 15px/1.4 var(--ui);color:var(--sub);margin:6px 0 0;}

.btn{display:flex;align-items:center;justify-content:center;height:58px;border-radius:20px;border:2.5px solid var(--edge);
  box-shadow:0 5px 0 var(--edge);font:600 19px/1 var(--disp);cursor:pointer;text-align:center;width:100%;}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--edge);}
.btn.primary{background:var(--grape);color:#fff;}
.btn.secondary{background:var(--card);color:var(--ink);}
.btn.mint{background:var(--mint);color:var(--ink);}
.btn:disabled{opacity:.5;cursor:default;}
.btn:disabled:active{transform:none;box-shadow:0 5px 0 var(--edge);}

.header{display:flex;align-items:center;gap:10px;}
.header .pill{flex:none;height:30px;padding:0 10px;font-size:12px;}
.header .bars{flex:1;min-width:0;}
.header .skip{flex:none;padding:6px 0 6px 4px;}
.pill{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:99px;background:var(--card);border:2.5px solid var(--edge);font:800 13px/1 var(--ui);}
.skip{background:none;border:0;font:700 15px/1 var(--ui);color:var(--sub);cursor:pointer;}
.bars{display:flex;gap:6px;}
.bars .seg{flex:1;height:14px;border-radius:99px;border:2.5px solid var(--edge);background:var(--card);overflow:hidden;}
.bars .seg > i{display:block;height:100%;background:var(--yellow);transition:width .3s;}
.bars .seg > i.done{background:var(--mint);}

.sticker{position:absolute;left:-6px;top:-14px;height:28px;padding:0 10px;border-radius:10px;border:2.5px solid var(--edge);
  box-shadow:0 3px 0 var(--edge);font:700 13px/1 var(--disp);letter-spacing:.05em;display:flex;align-items:center;gap:6px;}
.sticker.new{background:var(--coral);}
.sticker.unknown{background:var(--yellow);}
.sticker.known{background:var(--mint);}
.pips{display:flex;gap:3px;}
.pips span{width:8px;height:8px;border-radius:99px;border:1.6px solid var(--edge);background:var(--card);display:block;}
.pips span.on{background:var(--ink);}

.word-symbol{font-size:46px;line-height:1;margin:6px 0 2px;}
.word-picture{display:block;width:92px;height:92px;margin:0 auto;}
.jp{font:800 44px/1.2 var(--jp);text-align:center;white-space:pre-wrap;}
.reading{font:700 18px/1;letter-spacing:.04em;color:var(--grape);text-align:center;margin-top:8px;}
.reading.dark{color:var(--ink);}

.tiles{display:flex;flex-direction:column;gap:6px;align-items:center;}
.tiles .row{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;}
.tile{width:24px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font:700 16px/1 var(--ui);border:2px solid var(--edge);background:var(--card);}
.tile.blank{background:rgba(33,27,58,.08);border:2px dashed #8B84A8;}
.tile.reveal{background:var(--yellow);}
.tile.given{background:var(--mint);}
.tile.space{border:0;background:none;width:10px;}

input[type=text],input.text-in{width:100%;height:54px;border-radius:18px;border:2.5px solid var(--edge);padding:0 16px;
  font:800 18px/1 var(--ui);background:var(--card);outline:0;}
input[type=text]:focus,input.text-in:focus{box-shadow:0 0 0 4px var(--yellow);}
input[type=text][readonly]{background:var(--ok-soft);}

.msg{font:700 14px/1.35 var(--ui);color:var(--sub);text-align:center;}
.answer-box{display:flex;align-items:center;justify-content:space-between;height:54px;padding:0 16px;border-radius:18px;
  background:var(--surface2);border:2.5px solid var(--edge);font:800 18px/1 var(--ui);}
.answer-box small{font:700 11px/1 var(--ui);text-transform:uppercase;letter-spacing:.08em;color:var(--sub);}

.opt{display:flex;align-items:center;gap:12px;height:58px;padding:0 14px;border-radius:18px;border:2.5px solid var(--edge);
  background:var(--card);box-shadow:0 4px 0 var(--edge);font:800 17px/1 var(--ui);cursor:pointer;text-align:left;}
.opt:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge);}
.opt.wrong{background:var(--amber);}
.opt.right{background:var(--mint);}
.opt .num{width:28px;height:28px;border-radius:99px;background:var(--yellow);border:2px solid var(--edge);
  display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--disp);flex:none;}
.opt span.lab{flex:1;}
.opt.jp-opt{height:auto;min-height:64px;padding-top:8px;padding-bottom:8px;}
.opt .lab-jp{display:block;font:800 22px/1.25 var(--jp);}
.opt .lab-sub{display:block;font:700 12px/1.2 var(--ui);color:var(--sub);margin-top:2px;}

.meaning-line{font:600 22px/1.2 var(--disp);margin-top:10px;}
/* What does it mean? after "Show meaning": the picture sits beside the meaning */
.recall-answer{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px;text-align:left;}
.recall-answer .meaning-line{margin-top:0;}
.recall-pic{flex:none;font-size:40px;line-height:1;}
#view-quiz .recall-pic .word-picture{width:56px;height:56px;margin:0;}
@media (max-height: 620px){ #view-quiz .recall-pic .word-picture{width:48px;height:48px;} }
.en-prompt{font:600 30px/1.2 var(--disp);padding:18px 4px 10px;}
/* People or things? (counting words): a short situation instead of a word */
.count-kicker{font:800 12px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--grape);padding-top:14px;}
.count-sit{font:600 21px/1.3 var(--disp);padding:8px 4px 8px;text-wrap:balance;}
.sounds-card{padding:26px 16px 20px;}
.sounds-label{font:800 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--sub);margin-bottom:10px;}
.sounds-big{font:600 32px/1.2 var(--disp);overflow-wrap:normal;color:var(--ink);letter-spacing:.02em;margin-bottom:10px;}
.sounds-big.shrink{font-size:26px;}
.sounds-card .heard-tag{margin:0 auto 12px;}
.field-note{margin-top:6px;}
.listen-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 16px 18px;}
.play-btn{width:92px;height:92px;border-radius:99px;border:2.5px solid var(--edge);background:var(--yellow);
  box-shadow:0 5px 0 var(--edge);font-size:36px;line-height:1;color:var(--ink);cursor:pointer;padding-left:8px;}
.play-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--edge);}
.link-btn{background:none;border:0;font:700 14px/1.3 var(--ui);color:var(--grape);text-decoration:underline;cursor:pointer;padding:6px;}
.btn-row{display:flex;gap:12px;}
.btn-row .btn{flex:1;}
ol.steps{margin:10px 0 8px;padding-left:22px;display:flex;flex-direction:column;gap:6px;font:600 14px/1.35 var(--ui);}

.dialog-scrim{position:fixed;inset:0;background:rgba(33,27,58,.6);z-index:20;}
.dialog{position:fixed;left:20px;right:20px;top:30%;max-width:420px;margin:0 auto;background:var(--card);border:2.5px solid var(--edge);
  border-radius:24px;box-shadow:0 6px 0 var(--edge);padding:22px 18px;text-align:center;z-index:21;display:flex;flex-direction:column;gap:12px;}

.row-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:2px solid rgba(33,27,58,.14);}
.row-card:last-child{border-bottom:0;}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;font:700 12px/1 var(--ui);}
.chip.known{background:var(--ok-soft);color:#0B5C44;}
.chip.unknown{background:var(--warn-soft);color:#7A4300;}

.field{display:flex;flex-direction:column;gap:8px;}
.seg{display:flex;gap:2px;background:var(--card);border:2.5px solid var(--edge);border-radius:16px;padding:3px;}
.seg button{flex:1 1 auto;min-width:0;height:40px;padding:0 4px;border:0;border-radius:12px;background:transparent;font:800 clamp(13px,3.8vw,15px)/1 var(--ui);white-space:nowrap;cursor:pointer;}
.seg button.on{background:var(--yellow);}

.stack{display:flex;flex-direction:column;gap:14px;}
.center{text-align:center;}
.small{font:700 13px/1.3 var(--ui);color:var(--sub);}
.guess-btn{align-self:center;}
.guess-done{text-align:center;}

.say-line{font:700 15px/1.35 var(--ui);color:var(--ink);text-align:center;}
.say-line b{font-family:var(--disp);font-weight:600;font-size:18px;color:var(--grape);letter-spacing:.03em;}
.note-box{background:var(--surface2);border:2.5px solid var(--edge);border-radius:18px;padding:10px 14px;font:700 14px/1.4 var(--ui);color:var(--ink);}
.note-box small{display:block;font:800 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--sub);margin-bottom:5px;}

.stat-h{font:600 18px/1.2 var(--disp);margin:6px 2px -4px;}
.stat-foot{margin:-4px 4px 0;}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;padding:14px 10px;}
.stat-grid b{display:block;font:600 26px/1.1 var(--disp);}
.stat-grid span{font:700 12px/1.2 var(--ui);color:var(--sub);}
table.stats{width:100%;border-collapse:collapse;font:700 13px/1.3 var(--ui);}
table.stats{table-layout:auto;}
table.stats th{font:800 10.5px/1.2 var(--ui);letter-spacing:.03em;text-transform:uppercase;color:var(--sub);text-align:left;padding:10px 6px;vertical-align:bottom;border-bottom:2px solid rgba(33,27,58,.14);}
table.stats td{padding:9px 6px;border-bottom:2px solid rgba(33,27,58,.08);}
table.stats th:not(:first-child),table.stats td:not(:first-child){text-align:right;}
table.stats td:not(:first-child){white-space:nowrap;}
table.stats tr:last-child td{border-bottom:0;}
textarea.export{width:100%;height:120px;border:2.5px solid var(--edge);border-radius:14px;padding:10px;font:600 11px/1.3 ui-monospace,monospace;}

.sounds{margin-top:6px;font:700 14px/1.3 var(--ui);color:rgba(33,27,58,.78);text-align:center;}
.sounds b{font:600 17px/1.2 var(--disp);color:var(--ink);letter-spacing:.02em;}
.sounds-row{font:600 12.5px/1.3 var(--disp);color:var(--grape);margin-top:2px;letter-spacing:.02em;}
ul.steps{margin:10px 0 4px;padding-left:20px;display:flex;flex-direction:column;gap:6px;font:600 14px/1.35 var(--ui);}

.sticker.sentence{background:#C9B8FF;}
.heard-tag{display:inline-block;margin:6px auto 0;padding:3px 10px;border-radius:99px;background:var(--ok-soft);border:2px solid var(--edge);font:800 11px/1.2 var(--ui);letter-spacing:.06em;text-transform:uppercase;}
.heard-chip{display:inline-block;padding:1px 7px;border-radius:99px;background:var(--ok-soft);color:#0B5C44;font:800 10.5px/1.4 var(--ui);letter-spacing:.03em;}
.reply-box .reply-jp{font:800 17px/1.3 var(--jp);}
.hook-box{background:var(--t-grape);}
.tool-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.tool-btn{min-height:44px;padding:0 14px;border-radius:99px;border:2.5px solid var(--edge);background:var(--card);box-shadow:0 3px 0 var(--edge);font:800 14px/1.2 var(--ui);color:var(--ink);cursor:pointer;}
.tool-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--edge);}
.tool-btn.live{background:var(--coral);}
.tool-btn:disabled{opacity:.6;cursor:default;}
.check-line{font:700 14px/1.35 var(--ui);text-align:center;padding:8px 12px;border-radius:14px;background:var(--card);border:2px solid rgba(33,27,58,.2);}
.check-line.ok{background:var(--ok-soft);border-color:var(--mint);}
.check-line.bad{background:var(--warn-soft);border-color:var(--amber);}
.jp.long{font-size:34px;}
.jp.xlong{font-size:27px;}
.nw{white-space:nowrap;}

/* think first: choices fade in after a short pause */
.choices{opacity:0;pointer-events:none;transition:opacity .25s ease;}
.choices.shown{opacity:1;pointer-events:auto;}
.tap-reveal{cursor:pointer;}
@media (prefers-reduced-motion: reduce){.choices{transition:none;}}

/* scenes */
.sticker.scene{background:#BFE3FF;}
.scene-card{padding:14px 12px 12px;}
.scene-pic{position:relative;border:2.5px solid var(--edge);border-radius:18px;overflow:hidden;background:#fff;margin-top:8px;}
.scene-pic img{display:block;width:100%;height:auto;}
.scene-bubble{position:absolute;background:var(--card);border:2.5px solid var(--edge);border-radius:12px;padding:4px 9px;font:800 15px/1.3 var(--jp);white-space:nowrap;max-width:62%;}
.scene-bubble.long{white-space:normal;font-size:12.5px;line-height:1.25;max-width:66%;}
.scene-said{margin-top:10px;}
.goal-box{margin-top:10px;background:var(--yellow);border:2.5px solid var(--edge);border-radius:14px;padding:8px 12px;font:800 15px/1.35 var(--ui);text-align:center;}
.goal-box small{display:block;font:800 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:rgba(33,27,58,.72);margin-bottom:4px;}

/* quiz fits on one phone screen: answers visible without scrolling */
#view-quiz{gap:12px;padding-top:6px;padding-bottom:16px;}
#view-quiz .stack{gap:10px;}
#view-quiz .choices{gap:9px;}
#view-quiz .card{padding:14px;}
#view-quiz .opt{height:52px;}
#view-quiz .opt.jp-opt{height:auto;min-height:54px;padding-top:5px;padding-bottom:5px;}
#view-quiz .opt .lab-jp{font-size:20px;}
#view-quiz .word-symbol{margin:10px 0 0;}
#view-quiz .word-picture{width:80px;height:80px;}
#view-quiz .jp{font-size:40px;}
#view-quiz .jp.long{font-size:32px;}
#view-quiz .jp.xlong{font-size:26px;}
#view-quiz .en-prompt{font-size:26px;padding:12px 4px 6px;}
#view-quiz .listen-card{padding:18px 16px 12px;gap:8px;}
#view-quiz .play-btn{width:76px;height:76px;font-size:30px;}
#view-quiz .sounds-card{padding:18px 16px 12px;}
#view-quiz .sounds-big{font-size:28px;margin-bottom:6px;}
#view-quiz .sounds-big.shrink{font-size:23px;}
#view-quiz .link-btn{font-size:13px;padding:2px 6px;}
#view-quiz .scene-card{padding:12px 10px 10px;}
#view-quiz .scene-said{margin-top:6px;}
#view-quiz .scene-said .sounds{margin-top:2px;font-size:13px;}
#view-quiz .scene-said .sounds b{font-size:15px;}
#view-quiz .goal-box{margin-top:8px;padding:6px 10px;font-size:14px;line-height:1.3;}
#view-quiz .goal-box small{display:inline;margin:0 6px 0 0;}
#view-quiz .scene-said .reading{font-size:15px;line-height:1.25;letter-spacing:.02em;}
#view-quiz .scene-said .btn{height:34px!important;width:34px!important;box-shadow:0 3px 0 var(--edge);font-size:15px;}
#view-quiz .scene-card ~ .choices .opt .lab-jp{font-size:18px;}
#view-quiz .scene-card ~ .choices .opt .lab-sub{font-size:11.5px;}
#view-quiz .scene-pic img{max-height:clamp(90px, calc(100vh - 532px), 200px);max-height:clamp(90px, calc(100dvh - 532px), 200px);object-fit:cover;object-position:center top;}
/* after answering: Next/Done stays on screen; extra notes can scroll under it */
#view-quiz .next-btn{position:sticky;bottom:max(12px, env(safe-area-inset-bottom));z-index:4;margin-top:4px;box-shadow:0 5px 0 var(--edge),0 0 0 10px var(--bg);}
#view-quiz .scene-card.fb .scene-pic img{max-height:clamp(90px, calc(100vh - 560px), 170px);max-height:clamp(90px, calc(100dvh - 560px), 170px);}
/* short screens (iPhone SE, or Safari with both bars showing) */
@media (max-height: 620px){
  #tabs{padding:calc(6px + env(safe-area-inset-top)) 12px 4px;}
  .tab-btn{height:34px;font-size:13px;border-radius:13px;}
  #view-quiz{gap:8px;padding-top:4px;}
  #view-quiz .stack{gap:8px;}
  #view-quiz .choices{gap:7px;}
  #view-quiz .card{padding:10px 12px;}
  #view-quiz .opt{height:46px;font-size:16px;}
  #view-quiz .opt.jp-opt{height:auto;min-height:48px;padding-top:3px;padding-bottom:3px;}
  #view-quiz .opt .lab-jp{font-size:18px;}
  #view-quiz .word-picture{width:56px;height:56px;}
  #view-quiz .word-symbol{margin:4px 0 0;}
  #view-quiz .jp{font-size:34px;}
  #view-quiz .jp.long{font-size:28px;}
  #view-quiz .jp.xlong{font-size:23px;}
  #view-quiz .en-prompt{font-size:23px;padding:10px 4px 4px;}
  #view-quiz .count-sit{font-size:18px;padding:6px 2px 4px;}
  #view-quiz .count-kicker{padding-top:10px;}
  #view-quiz .play-btn{width:64px;height:64px;font-size:26px;}
  #view-quiz .listen-card,#view-quiz .sounds-card{padding:14px 12px 10px;}
  #view-quiz .sounds{font-size:13px;margin-top:4px;}
  #view-quiz .sounds b{font-size:15px;}
  #view-quiz .msg{font-size:13px;}
  #view-quiz .scene-said .reading{font-size:14px;}
  #view-quiz .scene-card{padding:10px 8px 8px;}
  #view-quiz .goal-box{font-size:13px;padding:5px 8px;}
}

/* speed check: Known multiple-choice reviews */
.speed{height:6px;border-radius:99px;background:rgba(33,27,58,.12);overflow:hidden;margin:-2px 2px 0;}
.speed i{display:block;height:100%;width:100%;background:var(--mint);transform-origin:left center;}
.choices.shown .speed i{animation-name:lb-drain;animation-timing-function:linear;animation-fill-mode:forwards;}
@keyframes lb-drain{0%{transform:scaleX(1);background:var(--mint);}65%{background:var(--yellow);}100%{transform:scaleX(0);background:var(--coral);}}

/* near-miss spellings */
.opt.romaji-opt{font:600 20px/1.1 var(--disp);letter-spacing:.03em;}
.near-card .en-prompt{padding-bottom:4px;}

/* Build it (can't speak) */
.build-line{min-height:50px;border:2.5px dashed #8B84A8;border-radius:16px;background:var(--card);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  font:600 25px/1.2 var(--disp);letter-spacing:.03em;padding:6px 12px;text-align:center;color:var(--ink);}
.build-line.empty{font:700 14px/1.2 var(--ui);color:var(--sub);letter-spacing:0;}
.caret{display:inline-block;width:2.5px;height:1.05em;background:var(--grape);margin-left:3px;animation:lb-blink 1s steps(1) infinite;}
@keyframes lb-blink{50%{opacity:0;}}
.build-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
.build-tile{height:52px;border-radius:15px;border:2.5px solid var(--edge);background:var(--card);box-shadow:0 4px 0 var(--edge);font:600 21px/1 var(--disp);color:var(--ink);cursor:pointer;padding:0;}
.build-tile:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge);}
.build-tile.used{visibility:hidden;}
.build-tiles.many{grid-template-columns:repeat(5,1fr);gap:7px;}
.build-tiles.many .build-tile{font-size:18px;}
.build-tile.wrong{background:var(--amber);}
.shake{animation:lb-shake .32s ease;}
@keyframes lb-shake{20%{transform:translateX(-5px);}40%{transform:translateX(5px);}60%{transform:translateX(-3px);}80%{transform:translateX(3px);}}

/* When would you say this? */
.when-card{padding:16px 14px 12px;}
.when-label{font:800 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--sub);}
.when-jp{font:800 30px/1.25 var(--jp);margin-top:6px;}
.pic-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pic-opt{position:relative;display:block;width:100%;padding:0;border:2.5px solid var(--edge);border-radius:16px;background:#fff;box-shadow:0 4px 0 var(--edge);overflow:hidden;cursor:pointer;}
.pic-opt:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge);}
.pic-opt .scene-pic{display:block;margin:0;border:0;border-radius:0;}
.pic-opt .scene-pic img{width:100%;height:auto;display:block;}
.pic-opt .scene-bubble{font-size:9.5px;line-height:1.2;padding:1px 5px;border-width:1.5px;border-radius:8px;max-width:70%;}
.pic-opt .scene-bubble.long{font-size:8.5px;}
.pic-opt .num{position:absolute;left:5px;bottom:5px;z-index:2;width:22px;height:22px;border-radius:99px;background:var(--yellow);border:2px solid var(--edge);display:flex;align-items:center;justify-content:center;font:700 11px/1 var(--disp);}
.pic-opt.right{box-shadow:0 0 0 4px var(--mint),0 4px 0 var(--edge);}
.pic-opt.wrong{opacity:.5;box-shadow:0 0 0 4px var(--amber),0 4px 0 var(--edge);}

/* Put it in order */
.order-card{padding:16px 12px 10px;}
.order-top{display:flex;gap:12px;align-items:center;}
.order-pic{display:block;width:104px;flex:none;margin:0;border-radius:12px;border-width:2px;}
.order-pic img{height:60px;object-fit:cover;}
.order-title{font:600 17px/1.2 var(--disp);}
.order-chat{display:flex;flex-direction:column;gap:5px;}
.chat-line{max-width:86%;padding:4px 10px 5px;border-radius:14px;border:2px solid var(--edge);display:flex;flex-direction:column;}
.chat-line.them{align-self:flex-start;background:var(--t-grape2);border-bottom-left-radius:4px;}
.chat-line.me{align-self:flex-end;background:var(--t-coral2);border-bottom-right-radius:4px;text-align:right;}
.chat-line .who{font:800 9.5px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--sub);}
.cj{font:800 16px/1.25 var(--jp);}
.cr{font:700 11.5px/1.25 var(--ui);color:var(--sub);}
.order-pool{display:flex;flex-direction:column;gap:7px;}
.order-opt{display:flex;align-items:center;gap:10px;min-height:48px;padding:4px 12px;border-radius:16px;border:2.5px solid var(--edge);background:var(--card);box-shadow:0 3px 0 var(--edge);text-align:left;cursor:pointer;color:var(--ink);}
.order-opt:active{transform:translateY(2px);box-shadow:0 1px 0 var(--edge);}
.order-opt .who{flex:none;width:46px;padding:4px 0;border-radius:8px;text-align:center;font:800 10px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;}
.order-opt.them .who{background:var(--t-grape2);}
.order-opt.me .who{background:var(--t-coral2);}
.order-opt .lab{display:flex;flex-direction:column;}
.order-opt.wrong{background:var(--amber);}
.convo-box .convo-row{margin-top:3px;font-size:13px;}
@media (max-height: 620px){
  .build-tile{height:46px;font-size:19px;}
  .build-line{min-height:44px;font-size:22px;}
  .when-jp{font-size:26px;}
  .order-pic{display:none;}
  .order-title{font-size:16px;}
  .order-opt{min-height:44px;padding:3px 10px;}
  .cj{font-size:15px;}
}

/* setup walkthrough (Settings → Pop-up quiz setup) */
body.in-setup #tabs{display:none;}
#view-settings.setup-view{gap:10px;padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:12px;min-height:100vh;min-height:100dvh;}
.setup-top{display:flex;align-items:center;gap:12px;}
.setup-x{flex:none;width:36px;height:36px;border-radius:99px;border:2.5px solid var(--edge);background:var(--card);box-shadow:0 3px 0 var(--edge);font:700 22px/1 var(--ui);color:var(--ink);cursor:pointer;padding:0;}
.setup-dots{flex:1;display:flex;gap:6px;}
.setup-dots i{flex:1;height:8px;border-radius:99px;background:rgba(33,27,58,.14);}
.setup-dots i.done{background:var(--mint);}
.setup-dots i.on{background:var(--grape);}
.setup-body{display:flex;flex-direction:column;gap:12px;flex:1;}
.setup-h{margin:0;font-size:27px;}
.setup-sub{margin:0;}
.setup-nav{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:auto;}
.setup-nav .btn-row{width:100%;}
.setup-nav .btn{height:52px;font-size:clamp(15px, 4.4vw, 18px);white-space:nowrap;padding:0 6px;min-width:0;}
.setup-nav .btn-row .btn{flex:1 1 0;}
.setup-nav .link-btn{padding:4px;}
.girl{display:block;height:auto;pointer-events:none;user-select:none;-webkit-user-select:none;}
.shot{position:relative;background:#000;border:2.5px solid var(--edge);border-radius:14px;box-shadow:0 4px 0 var(--edge);overflow:hidden;}
.shot img{display:block;width:100%;height:auto;}
.srow{display:flex;align-items:flex-start;gap:9px;font:700 15px/1.3 var(--ui);}
.srow b{font-weight:900;}
.srow .num,.setup-steps .num{flex:none;width:26px;height:26px;border-radius:99px;background:var(--yellow);border:2px solid var(--edge);display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--disp);}
.sstep{display:flex;flex-direction:column;gap:6px;}
.shot-wrap{position:relative;}
.setup-steps{display:flex;flex-direction:column;gap:7px;padding:12px 14px;}
.setup-note{font-size:13.5px;padding:8px 12px;}
/* intro */
.intro-row{display:flex;align-items:center;gap:6px;}
.g-intro{width:36%;flex:none;margin-left:-6px;}
.intro-list{flex:1;}
/* find: girl beside the first screenshot, pointing at it */
.find-top{display:flex;align-items:center;}
.g-find{width:27%;flex:none;margin-right:-6px;position:relative;z-index:2;}
.s-wide{flex:1;}
/* sitting on the top edge of a screenshot: her seat (75% down the drawing) sits on the frame line,
   her lower legs hang in front of it. The step text beside her fills the space her body takes up. */
.g-sit{position:absolute;top:0;width:24%;transform:translateY(-75%);z-index:2;}
.sit-left .g-sit{left:2%;}
.sit-right .g-sit{right:2%;}
.sit-left .srow,.sit-right .srow{min-height:min(calc((100vw - 40px) * .235), 88px);align-items:center;}
.sit-left .srow{padding-left:28%;}
.sit-right .srow{padding-right:28%;}
/* peeking over the top edge: her arms (84% down the drawing) rest on the frame line */
.g-peek{position:absolute;top:0;right:3%;width:30%;transform:translateY(-84%);z-index:2;}
.peek-right .srow{padding-right:34%;min-height:min(calc((100vw - 40px) * .215), 80px);align-items:center;}
/* run */
.run-row{display:flex;align-items:flex-end;justify-content:center;}
.g-run{width:31%;flex:none;margin-right:-6px;position:relative;z-index:2;}
.s-run{width:62%;}
.s-run img{max-height:clamp(150px, calc(100dvh - 414px), 400px);width:100%;object-fit:contain;object-position:top;background:#1c1c1e;}
/* link */
.link-row{display:flex;gap:8px;align-items:stretch;}
.link-box{flex:1;min-width:0;background:var(--t-grape3);border:2px dashed #8B84A8;border-radius:12px;padding:6px 9px;font:600 12px/1.3 ui-monospace,monospace;word-break:break-all;user-select:all;-webkit-user-select:all;display:flex;align-items:center;}
.copy-btn{flex:none;width:auto;height:auto;min-height:46px;padding:0 14px;font-size:16px;}
/* try */
.try-row{display:flex;align-items:center;gap:4px;}
.g-cheer{width:40%;flex:none;margin-right:-8px;}
#view-settings.setup-view .seg button{white-space:nowrap;padding:0 4px;font-size:14px;}
@media (max-height: 620px){
  .setup-h{font-size:23px;}
  .setup-body{gap:8px;}
  .srow{font-size:13.5px;}
  .setup-steps{padding:9px 12px;gap:5px;}
  .setup-nav .btn{height:46px;font-size:16px;}
  .g-intro{width:30%;}
  .sstep .shot img{max-height:108px;object-fit:cover;object-position:center 85%;}
  .sit-right .shot img{object-position:center top;}
  .sstep{gap:4px;}
  .g-find{width:22%;}
  .g-sit{width:20%;}
  .sit-left .srow,.sit-right .srow{min-height:62px;}
  .sit-left .srow{padding-left:24%;}
  .sit-right .srow{padding-right:24%;}
  #view-settings.setup-view{padding-top:8px;padding-bottom:4px;gap:8px;}
}
/* "Opening Instagram" screens sit in the middle of the space under the tabs (a touch above centre) */
.done-screen,.free-screen,.test-offer,.test-result{flex:1;justify-content:center;padding-bottom:6dvh;}
.free-screen{padding-top:24px;}
.free-screen .g-free{width:44%;max-width:180px;margin:4px auto 0;}

/* character on the done screen and the setup card */
.done-screen .g-done{height:clamp(116px, 24dvh, 164px);width:auto;max-width:80%;margin:8px auto -4px;}
.done-screen .g-done.pop{animation:done-pop .45s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes done-pop{0%{transform:scale(.6) translateY(12px);opacity:0;}100%{transform:none;opacity:1;}}
@media (prefers-reduced-motion: reduce){.done-screen .g-done.pop{animation:none;}}
.setup-card{position:relative;overflow:visible;}
.setup-card .g-card{position:absolute;right:10px;top:-26px;width:74px;}
.setup-card h2,.setup-card > p{padding-right:78px;}

/* guide on result screens: small, beside the message */
.fb-row{display:flex;align-items:center;justify-content:center;gap:10px;}
.fb-row .g-fb{width:54px;flex:none;}
.fb-row .msg{text-align:left;flex:0 1 auto;}
@media (max-height: 620px){ .fb-row .g-fb{width:44px;} }
.fb-row .g-known{width:70px;}

/* cards with a sticker: the sticker pokes 14px above the card, so leave room
   above it (clear of the header) and below it (clear of the card's content) */
#view-quiz .card:has(> .sticker){margin-top:12px;padding-top:26px;}
/* the first thing under the sticker starts at the same place on every card */
#view-quiz .card:has(> .sticker) > .heard-tag:first-of-type{margin-top:0;}
#view-quiz .card:has(> .sticker) > .scene-pic:first-of-type{margin-top:0;}
@media (max-height: 620px){
  #view-quiz .card:has(> .sticker){margin-top:12px;padding-top:22px;}
  #view-quiz .stack{gap:7px;}
  #view-quiz .choices{gap:6px;}
  #view-quiz .scene-pic img{max-height:clamp(70px, calc(100dvh - 470px), 200px);}
  #view-quiz .opt .lab-sub{font-size:11px;margin-top:1px;}
  #view-quiz .jp.xlong{font-size:21px;}
  #view-quiz .sounds{margin-top:2px;font-size:12.5px;}
  #view-quiz .sounds b{font-size:14px;}
}

/* ---- Listen in: an overheard conversation, then one question ---- */
.sticker.convo{background:#FFC7E0;}
#view-quiz .convo-card{padding:26px 12px 12px;}
#view-quiz .convo-card.fb{padding-top:12px;}
.overhear{display:flex;align-items:center;gap:8px;font:800 13px/1.3 var(--ui);color:var(--sub);margin:0 2px 10px;text-align:left;}
.overhear > span:nth-child(2){flex:1;}
.overhear .ear{flex:none;width:26px;height:26px;border-radius:99px;background:var(--surface2);border:2px solid var(--edge);display:flex;align-items:center;justify-content:center;font-size:14px;}
.convo-play{flex:none;width:34px;height:34px;border-radius:99px;border:2px solid var(--edge);background:var(--yellow);color:var(--ink);font-size:13px;box-shadow:0 2px 0 var(--edge);cursor:pointer;}
.chat{display:flex;flex-direction:column;gap:6px;}
.bub{max-width:82%;padding:5px 11px 6px;border-radius:14px;border:2px solid var(--edge);display:flex;flex-direction:column;text-align:left;}
.bub .who{font:800 9.5px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--sub);}
.bub .cj{font:800 17px/1.25 var(--jp);}
.bub .cr{font:700 12px/1.25 var(--ui);color:var(--sub);}
.bub .ce{font:700 12px/1.25 var(--ui);color:var(--ink);margin-top:2px;}
.bub.left{align-self:flex-start;background:var(--t-grape2);border-bottom-left-radius:4px;}
.bub.right{align-self:flex-end;background:var(--t-coral2);border-bottom-right-radius:4px;text-align:right;}
.bub.key{box-shadow:0 0 0 3px var(--mint);}
.convo-q{font:600 20px/1.2 var(--disp);text-align:center;margin:0;}
.choices.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.choices.opt-grid .speed{grid-column:1 / -1;}
#view-quiz .choices.opt-grid .opt{height:52px;gap:9px;padding:0 10px;font-size:16px;line-height:1.15;}
#view-quiz .choices.opt-grid .opt .num{width:24px;height:24px;font-size:13px;}
@media (max-height: 620px){
  #view-quiz .convo-card{padding:22px 10px 9px;}
  #view-quiz .convo-card.fb{padding-top:9px;}
  .overhear{margin-bottom:7px;font-size:12px;}
  .overhear .ear{width:22px;height:22px;font-size:12px;}
  .convo-play{width:28px;height:28px;font-size:11px;}
  .chat{gap:4px;}
  .bub{padding:3px 10px 4px;border-radius:12px;}
  .bub .who{display:none;} /* side and colour show who is talking */
  .bub .cj{font-size:15px;}
  .bub .cr,.bub .ce{font-size:11px;}
  .convo-q{font-size:17px;}
  .choices.opt-grid{gap:6px;}
  #view-quiz .choices.opt-grid .opt{height:44px;font-size:14.5px;}
}

/* ---- Guide tab: phrasebook + customs ---- */
.gd-head{display:flex;align-items:flex-end;gap:10px;}
.gd-head > div{flex:1;min-width:0;}
.gd-head .gd-head-pose{width:72px;flex:none;margin-bottom:-4px;}
.gd-seg button{height:40px;flex:1 1 0;}
.gd-search{height:50px;font-size:16px;font-weight:700;}
.gd-results{display:flex;flex-direction:column;gap:12px;}
.gd-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.gd-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-height:128px;padding:10px 8px 12px;
  background:var(--card);border:2.5px solid var(--edge);border-radius:20px;box-shadow:0 4px 0 var(--edge);cursor:pointer;color:var(--ink);text-align:center;}
.gd-tile:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge);}
.gd-tile .girl{height:70px;width:auto;}
.gd-tile-t{font:600 15px/1.15 var(--disp);}
.gd-tile-n{position:absolute;top:8px;right:10px;font:800 11px/1 var(--ui);color:var(--sub);}
.gd-tile.help{background:var(--t-coral);}
.gd-tile.starred{background:var(--surface2);}
.gd-grid.customs .gd-tile{min-height:0;padding:0 0 10px;overflow:hidden;justify-content:flex-start;}
.gd-thumb{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-bottom:2.5px solid var(--edge);}
.gd-thumb.pose{position:relative;overflow:hidden;background:var(--surface2);}
.gd-thumb.pose .girl{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:92%;width:auto;max-width:none;}
.gd-grid.customs .gd-tile-t{padding:0 6px;}
.gd-back{align-self:flex-start;background:none;border:0;padding:10px 0 6px;min-height:40px;font:800 16px/1 var(--ui);color:var(--grape);cursor:pointer;margin-bottom:-8px;}
.gd-cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;}
.gd-cat-head h1{margin-top:4px;}
.gd-cat-head .girl{width:64px;flex:none;}
.gd-scene{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border:2.5px solid var(--edge);border-radius:20px;box-shadow:0 4px 0 var(--edge);background:var(--surface2);}
.gd-intro{margin-top:-4px;}
.gd-list{padding:0;overflow:hidden;}
.gd-row{display:flex;align-items:center;gap:10px;padding:11px 12px 11px 14px;border-bottom:2px solid rgba(33,27,58,.12);cursor:pointer;}
.gd-row:last-child{border-bottom:0;}
.gd-row:active{background:var(--surface2);}
.gd-text{flex:1;min-width:0;}
.gd-jp{font:800 19px/1.25 var(--jp);}
.gd-ro{font:700 13px/1.3 var(--ui);color:var(--sub);}
.gd-snd{font:600 12px/1.3 var(--disp);color:var(--grape);letter-spacing:.02em;}
.gd-en{font:800 14px/1.3 var(--ui);margin-top:2px;}
.gd-known{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:99px;background:var(--ok-soft);border:1.5px solid var(--edge);font:800 10.5px/1.4 var(--ui);vertical-align:1px;}
.gd-reply{margin-top:4px;font:700 12.5px/1.35 var(--ui);color:var(--ink);background:var(--surface2);border-radius:10px;padding:4px 8px;}
.gd-reply span[lang]{font-family:var(--jp);font-weight:800;}
.gd-btns{display:flex;flex-direction:column;gap:6px;flex:none;}
.gd-play,.gd-star{width:38px;height:38px;border-radius:99px;border:2px solid var(--edge);background:var(--card);font-size:15px;line-height:1;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0;}
.gd-play{background:var(--yellow);box-shadow:0 2px 0 var(--edge);font-size:13px;}
.gd-star{font-size:18px;color:var(--sub);}
.gd-star.on{color:#E0A100;}
.gd-empty{display:flex;align-items:center;gap:12px;}
.gd-empty .girl{width:60px;flex:none;}
.gd-empty p{margin:0;font:700 14px/1.4 var(--ui);color:var(--sub);}
.gd-box-h{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.gd-box-h .girl{height:56px;width:auto;flex:none;margin:-8px 0 -4px;}
.gd-box-h h2{font-size:20px;}
.gd-steps ol,.gd-do ul,.gd-dont ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:7px;font:700 14.5px/1.45 var(--ui);}
.gd-steps ol li::marker{font-weight:800;color:var(--grape);}
.gd-do{background:var(--t-mint);}
.gd-dont{background:var(--t-coral3);}
.gd-sub-h{font-size:20px;margin-top:4px;}
body.modal-open{overflow:hidden;}
.gd-modal{position:fixed;inset:0;z-index:50;background:rgba(33,27,58,.55);display:flex;align-items:flex-end;justify-content:center;}
.gd-sheet{position:relative;width:100%;max-width:460px;max-height:100%;overflow:auto;background:var(--bg);border:2.5px solid var(--edge);border-bottom:0;
  border-radius:28px 28px 0 0;padding:18px 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;}
.gd-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:99px;border:2px solid var(--edge);background:var(--card);font-size:16px;cursor:pointer;color:var(--ink);}
.gd-show{width:84px;margin-top:4px;}
.gd-big{font:800 clamp(32px,10.5vw,52px)/1.2 var(--jp);word-break:keep-all;overflow-wrap:anywhere;}
.gd-big-ro{font:800 20px/1.2 var(--ui);color:var(--grape);}
.gd-big-snd{font:600 15px/1.3 var(--disp);color:var(--sub);}
.gd-big-snd b{color:var(--ink);}
.gd-big-en{font:600 22px/1.2 var(--disp);}
.gd-audio{display:flex;gap:10px;width:100%;margin-top:4px;}
.gd-audio .btn{height:52px;font-size:18px;}
.gd-audio .gd-say{flex:2;}
.gd-audio .gd-slow{flex:1;}
.gd-sheet .note-box{width:100%;text-align:left;}
.gd-sheet .note-box small{color:var(--sub);font-weight:800;}
.gd-reply-box span[lang]{font-family:var(--jp);font-weight:800;}
@media (max-height: 620px){
  .gd-tile{min-height:112px;}
  .gd-tile .girl{height:58px;}
  .gd-show{width:64px;}
  .gd-sheet{gap:8px;padding-top:14px;}
}

/* new-word pace */
.pace-box{font-size:13.5px;}
.chip.tricky{background:var(--t-coral);color:#9A2A1C;}

/* settings sections */
.set-h{font:600 15px/1.2 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--sub);margin:10px 0 -6px;}
.set-test{text-align:center;opacity:.8;margin-top:-4px;}



/* price check */
.sticker.price{background:#FFD36E;}
#view-quiz .price-card{padding:26px 14px 14px;}
#view-quiz .price-card.fb{padding-top:12px;}
.price-tag{display:inline-flex;align-items:center;justify-content:center;min-width:92px;height:40px;padding:0 14px 0 24px;margin:0 auto 6px;
  border:2.5px solid var(--edge);border-radius:12px 22px 22px 12px;background:var(--surface2);font:700 22px/1 var(--disp);position:relative;}
.price-tag::before{content:"";position:absolute;left:8px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:99px;border:2px solid var(--edge);background:var(--bg);}
.price-lead{margin-bottom:6px;}
.price-jp{font:800 26px/1.25 var(--jp);}
.price-jp .nw,.price-ro .nw{white-space:nowrap;}
.price-ro{font:700 15px/1.3 var(--ui);color:var(--grape);margin-top:2px;}
.price-big{font:700 34px/1.1 var(--disp);}
.price-parts{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:8px;}
.price-parts > span{background:rgba(255,255,255,.7);border:1.5px solid var(--edge);border-radius:99px;padding:2px 9px;font:700 12px/1.4 var(--ui);}
.price-parts > span b{font-family:var(--disp);font-weight:700;}
#view-quiz .choices.opt-grid .opt{font-variant-numeric:tabular-nums;}
@media (max-height: 620px){
  #view-quiz .price-card{padding:22px 12px 10px;}
  .price-tag{height:32px;font-size:18px;min-width:78px;margin-bottom:4px;padding-left:22px;}
  .price-jp{font-size:22px;}
  .price-big{font-size:28px;}
  .price-parts{margin-top:5px;gap:4px;}
  .price-parts > span{font-size:11px;padding:1px 7px;}
}
#view-quiz .price-card .play-btn{display:block;margin:4px auto;}

/* backup */
.btn-col{display:flex;flex-direction:column;gap:10px;}
.backup-card .btn{height:50px;font-size:17px;}
.backup-msg{margin-top:8px;min-height:0;}
.backup-msg:empty{display:none;}
.restore-box{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.restore-box[hidden]{display:none;}
.backup-text{width:100%;border:2.5px solid var(--edge);border-radius:14px;padding:10px 12px;font:600 13px/1.35 ui-monospace,Menlo,monospace;background:var(--card);resize:vertical;word-break:break-all;}
.file-btn{cursor:pointer;}
.fb-row .g-fb.money{width:auto;height:66px;max-width:120px;object-fit:contain;}
@media (max-height: 620px){ .fb-row .g-fb.money{height:54px;max-width:100px;} }

/* setup walkthrough v2 */
.setup-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:56px;}
.setup-head .g-head{width:60px;flex:none;margin:-6px 0 -8px;}
.setup-head .g-wave{width:74px;}
.ready-card{display:flex;flex-direction:column;gap:9px;padding:12px 14px;}
.copy-msg:empty{display:none;}
.link-inline{display:block;margin-top:4px;word-break:break-all;user-select:all;-webkit-user-select:all;font-size:12px;}
.steps-card{display:flex;flex-direction:column;gap:0;padding:4px 12px;}
.srow2{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:2px solid rgba(33,27,58,.1);font:700 14.5px/1.3 var(--ui);}
.srow2:last-child{border-bottom:0;}
.srow2 b{font-weight:900;}
.srow2 .num{flex:none;width:26px;height:26px;border-radius:99px;background:var(--yellow);border:2px solid var(--edge);display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--disp);}
.srow2 .st{flex:1;min-width:0;}
.thumb{flex:none;width:36%;max-width:150px;padding:0;border:2px solid var(--edge);border-radius:9px;overflow:hidden;background:#000;cursor:zoom-in;box-shadow:0 2px 0 var(--edge);}
.thumb img{display:block;width:100%;height:auto;max-height:58px;object-fit:cover;object-position:center 70%;}
.tap-hint{margin:-4px 0 0;opacity:.8;}
.shot-zoom{position:fixed;inset:0;z-index:60;background:rgba(33,27,58,.85);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));}
.shot-zoom img{max-width:100%;max-height:85vh;border:2.5px solid #fff;border-radius:14px;}
.shot-zoom .small{color:#fff;}
.s-run{cursor:zoom-in;}
.native-app .s-run img{background:#F2F2F7;}
/* app setup: light screenshots shown whole and a bit bigger */
.native-app .thumb{width:44%;max-width:190px;background:#F2F2F7;}
.native-app .thumb img{max-height:none;}
.link-note{display:flex;flex-direction:column;gap:6px;}
.link-note .link-box{background:var(--card);}
.trouble{padding:10px 14px;}
.trouble summary{font:800 15px/1.3 var(--ui);cursor:pointer;color:var(--grape);}
.trouble .trow{font:700 13.5px/1.4 var(--ui);margin-top:8px;}
.trouble .trow b{display:block;font-weight:900;}
.setup-nav .link-btn + .link-btn{margin-top:-2px;}
/* success */
.success-screen{position:relative;padding-top:18px;overflow:hidden;}
.success-screen .g-success{height:clamp(130px, 26dvh, 190px);width:auto;margin:6px auto 0;animation:done-pop .5s cubic-bezier(.34,1.56,.64,1) both;}
.confetti{position:absolute;inset:0 0 auto 0;height:60%;pointer-events:none;}
.confetti i{position:absolute;top:-12px;left:calc(var(--i) * 5.5% + 2%);width:9px;height:14px;border-radius:3px;border:1.5px solid var(--edge);
  background:hsl(calc(var(--i) * 47), 85%, 62%);animation:confetti 2.4s calc(var(--i) * .07s) ease-in forwards;opacity:0;}
@keyframes confetti{0%{opacity:1;transform:translateY(0) rotate(0);}100%{opacity:0;transform:translateY(340px) rotate(calc(var(--i) * 40deg + 200deg));}}
/* nudge on the finish screen */
.nudge-card{display:flex;align-items:center;gap:10px;padding:10px 12px;text-align:left;}
.nudge-card .g-nudge{width:48px;flex:none;}
.nudge-btns{display:flex;gap:14px;margin-top:2px;}
.nudge-btns .link-btn{padding:4px 0;font-size:14px;}
.nudge-no{color:var(--sub) !important;}
@media (max-height: 620px){
  .setup-head{min-height:44px;}
  .setup-head .g-head{width:48px;}
  .setup-head .g-wave{width:58px;}
  .srow2{padding:5px 0;font-size:13px;}
  .thumb img{max-height:46px;}
  .ready-card{padding:9px 12px;gap:6px;}
  .nudge-card .g-nudge{width:40px;}
}
@media (prefers-reduced-motion: reduce){.confetti{display:none;}.success-screen .g-success{animation:none;}}

/* ---------------------------------------------------------------- mini-games */
.sticker.game{background:var(--coral);}
.g-tag{position:absolute;right:10px;top:-12px;height:24px;padding:0 9px;border-radius:9px;border:2px solid var(--edge);background:var(--card);font:700 11px/20px var(--disp);letter-spacing:.04em;white-space:nowrap;}
.g-talk{display:flex;align-items:center;gap:10px;margin-top:6px;}
.g-talker{flex:none;width:88px;height:96px;object-fit:contain;object-position:bottom;display:block;}
svg.g-talker{width:76px;height:84px;}
.small-talk svg.g-talker{width:56px;height:62px;}
svg.g-mini{width:50px;height:56px;}
.g-mini{flex:none;width:56px;height:62px;object-fit:contain;object-position:bottom;}
.small-talk .g-talker{width:64px;height:70px;}
.g-bubble{position:relative;flex:1;min-width:0;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--card);border:2.5px solid var(--edge);border-radius:16px;padding:8px 10px;text-align:center;}
.g-bubble::before{content:"";position:absolute;left:-11px;top:50%;margin-top:-8px;border:8px solid transparent;border-right:10px solid var(--edge);border-left:0;}
.g-bubble::after{content:"";position:absolute;left:-7px;top:50%;margin-top:-6px;border:6px solid transparent;border-right:8px solid var(--card);border-left:0;}
.g-b-jp{font:800 24px/1.25 var(--jp);word-break:keep-all;overflow-wrap:anywhere;}
.g-b-ro{font:700 14px/1.2 var(--ui);color:var(--grape);}
.g-b-dots{display:none;font:700 30px/1 var(--disp);color:var(--sub);}
.g-bubble.gone .g-b-jp,.g-bubble.gone .g-b-ro{display:none;}
.g-bubble.gone .g-b-dots{display:block;}
.g-bubble .btn{position:absolute;right:-8px;top:-12px;height:30px!important;width:30px!important;font-size:13px;box-shadow:0 2px 0 var(--edge);}
.g-flash .g-b-jp{font-size:26px;}
.g-timer{height:6px;border-radius:99px;background:rgba(33,27,58,.12);overflow:hidden;margin-top:10px;}
.g-timer i{display:block;height:100%;background:var(--grape);transform-origin:left;animation:g-drain linear forwards;}
.g-timer.done i{animation:none;transform:scaleX(0);}
@keyframes g-drain{from{transform:scaleX(1);}to{transform:scaleX(0);}}
.g-story{margin-top:8px;background:var(--surface2);border:2.5px solid var(--edge);border-radius:14px;padding:6px 10px;font:800 14px/1.3 var(--ui);}
.g-story small{display:inline;margin-right:6px;font:800 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:rgba(33,27,58,.72);}
.g-chip{display:inline-flex;flex-direction:column;align-items:center;}
.g-chip-jp{font:800 34px/1.15 var(--jp);}
.g-chip-ro{font:700 16px/1.2 var(--ui);color:var(--grape);}
.g-command{text-align:center;padding:4px 0 0;}

/* picture scenes with things laid on top */
.g-scene{position:relative;width:100%;aspect-ratio:3/2;margin:0 auto;border:2.5px solid var(--edge);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 4px 0 var(--edge);}
.g-bg-ph,.g-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.g-scene > button{-webkit-user-select:none;user-select:none;}

/* Do what it says */
.g-cross .g-walker{position:absolute;left:50%;bottom:2%;width:17%;transform:translateX(-50%);transition:transform .7s ease-in,opacity .7s ease-in;z-index:2;pointer-events:none;}
.g-walk-girl{display:block;width:100%;height:auto;}
.g-walker.go-left{transform:translate(-210%,-38%) scale(.7);opacity:.2;}
.g-walker.go-right{transform:translate(110%,-38%) scale(.7);opacity:.2;}
.g-walker.go-ahead{transform:translate(-50%,-70%) scale(.45);opacity:.2;}
.g-walker.go-near{transform:translate(-50%,0);}
.g-walker.go-far,.g-walker.go-far-l{transform:translate(-50%,-62%) scale(.5);opacity:.4;}
.g-zone{position:absolute;z-index:3;background:rgba(255,255,255,.22);border:3px dashed rgba(255,255,255,.95);box-shadow:0 0 0 2px rgba(33,27,58,.45),inset 0 0 0 2px rgba(33,27,58,.25);border-radius:18px;cursor:pointer;padding:0;}
.g-zone:active{background:rgba(255,201,60,.4);}
.g-zone.right{background:rgba(29,190,142,.45);border-style:solid;}
.g-zone.wrong{background:rgba(255,176,46,.5);border-style:solid;}
.z-left{left:1%;top:53%;width:27%;height:27%;}
.z-right{right:1%;top:55%;width:27%;height:27%;}
.z-ahead{left:38%;top:26%;width:24%;height:26%;}
.z-near{left:60%;top:70%;width:18%;height:24%;border-radius:99px;}
.z-far{left:44%;top:38%;width:13%;height:15%;border-radius:99px;}
.z-far.left{left:38%;}
.g-spot{display:none;}
.g-table .g-tray{position:absolute;left:8%;top:50%;width:38%;height:32%;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:2px;z-index:2;}
.g-ball-btn{width:29%;aspect-ratio:1;padding:0;background:none;border:0;cursor:pointer;}
.g-ball-btn:active{transform:scale(.9);}
.g-ball{width:100%;height:100%;object-fit:contain;display:block;}
.g-plate{position:absolute;left:56%;top:52%;width:37%;height:28%;z-index:2;background:transparent;border:0;border-radius:50%;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:2px;padding:0 4%;cursor:pointer;}
.g-ball-on{width:27%;aspect-ratio:1;display:block;margin:-3% -1%;}
.g-row{display:flex;align-items:center;gap:10px;}
.g-row .g-count{flex:1;text-align:center;font-weight:800;}
.g-donebtn{width:auto;flex:none;padding:0 26px;}
.g-donebtn.right{background:var(--mint);}

/* Find the sign */
.g-signcard{padding-top:16px!important;}
.g-signcard .goal-box{margin-top:0;}
.g-sign{position:absolute;z-index:2;transform:translate(-50%,-50%);min-width:21%;max-width:24%;padding:5px 4px 4px;border-radius:10px;border:2.5px solid var(--edge);background:var(--card);box-shadow:0 3px 0 var(--edge);
  display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;}
.g-sign:active{transform:translate(-50%,-50%) translateY(2px);box-shadow:0 1px 0 var(--edge);}
.g-sign-jp{font:800 18px/1.15 var(--jp);white-space:nowrap;}
.g-sign-ro{font:700 10px/1.1 var(--ui);color:var(--grape);white-space:nowrap;}
.g-sign.long .g-sign-jp{font-size:15px;}
.g-sign.xlong .g-sign-jp{font-size:12px;}
.g-sign.right{background:var(--mint);}
.g-sign.wrong{background:var(--amber);opacity:.75;}

/* gesture and item choices: 2 x 2 pictures */
.pic-choices.g-items{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.pic-choices.g-gest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.g-gest.g-gest{height:clamp(104px, calc(100dvh - 400px), 180px);}
.g-gest .g-gest-img{max-width:96%;max-height:94%;}
.g-gest .num{left:4px;bottom:4px;}
.g-gest,.g-item{height:clamp(84px, calc((100dvh - 430px) / 2), 130px);display:flex!important;align-items:center;justify-content:center;background:#fff;}
.g-gest-img,.g-item-img{display:block;max-width:86%;max-height:92%;width:auto;height:auto;object-fit:contain;margin:auto;}
.g-item-img{height:84%;}
.g-gest-label{display:block;padding:0 4px 14px;font:800 12px/1.2 var(--ui);text-align:center;}

/* Fill the basket */
.g-list-row{display:flex;align-items:center;gap:8px;}
.g-note{flex:1;background:#FFFDF5;border:2.5px solid var(--edge);border-radius:12px;padding:6px 10px;transform:rotate(-1deg);
  background-image:repeating-linear-gradient(transparent 0 25px, #E6E1F2 25px 27px);}
.g-note small{display:block;font:800 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:rgba(33,27,58,.72);margin-bottom:3px;}
.g-note-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;}
.g-note-jp{font:800 21px/1.3 var(--jp);}
.g-note-ro{font:700 13px/1.2 var(--ui);color:var(--grape);}
.g-note-en{font:700 13px/1.2 var(--ui);color:var(--sub);}
.g-shelf .g-shelf-items{position:absolute;inset:25% 19% 21.5%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);column-gap:4%;z-index:2;}
.g-prod{padding:0;background:none;border:0;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;}
.g-prod-img{max-width:84%;max-height:94%;object-fit:contain;display:block;}
.g-prod.pop{animation:g-pop .25s ease;}
@keyframes g-pop{50%{transform:scale(.86);}}
.g-basket{flex:1;min-width:0;height:58px;border-radius:18px;border:2.5px solid var(--edge);background:var(--t-coral4);box-shadow:0 4px 0 var(--edge);display:flex;align-items:center;gap:6px;padding:0 8px;cursor:default;}
.g-basket-label{font:800 12px/1.1 var(--ui);flex:none;max-width:72px;text-align:left;}
.g-basket-in{flex:1;display:flex;gap:4px;align-items:center;overflow:hidden;}
.g-in{position:relative;width:40px;height:40px;flex:none;cursor:pointer;}
.g-in-img{width:100%;height:100%;object-fit:contain;display:block;}
.g-in b{position:absolute;right:-4px;top:-6px;min-width:20px;height:20px;border-radius:99px;background:var(--grape);color:#fff;border:2px solid var(--edge);font:700 11px/16px var(--disp);text-align:center;}

/* Walk me there */
.g-walkcard .g-bubble{min-height:56px;}
.g-dirs{flex-direction:row!important;flex-wrap:wrap;gap:2px 2px;}
.g-dir{display:inline-flex;flex-direction:column;align-items:center;padding:2px 6px;border-radius:10px;}
.g-dir [lang=ja]{font:800 20px/1.2 var(--jp);}
.g-dir small{font:700 11px/1.1 var(--ui);color:var(--grape);}
.g-dir.now{background:var(--yellow);box-shadow:0 0 0 2px var(--edge);}
.g-dir.past{opacity:.4;}
.g-dir-sep{font:800 18px/1 var(--jp);align-self:center;}
.g-dir-hidden{font:700 15px/1.2 var(--ui);color:var(--sub);}
.g-walk-goal{text-align:center;margin-top:6px;}
.g-map{position:relative;width:100%;aspect-ratio:4/3;margin:0 auto;border:2.5px solid var(--edge);border-radius:18px;overflow:hidden;box-shadow:0 4px 0 var(--edge);background:#fff;}
.g-map-svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.g-marker{position:absolute;width:13%;aspect-ratio:1;transform:translate(-50%,-50%);transition:left .45s ease,top .45s ease;z-index:3;}
.g-marker-img{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:2;}
.g-heading{position:absolute;inset:-34%;transform:rotate(var(--rot,0deg));transition:transform .3s;z-index:1;}
.g-heading::before{content:"";position:absolute;left:50%;top:0;margin-left:-9px;border:9px solid transparent;border-bottom:14px solid var(--grape);border-top:0;}
.g-dest{position:absolute;width:20%;transform:translate(-50%,-62%);z-index:4;animation:g-pop .35s ease;}
.g-dest-pic{width:100%;height:auto;display:block;}
.g-map.arrived .g-marker{opacity:.0;}
.g-pad{display:flex;gap:10px;justify-content:center;}
.g-padbtn{flex:1;max-width:110px;height:58px;border-radius:18px;border:2.5px solid var(--edge);background:var(--card);box-shadow:0 4px 0 var(--edge);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.g-padbtn svg{width:34px;height:34px;}
.g-padbtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge);}
.g-fb-card{padding:10px!important;}
.g-fb-card .small-map{aspect-ratio:auto;box-shadow:none;max-width:100%;}
.g-dirs-fb{display:flex;justify-content:center;margin-top:6px;}
.g-dirs-fb .g-dir small{color:var(--ink);}

/* Be the clerk: the customer across the counter */
.g-counter{position:relative;display:flex;align-items:center;gap:10px;margin-top:6px;height:132px;padding:0 10px 18px 6px;border:2.5px solid var(--edge);border-radius:16px;overflow:hidden;
  background:#FFE9A8 url(games/bg/counter.webp) center 62%/cover no-repeat;}
.g-counter-person{align-self:flex-end;flex:none;position:relative;z-index:1;margin-bottom:-18px;}
.g-counter .g-talker{width:92px;height:104px;display:block;}
.g-counter .g-bubble{z-index:2;min-height:58px;}
.g-counter .g-b-jp{font-size:20px;}
.g-counter-front{position:absolute;left:0;right:0;bottom:0;height:24px;z-index:1;background:#EDB061;border-top:2.5px solid var(--edge);box-shadow:inset 0 5px 0 rgba(255,255,255,.35);}
/* practice menu */
.g-try{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.g-try-btn{height:48px;font-size:15px;}

@media (max-height: 620px){
  .g-talker{width:66px;height:72px;}
  svg.g-talker{width:60px;height:66px;}
  .small-talk .g-talker{width:52px;height:56px;}
  .g-bubble{min-height:52px;padding:5px 8px;}
  .g-b-jp{font-size:20px;}
  .g-flash .g-b-jp{font-size:22px;}
  .g-chip-jp{font-size:28px;}
  .g-story{font-size:13px;padding:4px 8px;}
  .g-gest,.g-item{height:clamp(84px, calc((100dvh - 330px) / 2), 120px);}
  .g-pad .g-padbtn,.g-basket{height:50px;}
  .g-note-jp{font-size:18px;}
  .g-dir [lang=ja]{font-size:17px;}
  .g-counter{height:110px;}
  .g-counter .g-b-jp{font-size:17px;}
  .g-counter .g-talker{width:76px;height:86px;}
}
@media (prefers-reduced-motion: reduce){
  .g-walker,.g-marker,.g-heading{transition:none;}
  .g-timer i{animation-duration:0s!important;}
}

/* ---------------------------------------------------------------- Learn path */
#view-learn{gap:12px;padding-bottom:60px;
  /* a faded illustrated map under everything (games/path/map-bg.webp), with a calm dotted paper pattern underneath in case it's missing */
  background:
    linear-gradient(rgba(255,244,214,.28), rgba(255,244,214,.28)),
    url(games/path/map-bg.webp) top center / 100% auto repeat-y,
    radial-gradient(circle at 1px 1px, rgba(91,63,240,.10) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
    var(--bg);}
.path-col{position:relative;}
.route{position:absolute;left:0;top:0;pointer-events:none;z-index:0;overflow:visible;}
.route path{fill:none;stroke-linecap:round;}
.route-ahead{stroke:#5A5178;stroke-width:3.5;stroke-dasharray:1 10;opacity:.55;}
.route-walked{stroke:var(--coral);stroke-width:4;stroke-dasharray:10 8;}
.node-row{z-index:1;}
.node-label{background:rgba(255,244,214,.88);border-radius:8px;padding:1px 6px;}
.learn-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.learn-top h1{margin-top:4px;}
.passport-btn{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--card);border:2.5px solid var(--edge);border-radius:16px;box-shadow:0 4px 0 var(--edge);padding:6px 10px 5px;font:800 11px/1 var(--ui);color:var(--ink);cursor:pointer;}
.passport-icon{width:32px;height:35px;display:block;object-fit:contain;}
.learn-actions{display:flex;flex-direction:column;gap:10px;}
.learn-actions .btn{height:52px;font-size:17px;}
.review-btn:disabled{opacity:.55;}
.unit{margin-top:14px;}
.unit-card{background:var(--card);border:2.5px solid var(--edge);border-radius:22px;box-shadow:0 5px 0 var(--edge);overflow:hidden;}
.unit-card .unit-pic{display:block;width:100%;height:118px;object-fit:cover;border-bottom:2.5px solid var(--edge);}
.unit-info{padding:10px 14px 12px;}
.unit-info h2{font-size:22px;margin:2px 0;}
.unit-num{font:800 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--sub);}
.unit-jp{font:700 14px/1.3 var(--ui);color:var(--grape);}
.unit-jp [lang=ja]{font:800 16px/1.3 var(--jp);color:var(--ink);margin-right:4px;}
.unit-prog{height:10px;border-radius:99px;border:2px solid var(--edge);background:var(--card);overflow:hidden;margin:8px 0 4px;}
.unit-prog i{display:block;height:100%;background:var(--u, var(--mint));}
.unit.locked .unit-card{opacity:.75;}
.unit.locked .unit-pic{filter:grayscale(.7);}
.path-col{display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px 0 8px;}
.node-row{position:relative;display:flex;flex-direction:column;align-items:center;transform:translateX(var(--x));width:140px;}
.node{width:76px;height:82px;padding:0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.node:active{transform:translateY(3px);}
.node-art{display:block;width:100%;height:100%;object-fit:contain;}
.node.is-current{animation:node-bob 1.6s ease-in-out infinite;}
@keyframes node-bob{50%{transform:translateY(-5px);}}
.node-label{font:800 12px/1.2 var(--ui);text-align:center;max-width:130px;display:flex;flex-direction:column;align-items:center;gap:2px;}
.node.locked + .node-label{color:var(--sub);}
.node-girl{position:absolute;top:-6px;width:62px;pointer-events:none;}
.node-girl.left{right:118px;} .node-girl.right{left:118px;}
.node-girl-img{display:block;width:100%;height:auto;}
.path-deco{position:absolute;top:4px;width:58px;height:58px;object-fit:contain;pointer-events:none;}
.path-deco.left{right:128px;} .path-deco.right{left:128px;}
.stars{display:inline-flex;gap:2px;}
.stars .star{width:18px;height:18px;fill:#E6E1F2;stroke:var(--edge);stroke-width:1.6;stroke-linejoin:round;}
.stars .star.on{fill:var(--yellow);}
.stars.small .star{width:13px;height:13px;}
.stars.big .star{width:46px;height:46px;stroke-width:1.4;animation:star-pop .45s ease backwards;}
.stars.big .star:nth-child(2){animation-delay:.15s;} .stars.big .star:nth-child(3){animation-delay:.3s;}
@keyframes star-pop{0%{transform:scale(0);}70%{transform:scale(1.25);}100%{transform:scale(1);}}
/* bottom sheet */
.sheet-scrim{position:fixed;inset:0;background:rgba(33,27,58,.45);z-index:30;display:flex;align-items:flex-end;justify-content:center;}
.sheet{width:100%;max-width:460px;border-radius:24px 24px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;box-shadow:none;animation:sheet-up .22s ease;}
@keyframes sheet-up{from{transform:translateY(40%);opacity:0;}}
.sheet h2{font-size:24px;}
.sheet-words{display:flex;flex-wrap:wrap;gap:6px;}
.wchip{display:inline-block;padding:4px 10px;border-radius:99px;border:2px solid var(--edge);background:var(--card);font:700 13px/1.3 var(--ui);}
.wchip b{font:800 15px/1.3 var(--jp);margin-right:4px;}
.wchip.new{background:var(--surface2);color:var(--sub);}
.sheet-stamp{width:120px;margin:0 auto;}
/* inside a lesson */
.teach-card{padding-top:20px!important;}
.teach-pic .word-picture{width:104px;height:104px;}
.teach-meaning{font:800 22px/1.25 var(--ui);margin-top:6px;}
.sticker.story{background:var(--coral);}
.story-card{padding:16px 14px 12px!important;}
.story-card .unit-pic{display:block;width:100%;max-height:170px;object-fit:cover;border:2.5px solid var(--edge);border-radius:14px;}
.story-title{font-size:22px;margin:10px 0 2px;}
.story-title [lang=ja]{font:800 16px/1 var(--jp);color:var(--grape);}
.lesson-done .learned{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;}
.lesson-done{gap:8px!important;}
.lesson-done h1{margin-top:0;}
.lesson-done .sub{margin-top:0;}
.lesson-done .g-done{height:clamp(84px, 17dvh, 130px)!important;}
.lesson-done .wchip{font-size:12px;padding:2px 8px;}
.lesson-done .wchip b{font-size:13px;}
.stars-row{display:flex;justify-content:center;}
.up-next{margin:0;font-weight:800;}
.done-row{width:100%;}
.done-row .btn{font-size:17px;height:54px;}
.stamp-pop{width:150px;margin:0 auto;animation:stamp-in .5s cubic-bezier(.3,1.6,.6,1) backwards .2s;}
@keyframes stamp-in{0%{transform:scale(2.2) rotate(-20deg);opacity:0;}100%{transform:scale(1) rotate(-6deg);opacity:1;}}
.stamp-art{display:block;width:100%;height:auto;}
/* passport */
.passport-back{align-self:flex-start;font-size:15px;}
.passport{position:relative;width:100%;max-width:380px;aspect-ratio:1122/1402;margin:0 auto;background:#FFF4D6;border:2.5px solid var(--edge);border-radius:18px;box-shadow:0 5px 0 var(--edge);overflow:hidden;}
.passport-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.stamp-grid{position:absolute;inset:9% 6% 10%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,minmax(0,1fr));grid-auto-flow:column;column-gap:10%;row-gap:4px;}
.stamp-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:0;}
.stamp-slot .stamp-art{height:78%;width:auto;max-width:92%;object-fit:contain;transform:rotate(var(--r));}
.stamp-slot svg.stamp-art{width:auto;aspect-ratio:1;}
.stamp-empty{height:66%;aspect-ratio:1;border:2.5px dashed rgba(33,27,58,.3);border-radius:50%;}
.stamp-name{font:800 11px/1.2 var(--ui);color:var(--sub);text-align:center;}
.stamp-slot.has .stamp-name{color:var(--ink);}
@media (max-height: 620px){
  .tab-btn{font-size:12px;}
  .teach-pic .word-picture{width:72px;height:72px;}
  .teach-meaning{font-size:19px;}
  .story-card .unit-pic{max-height:120px;}
  .stars.big .star{width:34px;height:34px;}
  .learned-note{display:none;}
}
@media (max-width: 380px){ .tab-btn{font-size:12.5px;padding:0 2px;} }
@media (prefers-reduced-motion: reduce){ .node.is-current,.stars.big .star,.stamp-pop,.sheet{animation:none;} }

/* Guide = your word list: progress tags and the "My words" lists */
.gd-tag{font-size:10.5px;padding:1px 6px;margin-left:4px;vertical-align:1px;}
.gd-pips{display:inline-flex;margin-left:6px;vertical-align:1px;}
.gd-pips span{width:7px;height:7px;}
.gd-mine{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 14px;}
.gd-mine-h{font:800 12px/1 var(--ui);color:var(--sub);text-transform:uppercase;letter-spacing:.06em;margin-right:2px;}
.gd-mine-btn{border:2px solid var(--edge);border-radius:99px;background:var(--card);padding:7px 12px;font:700 14px/1 var(--ui);color:var(--ink);box-shadow:0 2px 0 var(--edge);cursor:pointer;}
.gd-mine-btn b{font-weight:800;margin-left:2px;}
.gd-mine-btn.known{background:var(--ok-soft);}
.gd-mine-btn.tricky{background:var(--t-coral);}
.gd-mine-btn.starred{background:var(--surface2);}
.gd-mine-btn:active{transform:translateY(2px);box-shadow:none;}

/* Settings: "More" list and How it works */
.set-list{padding:0;overflow:hidden;}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:14px 16px;background:none;border:0;border-bottom:2px solid var(--line);text-align:left;color:var(--ink);cursor:pointer;}
.set-row:last-child{border-bottom:0;}
.set-row b{display:block;font:600 17px/1.2 var(--disp);}
.set-row .small{display:block;margin-top:2px;}
.set-chev{font:700 26px/1 var(--ui);color:var(--sub);}
.set-row:active{background:var(--surface2);}
.how-sec{padding:0;margin-bottom:12px;}
.how-sec summary{list-style:none;cursor:pointer;padding:14px 16px;font:600 18px/1.2 var(--disp);display:flex;justify-content:space-between;align-items:center;}
.how-sec summary::-webkit-details-marker{display:none;}
.how-sec summary::after{content:"+";font:700 22px/1 var(--ui);color:var(--sub);}
.how-sec[open] summary::after{content:"\2013";}
.how-body{padding:0 16px 12px;}
.how-body .steps{margin-top:0;}
.reset-btn{margin-top:14px;}

/* one notes box with small tabs instead of a stack of bubbles */
.notes-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.notes-tab{border:1.5px solid var(--edge);border-radius:99px;background:transparent;padding:3px 9px;font:800 11px/1.2 var(--ui);letter-spacing:.04em;text-transform:uppercase;color:var(--sub);cursor:pointer;}
.notes-tab.on{background:var(--ink);color:var(--bg);}

/* ---------------------------------------------------------------- dark mode
   Settings > Appearance (Light / Dark / Match phone) sets data-theme on <html>.
   Same sticker look, darker palette: dark surfaces, light text, near-black
   outlines. Pictures, characters and scenes are unchanged. */
html[data-theme=dark]{
  --bg:#15122A; --card:#221D3B; --surface2:#2D2650; --line:#342C57;
  --ink:#F1EDFF; --sub:#ADA5CF; --edge:#07060F;
  --grape:#7A64FF; --yellow:#E6B432; --coral:#E5645B; --mint:#1BA27B; --amber:#E39B2C;
  --warn-soft:#3D3119; --ok-soft:#15392E;
  --t-grape:#2A244E; --t-grape2:#2E2756; --t-grape3:#262046; --t-coral:#3F232D; --t-coral2:#45252F; --t-coral3:#3A2029; --t-coral4:#4A2832; --t-mint:#163A30;
  color-scheme:dark;
}
/* bright accent surfaces keep dark text */
html[data-theme=dark] :is(.card.mint,.card.yellow,.btn.mint,.sticker,.tile.reveal,.tile.given,.opt.wrong,.opt.right,.opt .num,.play-btn,
  .seg button.on,.tool-btn.live,.goal-box,.build-tile.wrong,.pic-opt .num,.order-opt.wrong,.srow .num,.setup-steps .num,.convo-play,
  .gd-play,.srow2 .num,.g-donebtn.right,.g-sign.right,.g-sign.wrong,.g-dir.now,.test-grade,.sticker.sentence,.sticker.scene,.sticker.convo,.sticker.price){
  --ink:#1B1630; --sub:#3E3560; color:var(--ink);}
html[data-theme=dark] .chip.known, html[data-theme=dark] .heard-chip{color:#86E6C3;}
html[data-theme=dark] .chip.unknown{color:#F3C67C;}
html[data-theme=dark] .chip.tricky{color:#FF9D92;}
html[data-theme=dark] .tile.blank{background:rgba(255,255,255,.05);}
html[data-theme=dark] .check-line{border-color:rgba(255,255,255,.15);}
html[data-theme=dark] .route-ahead{stroke:#ADA5CF;}
html[data-theme=dark] #view-learn{
  background:
    linear-gradient(rgba(21,18,42,.72), rgba(21,18,42,.72)),
    url(games/path/map-bg.webp) top center / 100% auto repeat-y,
    radial-gradient(circle at 1px 1px, rgba(173,165,207,.10) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
    var(--bg);}
html[data-theme=dark] .node-label{background:rgba(34,29,59,.9);}
/* Learn tab: the map runs all the way up behind the tab buttons and the clock,
   instead of a cream band above it (the buttons float on the map). */
#app:has(> #view-learn:not([hidden])){background:
    linear-gradient(rgba(255,244,214,.28), rgba(255,244,214,.28)),
    url(games/path/map-bg.webp) top center / 100% auto repeat-y,
    radial-gradient(circle at 1px 1px, rgba(91,63,240,.10) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
    var(--bg);}
html[data-theme=dark] #app:has(> #view-learn:not([hidden])){background:
    linear-gradient(rgba(21,18,42,.72), rgba(21,18,42,.72)),
    url(games/path/map-bg.webp) top center / 100% auto repeat-y,
    radial-gradient(circle at 1px 1px, rgba(173,165,207,.10) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
    var(--bg);}
#app:has(> #view-learn:not([hidden])) > #view-learn,
html[data-theme=dark] #app:has(> #view-learn:not([hidden])) > #view-learn{background:transparent;}
#app:has(> #view-learn:not([hidden])) > #tabs{background:transparent;}
body:has(#view-learn:not([hidden]))::before{background:transparent;}

html[data-theme=dark] .g-note{background:var(--surface2);}
html[data-theme=dark] .g-note small{color:var(--sub);}
html[data-theme=dark] :is(.row-card,.gd-row,.srow2){border-bottom-color:rgba(255,255,255,.08);}
html[data-theme=dark] table.stats td{border-bottom-color:rgba(255,255,255,.07);}
html[data-theme=dark] .sounds{color:var(--sub);}
html[data-theme=dark] .g-story small{color:var(--sub);}
html[data-theme=dark] :is(.speed,.setup-dots i,.g-timer){background:rgba(255,255,255,.12);}
html[data-theme=dark] :is(.dialog-scrim,.gd-modal,.sheet-scrim){background:rgba(5,4,12,.65);}

/* Account page */
.acct-msg:empty{display:none;}
.acct-msg{margin-top:10px;font-weight:800;color:var(--ink);}
.acct-synced{color:var(--sub);}
.acct-delete{align-self:center;color:var(--sub);}
.account-box{display:flex;flex-direction:column;gap:14px;}

/* First run (onboard.js) */
body.in-onboard{overflow:hidden;}
body.in-onboard #tabs{display:none;}
.onboard{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;gap:14px;
  padding:max(14px, env(safe-area-inset-top)) 18px max(14px, env(safe-area-inset-bottom));overflow-y:auto;}
.ob-top{display:flex;align-items:center;}
.ob-body{display:flex;flex-direction:column;gap:14px;flex:1;max-width:520px;width:100%;margin:0 auto;}
.ob-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;}
.ob-hero .sub{margin:0;max-width:34ch;}
.ob-girl{height:clamp(130px, 26vh, 210px);width:auto;}
.ob-girl-sm{height:86px;width:auto;flex:none;}
.ob-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ob-h{margin:0;font-size:clamp(25px, 7vw, 30px);line-height:1.15;text-wrap:balance;}
.ob-sub{margin:-6px 0 0;}
.ob-brand{font:600 17px/1 var(--disp);letter-spacing:.04em;color:var(--grape);background:var(--card);border:2.5px solid var(--edge);border-radius:99px;padding:6px 14px;box-shadow:0 3px 0 var(--edge);}
.ob-brand span{font-family:var(--jp);font-weight:800;margin-left:4px;color:var(--ink);}
.ob-points{display:flex;flex-direction:column;gap:10px;}
.ob-pt{display:flex;align-items:center;gap:10px;font:700 15px/1.3 var(--ui);}
.ob-pt .num{flex:none;width:28px;height:28px;border-radius:99px;background:var(--yellow);border:2.5px solid var(--edge);display:grid;place-items:center;font:800 14px/1 var(--ui);color:#211B3A;}
.ob-nav{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:520px;width:100%;margin:0 auto;}
.ob-nav .btn{width:100%;height:56px;font-size:19px;}
.ob-nav .link-btn{padding:6px;}
.ob-privacy{margin:4px 0 0;color:var(--sub);text-align:center;}
.ob-privacy a{color:var(--grape);font-weight:800;}
/* A note from Lucas (onboard.js showNote) */
.note{z-index:41;}
.note-body{gap:10px;}
.note-body p{margin:0;font:600 15.5px/1.45 var(--ui);color:var(--ink);}
.note-body p b[lang]{font-family:var(--jp);font-weight:800;}
.note-body p i{color:var(--sub);font-style:normal;font-weight:800;}
.note-head{display:flex;align-items:center;gap:14px;padding-top:6px;}
.note-me{height:clamp(96px, 19dvh, 170px);width:auto;flex:none;}
.note-tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:9px;border:2.5px solid var(--edge);background:var(--yellow);color:#211B3A;box-shadow:0 3px 0 var(--edge);font:700 12px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;}
.note-mail{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card);border:2.5px solid var(--edge);border-radius:16px;padding:10px 12px;}
.note-addr{font:800 14px/1.2 var(--ui);color:var(--ink);user-select:all;-webkit-user-select:all;word-break:break-all;min-width:0;}
.note-mail .copy-btn{flex:none;height:32px;padding:0 12px;border-radius:10px;border:2px solid var(--edge);background:var(--yellow);color:#211B3A;font:800 13px/1 var(--ui);cursor:pointer;}
@media (max-height:600px){ .note-body p{font-size:14px;line-height:1.36;} .note-me{height:84px;} .note-body{gap:7px;} .note-mail{padding:7px 10px;} .note .ob-nav .btn{height:50px;} }
/* First run (Oct 11): a picture with her in it at the top, the card underneath */
.onboard.ob-simple{padding:0;gap:0;overflow:hidden;}
.ob-art{position:relative;flex:1 1 auto;min-height:140px;overflow:hidden;}
.ob-art.wash-sky{background:linear-gradient(180deg,#BFE0FF 0%,#E4F1FF 55%,#FFF4D6 100%);}
.ob-art.wash-rose{background:linear-gradient(180deg,#FFCFDB 0%,#FFE6EC 55%,#FFF4D6 100%);}
.ob-art.wash-mint{background:linear-gradient(180deg,#BFEFDC 0%,#E2F8EF 55%,#FFF4D6 100%);}
.ob-art.wash-sun{background:linear-gradient(180deg,#FFD98A 0%,#FFEBC0 55%,#FFF4D6 100%);}
.ob-art{container-type:size;}
/* the square picture: covers the area, pinned to the top so its sign board always shows */
.ob-plate{--a:0;position:absolute;left:50%;top:clamp(calc(100cqh - max(100cqw, 100cqh)), calc(100cqh - var(--a) * max(100cqw, 100cqh)), env(safe-area-inset-top, 0px));width:max(100cqw, 100cqh);aspect-ratio:1;transform:translateX(-50%);container-type:inline-size;}
.ob-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
/* sign text laid on the picture's own blank board */
.ob-sign.boxed{position:absolute;margin:0;max-width:none;background:none;border:0;box-shadow:none;padding:0;justify-content:center;gap:.9cqw;}
.ob-sign.boxed .ja{font-size:4.7cqw;line-height:1;}
.ob-sign.boxed .ro{font-size:max(8.5px, 2.1cqw);line-height:1;}
.no-art .ob-sign.boxed{background:#fff;border:2.5px solid #211B3A;border-radius:14px;box-shadow:0 3px 0 #211B3A;}
.ob-simple .ob-top{display:flex;justify-content:center;margin-top:-4px;}
.ob-simple .setup-dots{flex:none;width:min(180px, 50%);}
.ob-sign{position:absolute;z-index:2;left:0;right:0;margin:0 auto;width:max-content;max-width:86%;top:calc(max(14px, env(safe-area-inset-top)) + 8px);
  display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;color:#211B3A;background:#fff;border:2.5px solid #211B3A;border-radius:14px;padding:6px 14px;box-shadow:0 3px 0 #211B3A;}
.ob-sign .ja{font:800 21px/1.1 var(--jp);}
.ob-sign .ro{font:700 12px/1.1 var(--ui);color:#5A5178;}
.ob-girl-s{position:absolute;z-index:1;left:0;right:0;bottom:16px;margin:0 auto;height:clamp(104px, 25dvh, 210px);max-height:min(72%, calc(100cqh - 84px - env(safe-area-inset-top, 0px)));width:auto;
  animation:ob-bob 1.6s ease-in-out infinite;}
.ob-in{animation:hello-pop .55s cubic-bezier(.3,1.6,.5,1) both, ob-bob 1.6s ease-in-out .55s infinite;}
.ob-hop{animation:ob-hop .7s ease-out both, ob-bob 1.6s ease-in-out .7s infinite;}
.ob-out{animation:ob-out .3s ease-in forwards;}
@keyframes ob-bob{0%,100%{translate:0 0;}50%{translate:0 -3px;}}
@keyframes ob-hop{0%{transform:none;}30%{transform:translateY(-22px) scale(1.04);}60%{transform:none;}80%{transform:translateY(-6px);}100%{transform:none;}}
@keyframes ob-out{to{transform:translateY(16px) scale(.92);opacity:0;}}
.ob-say{position:absolute;z-index:2;left:calc(50% + 34px);bottom:calc(16px + min(25dvh, 210px) * .78);background:#fff;color:#211B3A;border:2.5px solid #211B3A;border-radius:16px 16px 16px 4px;
  padding:6px 12px;box-shadow:0 3px 0 #211B3A;font:800 18px/1.1 var(--jp);}
.ob-say.said{background:#1DBE8E;animation:hello-pop .45s cubic-bezier(.3,1.6,.5,1) both;}
.ob-simple .ob-card{position:relative;z-index:2;flex:none;margin-top:-22px;background:var(--bg);border-top:2.5px solid var(--edge);border-radius:26px 26px 0 0;
  padding:16px 18px max(14px, env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;box-shadow:0 -4px 0 rgba(33,27,58,.12);}
.ob-card > *{max-width:520px;width:100%;margin:0 auto;}
.ob-simple .ob-body{flex:none;gap:10px;}
.ob-simple .ob-brand{align-self:flex-start;}
.ob-kicker{font:800 12px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--grape);}
.ob-q{font-size:clamp(21px, 6vw, 25px);}
.ob-q i{font-style:normal;color:var(--grape);}
.ob-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ob-opt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;border:2.5px solid var(--edge);border-radius:16px;background:var(--card);color:var(--ink);box-shadow:0 3px 0 var(--edge);cursor:pointer;}
.ob-opt .ja{font:800 18px/1.1 var(--jp);}
.ob-opt .ro{font:700 13px/1 var(--ui);color:var(--sub);}
.ob-opt.ob-right{background:var(--mint);color:#211B3A;}
.ob-opt.ob-right .ro{color:#211B3A;}
.ob-opt.ob-miss{opacity:.45;animation:lb-shake .35s;}
.ob-msg{margin:0;min-height:1.3em;}
.ob-simple .btn[disabled]{opacity:.45;}
@media (prefers-reduced-motion: reduce){ .ob-girl-s,.ob-in,.ob-hop,.ob-out,.ob-say.said{animation:none;} }
@media (max-height:620px){
  .ob-simple .ob-card{padding-top:12px;gap:8px;}
  .ob-simple .ob-sub{font-size:14px;}
  .ob-sign{top:calc(max(10px, env(safe-area-inset-top)) + 6px);padding:4px 10px;}
  .ob-sign .ja{font-size:17px;}
  .ob-opt{padding:6px;}
}
html[data-theme=dark] .setup-dots i.done{background:var(--mint);}
html[data-theme=dark] .setup-dots i.on{background:var(--grape);}
@media (max-height:620px){
  .onboard{gap:10px;}
  .ob-body{gap:10px;}
  .ob-girl{height:104px;}
  .ob-h{font-size:24px;}
  .ob-hero{gap:4px;}
  .ob-hero .sub{font-size:14.5px;}
  .ob-points{gap:6px;padding:10px 14px;}
  .ob-pt{font-size:14px;}
  .ob-nav .btn{height:52px;}
}

/* Continue with Apple / Google (account page) */
.oauth-btns{display:flex;flex-direction:column;gap:10px;}
.oauth-btns .btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;}
.oauth-apple{background:#000;color:#fff;}
html[data-theme=dark] .oauth-apple{background:#fff;color:#000;}
.oauth-google{background:#fff;color:#1f1f1f;}
.oauth-logo{width:20px;height:20px;font-size:21px;line-height:20px;flex:none;}
.acct-or{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--sub);font:800 12px/1 var(--ui);letter-spacing:.04em;text-transform:uppercase;}
.acct-or::before,.acct-or::after{content:"";flex:1;height:2px;background:currentColor;opacity:.35;border-radius:2px;}
html[data-theme=dark] .oauth-google{background:#131314;color:#e3e3e3;}

/* Sentence pieces: Fill the gap, What does it mean here?, Words in order */
.sent-card{padding:18px 14px 14px;}
.sent-en{font:600 18px/1.25 var(--disp);margin:4px 0 8px;text-wrap:balance;}
.sent-jp{font:800 25px/1.35 var(--jp);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;}
.sent-jp .sp.hl{background:var(--yellow);color:#211B3A;border-radius:8px;padding:0 4px;box-shadow:0 0 0 2px var(--edge);}
.sent-jp .gap-slot{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:36px;margin:0 3px;border:2.5px dashed var(--grape);border-radius:10px;color:var(--grape);font-size:22px;}
.sent-ro{margin-top:8px;font:700 15px/1.4 var(--ui);color:var(--sub);}
.sent-ro .hl{color:var(--ink);background:var(--yellow);background:color-mix(in srgb, var(--yellow) 55%, transparent);border-radius:4px;padding:0 3px;}
.sent-ro .gap-slot.r{color:var(--grape);letter-spacing:2px;}
.hl-word{font-family:var(--jp);font-weight:800;background:var(--yellow);color:#211B3A;border-radius:6px;padding:0 5px;}
.sent-line{flex-direction:column;gap:2px;padding:6px 10px;}
.sent-line .sl-jp{font:800 22px/1.2 var(--jp);color:var(--ink);}
.sent-line .sl-ro{font:700 13px/1.2 var(--ui);color:var(--sub);letter-spacing:0;}
.word-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.word-tile{min-height:58px;border-radius:15px;border:2.5px solid var(--edge);background:var(--card);box-shadow:0 4px 0 var(--edge);color:var(--ink);cursor:pointer;padding:6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;}
.word-tile span{font:800 20px/1.1 var(--jp);}
.word-tile small{font:700 12px/1 var(--ui);color:var(--sub);}
.word-tile:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge);}
.word-tile.used{visibility:hidden;}
.word-tile.wrong{background:var(--amber);}
.compact-note .notes-body{font-size:14px;line-height:1.35;}
.compact-note .notes-body .reply-jp{font-size:15px;}
.wbw{display:flex;flex-wrap:wrap;gap:4px 6px;}
.wbw-i{background:var(--card);border:2px solid var(--edge);border-radius:10px;padding:1px 7px;font:700 12.5px/1.45 var(--ui);white-space:nowrap;}
.wbw-i b{font:800 15px/1.2 var(--jp);}
.wbw-i i{font-style:normal;color:var(--sub);}
.cf-slot:not(:empty){margin-top:10px;display:flex;justify-content:center;}

/* Opening the app on its own: her hello, then "you are here" on the map */
.hello{position:fixed;inset:0;z-index:45;background:#FCF4D9;display:flex;align-items:center;justify-content:center;transition:opacity .35s ease;}
.hello-out{opacity:0;}
.hello-clip{width:100%;height:100%;object-fit:contain;background:#FCF4D9;} /* the clip's own cream, so no box shows around it */
.hello-pop{display:flex;flex-direction:column;align-items:center;gap:12px;}
.hello-pop[hidden]{display:none;}
.hello-girl{height:min(38dvh, 300px);width:auto;animation:hello-pop .55s cubic-bezier(.3,1.6,.5,1) both, ob-bob 1.4s ease-in-out .55s infinite;}
.hello-bubble{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:2.5px solid #211B3A;border-radius:18px;padding:8px 16px;box-shadow:0 4px 0 #211B3A;color:#211B3A;
  animation:hello-pop .45s cubic-bezier(.3,1.6,.5,1) .25s both;}
.hello-bubble b{font:800 24px/1.1 var(--jp);}
.hello-bubble span{font:700 14px/1 var(--ui);color:#5A5178;}
@keyframes hello-pop{from{transform:scale(.3) translateY(40px);opacity:0;}to{transform:none;opacity:1;}}
.node-girl.here{animation:here-hop .45s ease-out 3;}
@keyframes here-hop{0%,100%{transform:translateY(0);}40%{transform:translateY(-16px);}}
.node.here{animation:here-pulse .5s ease-in-out 3;}
@keyframes here-pulse{50%{transform:scale(1.14);filter:drop-shadow(0 0 10px rgba(91,63,240,.7));}}
@media (prefers-reduced-motion: reduce){ .hello-girl,.hello-bubble,.node-girl.here,.node.here{animation:none;} }
/* Setup: "Not working?" sheet */
.setup-help-link{color:var(--sub);}
.help-sheet-wrap{position:fixed;inset:0;z-index:60;background:rgba(33,27,58,.45);display:flex;align-items:flex-end;justify-content:center;}
.help-sheet{width:100%;max-width:520px;max-height:85dvh;overflow-y:auto;background:var(--bg);border:2.5px solid var(--edge);border-bottom:0;border-radius:24px 24px 0 0;
  padding:14px 18px max(18px, env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;animation:help-up .25s ease-out;}
.help-head{display:flex;align-items:center;justify-content:space-between;}
.help-head h2{font-size:22px;}
.help-rows{display:flex;flex-direction:column;gap:10px;}
.help-rows .trow{font:600 14.5px/1.4 var(--ui);color:var(--ink);background:var(--card);border:2px solid var(--line);border-radius:14px;padding:10px 12px;}
.help-rows .trow b{display:block;margin-bottom:2px;}
.trow .sel{font-weight:800;user-select:all;-webkit-user-select:all;word-break:break-all;}
@keyframes help-up{from{transform:translateY(40px);opacity:0;}to{transform:none;opacity:1;}}
@media (prefers-reduced-motion: reduce){ .help-sheet{animation:none;} }
.g-bubble .g-replay[hidden]{display:none;}
.g-bubble .g-replay{font-size:16px;}
/* Signs you'll see (sign items): the sign drawn in its usual look */
.sticker.signk{background:#9FD8FF;}
.sign-card{padding-top:22px;}
.sign-plate{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:62%;max-width:100%;padding:14px 22px;border-radius:12px;border:3px solid #211B3A;box-shadow:0 4px 0 #211B3A;
  font-family:var(--jp);font-weight:800;color:#1B1630;background:#fff;}
.sign-jp{font-size:clamp(38px, 12vw, 52px);line-height:1.05;letter-spacing:.04em;white-space:nowrap;}
.sign-arrow{font:800 30px/1 var(--ui);}
.look-yellow{background:#FFD23F;}
.look-green{background:#17A35A;color:#fff;}
.look-blue{background:#2F63D8;color:#fff;border-radius:50% / 40%;min-width:auto;aspect-ratio:1;padding:14px;}
.look-red{background:#DE4C43;color:#fff;border-radius:50% / 40%;min-width:auto;aspect-ratio:1;padding:14px;}
.look-door{background:linear-gradient(180deg,#EEF1F5,#C9CFD8);border-radius:10px;min-width:auto;padding:18px 34px;position:relative;}
.look-door::before,.look-door::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#8C95A3;}
.look-door::before{left:10px;} .look-door::after{right:10px;}
.look-shop{background:#B9773E;color:#FFF4D6;border-radius:8px;padding:12px 24px;position:relative;margin-top:18px;}
.look-shop::before{content:"";position:absolute;left:50%;top:-20px;width:46%;height:20px;transform:translateX(-50%);border:3px solid #211B3A;border-bottom:0;border-radius:40px 40px 0 0;}
.look-ban{background:#fff;color:#C8302A;border-color:#C8302A;box-shadow:0 4px 0 #211B3A;}
.sign-say{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;}
.sign-card.fb .sign-jp{font-size:clamp(30px, 9vw, 40px);}
.sign-card.fb .sign-plate{padding:8px 18px;}
.sign-card.fb .look-blue,.sign-card.fb .look-red{padding:10px;}
@media (max-height:600px){ .sign-jp{font-size:clamp(32px, 10vw, 42px);} .sign-plate{padding:10px 18px;} .sign-card.fb .sign-jp{font-size:28px;} }
/* Find the sign: a scene with tappable signs */
.hunt-card{padding:24px 10px 10px;display:flex;flex-direction:column;gap:8px;}
.hunt-goal{font:600 18px/1.25 var(--disp);text-align:center;text-wrap:balance;padding:0 6px;color:var(--ink);}
.hunt-scene{position:relative;width:100%;border-radius:14px;overflow:hidden;border:2.5px solid var(--edge);container-type:inline-size;background:#EDE6D8;}
.hunt-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.hunt-spot{position:absolute;transform:translate(-50%,-50%);min-width:34px;min-height:20px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0 3px;cursor:pointer;border-radius:5px;
  font:800 clamp(10px, 3.4cqw, 22px)/1 var(--jp);white-space:nowrap;}
.hunt-spot[style*="background"]{border:2px solid #211B3A;}
.hunt-spot.vert{min-width:22px;min-height:40px;}
.hunt-spot.vert span{writing-mode:vertical-rl;text-orientation:upright;line-height:1.1;letter-spacing:.05em;}
.hunt-spot span{pointer-events:none;}
.hunt-spot::after{content:"";position:absolute;inset:-9px -6px;}
.hunt-spot.right{outline:4px solid #1DBE8E;outline-offset:2px;}
.hunt-spot.missed{opacity:.75;}
.hunt-tag{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);font:800 11px/1.1 var(--ui);font-style:normal;color:#211B3A;background:#FFE3B0;border:2px solid #211B3A;border-radius:8px;padding:3px 6px;white-space:nowrap;z-index:2;}
.hunt-spot:focus-visible{outline:3px solid var(--grape);outline-offset:2px;}
@media (max-height:600px){ .hunt-goal{font-size:16px;} .hunt-card{padding-top:20px;gap:6px;} }
/* Menu reading: a café chalkboard */
.sticker.menuk{background:#FFC2A6;}
.menu-card{padding-top:22px;display:flex;flex-direction:column;gap:8px;}
.chalk{background:#2F4A3A;border:6px solid #9A6A3C;border-radius:12px;box-shadow:inset 0 0 0 2px #22362A, 0 4px 0 #211B3A;padding:10px 16px 14px;color:#F4F1E6;text-align:left;}
.chalk-head{font:800 14px/1 var(--jp);letter-spacing:.3em;text-align:center;color:#F9D77E;margin-bottom:8px;}
.chalk-row{display:flex;align-items:baseline;gap:10px;width:100%;background:none;border:0;padding:4px 2px;color:inherit;font-family:inherit;position:relative;text-align:left;}
.chalk-row::after{content:"";flex:1;order:1;border-bottom:2px dotted rgba(244,241,230,.35);margin:0 2px;transform:translateY(-4px);}
.chalk-jp{font:800 clamp(26px, 8.5vw, 36px)/1.15 var(--jp);order:0;white-space:nowrap;}
.chalk-yen{font:800 16px/1 var(--ui);order:2;color:#F9D77E;}
.chalk.big .chalk-jp{font-size:clamp(19px, 5.6vw, 23px);}
.chalk.big .chalk-row{padding:6px 2px;border-radius:8px;cursor:pointer;}
.chalk.big .chalk-row:active{background:rgba(255,255,255,.08);}
.chalk-row.right{background:rgba(29,190,142,.45);outline:3px solid #1DBE8E;}
.chalk-row.missed{opacity:.7;}
.chalk-tag{order:1;font:800 11px/1.1 var(--ui);font-style:normal;color:#211B3A;background:#FFE3B0;border:2px solid #211B3A;border-radius:8px;padding:2px 6px;white-space:nowrap;align-self:center;}
.chalk-row.missed::after{display:none;}
.menu-card.fb .chalk-jp{font-size:clamp(22px, 7vw, 30px);}
@media (max-height:600px){ .chalk{padding:8px 12px 10px;} .chalk.big .chalk-row{padding:3px 2px;} .chalk.big .chalk-jp{font-size:18px;} .chalk-head{margin-bottom:4px;} }
/* Menu pictures: food sticker on the answer, café wall and cat on Order it */
.menu-fb{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:6px;}
.menu-fb .sign-say{margin-top:0;justify-content:flex-start;}
.menu-food{width:72px;height:72px;object-fit:contain;animation:hello-pop .45s cubic-bezier(.3,1.6,.5,1) both;}
.cafe-row{display:flex;align-items:flex-end;justify-content:center;gap:4px;}
.cafe{position:relative;height:min(44dvh, 300px);aspect-ratio:684 / 880;max-width:72%;border-radius:12px;overflow:hidden;border:2.5px solid var(--edge);flex:none;}
.cafe-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.chalk.on-wall{position:absolute;left:7.5%;top:7%;width:85%;height:76%;background:none;border:0;box-shadow:none;padding:6% 5%;container-type:inline-size;display:flex;flex-direction:column;justify-content:center;}
.chalk.on-wall .chalk-head{font-size:max(10px, 6cqw);margin-bottom:3cqw;}
.chalk.on-wall .chalk-jp{font-size:max(13px, 8.6cqw);}
.chalk.on-wall .chalk-yen{font-size:max(10px, 6.4cqw);}
.chalk.on-wall .chalk-row{padding:1.6cqw 1cqw;gap:2cqw;}
.cafe-cat{height:min(17dvh, 112px);width:auto;max-width:30%;object-fit:contain;flex:none;margin-left:-16px;position:relative;z-index:1;animation:ob-bob 1.8s ease-in-out infinite;}
.fb-row .g-fb.cafe-cat-fb{width:64px;height:auto;}
@media (max-height:600px){ .cafe{height:min(46dvh, 252px);} .cafe-cat{height:90px;} }
@media (prefers-reduced-motion: reduce){ .cafe-cat,.menu-food{animation:none;} }

/* daily test */
.test-offer .g-test,.test-result .g-test{height:clamp(104px, 22dvh, 156px);width:auto;max-width:70%;margin:4px auto -4px;}
.test-result .g-test.pop{animation:done-pop .45s cubic-bezier(.34,1.56,.64,1) both;}
.sticker.test{background:#BFE3FF;}
.test-card .test-lead{margin-top:6px;}
.test-card .test-reading{font:700 17px/1.2 var(--ui);color:var(--sub);margin-top:2px;}
#view-quiz .test-card .jp{margin-top:4px;}
.test-grade{width:96px;height:96px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--yellow);border:3px solid var(--edge);box-shadow:0 5px 0 var(--edge);font:700 46px/1 var(--disp);color:var(--ink);transform:rotate(-6deg);}
.test-grade.none{font-size:30px;background:#C9B8FF;}
.test-result .sub{margin:2px 0 0;}
.test-review{text-align:left;}
.test-miss{font-size:14px;line-height:1.35;margin-top:3px;}
.test-miss b{font-family:var(--jp, inherit);font-size:16px;}
.test-now{display:inline;margin-left:4px;padding:0;font-size:inherit;}
@media (max-height: 620px){
  .test-grade{width:76px;height:76px;font-size:36px;}
  .test-result .g-test{height:clamp(80px, 16dvh, 110px);}
}
@media (prefers-reduced-motion: reduce){.test-result .g-test.pop{animation:none;}}

/* iPhone app setup, steps 1-5 on one page: short screenshot strips (tap for the whole picture) */
.native-app .five-steps .thumb img{max-height:50px;object-fit:cover;object-position:center 30%;}
.native-app .five-steps .srow2:last-child .thumb img{object-position:center 87%;}
.native-app .five-steps .srow2{padding:5px 0;}
.native-app .five-steps .thumb{width:40%;}
@media (max-height: 620px){ .native-app .five-steps .thumb img{max-height:38px;} .native-app .five-steps .srow2{padding:3px 0;} }