:root{
  --sand:#f7efe2; --sun:#e8a33d; --clay:#c0562c; --deep:#2d1f16;
  --leaf:#4a7856; --sky:#3d7ea6; --stone:#8a7a68;
  --card:#fffdf9; --line:#e5d7c2; --ink:#4b3d31;
  --danger:#a5341c;
  --shadow:0 6px 20px rgba(45,31,22,.18);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{overscroll-behavior-y:none}
body{
  margin:0;background:var(--sand);color:var(--deep);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;-webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font-family:inherit}
.hide{display:none !important}
.wrap{max-width:680px;margin:0 auto;padding:0 16px calc(96px + env(safe-area-inset-bottom))}

/* ---------------------------------------------------------- app header */
header#hero{
  background:linear-gradient(160deg,var(--clay) 0%,var(--sun) 100%);
  color:#fff;margin:0 -16px;padding:calc(26px + env(safe-area-inset-top)) 22px 24px;
  border-radius:0 0 26px 26px;position:relative;overflow:hidden;
}
header#hero::after{content:"";position:absolute;right:-30px;bottom:-40px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.11)}
.kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.85;font-weight:700}
header#hero h1{margin:8px 0 4px;font-size:31px;line-height:1.06;letter-spacing:-.02em}
header#hero p.sub{margin:0;font-size:15px;opacity:.93}
.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;position:relative;z-index:1}
.count{margin-top:16px;background:rgba(255,255,255,.18);border-radius:14px;padding:11px 15px;display:flex;align-items:baseline;gap:9px;position:relative;z-index:1}
.count b{font-size:28px;letter-spacing:-.02em;line-height:1}
.count span{font-size:13px;opacity:.92}
.whoami{
  display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.2);
  border:none;color:#fff;border-radius:20px;padding:6px 12px 6px 7px;font-size:13.5px;
  font-weight:700;cursor:pointer;position:relative;z-index:1;flex:0 0 auto;
}
.whoami .av{width:24px;height:24px;border-radius:50%;background:#fff3;display:grid;place-items:center;font-size:14px}

/* --------------------------------------------------------------- tabs */
nav#tabs{
  display:flex;gap:7px;overflow-x:auto;padding:16px 16px 4px;margin:0 -16px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;position:sticky;top:0;background:var(--sand);z-index:30;
}
nav#tabs::-webkit-scrollbar{display:none}
nav#tabs button{
  flex:0 0 auto;border:1.5px solid var(--line);background:var(--card);color:var(--stone);
  font-size:14px;font-weight:700;padding:9px 15px;border-radius:20px;cursor:pointer;transition:.15s;
}
nav#tabs button.on{background:var(--deep);color:#fff;border-color:var(--deep)}

