#connection{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:1000;padding:9px 18px;background:#fff3ce;color:#294b3c;border-radius:12px;box-shadow:0 3px 15px #0003;cursor:pointer;font-size:13px}

/* Floating feedback button. It is parked above the fixed action bar using the
   height client.js measures (--barh), so it never lands on top of the bar or
   the text just above it. Compact on phones, labelled on wide screens. */
#feedbackOpen{position:fixed;right:14px;bottom:calc(var(--barh,78px) + 14px);z-index:200;display:flex;align-items:center;gap:7px;background:#244d40e6;color:#fff;border:1.5px solid #e2be77;border-radius:26px;padding:9px 15px;font:inherit;font-size:13px;line-height:1;box-shadow:0 3px 12px #0000002e;cursor:pointer;opacity:.9;transition:opacity .15s}
#feedbackOpen:hover,#feedbackOpen:focus-visible{opacity:1}
#feedbackOpen .fab-icon{font-size:15px}
body.tour-on #feedbackOpen{display:none}
#feedbackOpen.inline{position:static;width:auto;height:auto;padding:8px 12px;border-radius:12px;background:transparent;border-color:rgba(239,237,227,.5);color:#efede3;opacity:1;font-size:12px;gap:6px}
#feedbackOpen.inline .fab-text{display:inline}
@media(max-width:760px){#feedbackOpen{right:10px;padding:0;width:44px;height:44px;justify-content:center;border-radius:50%;gap:0}#feedbackOpen .fab-text{display:none}#feedbackOpen .fab-icon{font-size:18px}}

#feedbackDialog{max-width:490px;width:calc(100% - 28px);border:0;border-radius:20px;padding:24px;color:#244d40}#feedbackDialog::backdrop{background:#102b26aa}#feedbackDialog label{display:block;margin:16px 0}#feedbackDialog select,#feedbackDialog textarea{display:block;width:100%;font:inherit;padding:12px;margin-top:8px;border:1px solid #bacbbb;border-radius:10px;box-sizing:border-box}#feedbackDialog button{padding:10px 18px;margin:5px;border-radius:10px;border:1px solid #244d40;background:#244d40;color:white;cursor:pointer}.privacy{font-size:12px;line-height:1.7;color:#64766c}.beta-brand{text-align:center;font-size:11px;color:#64766c;padding:20px 10px 100px}

/* Language gate - shown once, before the first look at the game. */
#langGate{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px;background:#122c25f2}
#langGate[hidden]{display:none}
.lang-panel{width:min(400px,100%);background:#fffdf6;border:1.5px solid #e2be77;border-radius:22px;padding:28px 24px;text-align:center;box-shadow:0 20px 60px #0006}
.lang-brand{font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;color:#a9822f;margin-bottom:14px}
.lang-panel h1{font-size:21px;margin:0 0 20px;color:#22402f;line-height:1.35}
.lang-panel h1 span{display:block;font-size:13px;font-weight:400;color:#64766c;margin-top:4px}
.lang-picks{display:grid;gap:10px}
.lang-picks button{display:block;width:100%;padding:15px;border:1.5px solid #cbd9c9;border-radius:14px;background:#fff;color:#22402f;font:inherit;cursor:pointer;text-align:center}
.lang-picks button:hover,.lang-picks button:focus-visible{border-color:#244d40;background:#eef4ea}
.lang-picks b{display:block;font-size:17px}
.lang-picks small{display:block;font-size:11px;color:#64766c;margin-top:3px}
.lang-foot{font-size:11.5px;line-height:1.7;color:#64766c;margin:18px 0 0}
#langHint{position:fixed;z-index:1100;max-width:250px;padding:10px 13px;background:#244d40;color:#fff8e7;border:1.5px solid #e2be77;border-radius:12px;font-size:12.5px;line-height:1.5;box-shadow:0 6px 20px #0004}
#langHint[hidden]{display:none}
#langHint::after{content:"";position:absolute;top:-8px;right:22px;border:7px solid transparent;border-top:0;border-bottom-color:#e2be77}

/* Guided tour. The engine cannot measure a viewport, so the spotlight, callout
   and arrow are all positioned by client.js; these rules only style them. */
.tour-shade{background:transparent!important}
.tour-focus{display:none;position:fixed;z-index:1;border:3px solid #f5bd49;border-radius:14px;box-shadow:0 0 0 9999px #102d2685;pointer-events:none;transition:left .16s,top .16s,width .16s,height .16s}
.tour-card{z-index:153}
.tour-arrow{position:fixed;inset:0;pointer-events:none;width:100vw;height:100vh}
.tour-target{scroll-margin:180px}
.tour-arrow-line{stroke:#f5bd49;stroke-width:5;fill:none}
.tour-arrow-outline{stroke:#604515;stroke-width:8;fill:none}
@media(max-width:600px){.tour-card{font-size:12px;padding:14px}.tour-card p{font-size:12px;line-height:1.5}}