/* Pope Reviews — app styles. The hall is a canvas; everything here is the HUD and pages laid over it. */
:root{
  --cream:#fbf7ea; --paper:#fffdf5; --navy:#1c1a4a; --yellow:#f7c948; --green:#7ce37c;
  --lav:#8b82e8; --coral:#f08a7a; --mint:#9ee5d6; --ink2:#5f564a;
  --mono:'Space Mono',ui-monospace,Menlo,monospace; --disp:'Rubik',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--navy);color:var(--navy);font-family:var(--mono);-webkit-text-size-adjust:100%}
body.hall{overflow:hidden;overscroll-behavior:none;touch-action:none;position:fixed;inset:0}
#app{position:fixed;inset:0;overflow:hidden;background:#1c1a4a}
#app[hidden]{display:none}
#scene{position:absolute;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges;display:block}
#hud{position:absolute;inset:0;pointer-events:none}
#hud > *{position:absolute;pointer-events:auto}
#banners{left:0;top:0;pointer-events:none;z-index:0}
.banner{position:absolute;left:0;top:0;background:var(--navy);color:#fff;border:2px solid var(--navy);padding:4px 8px;font:700 9px/1 var(--mono);letter-spacing:.14em;white-space:nowrap;box-shadow:3px 3px 0 var(--yellow);will-change:transform}
@media (min-width:600px){.banner{top:0}}

/* vocabulary */
.tag{display:inline-flex;gap:6px;align-items:center;background:var(--yellow);border:2px solid var(--navy);
  box-shadow:3px 3px 0 var(--navy);padding:5px 9px;font:700 11px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;color:var(--navy);text-decoration:none}
.tag.green{background:var(--green)} .tag.navy{background:var(--navy);color:#fff}
.btn{background:var(--paper);border:2px solid var(--navy);box-shadow:3px 3px 0 var(--navy);padding:7px 11px;
  font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;display:inline-flex;gap:6px;
  align-items:center;color:var(--navy);cursor:pointer;text-decoration:none;user-select:none}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--navy)}
.btn.primary{background:var(--yellow)}
.btn[disabled],.btn.disabled{opacity:.55;cursor:default}
.plate{position:absolute;background:var(--paper);border:2px solid var(--navy);padding:3px 6px;font:700 9px/1.2 var(--mono);
  letter-spacing:.08em;white-space:nowrap;transform:translateX(-50%);text-transform:uppercase;pointer-events:none;will-change:transform}
.plate.dim{opacity:.6}
.card{background:var(--paper);border:2px solid var(--navy);box-shadow:6px 6px 0 var(--yellow),6px 6px 0 2px var(--navy);
  padding:10px 12px;font:400 11px/1.5 var(--mono);width:224px}
.card .meta{color:var(--ink2);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .name{font:900 18px/1.05 var(--disp);letter-spacing:-.02em;margin:2px 0 3px}
.card .line{color:var(--ink2);font-size:10px}
.card .keys{display:flex;gap:3px;align-items:center;margin:6px 0 4px}
.card .keys small{font:700 10px var(--mono);margin-left:6px;white-space:nowrap}
.card .act{display:flex;gap:8px;margin-top:8px}
.card .act .btn{box-shadow:2px 2px 0 var(--navy);padding:6px 9px;font-size:10px}
.hint{font:700 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--navy);
  background:rgba(251,247,234,.92);border:2px solid var(--navy);padding:5px 8px;white-space:nowrap}