section.view{display:none;padding-top:14px}
section.view.on{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

h2{font-size:22px;margin:22px 0 4px;letter-spacing:-.01em}
.lede{color:var(--stone);font-size:15px;margin:0 0 14px}

/* -------------------------------------------------------------- cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:14px}
.daycard .top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.dayicon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:17px;flex:0 0 auto;background:#fbe6d3}
.daycard .when{font-size:12px;color:var(--stone);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.daycard h3{margin:0;font-size:19px;letter-spacing:-.01em}
.daycard p{margin:8px 0 0;font-size:15px;color:var(--ink)}
.meta{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.chip{background:var(--sand);border:1px solid var(--line);border-radius:9px;padding:5px 10px;font-size:12.5px;color:var(--stone);font-weight:600}
.navbtn{display:block;margin-top:13px;background:var(--leaf);color:#fff;text-align:center;text-decoration:none;font-size:15.5px;font-weight:700;padding:13px;border-radius:12px}

.fact{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:17px 18px;margin-bottom:12px;cursor:pointer;position:relative}
.fact .q{font-size:17px;font-weight:700;margin:0;padding-right:28px;letter-spacing:-.01em}
.fact .plus{position:absolute;right:16px;top:16px;font-size:19px;color:var(--sun);transition:.25s}
.fact.open .plus{transform:rotate(45deg)}
.fact .a{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:15px;color:var(--ink)}
.fact.open .a{max-height:1600px}
.fact .a p{margin:11px 0 0}
.fact .where{margin-top:10px;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--clay);font-weight:700}
.fact .factpic{width:100%;border-radius:12px;margin-top:12px;display:block;background:var(--sand)}
.fact .credit{margin-top:5px;font-size:11px;color:var(--stone);line-height:1.35}
.topics{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.topics::-webkit-scrollbar{display:none}
.chipbtn{flex:0 0 auto;border:1.5px solid var(--line);background:var(--card);color:var(--stone);font-size:13.5px;font-weight:700;padding:7px 13px;border-radius:18px;cursor:pointer;font-family:inherit}
.chipbtn.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.facttools{display:flex;gap:8px;margin-top:12px}
.hero-actions{display:flex;align-items:center;gap:8px}
.refresh{background:rgba(255,255,255,.18);border:none;color:#fff;width:38px;height:38px;border-radius:50%;font-size:19px;cursor:pointer;font-family:inherit;line-height:1;flex:0 0 auto}
.refresh.spin{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.flash{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);background:var(--deep);color:#fff;padding:11px 20px;border-radius:14px;font-size:14.5px;font-weight:600;opacity:0;pointer-events:none;transition:.2s;z-index:90;box-shadow:0 6px 20px rgba(45,31,22,.3)}
.flash.on{opacity:1;transform:translate(-50%,0)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px;margin-bottom:6px}
.avopt{background:var(--card);border:1.5px solid var(--line);border-radius:13px;padding:9px 0;font-size:22px;cursor:pointer;font-family:inherit;line-height:1}
.avopt.on{background:var(--deep);border-color:var(--deep);transform:scale(1.04)}
.big{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.bignum{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:14px}
.bignum b{display:block;font-size:25px;letter-spacing:-.02em;color:var(--clay)}
.bignum span{font-size:12.5px;color:var(--stone);line-height:1.35;display:block;margin-top:2px}
.game{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:17px 18px;margin-bottom:12px}
.game h4{margin:0 0 6px;font-size:17px;letter-spacing:-.01em}
.game p{margin:0;font-size:15px;color:var(--ink)}
textarea.txt{resize:vertical;min-height:70px;font-family:inherit}

/* ---- adventure map ---- */
.mapwrap{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:8px;overflow:hidden}
#mapSvg{width:100%;height:auto;display:block;touch-action:manipulation}
#mapSvg .stop{cursor:pointer}
#mapSvg .stop:active{opacity:.65}
#mapSvg .lbl{fill:var(--deep);paint-order:stroke;stroke:#fffdf9;stroke-width:6px;stroke-linejoin:round}
#mapSvg .trail{animation:crawl 30s linear infinite}
@keyframes crawl{to{stroke-dashoffset:-440}}
.legend{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
.legend::-webkit-scrollbar{display:none}
.legend .lg{flex:0 0 auto;display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 11px;font-size:12.5px;font-weight:700;color:var(--stone)}
.legend .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.stophdr{display:flex;gap:12px;align-items:flex-start;margin-bottom:6px}
.stophdr h3{margin:0;font-size:20px}
.stophdr .lede{margin:2px 0 0}
.stopicon{font-size:30px;line-height:1}
.stopfact{display:flex;gap:11px;align-items:center;background:var(--sand);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:8px;cursor:pointer}
.stopfact img{width:52px;height:52px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.stopfact b{display:block;font-size:14.5px;line-height:1.35}
.stopfact span{display:block;font-size:11.5px;color:var(--stone);margin-top:3px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}

/* ---- game scoring ---- */
.game h4{display:flex;align-items:center;gap:9px}
.gemoji{font-size:21px;line-height:1}
.game.scored{border-color:var(--sun)}
.scorer{display:flex;align-items:center;gap:9px;margin-top:14px}
.sbtn{width:46px;height:46px;border-radius:14px;border:1.5px solid var(--line);background:var(--sand);font-size:22px;font-weight:700;cursor:pointer;font-family:inherit;color:var(--deep);flex:0 0 auto;line-height:1}
.sbtn:active{transform:scale(.94)}
.sbtn:disabled{opacity:.5}
.sbtn.plus{background:var(--leaf);border-color:var(--leaf);color:#fff}
.sbtn.minus{color:var(--stone)}
.sbtn.big{width:auto;padding:0 15px;font-size:16px;background:var(--deep);border-color:var(--deep);color:#fff}
.mypts{flex:1;text-align:center}
.mypts b{display:block;font-size:29px;line-height:1;letter-spacing:-.02em;color:var(--clay)}
.mypts span{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--stone);font-weight:700}
.game .hint{margin:9px 0 0;font-size:12.5px;color:var(--stone);font-style:italic}
.board{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.brow{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14.5px}
.brow.me{font-weight:700}
.brow .rank{width:24px;text-align:center;font-size:13px;color:var(--stone)}
.brow .who{flex:1}
.brow .pts{font-weight:700;color:var(--clay);font-size:16px}
.nobody{margin:11px 0 0;font-size:13px;color:var(--stone);font-style:italic}

/* ---- content editor ---- */
.mrow{cursor:pointer}
.mrow:active{opacity:.7}
.mrow .chev{color:var(--stone);font-size:22px;line-height:1;padding-left:8px}
.fld .req{color:var(--clay)}
.chk{display:flex;align-items:center;gap:9px;margin:14px 0 4px;font-size:15px;font-weight:600;cursor:pointer}
.chk input{width:20px;height:20px;accent-color:var(--leaf)}
#sheetEdit h3{margin:2px 0 12px;font-size:19px}
#manageList{max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch;margin-bottom:12px}

.quiz{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:12px}
.quiz .qn{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--stone);font-weight:700}
.quiz h4{margin:5px 0 13px;font-size:17.5px;letter-spacing:-.01em;line-height:1.3}
.opt{display:block;width:100%;text-align:left;background:var(--sand);border:1.5px solid var(--line);border-radius:13px;padding:13px 15px;margin-bottom:8px;font-size:15.5px;color:var(--deep);cursor:pointer}
.opt.right{background:#dff0e2;border-color:var(--leaf);font-weight:700}
.opt.wrong{background:#fae3dc;border-color:var(--clay);opacity:.85}
.why{font-size:14.5px;color:var(--ink);margin:10px 0 0;padding-top:11px;border-top:1px dashed var(--line);display:none}
.why.show{display:block}
.score{background:var(--deep);color:#fff;border-radius:18px;padding:18px 20px;text-align:center;margin-top:16px}
.score b{display:block;font-size:34px;letter-spacing:-.02em}
.score span{font-size:14px;opacity:.85}

.spyitem{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:15px;padding:13px 15px;margin-bottom:9px;cursor:pointer}
.spybox{width:26px;height:26px;border-radius:8px;border:2px solid var(--line);flex:0 0 auto;display:grid;place-items:center;color:#fff;font-size:15px;font-weight:700}
.spyitem.got .spybox{background:var(--leaf);border-color:var(--leaf)}
.spyitem .nm{font-size:16px;font-weight:600}
.spyitem .hint{font-size:13px;color:var(--stone)}
.spyitem.got .nm{text-decoration:line-through;color:var(--stone)}
.tally{position:sticky;bottom:calc(84px + env(safe-area-inset-bottom));background:var(--deep);color:#fff;border-radius:15px;padding:12px 18px;text-align:center;font-size:15px;font-weight:700;margin-top:14px;box-shadow:var(--shadow)}

.lang{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:6px 18px;margin-bottom:14px}
.lang .hdr{padding:14px 0 10px;border-bottom:1px solid var(--line)}
.lang .hdr b{font-size:17px}
.lang .hdr span{display:block;font-size:12.5px;color:var(--stone);margin-top:2px}
.phrase{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.phrase:last-child{border-bottom:none}
.phrase .en{color:var(--stone);flex:0 0 42%}
.phrase .fo{font-weight:700;text-align:right}
.phrase .fo em{display:block;font-weight:400;font-size:12.5px;color:var(--stone);font-style:normal}

/* --------------------------------------------------------- memory wall */
.wallgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.post{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative}
.post.wide{grid-column:1 / -1}
.post img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;background:var(--line)}
.post .pbody{padding:11px 13px 13px}
.post .pmeta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--stone);font-weight:600}
.post .pmeta .av{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--sand)}
.post .ptext{margin:6px 0 0;font-size:14.5px;color:var(--ink)}
.post .react{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}
.rbtn{border:1px solid var(--line);background:var(--sand);border-radius:20px;padding:3px 9px;font-size:13px;cursor:pointer}
.rbtn.on{background:#fbe6d3;border-color:var(--sun);font-weight:700}
.pending{position:absolute;top:8px;right:8px;background:rgba(45,31,22,.82);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;letter-spacing:.04em}

.fab{
  position:fixed;right:18px;bottom:calc(20px + env(safe-area-inset-bottom));
  width:60px;height:60px;border-radius:50%;border:none;background:var(--clay);color:#fff;
  font-size:27px;box-shadow:var(--shadow);cursor:pointer;z-index:40;display:grid;place-items:center;
}
.empty{text-align:center;color:var(--stone);padding:44px 20px;font-size:15px}
.empty b{display:block;font-size:18px;color:var(--deep);margin-bottom:6px}

/* -------------------------------------------------------------- sheets */
.sheet-bg{position:fixed;inset:0;background:rgba(45,31,22,.45);z-index:50;display:none}
.sheet-bg.on{display:block}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:51;background:var(--sand);
  border-radius:22px 22px 0 0;padding:8px 18px calc(24px + env(safe-area-inset-bottom));
  max-height:88vh;overflow-y:auto;transform:translateY(100%);transition:transform .25s ease;
}
.sheet.on{transform:none}
.grip{width:42px;height:4px;border-radius:4px;background:var(--line);margin:8px auto 14px}
.sheet h3{margin:0 0 4px;font-size:21px;letter-spacing:-.01em}
.sheet .lede{margin-bottom:14px}
label.fld{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);font-weight:700;margin:14px 0 5px}
input.txt,textarea.txt,select.txt{
  width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;
  font-size:16px;background:var(--card);color:var(--deep);
}
textarea.txt{min-height:88px;resize:vertical}
.btn{display:block;width:100%;border:none;border-radius:13px;padding:15px;font-size:16.5px;font-weight:700;cursor:pointer;margin-top:14px}
.btn.primary{background:var(--clay);color:#fff}
.btn.go{background:var(--leaf);color:#fff}
.btn.ghost{background:var(--card);color:var(--deep);border:1.5px solid var(--line)}
.btn.danger{background:transparent;color:var(--danger);border:1.5px solid #eec2b3}
.btn[disabled]{opacity:.55}
.preview{width:100%;border-radius:14px;margin-top:12px;display:block}

/* ------------------------------------------------------------ sign in */
#signin{max-width:420px;margin:0 auto;padding:calc(40px + env(safe-area-inset-top)) 20px 40px}
#signin .brand{text-align:center;margin-bottom:26px}
#signin .brand .mark{font-size:46px;line-height:1}
#signin .brand h1{margin:10px 0 3px;font-size:28px;letter-spacing:-.02em}
#signin .brand p{margin:0;color:var(--stone);font-size:15px}
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-bottom:18px}
.person{background:var(--card);border:1.5px solid var(--line);border-radius:17px;padding:16px 12px;text-align:center;cursor:pointer}
.person.on{border-color:var(--clay);background:#fbe6d3}
.person .av{font-size:30px;line-height:1}
.person .nm{font-size:15px;font-weight:700;margin-top:7px}
.person .rl{font-size:11.5px;color:var(--stone);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.pinpad button{background:var(--card);border:1.5px solid var(--line);border-radius:15px;padding:17px;font-size:22px;font-weight:700;cursor:pointer;color:var(--deep)}
.pinpad button:disabled{opacity:.35;cursor:default}
.pindots{display:flex;justify-content:center;gap:11px;margin:16px 0 4px}
.pindot{width:13px;height:13px;border-radius:50%;border:2px solid var(--line)}
.pindot.on{background:var(--clay);border-color:var(--clay)}
.msg{text-align:center;font-size:14.5px;margin-top:14px;min-height:20px}
.msg.err{color:var(--danger);font-weight:600}
.msg.ok{color:var(--leaf);font-weight:600}

/* ------------------------------------------------------------- banners */
.banner{border-radius:14px;padding:12px 15px;margin-bottom:12px;font-size:14.5px;display:flex;gap:10px;align-items:flex-start}
.banner.warn{background:#faf1d8;color:#5c4a12;border-left:3px solid #8a6d1f}
.banner.info{background:#e7eef3;color:#204255;border-left:3px solid var(--sky)}
.banner.queue{background:#fbe6d3;color:#6b3418;border-left:3px solid var(--clay)}
.banner b{display:block;margin-bottom:2px}

.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.row:last-child{border-bottom:none}
.row .l b{display:block}
.row .l span{font-size:12.5px;color:var(--stone)}
.mini{border:1.5px solid var(--line);background:var(--card);border-radius:10px;padding:7px 12px;font-size:13.5px;font-weight:700;cursor:pointer;color:var(--deep);flex:0 0 auto}
.mini.danger{color:var(--danger);border-color:#eec2b3}
code.tok{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--sand);border:1px solid var(--line);padding:3px 7px;border-radius:6px;word-break:break-all}

footer{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--stone);text-align:center}

@media(min-width:520px){ .wallgrid{grid-template-columns:repeat(3,1fr)} }