/* Talewyn Harbor - mobile mode layer. Loaded after the desktop stylesheets; everything is scoped to body.mobile. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none}
body.mobile{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.mobile canvas#game{touch-action:none}
.hidden{display:none !important}
:root{--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px)}

/* ---------------------------------------------------------------- step 1: the mode chooser */
#mchoose{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;background:radial-gradient(circle at 50% 35%,#1b5f7d,#071824 72%);transition:opacity .4s}
#mchoose.gone{opacity:0;pointer-events:none}
.mc-inner{text-align:center;width:min(440px,100%)}
.mc-logo{font-size:56px;line-height:1;animation:bob 2.4s ease-in-out infinite}
#mchoose h1{margin:.1em 0 0;font-size:34px;font-weight:600;letter-spacing:.02em}
.mc-sub{margin:.2em 0 20px;color:var(--ink-dim);font-size:15px}
.mc-btns{display:flex;flex-direction:column;gap:12px}
.mc-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:17px 18px;border-radius:18px;border:1px solid var(--line);font:700 17px var(--font);letter-spacing:.06em;cursor:pointer;color:var(--ink);transition:transform .12s}
.mc-btn:active{transform:scale(.97)}
.mc-main{background:linear-gradient(180deg,#8fe9df,#4fd1c5);color:#052a2a;border-color:transparent;box-shadow:0 6px 22px rgba(79,209,197,.35)}
.mc-main em{font-style:normal;font-size:11px;letter-spacing:.12em;padding:3px 8px;border-radius:99px;background:#ffcf5c;color:#4a2e05}
.mc-alt{background:rgba(9,28,42,.7);backdrop-filter:blur(8px)}
.mc-note{margin:16px 6px 0;color:var(--ink-dim);font-size:12.5px;line-height:1.5}
@media (orientation:landscape) and (max-height:480px){
  .mc-inner{display:grid;grid-template-columns:1fr 1.1fr;column-gap:26px;text-align:left;align-items:center;width:min(760px,100%)}
  .mc-logo,#mchoose h1,.mc-sub{grid-column:1}.mc-btns{grid-column:2;grid-row:1/4}.mc-note{grid-column:1;margin:8px 0 0}
  .mc-logo{font-size:44px}#mchoose h1{font-size:28px}.mc-sub{margin-bottom:6px}
}

/* ---------------------------------------------------------------- loading + portrait warning */
#boot{z-index:110}
#rotate{display:none;position:fixed;inset:0;z-index:300;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 40%,#17506b,#071824 70%);padding:24px}
#rotate div{max-width:300px;display:flex;flex-direction:column;gap:8px;align-items:center}
#rotate b{font-size:22px;font-weight:600}#rotate span{color:var(--ink-dim);font-size:14px}
.rot-ico{font-size:64px;animation:rot 2.2s ease-in-out infinite}
@keyframes rot{0%,30%{transform:rotate(0)}70%,100%{transform:rotate(-90deg)}}
body.pgame.o-port #rotate{display:flex}
#upright{display:none;position:fixed;inset:0;z-index:300;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 40%,#17506b,#071824 70%);padding:24px}
#upright div{max-width:320px;display:flex;flex-direction:column;gap:8px;align-items:center}
#upright b{font-size:20px;font-weight:600}#upright span{color:var(--ink-dim);font-size:14px}
.rot-ico.up{animation:rotup 2.2s ease-in-out infinite}
@keyframes rotup{0%,30%{transform:rotate(-90deg)}70%,100%{transform:rotate(0)}}
body.plog.o-land #upright{display:flex}
#glmsg{position:fixed;inset:0;z-index:320;display:flex;align-items:center;justify-content:center;text-align:center;background:rgba(5,16,24,.92)}
#glmsg div{display:flex;flex-direction:column;gap:6px}#glmsg b{font-size:20px}#glmsg span{color:var(--ink-dim)}

/* ---------------------------------------------------------------- the phone login: name + password only */
#mlogin{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:calc(10px + var(--st)) calc(14px + var(--sr)) 10px calc(14px + var(--sl));overflow:auto;background:radial-gradient(circle at 50% 35%,#1b5f7d,#071824 72%)}
body.plog canvas#game,body.plog #labels{visibility:hidden}
.ml-card{display:flex;align-items:center;gap:26px;padding:20px 26px;border-radius:22px;width:min(640px,100%);max-height:100%}
.ml-brand{flex:0 0 38%;text-align:center}
.ml-logo{font-size:46px;line-height:1;animation:bob 2.4s ease-in-out infinite}
.ml-brand h1{margin:.1em 0 .25em;font-size:25px;font-weight:600}
.ml-beta{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;padding:3px 10px;border-radius:99px;background:#ffcf5c;color:#4a2e05}
.ml-form{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.ml-form input{width:100%;padding:13px 15px;border-radius:13px;border:1px solid var(--line);background:rgba(0,0,0,.3);color:#fff;font:600 17px var(--font);outline:none;-webkit-user-select:text;user-select:text}
.ml-form input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(79,209,197,.25)}
.ml-go{padding:13px;border-radius:13px;border:0;background:linear-gradient(180deg,#8fe9df,#4fd1c5);color:#052a2a;font:700 18px var(--font);letter-spacing:.04em;box-shadow:0 4px 14px rgba(79,209,197,.3)}
.ml-go:disabled{opacity:.65}
.ml-err{min-height:1.2em;color:#ff9b9b;font-size:13.5px;line-height:1.3}
.ml-prog{font-size:12px;color:var(--ink-dim);text-align:center;min-height:1.2em}.ml-prog.done{color:var(--good)}
@media (max-height:420px){body.o-land .ml-card{padding:12px 20px;gap:20px}body.o-land .ml-logo{font-size:34px}body.o-land .ml-brand h1{font-size:21px}body.o-land .ml-form{gap:7px}body.o-land .ml-form input,body.o-land .ml-go{padding:9px 13px;font-size:16px}}      /* (only a phone really held sideways - the keyboard shrinking the visible area must not resize the card) */
body.o-port .ml-card{flex-direction:column;gap:12px;margin-top:max(7vh,12px)}body.o-port .ml-brand{flex:none}body.o-port .ml-logo{font-size:36px}body.o-port .ml-brand h1{font-size:22px;margin:.1em 0 .3em}
/* (the card is pinned to the top and never changes size: when the keyboard opens or closes nothing may move under the finger) */

/* ---------------------------------------------------------------- in game: trim the desktop HUD down to the essentials */
body.mobile #hud{left:var(--sl);right:var(--sr)}
body.mobile .equip,body.mobile .menu,body.mobile #qtrack,body.mobile #chat,body.mobile #hotbar .hb,body.mobile #miniWrap .compass{display:none !important}
body.mobile .pcard{left:10px;top:calc(8px + var(--st));min-width:0;padding:5px 12px 5px 5px;gap:8px;transform:scale(.82);transform-origin:left top}
body.mobile .pcard .food,body.mobile .pcard .pmeta span:first-child{display:none}
body.mobile .tr{right:10px;top:calc(8px + var(--st));gap:5px}
body.mobile #miniWrap{width:92px;height:92px;padding:3px;pointer-events:none}
body.mobile .clock{padding:3px 9px;font-size:12.5px;gap:6px;pointer-events:none}
body.mobile .clock .dim{display:none}
body.mobile #hotbar{left:calc(10px + var(--sl));right:auto;bottom:auto;top:calc(62px + var(--st));align-items:flex-start;pointer-events:none}
body.mobile #hotbar .stam{width:112px;height:6px}
body.mobile #hint{bottom:calc(96px + var(--sb));font-size:13px;padding:5px 12px;max-width:50vw;white-space:normal;text-align:center}
body.mobile #toasts{top:calc(8px + var(--st));max-width:46vw}
body.mobile #toasts>*{font-size:13px;padding:6px 12px}
body.mobile #announce{top:56px;max-width:60vw}
body.mobile #meter{bottom:calc(20px + var(--sb));width:min(240px,34vw)}
body.mobile #reel{right:26%}
body.mobile #catch{left:calc(150px + var(--sl))}
body.mobile #panelWrap{padding:calc(6px + var(--st)) calc(6px + var(--sr)) 6px calc(6px + var(--sl))}
body.mobile .panel{width:min(880px,96vw);max-height:calc(100vh - 12px - var(--st))}
body.mobile #panelWrap,body.mobile #panelWrap *{touch-action:pan-x pan-y}
body.mobile #panelWrap{-webkit-user-select:text;user-select:text}

/* ---------------------------------------------------------------- the touch controls */
#mctl{position:fixed;inset:0;z-index:30;pointer-events:none}
#mctl button{pointer-events:auto;touch-action:none;font-family:var(--font);color:var(--ink);-webkit-user-select:none;user-select:none}
.mhint{position:absolute;left:calc(86px + var(--sl));bottom:calc(74px + var(--sb));width:116px;height:116px;margin:-58px 0 0 -58px;border-radius:50%;border:2px dashed rgba(255,255,255,.2);opacity:.9;transition:opacity .2s}
.mhint i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:rgba(255,255,255,.12)}
.mhint.off{opacity:0}
.mstick{position:absolute;width:116px;height:116px;margin:-58px 0 0 -58px;opacity:0;transition:opacity .12s}
.mstick.on{opacity:1}
.mstick b{position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.4);box-shadow:0 0 18px rgba(0,0,0,.25)}
.mstick i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;border-radius:50%;background:rgba(255,255,255,.55);border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.mstick.look b{border-color:rgba(255,207,92,.55)}.mstick.look i{background:rgba(255,207,92,.55);border-color:#ffe08a}

.mround{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(9,28,42,.55);backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(0,0,0,.35);padding:0;line-height:1;transition:transform .08s,background .12s}
.mround:active,.mround.held{transform:scale(.92);background:rgba(79,209,197,.55)}
.mround span{font-size:24px}.mround small{font-size:9.5px;font-weight:700;letter-spacing:.08em;margin-top:2px;opacity:.85}
.mround.lg{width:92px;height:92px;right:calc(22px + var(--sr));bottom:calc(20px + var(--sb));background:rgba(79,209,197,.38);border-color:#8fe9df}
.mround.lg span{font-size:36px}
.mround.md{width:64px;height:64px}
#bUse{right:calc(128px + var(--sr));bottom:calc(30px + var(--sb))}
#bJump{right:calc(40px + var(--sr));bottom:calc(122px + var(--sb))}
#bTool{right:calc(126px + var(--sr));bottom:calc(104px + var(--sb));width:54px;height:54px}
#bTool span{font-size:20px}
.mround.sm2{width:46px;height:46px;right:calc(206px + var(--sr));bottom:calc(30px + var(--sb))}
.mround.sm2 span{font-size:20px}
.mround.sm2.on{background:rgba(255,207,92,.6);border-color:#ffe08a}
#bUse span{font-size:22px;font-weight:700}
#bUse.hot{background:rgba(255,207,92,.7);border-color:#ffe08a;box-shadow:0 0 18px rgba(255,207,92,.7);animation:mpulse 1s ease-in-out infinite}
@keyframes mpulse{50%{transform:scale(1.08)}}
#mtop{position:absolute;left:calc(10px + var(--sl));top:calc(78px + var(--st));display:flex;gap:8px;pointer-events:none}
#mtop .mround{position:relative}
#mBuildBtn{background:rgba(255,207,92,.55);border-color:#ffe08a}#mBuildBtn.hidden{display:none}#mBuildBtn.on{background:rgba(255,107,107,.6);border-color:#ffb3b3}
.mround.sm{width:40px;height:40px;font-size:18px;opacity:.85}
body.mhide #mbtns,body.mhide #mMenuBtn,body.mhide .mhint,body.mhide #mChatBtn,body.mhide #mWriteBtn,body.mhide #mclog,body.mhide #mkb{display:none !important}
body.mhide #mEyeBtn{opacity:.4}
body.mpanel #mbtns,body.mpanel .mhint,body.mpanel #mtop,body.mpanel #mclog,body.mpanel #mct,body.mpanel #mkb{display:none !important}

/* ---------------------------------------------------------------- the pop-up menu */
#mmenu{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(2,10,16,.5);pointer-events:auto}
.mm-card{padding:14px 16px;border-radius:20px;display:flex;flex-direction:column;gap:10px;max-width:92vw;max-height:94vh;overflow:auto}
.mm-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.mm-row button{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:76px;padding:9px 10px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.07);font:600 12.5px var(--font);color:var(--ink);pointer-events:auto}
.mm-row button span{font-size:24px}
.mm-row.small button{min-width:50px;padding:6px 7px;gap:1px}
.mm-row.small button span{font-size:21px}.mm-row.small button small{font-size:9.5px;font-weight:600;color:var(--ink-dim);letter-spacing:.02em}
#bChum{right:calc(262px + var(--sr));bottom:calc(30px + var(--sb));display:none}#bChum.show{display:flex}#bChum.held{background:rgba(255,207,92,.6);border-color:#ffe08a}
body.mhide #bChum,body.mtyping #bChum{display:none !important}
.mm-lbl{font-size:11px;letter-spacing:.14em;color:var(--ink-dim);text-align:center;font-weight:700}
.mm-close{align-self:center;padding:8px 26px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--ink);font:600 14px var(--font);pointer-events:auto}

/* the one-tap fullscreen prompt (only when the browser refused the automatic request) */
#tapstart{position:fixed;inset:0;z-index:330;display:flex;align-items:center;justify-content:center;background:rgba(4,14,22,.82);padding:20px}
.ts-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 26px;border-radius:22px;text-align:center;max-width:340px}
.ts-ico{font-size:40px;line-height:1}.ts-card b{font-size:22px;font-weight:600}.ts-card span{color:var(--ink-dim);font-size:14px}
.ts-card button{margin-top:10px;padding:14px 30px;border:0;border-radius:14px;background:linear-gradient(180deg,#8fe9df,#4fd1c5);color:#052a2a;font:700 17px var(--font);letter-spacing:.05em;box-shadow:0 6px 20px rgba(79,209,197,.35)}

.mc-build{margin:6px 0 0;font-size:11px;color:rgba(169,196,203,.55);cursor:pointer;grid-column:1}
#dbgbox{position:fixed;left:8px;right:8px;top:8px;z-index:400;margin:0;padding:10px 12px;border-radius:12px;background:rgba(2,10,16,.9);border:1px solid var(--line);color:#bfe9e4;font:11px/1.45 ui-monospace,Menlo,monospace;white-space:pre-wrap;max-height:70vh;overflow:auto;-webkit-user-select:text;user-select:text}


/* ---------------------------------------------------------------- iOS: no opacity animation, no see-through layers over the canvas (bug #25)
   Safari composites an element whose opacity is animated (or that sits at opacity 0 / below 1 over the WebGL canvas) on its own GPU layer, and a blurred backdrop
   re-renders under it every frame - that combination is a known way to crash iOS Safari's GPU process. So on iOS controls appear and disappear instantly (visibility / display),
   nothing animates its opacity, the full-screen overlays are removed when they are done instead of being left at opacity 0, and the buttons have no backdrop blur. */
body.ios .mstick{opacity:1;transition:none;visibility:hidden}
body.ios .mstick.on{visibility:visible}
body.ios .mhint{opacity:1;transition:none}
body.ios .mhint.off{visibility:hidden}
body.ios .mround{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(9,28,42,.78);transition:none}
body.ios .mround.lg{background:rgba(32,110,104,.82)}
body.ios .mround:active,body.ios .mround.held{background:rgba(79,209,197,.8)}
body.ios .mround.sm,body.ios .mround small,body.ios.mhide #mEyeBtn{opacity:1}
body.ios #bUse.hot{animation:none}
body.ios #mchoose,body.ios #boot{transition:none}
body.ios #fade{transition:none;opacity:1;display:none}
body.ios #mchoose.gone,body.ios #boot.gone{display:none}
body.ios .mm-card{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(9,28,42,.94)}
body.ios .mc-alt{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(9,28,42,.9)}

/* ---- iOS, round 2: the Safari crash is a known one - an element with an opacity rule inside a parent that runs a CSS @keyframes animation (iOS 15.x "A problem repeatedly occurred").
   The game has plenty of both (panels pop in with keyframes and hold half-transparent children, the toasts, banners, name labels, hunger bar, logos...), so on iOS NOTHING animates:
   no keyframes, no transitions, no backdrop blur. Things that relied on an animation to show or hide are handled below (and in ui.js / remote.js, which check window.__IOS). */
body.ios *,body.ios *::before,body.ios *::after{animation:none !important;transition:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
body.ios #regionBanner.on{opacity:1}
body.ios #cavePop .cl2{opacity:1}
body.ios #photoPop .dev{display:none}


/* the phone login: Log in / Register tabs, e-mail, Male / Female, shirt colour (register only) */
.ml-tabs{display:flex;gap:6px}.ml-tabs button{flex:1;padding:9px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;font:700 15px var(--font)}.ml-tabs button.on{background:rgba(79,209,197,.25);border-color:var(--teal)}
#mlogin .ml-reg{display:none}#mlogin.reg .ml-reg{display:block}#mlogin.reg .ml-gender,#mlogin.reg .ml-sw{display:flex}
.ml-gender{gap:8px}.ml-gender button{flex:1;padding:11px;border-radius:13px;border:2px solid var(--line);background:rgba(0,0,0,.3);color:#fff;font:700 16px var(--font)}.ml-gender button.on{border-color:var(--teal);background:rgba(79,209,197,.22)}
.ml-sw{gap:9px;flex-wrap:wrap;justify-content:center}.ml-sw i{width:30px;height:30px;border-radius:50%;border:3px solid transparent;display:block}.ml-sw i.on{border-color:#fff}
#mlogin.reg .ml-card{max-height:none;align-items:flex-start}
@media (max-height:420px){#mlogin .ml-form input{padding:8px 13px;font-size:16px}.ml-tabs button{padding:6px;font-size:14px}.ml-gender button{padding:7px;font-size:15px}.ml-sw i{width:26px;height:26px}#mlogin .ml-go{padding:10px}#mlogin .ml-form{gap:6px}#mlogin .ml-err{min-height:0}}

/* "Forgot your password?" under the login button (hidden in the Register tab) */
#mlogin .ml-forgot{display:block;text-align:center;font-size:14px;color:#8fe9df;text-decoration:none;padding:4px 0}
#mlogin.reg .ml-forgot{display:none}


/* ---------------------------------------------------------------- chat: toasts, the full log, the game's own small keyboard (chat.js) */
#mctl{--kbh:0px}
.mbadge{position:absolute;right:-5px;top:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#ff6b6b;color:#fff;font:700 11px/17px var(--font);text-align:center;font-style:normal;pointer-events:none}
.mbadge.wh{background:#b06cff}
#mtop .mround.on{background:rgba(79,209,197,.55);border-color:#8fe9df}
/* the toasts: bottom left, ten seconds each, never take a touch */
#mct{position:absolute;left:calc(12px + var(--sl));bottom:calc(var(--kbh) + 12px + var(--sb));width:min(46vw,380px);display:flex;flex-direction:column;gap:4px;pointer-events:none}
.mct{width:fit-content;max-width:100%;padding:5px 10px;border-radius:12px;background:rgba(6,20,30,.7);color:#fff;font:500 13px/1.3 var(--font);overflow-wrap:anywhere;text-shadow:0 1px 2px #000;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mct b{font-weight:600}
.mct.whisper,.mcl.whisper{background:rgba(70,30,110,.82);border-left:3px solid #c890ff;color:#f0d4ff}
.mct.emote{color:#ffe9b0}
.mct.mine{opacity:.8}
.mct.dim{opacity:.5}
.mwh{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#c890ff;margin-right:2px}
/* the full log */
#mclog{position:absolute;left:calc(10px + var(--sl));bottom:calc(var(--kbh) + 10px + var(--sb));width:min(56vw,470px);max-height:max(92px,calc(100vh - var(--kbh) - 140px - var(--sb)));display:flex;flex-direction:column;border-radius:16px;background:rgba(7,24,38,.92);border:1px solid var(--line);box-shadow:0 8px 28px rgba(0,0,0,.45);pointer-events:auto}
.mcl-head{flex:none;display:flex;align-items:center;gap:8px;padding:5px 7px 5px 12px;border-bottom:1px solid var(--line);font:600 13px var(--font);color:#fff}
.mcl-head .sp{flex:1}.mcl-on{color:var(--teal);font-weight:600;font-size:12px}
#mctl .mcl-btn{pointer-events:auto;padding:5px 11px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.1);font:600 12.5px var(--font);color:#fff}
.mcl-list{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding:6px 10px 8px;display:flex;flex-direction:column;gap:3px;font:500 13.5px/1.35 var(--font);color:#fff}
.mcl{overflow-wrap:anywhere;padding:1px 4px;border-radius:7px}
.mcl .ts{font-style:normal;font-size:10.5px;color:var(--ink-dim);margin-right:6px;opacity:.8}
.mcl .who{font-weight:600;padding:2px 1px;border-bottom:1px dotted rgba(255,255,255,.4)}
.mcl.sys{color:#ffe08a}.mcl.ann2{color:#e6c8ff}.mcl.emote{color:#ffe9b0}
.mcl.old{opacity:.7}
/* the keyboard: a docked strip, a-z + space, nothing resizes when it opens */
#mkb{--kh:clamp(25px,7vh,36px);position:absolute;left:calc(var(--sl) + 8px);right:calc(var(--sr) + 8px);margin:0 auto;max-width:600px;bottom:calc(6px + var(--sb));padding:6px;border-radius:16px;background:rgba(7,24,38,.95);border:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.5);flex-direction:column;gap:4px;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}
.mk-bar{display:flex;align-items:center;gap:6px;height:30px}
#mctl .mk-chip{flex:none;max-width:42%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:4px 10px;border-radius:99px;font:600 12px var(--font);background:rgba(176,108,255,.3);border:1px solid #c890ff;color:#f0d4ff}
#mctl .mk-rep{flex:none;width:32px;height:28px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.1);font-size:15px;padding:0}
#mctl .mk-chip.sug{background:rgba(255,255,255,.1);border-color:var(--line);color:#d8e8f0}
.mk-text{flex:1;min-width:0;height:100%;display:flex;justify-content:flex-end;align-items:center;overflow:hidden;padding:0 10px;border-radius:10px;background:rgba(0,0,0,.4);border:1px solid var(--teal);font:500 15px var(--font);color:#fff;white-space:pre}
.mk-text.ph{justify-content:flex-start}
.mk-val{flex:none}.mk-val.ph{color:var(--ink-dim);white-space:nowrap}
.mk-caret{flex:none;width:2px;height:18px;margin-left:1px;background:var(--teal)}.mk-caret.off{visibility:hidden}
.mk-count{flex:none;min-width:22px;text-align:right;font:600 11px var(--font);color:var(--ink-dim)}
.mk-row{display:flex;gap:4px}
#mctl .mk{flex:1 1 0;min-width:0;height:var(--kh);border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.11);color:#fff;font:600 17px var(--font);padding:0;touch-action:none}
#mctl .mk.dn{background:rgba(79,209,197,.55)}
#mctl .mk.fn{flex:1.5;background:rgba(255,255,255,.2);font-size:18px}
#mctl .mk.fn[data-k=close]{font-size:22px}
#mctl .mk.fn.on{background:rgba(255,207,92,.45);border-color:#ffe08a}#mctl .mk.fn.caps{background:rgba(255,207,92,.8);color:#3a2a0a}
#mctl .mk.space{flex:4;font-size:13px;font-weight:500;color:var(--ink-dim)}
#mctl .mk.fn.md{flex:1.6;font-size:13px}
.mk-rows{display:flex;flex-direction:column;gap:4px}
#mctl .mk.send{flex:2;background:linear-gradient(180deg,#8fe9df,#4fd1c5);color:#052a2a;border-color:#8fe9df}
#mctl .mk.send.off{opacity:.45}
.mk-gap{flex:.5 1 0}
#mkpop{position:absolute;width:42px;height:46px;border-radius:10px;background:#f3ead2;color:#102838;font:700 26px/46px var(--font);text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.5);pointer-events:none}
/* the game's own hints / buttons make room while the keyboard is up */
body.mtyping .mcl-head{display:none}
body.mtyping #mbtns,body.mtyping .mhint,body.mtyping #hint,body.mtyping #meter,body.mtyping #catch,body.mtyping #reel{display:none !important}

/* the tutorial hint (v1.39.0): a little wider than the other toasts, still small; the blinking buttons are classes switched by a timer (no animation, see the rules above) */
body.mobile #toasts>.toast.tut{max-width:min(48vw,400px);font-size:12px;line-height:1.35;padding:6px 10px 7px}
body.mobile #toasts>.toast.tut .tt-top b{font-size:13px}
body.mobile #toasts>.toast.tut .tt-sub{display:none}
/* while the tutorial is on the pin arrow sits at the bottom middle: the hint toasts are at the top and would cover it (phone only) */
body.mobile.tut-on #pinHud{top:auto;bottom:calc(10px + var(--sb))}
body.mobile.tut-on.pin-on #toasts{top:calc(8px + var(--st))}
#bStand{right:calc(318px + var(--sr));bottom:calc(30px + var(--sb));display:none}#bStand.show{display:flex}
body.mhide #bStand,body.mtyping #bStand{display:none !important}

#bBait{right:calc(318px + var(--sr));bottom:calc(30px + var(--sb));display:none}#bBait.show{display:flex}
body.mhide #bBait,body.mtyping #bBait{display:none !important}
#bStand{right:calc(374px + var(--sr))}
/* the chips of your wolf and cat: bottom left, side by side (the chat toasts move up a little while they are there) */
body.mobile #petHud{left:calc(12px + var(--sl));right:auto;bottom:calc(10px + var(--sb));flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;max-width:56vw;gap:6px;z-index:25}
body.mobile #petHud span{padding:3px 9px;font-size:12px;white-space:nowrap}
body.mobile.has-petchips #mct{bottom:calc(var(--kbh) + 52px + var(--sb))}
body.mhide #petHud,body.mtyping #petHud,body.mpanel #petHud{display:none !important}
body.mobile #fps{left:50%;top:calc(6px + var(--st));transform:translateX(-50%);z-index:25}