.hint b{background:var(--navy);color:#fff;padding:1px 4px;margin-right:2px;font-weight:700}
.ruler{height:14px;border:2px solid var(--navy);background:var(--paper);box-shadow:3px 3px 0 var(--navy);cursor:pointer}
.ruler i{position:absolute;top:0;bottom:0;width:2px;background:var(--navy);opacity:.35;pointer-events:none}
.ruler i.c{opacity:1;width:4px;background:var(--yellow);outline:2px solid var(--navy)}
.ruler b{position:absolute;top:-26px;font:700 9px/1 var(--mono);letter-spacing:.08em;white-space:nowrap;pointer-events:none;background:var(--paper);border:2px solid var(--navy);padding:4px 6px;z-index:1}
.toast{background:var(--paper);border:2px solid var(--navy);box-shadow:4px 4px 0 var(--green),4px 4px 0 2px var(--navy);
  padding:8px 11px;font:700 10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  transition:opacity .3s}
.screen-text{font:700 8px/1.35 var(--mono);letter-spacing:.1em;color:var(--green);text-transform:uppercase;white-space:nowrap;pointer-events:none}
.screen-text big{display:block;font:900 15px/1 var(--disp);color:#fff;letter-spacing:0;margin:2px 0}
.sign{background:var(--yellow);border:2px solid var(--navy);padding:4px 7px;font:700 8px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:center;white-space:nowrap;pointer-events:none}
.shade{position:absolute;inset:0;background:rgba(28,26,74,.58)}

/* HUD placement */
#brand{left:8px;top:8px}
#hudRight{right:8px;top:8px;display:flex;gap:8px;flex-direction:row-reverse;align-items:flex-start;z-index:1}
#hudRight > *{position:static}
@media (max-width:599.9px){#hudRight{flex-direction:column;align-items:flex-end;gap:6px}#hudRight .btn{padding:5px 8px}}
#wing{left:8px;top:40px}
#hint{right:8px;bottom:12px}
#ruler{left:12px;bottom:14px;width:calc(100% - 300px);min-width:120px}
#card{display:none}
#card.on{display:block}
@media (min-width:900px){
  #wing{left:230px;top:8px}
}
@media (max-width:599.9px){
  #hint{display:none}
  #ruler{bottom:8px;width:calc(100% - 24px);height:8px;box-shadow:none}
  #ruler b{display:none}
  #card{left:8px;right:8px;width:auto;bottom:90px;padding:8px 10px}
  #card .line,#card .act{display:none}
  #card .name{font-size:15px}
  #dpad{display:grid}
}

/* Door panel */
#panel{position:absolute;top:0;right:0;bottom:0;width:min(520px,52%);background:var(--cream);border-left:3px solid var(--navy);
  padding:18px 20px 28px;overflow:auto;font:400 12px/1.55 var(--mono);transform:translateX(102%);transition:transform .22s ease-out;z-index:3}
#panel.on{transform:none}
@media (max-width:599.9px){
  #panel{left:0;right:0;top:auto;bottom:0;width:auto;height:72%;border-left:0;border-top:3px solid var(--navy);border-radius:14px 14px 0 0;
    transform:translateY(102%);padding:12px 14px 28px}
  #panel.on{transform:none}
}
#panel .grip{display:none;width:36px;height:4px;background:var(--navy);margin:0 auto 10px;border-radius:2px;touch-action:none}
@media (max-width:599.9px){
  #panel .grip{display:block;position:relative}
  #panel .grip::before{content:'';position:absolute;left:-60px;right:-60px;top:-14px;bottom:-14px}
}
#panel .top{display:flex;justify-content:flex-start;align-items:flex-start;gap:8px;flex-wrap:wrap;padding-right:84px}
#panel .tag{font-size:9px;padding:4px 7px;box-shadow:2px 2px 0 var(--navy)}
#panel h3{font:900 30px/1 var(--disp);letter-spacing:-.03em;margin:12px 0 5px}
#panel .sub{color:var(--ink2);font-size:10px;letter-spacing:.04em;margin:0 0 12px;text-transform:uppercase}
#panel .one{border:2px solid var(--navy);background:var(--paper);padding:8px 10px;margin:0 0 12px;font-size:12px;line-height:1.5}
#panel .one b{display:block;font-size:9px;letter-spacing:.14em;margin-bottom:3px}
#panel .rating{display:flex;align-items:center;gap:12px;margin:0 0 12px}
#panel .rating .big{font:900 32px/1 var(--disp);letter-spacing:-.03em;color:var(--ink2)}
#panel .rating .keys{display:flex;gap:3px}
#panel .rating .split{font-size:9px;line-height:1.5;color:var(--ink2);letter-spacing:.04em;text-transform:uppercase}
#panel .cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 12px}
#panel .cols h4,#panel h4{font:700 9px/1 var(--mono);letter-spacing:.16em;margin:0 0 6px;padding-bottom:4px;border-bottom:2px solid var(--navy);text-transform:uppercase}
#panel .cols ul{margin:0;padding:0 0 0 12px;font-size:10.5px;line-height:1.5}
#panel .cols li{margin:0 0 4px}
#panel .record{font-size:11px;line-height:1.55;margin:0 0 6px}
#panel .attr{font-size:9px;color:var(--ink2);letter-spacing:.03em;margin:0 0 12px}
#panel .attr a,#panel .gate a{color:var(--navy)}
#panel .reviews{border:2px dashed var(--navy);padding:10px 12px;margin:0 0 12px;font-size:11px;line-height:1.5;background:rgba(255,253,245,.6)}
#panel .act{display:flex;gap:8px;margin:12px 0 8px;flex-wrap:wrap}
#panel .gate{font-size:10px;line-height:1.5;color:var(--ink2);letter-spacing:.02em;margin:0 0 10px}
#panel .nav{display:flex;justify-content:space-between;gap:8px;margin-top:14px;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
#panel .nav a{color:var(--navy);font-weight:700;text-decoration:none}
#panel .close{position:absolute;top:10px;right:12px;padding:5px 8px;font-size:10px}
#panel .portrait{float:right;margin:0 0 8px 12px;image-rendering:pixelated;border:2px solid var(--navy);box-shadow:4px 4px 0 var(--yellow),4px 4px 0 2px var(--navy)}
.resources-note{font-size:10px;line-height:1.5;border-left:3px solid var(--coral);padding-left:8px;margin:0 0 12px;color:var(--ink2)}

/* Map overlay */
#map{position:absolute;inset:0;background:rgba(28,26,74,.72);z-index:4;display:none;align-items:center;justify-content:center;padding:16px}
#map.on{display:flex}
#map .box{background:var(--cream);border:3px solid var(--navy);box-shadow:8px 8px 0 var(--navy);width:min(640px,100%);max-height:100%;overflow:auto;padding:16px 18px}
#map h3{font:900 24px/1 var(--disp);letter-spacing:-.03em;margin:0 0 10px;display:flex;justify-content:space-between;align-items:center}
#map input{width:100%;border:2px solid var(--navy);background:var(--paper);padding:9px 10px;font:400 13px var(--mono);margin:0 0 10px;outline:none}
#map .centuries{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:0 0 12px}
#map .century{border:2px solid var(--navy);background:var(--paper);padding:7px 9px;font:700 10px/1.4 var(--mono);letter-spacing:.08em;cursor:pointer;text-align:left}
#map .century small{display:block;font-weight:400;color:var(--ink2);letter-spacing:.02em}
#map .century.here{background:var(--yellow)}
#map .century.here::after{content:'YOU ARE HERE';display:block;font-size:7px;letter-spacing:.16em;margin-top:3px}
#map .century:focus{outline:none;background:var(--navy);color:#fff;box-shadow:5px 5px 0 var(--yellow),5px 5px 0 2px var(--navy);transform:translate(-2px,-2px)}
#map .century:focus small{color:#ddd}
#map .century:focus::before{content:'▶ '}
#map .results{max-height:40vh;overflow:auto;border:2px solid var(--navy);background:var(--paper);display:none}
#map .results.on{display:block}
#map .results button{display:flex;justify-content:space-between;width:100%;border:0;border-bottom:1px solid #ddd;background:none;padding:7px 10px;font:400 11px var(--mono);cursor:pointer;text-align:left}
#map .results button:hover{background:var(--yellow)}
#map .foot{font-size:10px;color:var(--ink2);line-height:1.5}
#map .foot a{color:var(--navy)}

/* Kiosk */
#kiosk{position:absolute;inset:0;background:rgba(28,26,74,.72);z-index:4;display:none;align-items:center;justify-content:center;padding:16px}
#kiosk.on{display:flex}
#kiosk .box{background:var(--cream);border:3px solid var(--navy);box-shadow:8px 8px 0 var(--navy);width:min(440px,100%);padding:18px 20px;font:400 12px/1.55 var(--mono)}
#kiosk h3{font:900 26px/1 var(--disp);letter-spacing:-.03em;margin:0 0 6px}
#kiosk form{display:flex;gap:8px;margin:12px 0}
#kiosk input{flex:1;border:2px solid var(--navy);background:var(--paper);padding:9px 10px;font:700 16px var(--mono);outline:none;min-width:0}
#kiosk .result{display:none;border:2px solid var(--navy);background:var(--paper);padding:10px 12px;margin:10px 0}
#kiosk .result.on{display:block}
#kiosk .result .big{font:900 28px/1 var(--disp);letter-spacing:-.03em}
#kiosk .err{color:#a8382e;font-size:11px;min-height:1.2em}
#kiosk .quiet{font-size:10px;color:var(--ink2)}

/* Static pages (door pages before JS, about, resources, 404) */
.static{max-width:720px;margin:0 auto;padding:40px 20px 80px;background:var(--cream);min-height:100vh;font:400 14px/1.65 var(--mono)}
.static .kicker{font:700 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;margin:0 0 14px}
.static .kicker a{color:var(--navy);text-decoration:none}
.static h1{font:900 44px/1 var(--disp);letter-spacing:-.03em;margin:0 0 10px}
.static h2{font:900 20px/1.1 var(--disp);letter-spacing:-.02em;margin:26px 0 8px}
.static .plate{position:static;display:inline-block;transform:none;font-size:10px;margin:0 0 14px}
.static .one{font-size:17px;line-height:1.5;border:2px solid var(--navy);background:var(--paper);padding:10px 12px}
.static .one:empty{display:none}
.static ul{padding-left:20px}
.static .attr{font-size:11px;color:var(--ink2)}
.static .nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px;font-weight:700}
.static a{color:var(--navy)}
.static .note{font-size:12px;color:var(--ink2)}
body.hall .static{display:none}

