/* Quiet Hours: the look of everything that is not the 3D world.
   A night-festival flyer: Anton for the big words, Barlow for everything you read, flat colour, square corners, hard shadows, a paper-white
   ink on the dark. No gradients, no glass, no soft glow. Fonts are in assets/fonts (SIL Open Font License, see CREDITS.md). */

@font-face { font-family:'Anton'; src:url('./assets/fonts/Anton-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('./assets/fonts/Barlow-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('./assets/fonts/Barlow-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('./assets/fonts/Barlow-SemiBold.woff2') format('woff2'); font-weight:600 700; font-display:swap; }
@font-face { font-family:'Barlow Condensed'; src:url('./assets/fonts/BarlowCondensed-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Barlow Condensed'; src:url('./assets/fonts/BarlowCondensed-SemiBold.woff2') format('woff2'); font-weight:600 700; font-display:swap; }

:root {
  --f-head: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --f-body: 'Barlow', system-ui, 'Segoe UI', sans-serif;
  --f-tag:  'Barlow Condensed', 'Barlow', 'Arial Narrow', sans-serif;
  --paper: #f2ead7;           /* the white of the print */
  --card:  #0d0f18;           /* the black of the card */
  --hot:   #ffb36b;           /* the one accent: the campfire */
  --ink: #f2ead7; --dim: #a9a79a; --glow: #ffb36b;
  --hard: 4px 4px 0 rgba(0,0,0,.85);
}

html, body, button, input, textarea, select { font-family: var(--f-body); }
body { font-weight: 500; -webkit-font-smoothing: antialiased; }

/* ---- the small labels: condensed capitals ---- */
.ghost, .tab, #look h3, #look2 h3, #gscores .bh, #passport .hint2, .sbhint, #online, #np, #hint, #route, #mapnote, #fbbtn, #chatbtn, #ctl, #zone,
#feedback .ftab, #feedback .fh, #game .gh, #wallui .wh, #people h2, .hmeter span, .chatzb, #chatlog .zb { font-family: var(--f-tag); font-weight: 600; text-transform: uppercase; }

/* ---- the title screen ---- */
#overlay { background: linear-gradient(90deg, rgba(5,6,12,.9) 0, rgba(5,6,12,.62) 36%, rgba(5,6,12,.1) 62%, transparent 76%); }
#overlay h1 { font-family: var(--f-head); font-weight: 400; letter-spacing: .015em; line-height: .92; font-size: clamp(60px, 11vw, 132px); color: var(--paper);
  text-shadow: 5px 5px 0 var(--hot); margin: 0 0 2px -3px; }
#overlay p { font-family: var(--f-tag); font-weight: 600; text-transform: uppercase; letter-spacing: .24em; font-size: 14px; color: var(--hot); }
#nick { background: var(--paper); color: #14110c; border: 2px solid #000; border-radius: 2px; box-shadow: var(--hard); font-size: 17px; font-weight: 600; padding: 12px 14px; }
#nick::placeholder { color: #6d675a; font-weight: 500; }
#nick:focus { outline: 3px solid var(--hot); outline-offset: 2px; border-color: #000; }
#enter { font-family: var(--f-head); font-weight: 400; font-size: 24px; letter-spacing: .16em; color: #14110c; background: var(--hot); border: 2px solid #000; border-radius: 2px; clip-path: none;
  box-shadow: 6px 6px 0 var(--paper); padding: 13px 30px; transition: transform .12s, box-shadow .12s; }
#enter:hover { filter: none; transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--paper); }
#enter:active { transform: translate(4px,4px); box-shadow: 2px 2px 0 var(--paper); }
#enter:disabled { opacity: 1; background: #3a3730; color: #8d897c; box-shadow: 6px 6px 0 #55524a; cursor: wait; }
#loadbar { height: 4px; background: rgba(242,234,215,.18); border-radius: 0; }
#loadbar i { background: var(--hot); }
.ghost { font-size: 14px; letter-spacing: .14em; color: var(--paper); border-bottom: 2px dashed rgba(242,234,215,.35); padding: 4px 2px; margin-right: 10px; }
#feedback a, #game a, #people a { color: var(--hot); }
.ghost:hover { color: var(--hot); border-bottom: 2px solid var(--hot); }
.tabs { border-bottom: 2px solid rgba(242,234,215,.25); }
.tab { font-size: 15px; letter-spacing: .14em; color: var(--dim); border-bottom: 4px solid transparent; }
.tab.on { color: var(--paper); border-bottom-color: var(--hot); }
#look h3, #look2 h3 { font-size: 14px; letter-spacing: .2em; color: var(--hot); }
.keys { font-size: 14px; color: var(--paper); }
kbd { font-family: var(--f-tag); font-weight: 700; border: 2px solid var(--paper); border-radius: 2px; background: transparent; color: var(--paper); padding: 0 6px; font-size: 13px; }
.chip { border-radius: 2px; border: 2px solid rgba(242,234,215,.35); background: transparent; color: var(--paper); padding: 4px 11px; font-size: 15px; font-weight: 500; }
.chip:hover { border-color: var(--hot); background: transparent; }
.chip.on { background: var(--hot); border-color: var(--hot); color: #14110c; font-weight: 600; }
.sw { border-radius: 2px; border: 2px solid transparent; width: 28px; height: 28px; }
.sw.on { border-color: var(--paper); outline: 2px solid #000; outline-offset: -4px; }

/* ---- the tags and strips on the game screen: a square label with a hard edge ---- */
#fbbtn, #chatbtn, #chatbox, #chatsend, #ctl, #hint, #toast, #invite, #online, #np, #route {
  background: var(--card); color: var(--paper); border: 2px solid var(--paper); border-radius: 2px; box-shadow: 3px 3px 0 rgba(0,0,0,.75); backdrop-filter: none; }
#fbbtn, #chatbtn { font-size: 15px; letter-spacing: .12em; cursor: pointer; }
#fbbtn:hover, #chatbtn:hover { background: var(--hot); border-color: var(--hot); color: #14110c; }
#chatbtn { padding: 0 13px 0 10px; height: 34px; gap: 7px; }
#chatbtn.on { background: var(--hot); border-color: var(--hot); color: #14110c; }
#chatbox { font-family: var(--f-body); font-weight: 500; font-size: 15px; border-radius: 2px; border-color: var(--hot); padding: 6px 12px; }
#chatbox::placeholder { color: #8d897c; }
#chatsend { border-radius: 2px; background: var(--hot); border-color: #000; color: #14110c; font-size: 18px; box-shadow: 3px 3px 0 var(--paper); }
#online { background: transparent; border: 0; box-shadow: none; font-size: 15px; letter-spacing: .12em; color: #b7ff9a; }
#np { background: transparent; border: 0; box-shadow: none; color: var(--dim); font-size: 14px; letter-spacing: .08em; text-shadow: 0 1px 0 #000, 0 0 6px #000; }
#np b { color: var(--paper); font-family: var(--f-body); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 15px; }
#np a { color: var(--hot); }
#hint { background: var(--paper); color: #14110c; border: 2px solid #000; box-shadow: 4px 4px 0 #000; font-size: 16px; letter-spacing: .1em; padding: 4px 14px; }
#route { background: transparent; border: 0; box-shadow: none; text-shadow: 0 2px 0 #000; font-size: 17px; letter-spacing: .14em; }
#toast { background: var(--paper); color: #14110c; border: 2px solid #000; box-shadow: 4px 4px 0 #000; border-radius: 2px; font-family: var(--f-tag); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 16px; }
#zone { font-family: var(--f-head); font-weight: 400; font-size: clamp(30px, 5vw, 52px); letter-spacing: .05em; text-shadow: 4px 4px 0 #000; color: var(--paper); }
#ctl { padding: 4px 10px; box-shadow: 3px 3px 0 rgba(0,0,0,.75); }
#ctl button { font-size: 18px; }
#ctl input { accent-color: var(--hot); }
#mapnote { font-size: 15px; letter-spacing: .12em; text-shadow: 0 2px 0 #000; }

/* ---- the chat ---- */
#chatlog { font-family: var(--f-body); font-weight: 500; font-size: 15px; text-shadow: 0 1px 0 #000, 0 0 5px #000; }
#chatlog.open { background: rgba(8,9,15,.86); border: 2px solid rgba(242,234,215,.4); border-radius: 2px; }
#chatlog .zb { border-radius: 2px; font-size: 11px; line-height: 15px; letter-spacing: .1em; font-weight: 700; padding: 0 5px; background: var(--c); color: #0d0f18; border: 0; }
#chatlog .msg b { font-weight: 700; }

/* ---- the cards: feedback, games, people, drawing wall, invitations ---- */
#feedback, #game, #people, #wallui, #invite {
  background: var(--card); border: 2px solid var(--paper); border-radius: 2px; box-shadow: 8px 8px 0 rgba(0,0,0,.7); color: var(--paper); }
#feedback .fh, #game .gh, #wallui .wh, #people h2 { font-family: var(--f-head); font-weight: 400; letter-spacing: .14em; font-size: 22px; text-transform: uppercase; color: var(--paper); }
#feedback .fx, #game .gh button, #wallui .wh button { font-family: var(--f-body); opacity: 1; color: var(--paper); }
#feedback .ftab { border-radius: 2px; border: 2px solid rgba(242,234,215,.35); background: transparent; color: var(--paper); font-size: 15px; letter-spacing: .1em; padding: 4px 10px; }
#feedback .ftab.on { background: var(--hot); border-color: var(--hot); color: #14110c; }
#feedback .fi { font-size: 15px; opacity: .92; }
#feedback label { font-family: var(--f-tag); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 14px; opacity: 1; color: var(--hot); }
#feedback input[type=text], #feedback input[type=file], #feedback select, #feedback textarea, .sbform input, .eqf input {
  border-radius: 2px; border: 2px solid rgba(242,234,215,.5); background: #14161f; color: var(--paper); font-family: var(--f-body); font-weight: 500; text-transform: none; letter-spacing: 0; }
#feedback input:focus, #feedback textarea:focus, #feedback select:focus { outline: 3px solid var(--hot); outline-offset: 1px; }
#feedback .fc { font-family: var(--f-body); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--paper); font-size: 14px; }
#feedback .fm { color: var(--hot); font-weight: 600; }
.gbtn { font-family: var(--f-tag); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 15px; border-radius: 2px; border: 2px solid var(--paper); background: transparent; color: var(--paper); padding: 6px 14px; }
.gbtn:hover { background: var(--hot); border-color: var(--hot); color: #14110c; }
.gbtn.pri { background: var(--hot); border-color: #000; color: #14110c; box-shadow: 3px 3px 0 var(--paper); }
#invite button { border-radius: 2px; font-family: var(--f-tag); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; border: 2px solid var(--paper); background: transparent; color: var(--paper); }
#invite button:hover { background: var(--hot); border-color: var(--hot); color: #14110c; }
#game canvas, #wcv, #rcv, .sbcv canvas { border-radius: 2px; }
.tbar { border-radius: 2px; background: rgba(242,234,215,.12); }
.tmark { border-radius: 0; }
.eqq { font-family: var(--f-head); font-weight: 400; letter-spacing: .06em; }
.sbhint { font-family: var(--f-tag); }
.sbp, .sblog { border-radius: 2px; }
#gscores .bh { color: var(--hot); opacity: 1; font-size: 13px; }
.hmeter span { font-size: 14px; letter-spacing: .16em; }

/* ---- the passport keeps its paper, but speaks the same language ---- */
#passport h2 { font-family: var(--f-head); font-weight: 400; letter-spacing: .3em; font-size: 22px; }
#passport .hint2 { font-family: var(--f-tag); font-size: 13px; opacity: .7; }

/* ---- phone buttons ---- */
#tbtns button, #emotes button { border: 2px solid var(--paper); background: var(--card); color: var(--paper); box-shadow: 3px 3px 0 rgba(0,0,0,.75); }
#tbtns #tact { font-family: var(--f-head); font-size: 26px; font-weight: 400; border-color: var(--paper); }
#tbtns #tact.hot { background: var(--hot); color: #14110c; border-color: #000; box-shadow: 3px 3px 0 var(--paper); }
#stick { border: 2px solid rgba(242,234,215,.5); background: rgba(13,15,24,.35); }
#stick i { background: var(--paper); opacity: .8; }

@media (max-width: 760px) { #overlay h1 { font-size: clamp(54px, 17vw, 96px); } }

body.touch #stick { display: none; }   /* shown by the game once you are in */

/* Chat keeps movement controls available. World shortcuts are handled separately. */

#wc-status{display:none;position:fixed;top:68px;left:50%;transform:translateX(-50%);z-index:25;max-width:90vw;padding:12px 18px;background:#121b19;color:var(--paper);border:2px solid #d7b671;font-family:var(--f-tag);text-align:center;}#wc-status.on{display:block}.achievements p{border-top:1px dashed #b8a87f;padding:10px;color:#d7b671}

#chatclose{display:none;position:fixed;left:min(424px,calc(100vw - 40px));bottom:66px;width:34px;height:34px;z-index:13;border:2px solid var(--paper);border-radius:2px;background:var(--card);color:var(--paper);font-size:24px;cursor:pointer;}
#chatbox.on ~ #chatclose{display:block;}
body.touch #chatclose{left:auto;right:10px;bottom:62px;}
body.touch #chatsend{right:52px;width:38px;}
body.touch #chatbox{width:calc(100vw - 112px);}
#passport{z-index:18;max-height:86vh;overflow:auto;overscroll-behavior:contain;}
.passport-head{position:sticky;top:-20px;padding:12px 0 8px;background:#eee3ca;z-index:1;}
#passport .passport-head h2{letter-spacing:.18em;margin:0 30px 12px;}
#passport .pass-close{position:absolute;right:0;top:5px;background:none;border:0;font-size:26px;color:#473b29;cursor:pointer;}
#passport nav{display:flex;gap:6px;justify-content:center;}
#passport nav button{padding:7px 13px;background:transparent;border:1px solid #998665;color:#473b29;font:600 15px 'Barlow Condensed',sans-serif;cursor:pointer;}
#passport nav button.on{background:#33453a;color:#f2ead7;border-color:#33453a;}
#passport .mission-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px;}
#passport .mission-card{padding:13px;border:1px solid #b19c78;background:#f7eedb;display:flex;flex-direction:column;gap:8px;}
#passport .mission-card p{margin:0;font-size:13px;line-height:1.35;}
#passport .mission-card.complete{border-color:#59735c;background:#e4e9d7;}
#passport .mission-card.secret{border-style:dashed;background:transparent;text-align:center;justify-content:center;min-height:110px;opacity:.65;}
#passport .mission-card.secret b{font:40px Anton,Impact;}
#passport progress{width:100%;height:8px;accent-color:#526e53;}
#passport .memory-intro{font-size:14px;line-height:1.4;margin:12px 0;}
#passport .mission-card button,#passport .reward-unequip{background:#34463b;border:0;color:#f2ead7;padding:8px 12px;font:600 14px 'Barlow',sans-serif;cursor:pointer;}
#passport button:disabled{opacity:.65;cursor:default;}
.reward-mark{font-size:30px;color:#a85b45;}
#player-title{position:fixed;right:14px;top:42px;z-index:8;font:600 13px 'Barlow Condensed',sans-serif;color:#e7cf9c;text-shadow:0 1px 3px #000;letter-spacing:.08em;pointer-events:none;}
body:has(#game.on) #tbtns,body:has(#game.on) #stick,body:has(#game.on) #chatbtn,body:has(#game.on) #chatbox,body:has(#game.on) #chatsend,body:has(#game.on) #chatclose{display:none!important;}
body:has(#passport.on) #tbtns,body:has(#passport.on) #stick{visibility:hidden;}
@media(max-width:500px){#passport .mission-list{grid-template-columns:1fr;}#player-title{top:14px;left:50%;right:auto;transform:translateX(-50%);max-width:55vw;text-align:center;}}

body:has(#game.on) #fbbtn{pointer-events:none;opacity:.35;}

#passportbtn{display:none;position:fixed;left:130px;top:14px;z-index:12;padding:7px 12px;border:2px solid var(--paper);background:var(--card);color:var(--paper);font:600 14px 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;}
body:has(#hud.on) #passportbtn{display:block;}
body:has(#game.on) #passportbtn{pointer-events:none;opacity:.35;}
body.touch #passportbtn{left:122px;top:10px;font-size:12px;padding:6px 8px;}
body.touch #player-title{top:auto;bottom:46px;left:10px;right:auto;transform:none;max-width:calc(100vw - 190px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}
/* The passport keeps its paper character as the festival grows. */
.passport-head nav {display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.passport-cloud {padding:10px 2px;max-width:520px;line-height:1.5}
.passport-cloud input {display:block;width:100%;padding:10px;margin:8px 0;background:#f5eed8;color:#2c3c32;border:1px solid #9b8864;font:inherit}
.passport-cloud label,.passport-cloud small {display:block;margin-top:8px}
.passport-cloud button {margin:7px 0;padding:9px 14px;background:#354b3f;color:#f7edd8;border:0;font:inherit;cursor:pointer}
.passport-cloud .quiet-delete {background:transparent;color:#795343;font-size:12px;text-decoration:underline}
#cloud-state {color:#52684e;font-weight:700}
#recovery-code {font-family:monospace;font-weight:bold;letter-spacing:.06em}
.souvenir-shelf {display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;margin:10px 0 24px}
.souvenir {display:flex;flex-direction:column;padding:14px;background:#ece0ba;border:1px solid #a48d5d;box-shadow:2px 3px 0 #c7b688;transform:rotate(-1deg);gap:7px;line-height:1.4}
.souvenir:nth-child(even){transform:rotate(1.3deg)}
.souvenir>span {font-size:34px;color:#8b5c3a;line-height:1.2}
.souvenir small {opacity:.8}
.souvenir.patch {border:2px dashed #9b8048;background:#d8b568}
.souvenir.ticket {border-left:3px dotted #a48d5d;border-right:3px dotted #a48d5d}
#life-dialog {position:fixed;z-index:45;left:50%;bottom:8%;transform:translateX(-50%);width:min(540px,calc(100vw - 24px));background:#e4d5ae;color:#2e4037;border:2px solid #877752;padding:22px;box-shadow:5px 7px 0 #18271fc0;line-height:1.5;max-height:75vh;overflow:auto}
#life-dialog[hidden]{display:none}
#life-dialog h2 {font:28px Anton,Impact,sans-serif;letter-spacing:.06em;margin:0 0 10px}
#life-dialog p {font:18px Barlow,sans-serif;margin:12px 0}
#life-dialog button {background:#3d5846;color:#f5e7c6;border:0;padding:10px 16px;margin:6px 8px 0 0;font:16px Barlow,sans-serif;cursor:pointer}
#festival-moment {position:fixed;top:65px;right:14px;max-width:240px;background:#1c3024de;border-left:3px solid #d7b76d;color:#ebdfc2;padding:9px 12px;font:14px Barlow,sans-serif;pointer-events:none;z-index:4}
#festival-moment[hidden]{display:none}
#festival-moment b {display:block;letter-spacing:.04em}
@media(max-width:600px){#festival-moment {top:60px;font-size:12px;max-width:180px}#life-dialog{bottom:17%;padding:16px}}

#movesbtn {display:none;position:fixed;left:242px;top:14px;z-index:12;padding:7px 12px;border:2px solid var(--paper);background:var(--card);color:var(--paper);font:600 14px Barlow,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
body:has(#hud.on) #movesbtn {display:block}
body.touch #movesbtn {display:none!important}
#emotes {left:242px;top:57px;right:auto;bottom:auto;z-index:22;width:270px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 90px);overflow:auto;background:#e6d9b7;color:#2f4036;padding:14px;border:2px solid #756345;box-shadow:4px 5px 0 #15231dc0;font-family:Barlow,sans-serif}
#emotes.on {display:block}
#emotes header {display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:19px}
#emotes .moves-grid {display:grid;grid-template-columns:1fr 1fr;gap:8px}
#emotes .moves-grid button {width:100%;height:auto;min-height:42px;border-radius:0;font:600 15px Barlow,sans-serif;border:1px solid #82917b;background:#344c3c;color:#f2ead7;box-shadow:none;text-align:left;padding:7px;cursor:pointer}
#emotes .moves-grid kbd {display:inline-block;min-width:19px;text-align:center;border:1px solid #b7bc9d;padding:1px 3px;margin-right:5px;font:12px monospace}
#emotes #movesclose {width:28px;height:28px;box-shadow:none;border:0;background:transparent;color:#2f4036;font:25px Barlow,sans-serif;cursor:pointer}
#emotes small {display:block;font-size:12px;line-height:1.5;margin-top:12px}
body.touch #emotes {left:auto;right:76px;top:auto;bottom:168px;width:min(270px,calc(100vw - 92px));max-height:calc(100dvh - 210px)}
body:has(#game.on) #movesbtn,body:has(#game.on) #emotes {display:none!important}
#chathelp {display:none;position:fixed;left:96px;bottom:105px;z-index:12;color:#efe3be;background:#203127df;padding:3px 6px;font:11px Barlow,sans-serif;pointer-events:none;max-width:calc(100vw - 112px)}
body:has(#chatbox.on) #chathelp {display:block}
#chathelp{display:none!important}
body.touch:has(#chatbox.on) #stick{bottom:170px}
body.touch:has(#chatbox.on) #tbtns{bottom:164px}
body.touch #chatbox{font-size:16px}
body.touch #chathelp {display:none!important}

/* Public NPC conversations stay separate from the general chat composer. */
#npc-conversation[hidden],#npc-talk-button[hidden],#festival-connection[hidden]{display:none!important}
#npc-talk-button{position:fixed;left:14px;top:64px;z-index:16;padding:8px 12px;border:1px solid #d6c49d;background:#263b30ee;color:#f0e5c9;font:600 15px Barlow,sans-serif;cursor:pointer}
#npc-conversation{position:fixed;left:14px;bottom:96px;width:min(430px,calc(100vw - 28px));max-height:calc(100dvh - 174px);box-sizing:border-box;overflow:auto;z-index:32;padding:16px;background:#e1d4b0f5;color:#273b30;border:2px solid #70684e;box-shadow:3px 5px 0 #1119;font:16px Barlow,sans-serif}
#npc-conversation h2{font:26px Anton,sans-serif;margin:0 80px 0 0}#npc-conversation small{font-size:12px;text-transform:uppercase;letter-spacing:.08em}.npc-close{position:absolute;right:12px;top:14px}
#npc-conversation button,#npc-conversation select{border:1px solid #5c6a53;background:#334f3d;color:#f1e7c9;padding:7px 10px;font:600 14px Barlow,sans-serif;cursor:pointer}#npc-conversation button:disabled{opacity:.6;cursor:default}
#npc-conversation .npc-notice{font-size:12px;line-height:1.3;opacity:.85;margin:10px 0}.npc-spoken{font-size:13px;margin:7px 0}.npc-lines{max-height:180px;min-height:65px;overflow:auto;border-block:1px solid #8d9478;padding:5px 0;margin:8px 0;overflow-wrap:anywhere}.npc-lines p{line-height:1.3;margin:7px 0}.npc-lines b{color:#374a31}
#npc-conversation form{display:flex;gap:6px;margin-top:8px}#npc-message{min-width:0;flex:1;background:#f7edd5;border:1px solid #728267;padding:8px;color:#203829;font:16px Barlow,sans-serif}.npc-reply-status{min-height:16px;font-size:12px;line-height:1.3;margin:6px 0}.npc-daily{font-size:13px;line-height:1.35;margin:10px 0}#npc-conversation details{font-size:12px;margin-top:12px}#npc-conversation summary{cursor:pointer}#npc-conversation details p{line-height:1.4}
#festival-connection{position:fixed;inset:0;display:grid;place-content:center;padding:30px;text-align:center;background:#14221de8;color:#eee0bb;font:22px Barlow,sans-serif;z-index:70}
@media(max-width:600px){#npc-conversation{bottom:92px;padding:12px;max-height:calc(100dvh - 165px)}.npc-lines{max-height:145px}#npc-talk-button{left:12px;top:62px;font-size:13px}}

/* Public audiences and hand-stamped community badges. */
#chat-channels[hidden],#chat-reply[hidden],#chat-mentions[hidden],#meetups-panel[hidden],#meetups-button[hidden],#chatlog .msg[hidden],.chat-unread[hidden]{display:none!important}
#chat-channels{position:fixed;left:14px;bottom:104px;width:min(430px,calc(100vw - 28px));z-index:14;background:#1a2925ed;border:1px solid #8d9575;padding:5px 7px;box-sizing:border-box;font:14px Barlow,sans-serif}
#chat-channels button{font:600 14px Barlow,sans-serif;border:0;background:transparent;color:#d6d1b8;padding:3px 10px;cursor:pointer}#chat-channels button.selected{background:#dacb9d;color:#1d342b}#chat-channels small{display:block;font-size:11px;color:#cdc7af;margin:3px 0 0}
#chatlog{bottom:162px;width:min(430px,calc(100vw - 28px));max-height:260px}#chatlog .chat-name{display:inline;border:0;background:none;color:#dbd1ab;font:700 14px Barlow,sans-serif;padding:0;cursor:pointer}#chatlog .chat-answer{border:0;background:none;color:#d7bd7e;font-size:16px;padding:0 5px;cursor:pointer}#chatlog .chat-quote{display:block;font-size:11px;opacity:.7;border-left:2px solid #b3a06f;padding-left:6px;margin:3px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#chatlog mark{background:#8f763e80;color:#fff1bc;padding:0 2px}#chatlog .mentioned{border-left:2px solid #e2bc6c;background:#d8ae5130}
.chat-badge{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;margin-right:4px;border:1px solid #7f957d;color:#b8cbb0;font:700 13px Barlow,sans-serif;vertical-align:1px}.chat-badge.crew{border-color:#d1b46d;color:#edd195;transform:rotate(-4deg)}.chat-badge.connector{border-color:#a1b9c0;color:#d2e0de}.chat-badge.visitor{border:0;width:8px;color:#93ab8e}.chat-unread{font:700 11px Barlow,sans-serif;color:#eac67d}
#chat-reply{position:fixed;left:14px;bottom:156px;width:min(430px,calc(100vw - 28px));box-sizing:border-box;padding:5px 8px;background:#e0d2ae;color:#2a3d30;font:12px Barlow,sans-serif;z-index:15}#chat-reply button{float:right;background:none;border:0;color:#253d30;font-size:17px;cursor:pointer}body:has(#chat-reply:not([hidden])) #chatlog{bottom:188px}
#chat-mentions{position:fixed;left:96px;bottom:151px;z-index:18;background:#e0d2ae;border:1px solid #6d7d61;padding:5px;max-width:280px}#chat-mentions button{display:block;background:none;border:0;color:#294332;font:15px Barlow,sans-serif;padding:6px 10px;cursor:pointer}
#meetups-button{position:fixed;left:340px;top:14px;z-index:12;padding:7px 12px;border:2px solid var(--paper);background:var(--card);color:var(--paper);font:600 14px Barlow,sans-serif;cursor:pointer}
#meetups-panel{position:fixed;right:14px;top:82px;width:min(370px,calc(100vw - 28px));box-sizing:border-box;max-height:calc(100dvh - 165px);overflow:auto;z-index:34;background:#dfd2ad;color:#293e32;border:2px solid #747a58;padding:18px;box-shadow:4px 5px 0 #17261bc0;font:15px Barlow,sans-serif}#meetups-panel h2{font:25px Anton,sans-serif;margin:0 70px 12px 0}#meetups-panel h3{font:22px Anton,sans-serif;margin:15px 0 4px}#meetups-panel p{line-height:1.4}#meetups-panel button{background:#354e3d;color:#f1e4c2;border:1px solid #6f7f5f;padding:7px 10px;margin:4px 6px 4px 0;font:600 14px Barlow,sans-serif;cursor:pointer}#meetups-panel button:disabled{opacity:.45;cursor:default}#meetups-panel .meetups-close{position:absolute;right:12px;top:12px}#meetups-panel small{display:block;margin-top:13px;line-height:1.4}
body.touch #chatlog{top:48px;bottom:auto;max-height:132px}body.touch:has(#chat-reply:not([hidden])) #chatlog{bottom:auto}body.touch #chat-channels{left:10px;bottom:104px;width:calc(100vw - 24px)}body.touch #chat-reply{left:10px;bottom:156px;width:calc(100vw - 24px)}body.touch #chat-mentions{left:10px;bottom:156px}body.touch #meetups-button{left:200px;top:10px;font-size:11px;padding:5px 7px}body.touch #meetups-panel{top:auto;bottom:94px;max-height:calc(100dvh - 180px);padding:14px}

/* Camp notes and the public walking-crew board use the existing meeting panel. */
.people-key{white-space:pre-line;color:#b6d7ca;font:14px/1.8 Barlow,sans-serif;border-bottom:1px solid #7b8978;padding-bottom:10px}
#online{color:#8ce6d3}
.camp-social{border-top:2px dashed #9a9b7a;margin-top:20px;padding-top:4px}.camp-social select{display:block;width:100%;box-sizing:border-box;padding:8px;margin:7px 0;background:#f1e6ca;border:1px solid #6b7a5c;color:#2b4432;font:15px Barlow,sans-serif}.camp-social .walking-crews p,.camp-social .visitor-invitations p{padding:7px 0;border-bottom:1px solid #b6b797;font-size:13px}.camp-social h3{font-size:20px!important}.field-bag{background:#d8c89f;border:1px solid #8e906d;padding:10px;margin:10px 0;color:#304332}.field-bag summary{font:600 15px Barlow,sans-serif;cursor:pointer}.field-bag ul{padding-left:17px;max-height:170px;overflow:auto}.field-bag li{margin:10px 0;font-size:14px}.field-bag small{display:block;font-size:12px;line-height:1.35}#festival-activity{position:fixed;left:50%;bottom:138px;transform:translateX(-50%);z-index:15;padding:8px 12px;background:#e6d8b7;color:#294331;border:1px solid #879471;max-width:min(540px,85vw);font:14px Barlow,sans-serif;text-align:center;pointer-events:none}#festival-activity[hidden]{display:none!important}body.touch #festival-activity{bottom:220px;font-size:12px;max-width:66vw}
/* Clock and weather float directly over the world, without a card or backdrop. */
#festival-weather{position:fixed;top:43px;right:14px;z-index:11;width:194px;box-sizing:border-box;color:#f2efdf;background:transparent;border:0;border-radius:0;box-shadow:none;font:12px Barlow,system-ui,sans-serif;text-shadow:0 1px 3px #101b19e6;overflow:hidden}
#festival-weather summary{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;row-gap:2px;padding:6px 2px;cursor:pointer;list-style:none;outline-offset:-4px}
#festival-weather summary::-webkit-details-marker{display:none}#festival-weather summary:focus-visible{outline:2px solid #d6e9cc;border-radius:5px}
.weather-clock{font:500 35px/1.05 Barlow,system-ui,sans-serif;letter-spacing:-.055em;font-variant-numeric:tabular-nums;white-space:nowrap}
.weather-reading{display:flex;gap:5px;align-items:center;justify-content:flex-end}.weather-temperature{font:500 27px/1 Barlow,system-ui,sans-serif;letter-spacing:-.04em;white-space:nowrap}.weather-symbol{display:flex;width:25px;height:25px;color:#efd299}.weather-symbol svg{display:block;width:100%;height:100%}
.weather-date,.weather-condition{font-size:10px;color:#e8ecdfe8;line-height:1.4;white-space:nowrap}.weather-condition{text-align:right;max-width:78px;text-overflow:ellipsis;overflow:hidden}
#festival-weather[data-weather=rain] .weather-symbol,#festival-weather[data-weather=snow] .weather-symbol{color:#a4d3e4}#festival-weather[data-weather=cloud] .weather-symbol,#festival-weather[data-weather=fog] .weather-symbol{color:#d9e1db}
#festival-weather[open]{width:250px}#festival-weather p{font:12px/1.5 Barlow,sans-serif;margin:0 13px 9px;padding-top:10px;border-top:1px solid #d6e5cc2d;color:#dae4d5;text-align:left}#festival-weather a{display:block;font-size:10px;color:#c5d9c8;margin:0 13px 12px;text-decoration:underline;text-underline-offset:3px}
#player-title{top:147px;max-width:194px;text-align:right}#festival-moment{top:174px}body:has(#festival-weather[open]) #festival-moment,body:has(#festival-weather[open]) #player-title{visibility:hidden}
body.touch #festival-weather{top:58px;right:10px;width:164px;border-radius:0}body.touch #festival-weather summary{padding:4px 0;column-gap:8px;row-gap:4px}body.touch .weather-clock{font-size:29px}body.touch .weather-temperature{font-size:23px}body.touch .weather-symbol{width:21px;height:21px}body.touch .weather-date,body.touch .weather-condition{font-size:9px}body.touch .weather-condition{max-width:65px}body.touch #festival-weather[open]{width:min(250px,calc(100vw - 20px))}
body.touch #player-title{top:145px;right:10px;max-width:164px;font-size:11px}body.touch #festival-moment{top:171px;right:10px;max-width:164px;font-size:11px}body.touch #npc-talk-button{max-width:min(180px,calc(100vw - 190px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body.touch #hint{left:12px;transform:none;top:96px;max-width:calc(100vw - 200px);font-size:11.5px}

body.touch #online{top:42px;right:12px;font-size:10px;letter-spacing:.05em}
body.touch #mini{top:150px;right:10px}
body.touch #player-title{top:274px}
body.touch #festival-moment{top:298px}
#festival-weather summary{-webkit-tap-highlight-color:transparent}

/* A longer, fine-step audio fader with an explicit low-volume readout. */
#ctl input{width:128px;min-width:70px}#vollevel{min-width:37px;text-align:right;font:600 12px/1 Barlow,system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--paper)}body.touch #ctl input{width:84px;min-width:54px}body.touch #vollevel{min-width:31px;font-size:10px}body.touch #np{flex:1 1 0;min-width:0;max-width:calc(100vw - 206px)}body.touch #ctl{flex:0 0 auto}

/* The scene is the entry screen. No panel, gradient, title strip or backdrop. */
#overlay,#overlay.v-main,#panel,#panel>div,#overlay h1,#overlay #tag,#overlay .menu,#overlay .entry-kicker{background:transparent;background-image:none;border:0;box-shadow:none;backdrop-filter:none}
#overlay{padding:46px 5vw;align-items:stretch}
#panel{width:min(620px,52vw);padding:0;max-height:calc(100dvh - 92px);overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#ffffff66 transparent}
#panel #v-main{height:100%;min-height:520px;gap:0;padding:0 6px}
#overlay #v-main h1{font:400 clamp(78px,9.1vw,126px)/1.05 Anton,Impact,sans-serif;letter-spacing:-.03em;white-space:nowrap;color:#fff;margin:6px 0 19px;transform:skew(-4deg);transform-origin:left center;text-shadow:0 2px 4px #07131eaa}
#v-main h1 span{color:transparent;-webkit-text-stroke:1.5px #fff;text-shadow:0 2px 4px #07131e55}
#overlay #tag{font:500 clamp(20px,2vw,26px)/1.35 Barlow,sans-serif;text-transform:none;letter-spacing:0;color:#fff;margin:0 0 30px;text-shadow:0 1px 3px #031015,0 2px 8px #03101580}
#v-main #nick{width:min(310px,100%);margin:auto 0 23px;padding:10px 0;background:transparent;border:0;border-bottom:1px solid #ffffff8c;box-shadow:none;border-radius:0;color:#fff;font:500 17px Barlow,sans-serif;text-shadow:0 1px 3px #031015}
#v-main #nick::placeholder{color:#f1f4f6}#v-main #nick:focus{background:transparent;outline:none;border-bottom:2px solid #ffc369}
#v-main #enter{align-self:flex-start;position:relative;background:transparent;color:#fff;border:0;border-radius:0;box-shadow:none;clip-path:none;padding:4px 42px 7px 0;margin:0;font:400 29px/1.2 Anton,sans-serif;letter-spacing:.035em;text-shadow:0 1px 4px #031015,0 2px 8px #03101599;transition:color .14s,transform .14s}
#v-main #enter::after{content:'↗';position:absolute;right:4px;top:1px;color:#ffc369;font:34px Barlow,sans-serif}
#v-main #enter:hover,#v-main #enter:focus-visible{color:#ffc369;background:transparent;box-shadow:none;transform:translateX(5px);filter:none}
#v-main #enter:focus-visible{outline:1px solid #fff;outline-offset:7px}#v-main #enter:active{transform:translateX(8px)}#v-main #enter:disabled{background:transparent;color:#c2cad0;box-shadow:none;cursor:wait}
#v-main #loadbar{height:2px;width:min(310px,100%);margin-top:12px;background:#ffffff24}#v-main #loadbar i{background:#ffc369}
#v-main:has(#enter:not(:disabled)) #loadbar,#v-main #loadnote:empty{display:none}#v-main #loadnote{color:#fff;text-shadow:0 1px 4px #031015}
#v-main .menu{gap:8px 24px;margin-top:25px;padding:0 0 3px}
#v-main .ghost{background:transparent;font:500 14px Barlow,sans-serif;letter-spacing:.035em;text-transform:none;color:#fff;border:0;margin:0;padding:5px 0;text-shadow:0 1px 3px #031015,0 2px 7px #031015cc}
#v-main .ghost:hover,#v-main .ghost:focus-visible{color:#ffc369;background:transparent;border:0;text-decoration:underline;text-underline-offset:6px}
#overlay .sub{padding:8px 6px;color:#fff;text-shadow:0 1px 4px #031015}
#overlay .sub .ghost,#overlay .sub h3,#overlay .sub .keys{color:#fff;background:transparent}
#overlay .sub .chip,#overlay .sub .chip.on{background:transparent;color:#fff;box-shadow:none;border-color:#ffffff66}#overlay .sub .chip.on{border-color:#ffc369;color:#ffc369}#overlay .sub .tab.on{color:#fff;border-color:#ffc369}
body:has(#overlay:not(.hidden)) #festival-weather{visibility:hidden;pointer-events:none}
@media(max-width:760px){#overlay{padding:35px 25px;background:transparent}#panel{width:100%;max-width:450px;max-height:calc(100dvh - 70px)}#panel #v-main{min-height:490px}#overlay #v-main h1{font-size:clamp(66px,18vw,96px);margin-bottom:19px}#overlay #tag{font-size:22px}#v-main #enter{font-size:25px}#v-main .menu{gap:8px 22px}}
@media(max-height:650px){#overlay{padding-top:23px;padding-bottom:23px}#panel{max-height:calc(100dvh - 46px)}#panel #v-main{min-height:0}#overlay #v-main h1{margin-top:2px;margin-bottom:14px}#overlay #tag{margin-bottom:24px}#v-main #nick{margin-bottom:17px}#v-main .menu{margin-top:20px}}

/* Custom geometric lettering, drawn as vectors rather than a substituted font. */
#panel{width:min(800px,60vw)}
#overlay #v-main h1.festrivo-wordmark{position:relative;width:100%;font-size:0;line-height:0;transform:none;margin:6px 0 25px;text-shadow:none}
.festrivo-wordmark img{display:block;width:100%;height:auto;max-width:100%;filter:none}
#v-main h1 .wordmark-name{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;-webkit-text-stroke:0}
@media(max-width:760px){#panel{width:100%;max-width:450px}#overlay #v-main h1.festrivo-wordmark{margin-bottom:23px}}

/* Compact wordmark; the open, diagonal R follows the supplied reference silhouette. */
#panel{width:min(620px,52vw)}#overlay #v-main h1.festrivo-wordmark{width:min(100%,430px);margin-bottom:22px}@media(max-width:760px){#panel{width:100%;max-width:450px}#overlay #v-main h1.festrivo-wordmark{width:min(100%,340px)}}

#route-dismiss{pointer-events:auto;margin-left:10px;background:transparent;border:0;color:inherit;font:24px Barlow,sans-serif;cursor:pointer;padding:4px 9px;text-shadow:0 1px 4px #000}#festival-activity{pointer-events:auto}#festival-activity button{margin-left:12px;border:1px solid currentColor;background:transparent;color:inherit;padding:4px 9px;font:600 13px Barlow,sans-serif;cursor:pointer}

/* Touch HUD: leave the world open; desktop rules above remain unchanged. */
body.touch{--touch-top:max(8px,env(safe-area-inset-top));--touch-left:max(10px,env(safe-area-inset-left));--touch-right:max(10px,env(safe-area-inset-right));--touch-bottom:max(8px,env(safe-area-inset-bottom))}
body.touch #ctl{display:flex!important;flex:0 0 32px;padding:0;gap:0;border:0;background:transparent;box-shadow:none}
body.touch #ctl #vol,body.touch #ctl #vollevel,body.touch #ctl #next{display:none}
body.touch #ctl #mute{width:32px;height:32px;padding:0;font-size:18px;background:transparent;border:0;box-shadow:none}
body.touch #hud{column-gap:8px}
body.touch #hud{left:var(--touch-left);right:var(--touch-right);bottom:var(--touch-bottom);gap:0}
body.touch #np{display:block;flex:1;max-width:calc(100% - 40px);width:100%;font-size:12px;line-height:1.4;-webkit-line-clamp:unset;padding-right:2px}
body.touch #np br{display:none}body.touch #np .np-track,body.touch #np .np-source{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.touch #np .np-source{font-size:10px;letter-spacing:.05em;margin-top:2px}
body.touch #fbbtn,body.touch #passportbtn,body.touch #meetups-button{top:var(--touch-top);height:34px;box-sizing:border-box;font-size:11px;padding:5px 8px;box-shadow:none;letter-spacing:.04em}
body.touch #fbbtn{left:var(--touch-left)}body.touch #passportbtn{left:calc(var(--touch-left) + 86px)}body.touch #meetups-button{left:calc(var(--touch-left) + 164px)}
body.touch #online{top:calc(var(--touch-top) + 36px);right:var(--touch-right);font-size:9px;letter-spacing:.03em}
body.touch #festival-weather{top:calc(var(--touch-top) + 52px);right:var(--touch-right);width:124px}
body.touch #festival-weather summary{padding:0;column-gap:8px;row-gap:1px}
body.touch .weather-clock{font-size:23px}body.touch .weather-temperature{font-size:19px}body.touch .weather-symbol{width:18px;height:18px}
body.touch .weather-date,body.touch .weather-condition{font-size:8px}body.touch .weather-reading{gap:3px}body.touch .weather-condition{max-width:60px}
body.touch #mini{top:calc(var(--touch-top) + 100px);right:var(--touch-right);width:96px;height:96px}
body.touch #player-title{top:calc(var(--touch-top) + 203px);right:var(--touch-right);max-width:124px;font-size:10px}
body.touch #festival-moment{top:calc(var(--touch-top) + 228px);right:var(--touch-right);max-width:124px;font-size:10px;padding:6px 8px;line-height:1.3}
body.touch #chatlog{left:var(--touch-left);top:calc(var(--touch-top) + 38px);width:calc(100vw - var(--touch-left) - var(--touch-right) - 140px);max-height:54px;font-size:11px;line-height:1.35}
body.touch #hint,body.touch #npc-talk-button{left:var(--touch-left);top:calc(var(--touch-top) + 102px);max-width:calc(100vw - var(--touch-left) - var(--touch-right) - 120px);font-size:11px;padding:5px 8px}
body.touch #route{top:calc(var(--touch-top) + 143px);left:var(--touch-left);transform:none;max-width:calc(100vw - var(--touch-left) - var(--touch-right) - 120px);white-space:normal;font-size:11px;letter-spacing:.03em}
body.touch #toast{top:calc(var(--touch-top) + 177px);font-size:12px;letter-spacing:.02em;white-space:normal}
body.touch #zone{top:calc(var(--touch-top) + 210px);font-size:20px;letter-spacing:.06em}
body.touch #stick{left:calc(var(--touch-left) + 4px);bottom:calc(var(--touch-bottom) + 100px);width:96px;height:96px}
body.touch #stick i{left:28px;top:28px}
body.touch #tbtns{right:var(--touch-right);bottom:calc(var(--touch-bottom) + 66px);gap:8px}
body.touch #tbtns button{width:46px;height:46px;box-shadow:none}body.touch #tbtns #tact{width:58px;height:58px}
body.touch #chatbtn{left:var(--touch-left);bottom:calc(var(--touch-bottom) + 54px);height:36px;box-shadow:none}
body.touch #chatbox{left:var(--touch-left);bottom:calc(var(--touch-bottom) + 54px);width:calc(100vw - var(--touch-left) - var(--touch-right) - 48px);height:36px}
body.touch #chatsend{right:var(--touch-right);bottom:calc(var(--touch-bottom) + 54px);height:36px}
body.touch #chat-channels{left:var(--touch-left);bottom:calc(var(--touch-bottom) + 98px);width:calc(100vw - var(--touch-left) - var(--touch-right));font-size:12px}
body.touch #chat-reply{left:var(--touch-left);bottom:calc(var(--touch-bottom) + 153px);width:calc(100vw - var(--touch-left) - var(--touch-right))}
body.touch #chat-mentions{left:var(--touch-left);bottom:calc(var(--touch-bottom) + 153px)}
body.touch:has(#chatbox.on) #chatlog{top:calc(var(--touch-top) + 40px);max-height:112px}
body.touch:has(#chatbox.on) #hint,body.touch:has(#chatbox.on) #npc-talk-button{visibility:hidden}
body.touch:has(#chatbox.on) #stick{bottom:calc(var(--touch-bottom) + 163px)}body.touch:has(#chatbox.on) #tbtns{bottom:calc(var(--touch-bottom) + 157px)}
body.touch #festival-activity{bottom:calc(var(--touch-bottom) + 245px);font-size:11px;max-width:76vw}
body.touch #emotes{bottom:calc(var(--touch-bottom) + 224px);right:var(--touch-right);max-height:calc(100dvh - 300px)}
@media(orientation:landscape) and (max-height:540px){
 body.touch #festival-weather{top:calc(var(--touch-top) + 37px);width:124px}
 body.touch #online{top:var(--touch-top)}body.touch #mini{top:calc(var(--touch-top) + 77px);right:calc(var(--touch-right) + 68px);width:76px;height:76px}
 body.touch #chatlog{width:min(300px,calc(100vw - 170px));max-height:36px}body.touch #hint,body.touch #npc-talk-button{top:calc(var(--touch-top) + 82px);max-width:300px}
 body.touch #route{top:calc(var(--touch-top) + 118px);max-width:300px}body.touch #zone{top:calc(var(--touch-top) + 155px);font-size:19px}body.touch #toast{top:calc(var(--touch-top) + 148px);max-width:55vw}
 body.touch #stick{bottom:calc(var(--touch-bottom) + 88px)}body.touch #tbtns{bottom:calc(var(--touch-bottom) + 62px);gap:6px}body.touch #tbtns button{width:44px;height:44px}body.touch #tbtns #tact{width:54px;height:54px}
 body.touch #player-title{top:calc(var(--touch-top) + 163px);right:calc(var(--touch-right) + 86px);max-width:145px}body.touch #festival-moment{top:calc(var(--touch-top) + 189px);right:calc(var(--touch-right) + 86px);max-width:145px}
 body.touch #festival-activity{bottom:calc(var(--touch-bottom) + 57px);max-width:50vw}body.touch #emotes{bottom:calc(var(--touch-bottom) + 65px);right:calc(var(--touch-right) + 65px);max-height:calc(100dvh - 120px)}
 body.touch:has(#chatbox.on) #chatlog{max-height:64px;width:calc(100vw - var(--touch-left) - var(--touch-right) - 170px)}
 body.touch:has(#chatbox.on) #stick{bottom:calc(var(--touch-bottom) + 155px)}body.touch:has(#chatbox.on) #tbtns{bottom:calc(var(--touch-bottom) + 155px)}
 body.touch:has(#chatbox.on) #mini{visibility:hidden}
}

body.touch:has(#chatbox.on) #mini{visibility:hidden}
@media(orientation:landscape) and (max-height:540px){body.touch:has(#chatbox.on) #festival-weather,body.touch:has(#chatbox.on) #player-title,body.touch:has(#chatbox.on) #festival-moment{visibility:hidden}}

body.touch #chatbox{left:calc(var(--touch-left) + 44px);width:calc(100vw - var(--touch-left) - var(--touch-right) - 92px);padding-inline:9px}

body.touch:has(#chatbox.on) #chatbtn{visibility:hidden}
body.touch #chatclose{left:var(--touch-left);right:auto;bottom:calc(var(--touch-bottom) + 54px);width:36px;height:36px;box-shadow:none}
body.touch #chatsend{width:40px}
body.touch #chatlog:not(.open) .sys{display:none}