/* ---- Phase C: account, reviews, comments ---- */
.overlay{position:fixed;inset:0;background:rgba(28,26,74,.72);z-index:6;display:none;align-items:center;justify-content:center;padding:16px}
.overlay.on{display:flex}
.overlay .box{position:relative;background:var(--cream);border:3px solid var(--navy);box-shadow:8px 8px 0 var(--navy);width:min(420px,100%);max-height:100%;overflow:auto;padding:20px 22px 18px;font:400 12px/1.55 var(--mono);color:var(--navy)}
.overlay .kicker{font:700 10px/1 var(--mono);letter-spacing:.18em;margin:0 0 10px;padding-right:96px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.overlay h3{font:900 26px/1 var(--disp);letter-spacing:-.03em;margin:0 0 8px}
.overlay .why{margin:0 0 14px;color:var(--ink2)}
.overlay .why a{color:var(--navy)}
.overlay .close{position:absolute;top:10px;right:10px;padding:5px 8px;font-size:10px}
.overlay .magic{display:flex;gap:8px;margin:0 0 8px}
@media (max-width:599.9px){.overlay .magic{flex-direction:column}.overlay .magic .btn{align-self:flex-start}}
.overlay .magic input{flex:1;min-width:0;border:2px solid var(--navy);background:var(--paper);padding:9px 10px;font:400 13px var(--mono);outline:none}
.overlay .fine{font-size:10px;color:var(--ink2);margin:8px 0 0}
.overlay .fine a{color:var(--navy)}
.overlay .err{color:#a8382e;font-size:11px;min-height:1.2em;margin:4px 0}
.overlay .opt{display:block;margin:6px 0;font-size:11px}
.overlay .acts{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.overlay textarea{width:100%;border:2px solid var(--navy);background:var(--paper);padding:8px 10px;font:400 12px/1.5 var(--mono);margin:8px 0;resize:vertical}
.btn.danger{background:#f3d0cb}
.btn.mini{padding:4px 7px;font-size:9px;box-shadow:2px 2px 0 var(--navy)}
.btn.mini.quiet{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink2)}
.btn.mini.on{background:var(--yellow)}
#acctBtn b{background:var(--navy);color:#fff;padding:1px 5px;margin-left:4px;font-size:9px}

#panel .rvhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 8px}
#panel .rvhead h4{margin:0;flex:1;border:0;padding:0}
.seg{display:inline-flex;border:2px solid var(--navy);background:var(--paper)}
.seg button{border:0;background:none;padding:5px 9px;font:700 9px/1 var(--mono);letter-spacing:.12em;cursor:pointer;color:var(--navy)}
.seg button.on{background:var(--navy);color:#fff}
.seg button + button{border-left:2px solid var(--navy)}
.composer{border:2px solid var(--navy);background:var(--paper);padding:10px 12px;margin:10px 0}
.composer h4{border:0!important;padding:0!important;margin:0 0 8px!important}
.composer .row{display:flex;gap:10px;align-items:center;margin:6px 0;flex-wrap:wrap}
.composer .lbl{font:700 9px/1 var(--mono);letter-spacing:.14em;min-width:110px}
.composer textarea,.composer input{width:100%;border:2px solid var(--navy);background:var(--cream);padding:8px 10px;font:400 12px/1.5 var(--mono);resize:vertical}
.composer .row input{flex:1;min-width:0}
.composer .count{font-size:9px;color:var(--ink2);white-space:nowrap}
.composer .err{color:#a8382e;font-size:11px;min-height:1.2em;margin:4px 0}
.composer .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.keypick{display:inline-flex;gap:4px}
.keypick button{border:0;background:none;padding:2px;cursor:pointer;line-height:0}
.keypick button canvas{display:block}
.review{border:2px solid var(--navy);background:var(--paper);padding:9px 11px;margin:0 0 8px;font-size:11px;line-height:1.5}
.review.mine{box-shadow:4px 4px 0 var(--yellow),4px 4px 0 2px var(--navy)}
.review .who,.comment .who{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:10px;margin:0 0 4px}
.review .handle,.comment .handle{font-weight:700}
.review .rank,.comment .rank{color:var(--ink2)}
.review .when,.comment .when{margin-left:auto;color:var(--ink2);font-size:9px;letter-spacing:.06em}
.review .keys{display:inline-flex;gap:2px}
.review .src{display:inline-block;margin:4px 0 0;font:700 9px/1 var(--mono);letter-spacing:.12em;color:var(--navy)}
.review .tools,.comment .tools{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.sat{display:inline-block;border:1.5px solid var(--navy);padding:1px 4px;font-size:8px;letter-spacing:.12em;text-transform:uppercase}
.sat.s{background:var(--mint)} .sat.j{background:var(--coral)}
.rvlist .empty,.discussion .empty{font-size:11px;color:var(--ink2);border:2px dashed var(--navy);padding:8px 10px;background:rgba(255,253,245,.6)}
.discussion{margin-top:14px}
.discussion h4 .n{font-weight:400;color:var(--ink2);margin-left:6px}
.comment{border-left:3px solid var(--navy);padding:6px 10px;margin:0 0 8px;font-size:11px;line-height:1.5;background:rgba(255,253,245,.7)}
.comment.reply{margin-left:16px;border-left-color:var(--lav)}
.cform{margin:8px 0 0}
.cform textarea{width:100%;border:2px solid var(--navy);background:var(--paper);padding:7px 9px;font:400 12px/1.5 var(--mono);resize:vertical}
.cform .acts{display:flex;gap:8px;margin-top:6px}
.cform .err{color:#a8382e;font-size:10px;min-height:1em;margin:2px 0}
#panel .loading{font-size:11px;color:var(--ink2)}
.mod .qitem{border:2px solid var(--navy);background:var(--paper);padding:12px 14px;margin:0 0 12px;font-size:12px}
.mod .qitem .meta{font-size:11px;color:var(--ink2)}
.mod .qitem blockquote{margin:8px 0;border-left:3px solid var(--navy);padding-left:10px}
.mod .qitem .reports{font-size:11px}
.mod .qitem .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* phone d-pad */
#dpad{position:absolute;left:8px;right:8px;bottom:22px;height:56px;grid-template-columns:.8fr 1fr 1.5fr 1fr .8fr;gap:6px;touch-action:none;z-index:2}
@media (min-width:600px){#dpad{display:none}}
#dpad button{border:2px solid var(--navy);background:var(--paper);box-shadow:3px 3px 0 var(--navy);font:900 20px/1 var(--mono);color:var(--navy);
  letter-spacing:.1em;user-select:none;-webkit-user-select:none;cursor:pointer;touch-action:none}
#dpad button[data-d=up]{font:700 14px/1 var(--mono);background:var(--yellow)}
#dpad button[data-d=prevEra],#dpad button[data-d=nextEra]{font-size:14px;letter-spacing:-.1em;background:var(--cream)}
#dpad button.on{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--navy)}

/* conclave */
.papabile{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}
.papabile .btn b{background:var(--navy);color:#fff;padding:1px 5px;margin-left:4px}
.papabile .hintline{font-size:10px;color:var(--ink2);flex:1;min-width:160px}
#map .century.conclave{background:#f3d0cb;border-color:#a8382e}
#map .century.conclave:focus{background:#a8382e;color:#fff}
#map .century.conclave:focus small{color:#f3d0cb}

/* quests */
#questToast{left:50%;top:48px;transform:translateX(-50%);cursor:pointer;pointer-events:auto;max-width:calc(100% - 24px);white-space:normal;text-align:center}
@media (max-width:599.9px){#questToast{top:138px;font-size:8px}}
.toast .bar{position:relative;display:block;height:6px;border:2px solid var(--navy);margin-top:5px;background:var(--paper)}
.toast .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--green)}
.overlay .box.wide{width:min(640px,100%)}
.overlay h3{margin-top:14px}
.quest{border:2px solid var(--navy);background:var(--paper);padding:10px 12px;margin:0 0 10px;font-size:11px;line-height:1.5}
.quest.active{box-shadow:4px 4px 0 var(--green),4px 4px 0 2px var(--navy)}
.quest.done{opacity:.75}
.quest.sel{outline:none;box-shadow:5px 5px 0 var(--yellow),5px 5px 0 2px var(--navy);transform:translate(-2px,-2px)}
.quest.sel .qhead b::before{content:'▶ '}
.quest .qhead{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.quest .kicker2{color:var(--ink2);font-size:10px}
.quest .prog{font:700 10px var(--mono);letter-spacing:.1em;white-space:nowrap}
.quest p{margin:4px 0 6px}
.quest .bar{position:relative;height:8px;border:2px solid var(--navy);background:var(--cream);margin:0 0 8px}
.quest .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--green)}
.quest .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.quest .btn.quiet{background:transparent;box-shadow:none;border-color:transparent;color:var(--ink2)}
.badge{display:inline-block;background:var(--yellow);border:2px solid var(--navy);padding:3px 7px;font:700 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;margin:2px 4px 2px 0}
.one.quest{border-color:var(--green);box-shadow:3px 3px 0 var(--green)}
.daily{border:2px solid var(--navy);background:var(--paper);padding:10px 12px;font-size:11px;line-height:1.5}
.daily .who{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.daily .who .tag{position:static;font-size:8px;padding:3px 6px;box-shadow:2px 2px 0 var(--navy)}
.daily .streak{margin-left:auto;font:700 10px var(--mono)}
.daily .q{font:700 13px/1.4 var(--disp);margin:8px 0}
.daily .opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.daily .opt{white-space:normal;text-align:left;font-size:10px;line-height:1.35;text-transform:none;letter-spacing:0}
.daily .opt.right{background:var(--green)} .daily .opt.wrong{background:#f3d0cb} .daily .opt.off{opacity:.5}
@media (max-width:599.9px){.daily .opts{grid-template-columns:1fr}}

/* vestry */
.overlay .box.vestry{width:min(760px,100%);padding-bottom:14px}
.vestry .room{display:flex;justify-content:center;background:#1c1a4a;border:2px solid var(--navy);margin:0 0 10px;padding:6px}
.vestry .room canvas{display:block}
.vestry .slot h4{font:700 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;margin:12px 0 6px;border-bottom:2px solid var(--navy);padding-bottom:4px}
.vestry .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.vestry .item{border:2px solid var(--navy);background:var(--paper);padding:8px;text-align:left;cursor:pointer;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;font-family:var(--mono);color:var(--navy)}
.vestry .item canvas,.vestry .item .pv{grid-row:1 / span 2;display:block}
.vestry .item .pv.none{width:60px;height:78px;display:flex;align-items:center;justify-content:center;font:900 22px var(--disp);color:var(--ink2)}
.vestry .item b{font:700 10px/1.3 var(--mono)}
.vestry .item small{font-size:9px;line-height:1.35;color:var(--ink2)}
.vestry .item.on{background:var(--yellow);box-shadow:3px 3px 0 var(--navy)}
.vestry .item.locked{opacity:.55}
.vestry .item.locked canvas{filter:grayscale(1)}
.review.with-avatar{display:grid;grid-template-columns:auto 1fr;gap:4px 10px}
.review.with-avatar > *{grid-column:2}
.review.with-avatar .avatar{grid-column:1;grid-row:1 / span 4;align-self:start;image-rendering:pixelated}

/* the top ten wall */
.screen-text.board{overflow:hidden;box-sizing:border-box;padding:.7em .9em;font-size:7px;line-height:1.3;display:flex;flex-direction:column;gap:.1em;pointer-events:none}
.screen-text.board big{font-size:1.8em;margin:.15em 0}
.screen-text.board .row{display:flex;gap:.5em;color:#fff;letter-spacing:.04em}
.screen-text.board .row .n{color:var(--green);width:2em}
.screen-text.board .row .nm{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.screen-text.board .row .sc{color:var(--yellow)}
.overlay ol{margin:6px 0 12px;padding-left:22px;font-size:12px;line-height:1.7}
.overlay ol li{display:flex;justify-content:space-between;gap:10px}
.overlay ol a{color:var(--navy);font-weight:700}
.overlay ol span{color:var(--ink2);font-size:10px;white-space:nowrap}
/* the globe */
.globe .mapwrap{background:#1c1a4a;border:2px solid var(--navy);padding:6px;display:flex;justify-content:center;margin:0 0 10px}
.globe .mapwrap canvas{display:block;image-rendering:pixelated}
.globe .where{display:flex;gap:8px;align-items:center;margin:0 0 10px;font-size:11px}
.globe .where .tag{position:static;font-size:9px;padding:3px 6px;box-shadow:2px 2px 0 var(--navy)}
.globe .where .note{color:var(--ink2)}
.globe .acts{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.globe .zip{display:flex;gap:8px;margin:0 0 8px}
.globe .zip input{flex:1;border:2px solid var(--navy);background:var(--paper);padding:8px 10px;font:700 15px var(--mono);min-width:0}
.mod .ann input,.mod .ann textarea{display:block;width:100%;border:2px solid var(--navy);background:var(--paper);padding:8px 10px;font:400 13px/1.5 var(--mono);margin:0 0 8px}
.vestry .items.compact{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.vestry .items.compact .item{grid-template-columns:auto 1fr}
.vestry .items.compact .item small{display:none}
.vestry .items.compact .item b{grid-row:1 / span 2;align-self:center}