/* Layout: one phone-height screen; gold-lit sky with pulse arrows, two-way candles and a sea planet circled by whales; glass cards on top; meeting-room camera opens full screen */
:root{
  --bg:#06060A; --card:rgba(16,16,22,.42); --line:rgba(217,169,63,.38);
  --fg:#F2EEE6; --muted:#ABA695; --gold:#E0B04A; --sea:#3FA7D9; --up:#3FBF7F; --down:#E5534B; --rec:#E5534B; --tg:#2AABEE;
  --brand:'Cinzel',Georgia,serif; --body:'IBM Plex Sans Arabic',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);overflow:hidden}
#sky{position:fixed;inset:0;width:100%;height:100%;display:block}
.wrap{position:relative;z-index:1;height:100%;box-sizing:border-box;max-width:440px;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 14px;
  display:flex;flex-direction:column;gap:10px}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.logo{display:flex;align-items:center;gap:8px;direction:ltr}
.logo svg{width:84px;height:36px;filter:drop-shadow(0 0 8px rgba(224,176,74,.55))}
.brand{font-family:var(--brand);font-weight:900;font-size:19px;letter-spacing:.06em;color:var(--gold);text-shadow:0 0 18px rgba(224,176,74,.55);white-space:nowrap}
.live{display:flex;align-items:center;gap:7px;font-size:12px;color:#8FE6B4;padding:6px 10px;border-radius:999px;background:rgba(16,38,26,.7);border:1px solid rgba(63,191,127,.35);white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--up);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(63,191,127,.6)}50%{box-shadow:0 0 0 7px rgba(63,191,127,0)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px 16px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.price{font-family:var(--mono);font-size:32px;font-weight:600;direction:ltr;text-align:right;font-variant-numeric:tabular-nums}
.chg{font-family:var(--mono);color:var(--up);direction:ltr;text-align:right;font-variant-numeric:tabular-nums}
.lbl{font-size:13px;color:var(--muted)}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tag{padding:4px 12px;border-radius:8px;background:var(--up);color:#06210F;font-weight:700;font-size:14px}
.pips{font-family:var(--mono);color:var(--up);direction:ltr}

.reel{padding:0;overflow:hidden}
.reelhead{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 0}
.rec{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#FFB3AE;letter-spacing:.06em}
.rec i{width:8px;height:8px;border-radius:50%;background:var(--rec);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.track{display:flex;direction:ltr;transition:transform .9s cubic-bezier(.65,0,.35,1)}
.slide{flex:0 0 100%;box-sizing:border-box;padding:6px 16px 10px;direction:rtl;display:flex;align-items:center;gap:14px}
.slide svg{width:76px;height:76px;flex-shrink:0}
.who{display:flex;flex-direction:column;gap:3px;min-width:0}
.who b{font-size:17px;color:var(--gold)}
.who span{font-size:13px;color:var(--muted);line-height:1.5}
.dots{display:flex;gap:5px;justify-content:center;padding-bottom:9px}
.dots span{width:5px;height:5px;border-radius:50%;background:rgba(242,238,230,.25);transition:all .4s}
.dots span.on{width:16px;border-radius:3px;background:var(--gold)}

.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;padding:6px 2px;border-radius:16px;border:1px solid var(--line);background:var(--card);color:var(--fg);font-family:var(--body);font-size:12px;font-weight:700;cursor:pointer;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.tab:focus-visible,.tg:focus-visible,.close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tab.cam{border-color:rgba(229,83,75,.5)}
.tab.chatT{border-color:rgba(224,176,74,.7);color:var(--gold)}
.tab.cam i{width:8px;height:8px;border-radius:50%;background:var(--rec);animation:blink 1s steps(2) infinite}

.tg{margin-top:auto;display:flex;align-items:center;gap:12px;min-height:50px;padding:8px 14px;border-radius:16px;text-decoration:none;color:var(--fg);background:rgba(8,20,32,.55);border:1px solid rgba(42,171,238,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.tg:hover{background:rgba(8,28,44,.7)}
.tg>span{display:flex;flex-direction:column;gap:1px}
.tg b{font-family:var(--brand);font-size:15px;letter-spacing:.05em;color:var(--fg)}
.tg small{font-size:12px;color:#8FD3F7}
.tg .go{margin-inline-start:auto;color:#8FD3F7}
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:4px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.modes button{height:40px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-family:var(--body);font-size:14px;cursor:pointer}
.modes button[aria-pressed="true"]{background:var(--gold);color:#1A1406;font-weight:700}
.modes button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* meeting room camera */
#room{position:fixed;inset:0;z-index:5;background:#000}
#roomCv{position:absolute;inset:0;width:100%;height:100%;filter:saturate(.6) contrast(1.12) brightness(.95)}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.75) 100%)}
.hud{position:absolute;font-family:var(--mono);color:#EDEDED;font-size:13px;text-shadow:0 0 3px #000,0 0 6px #000;letter-spacing:.04em;pointer-events:none}
.hud.tl{top:calc(14px + env(safe-area-inset-top,0px));left:max(16px,env(safe-area-inset-left,0px))}
.hud.tr{top:calc(14px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:6px;color:#FF6B63;font-weight:600}
.hud.tr i{width:10px;height:10px;border-radius:50%;background:#FF3B30;animation:blink 1s steps(2) infinite}
.hud.bl{bottom:calc(16px + env(safe-area-inset-bottom,0px));left:max(16px,env(safe-area-inset-left,0px))}
.hud.br{bottom:calc(16px + env(safe-area-inset-bottom,0px));right:max(16px,env(safe-area-inset-right,0px));opacity:.8}
.corner{position:absolute;width:22px;height:22px;border-color:rgba(255,255,255,.7);border-style:solid;pointer-events:none}
.c1{top:calc(44px + env(safe-area-inset-top,0px));left:max(16px,env(safe-area-inset-left,0px));border-width:2px 0 0 2px}
.c2{top:calc(44px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));border-width:2px 2px 0 0}
.c3{bottom:calc(46px + env(safe-area-inset-bottom,0px));left:max(16px,env(safe-area-inset-left,0px));border-width:0 0 2px 2px}
.c4{bottom:calc(46px + env(safe-area-inset-bottom,0px));right:max(16px,env(safe-area-inset-right,0px));border-width:0 2px 2px 0}
.close{position:absolute;bottom:calc(52px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.55);color:#fff;font-family:var(--body);font-size:13px;cursor:pointer}
/* mascot motions */
.tilt{animation:tilt 4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes tilt{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.blink{animation:blinkE 4s infinite;transform-box:fill-box;transform-origin:center}
@keyframes blinkE{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
.wink{animation:wink 3.5s infinite;transform-box:fill-box;transform-origin:center}
@keyframes wink{0%,60%,75%,100%{transform:scaleY(1)}65%,70%{transform:scaleY(.1)}}
.swing{animation:swingT 1.6s ease-in-out infinite}
@keyframes swingT{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
.fan{animation:fanT 4s ease-in-out infinite}
@keyframes fanT{0%,15%{transform:scale(.45)}40%,80%{transform:scale(1)}100%{transform:scale(.45)}}
.bob{animation:bobT 2.4s ease-in-out infinite}
@keyframes bobT{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
.hue{animation:hueT 6s linear infinite}.hue2{animation:hueT 5s linear infinite}
@keyframes hueT{to{filter:hue-rotate(360deg)}}
.scanx{animation:scanX 2.6s ease-in-out infinite}
@keyframes scanX{0%,100%{transform:translate(0,0)}30%{transform:translate(2.4px,-2px)}60%{transform:translate(-2.4px,1.5px)}}
.scany{animation:scanY 1.9s ease-in-out infinite}
@keyframes scanY{0%,100%{transform:translate(0,0)}50%{transform:translate(-1.6px,2px)}}
.rock{animation:rockT 1.6s ease-in-out infinite}
@keyframes rockT{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.pop{animation:popT 2.4s ease-out infinite}
@keyframes popT{0%{opacity:0;transform:translateY(6px)}25%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
.wave{animation:waveT 1.4s ease-in-out infinite alternate}
@keyframes waveT{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}
.rise{animation:riseT 2s ease-in infinite}
@keyframes riseT{from{transform:translateY(0);opacity:1}to{transform:translateY(-16px);opacity:0}}
.scan2{animation:scan2 3.4s ease-in-out infinite}
@keyframes scan2{0%,100%{transform:translate(0,0)}25%{transform:translate(4px,-3px)}50%{transform:translate(-6px,2px)}75%{transform:translate(2px,4px)}}
.track{}
svg .track{animation:trackE 3.6s ease-in-out infinite}
@keyframes trackE{0%{transform:translate(-1px,1px)}25%{transform:translate(1.6px,-1.6px)}50%{transform:translate(-1.4px,-1px)}70%,80%{transform:translate(1.6px,-2px)}100%{transform:translate(-1px,1px)}}
.flyc{animation:flyT 3.6s ease-in-out infinite}
@keyframes flyT{0%{transform:translate(28px,30px);opacity:1}25%{transform:translate(66px,22px)}50%{transform:translate(40px,18px)}70%{transform:translate(72px,30px);opacity:1}74%,96%{transform:translate(72px,30px);opacity:0}100%{transform:translate(28px,30px);opacity:0}}
.tongue{animation:tongueT 3.6s infinite}
@keyframes tongueT{0%,69%{transform:scale(0)}72%{transform:scale(1)}76%,100%{transform:scale(0)}}
.paint{stroke-dasharray:40;animation:paintT 3s linear infinite}
@keyframes paintT{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}
.brush{animation:brushT 1s ease-in-out infinite alternate}
@keyframes brushT{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
.hop{animation:hopT 1.2s cubic-bezier(.3,0,.4,1) infinite}
@keyframes hopT{0%,100%{transform:translateY(0)}40%{transform:translateY(-7px)}60%{transform:translateY(0)}}
.shutL{animation:shutL 5s ease-in-out infinite}.shutR{animation:shutR 5s ease-in-out infinite}
@keyframes shutL{0%,8%,88%,100%{transform:scaleX(1)}18%,78%{transform:scaleX(.12)}}
@keyframes shutR{0%,8%,88%,100%{transform:scaleX(1)}18%,78%{transform:scaleX(.12)}}
.peek{animation:peekT 5s ease-in-out infinite}
@keyframes peekT{0%,20%,76%,100%{transform:translateY(34px)}32%,64%{transform:translateY(0)}}
.lookx{animation:lookX 5s ease-in-out infinite}
@keyframes lookX{0%,36%{transform:translateX(0)}42%,48%{transform:translateX(-2px)}54%,60%{transform:translateX(2px)}}
.sway{animation:swayT 2.8s ease-in-out infinite}
@keyframes swayT{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.flick{animation:flickT 1.4s infinite}
@keyframes flickT{0%,60%,100%{transform:scaleY(0)}70%,85%{transform:scaleY(1)}}
.puff{animation:puffT 1.8s infinite}
@keyframes puffT{0%,40%{transform:scale(1)}55%,85%{transform:scale(1.35)}100%{transform:scale(1)}}
.coin{animation:coinT 1.8s ease-in infinite}
@keyframes coinT{0%{transform:translate(88px,30px);opacity:0}15%{opacity:1}50%{transform:translate(52px,58px);opacity:1}55%,100%{transform:translate(52px,58px);opacity:0}}
.drip{animation:dripT 1.6s ease-in infinite}
@keyframes dripT{from{transform:translateY(0);opacity:1}to{transform:translateY(12px);opacity:0}}
.flap{animation:flapT 1.8s ease-in-out infinite;transform-box:view-box;transform-origin:46px 28px}
@keyframes flapT{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}


/* team chat */
#chat{position:fixed;inset:0;z-index:7;background:linear-gradient(rgba(6,6,10,.35),rgba(6,6,10,.62));display:flex;flex-direction:column}
.chead{background:rgba(8,8,12,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;gap:10px;padding-block:12px 10px;border-bottom:1px solid var(--line);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-top:calc(12px + env(safe-area-inset-top,0px))}
.back{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ctitle{flex:1;min-width:0;display:flex;flex-direction:column}
.ctitle b{font-size:16px}.ctitle small{font-size:12px;color:var(--muted)}
.team5{display:flex;direction:ltr}.team5 svg{width:26px;height:26px;margin-left:-8px;border-radius:50%}
.cbar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding-block:8px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#cpts{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.dotsP{display:flex;gap:3px}.dotsP i{width:8px;height:8px;border-radius:50%;background:rgba(242,238,230,.15)}.dotsP i.on{background:var(--gold)}
.vip{padding:2px 8px;border-radius:6px;background:linear-gradient(#F6DA8E,#B07E22);color:#1A1406;font-weight:700;font-size:11px}.vip.own{background:#2A2A33;color:var(--gold);border:1px solid var(--gold)}
.roles{display:flex;gap:4px;padding:3px;border-radius:10px;border:1px solid var(--line)}
.roles button{height:30px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-family:var(--body);font-size:12px;cursor:pointer}
.roles button[aria-pressed="true"]{background:var(--gold);color:#1A1406;font-weight:700}
#clog{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding-block:12px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.msg{display:flex;gap:8px;max-width:88%}
.msg.me{align-self:flex-end}.msg.them{align-self:flex-start;flex-direction:row}
.msg .av svg,.tav svg{width:36px;height:36px;flex-shrink:0}
.bodyM{display:flex;flex-direction:column;gap:4px;min-width:0}
.nm{font-size:12px;color:var(--gold)}
.bub{padding:10px 13px;border-radius:16px;font-size:14px;line-height:1.7}
.me .bub{background:linear-gradient(#F0C766,#C8952E);color:#1A1406;border-radius:16px 16px 16px 4px}
.them .bub{background:rgba(18,18,26,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(224,176,74,.25);border-radius:16px 16px 4px 16px}
.play{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:999px;border:1px solid rgba(224,176,74,.35);background:rgba(224,176,74,.08);color:var(--gold);cursor:pointer;align-self:flex-start}
.dur{font-family:var(--mono);font-size:11px;color:var(--muted)}
.wave{display:flex;align-items:center;gap:2px;height:18px}.wave i{width:2px;border-radius:2px;background:currentColor;opacity:.7}
.playing .wave i,.rec~* .wave i{animation:wv .6s ease-in-out infinite alternate}
@keyframes wv{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.vmsg{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px}
.tr{display:block;font-size:12px;opacity:.75;margin-top:4px}
.tcard{margin-top:8px;padding:10px;border-radius:12px;background:#0B0B10;border:1px solid rgba(63,191,127,.35)}
.trow{display:flex;align-items:center;gap:8px}.trow b{flex:1;font-size:13px}
.tbuy{padding:2px 8px;border-radius:6px;background:var(--up);color:#06210F;font-weight:700;font-size:12px}
.tp{font-family:var(--mono);color:var(--up);direction:ltr}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px;font-size:11px;color:var(--muted)}
.tgrid span{display:flex;flex-direction:column}.tgrid span:last-child{grid-column:1/-1}
.tgrid b{font-family:var(--mono);font-size:13px;color:var(--fg);direction:ltr;text-align:right}.tgrid b.r{color:var(--down)}
#ctyping{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);align-self:flex-start}
.tdots{display:flex;gap:3px}.tdots i{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:td 1s infinite}
.tdots i:nth-child(2){animation-delay:.15s}.tdots i:nth-child(3){animation-delay:.3s}
@keyframes td{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.chips{display:flex;gap:6px;overflow-x:auto;padding-block:6px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.chip{flex-shrink:0;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:#111117;color:var(--fg);font-family:var(--body);font-size:12px;cursor:pointer}
#ccomp,#cout{display:flex;align-items:center;gap:8px;padding-block:8px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:rgba(10,10,14,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#cout{flex-direction:column;align-items:stretch;text-align:center;font-size:13px;color:var(--muted);gap:4px}
#cout b{color:var(--fg)}
#cmsg{flex:1;min-width:0;height:46px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#15151C;color:var(--fg);font-family:var(--body);font-size:14px}
#cmsg:focus-visible,.round:focus-visible,.chip:focus-visible,.back:focus-visible,.play:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.round{width:46px;height:46px;flex-shrink:0;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
#cmic{background:#1E1E26;color:var(--gold);border:1px solid var(--line)}
#cmic.rec{background:#E5534B;color:#fff;animation:recp 1s infinite}
@keyframes recp{0%,100%{box-shadow:0 0 0 0 rgba(229,83,75,.6)}50%{box-shadow:0 0 0 10px rgba(229,83,75,0)}}
#csend{background:linear-gradient(#F0C766,#C8952E);color:#1A1406}
#crec{display:flex;align-items:center;gap:8px;justify-content:center;font-size:13px;color:#FF8A84;padding-bottom:4px}
.auto{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.auto input{accent-color:#E0B04A;width:16px;height:16px}


/* chat mascot stage */
body.chatOpen .wrap{visibility:hidden}
.stage{position:relative;flex-shrink:0;height:150px;margin-inline:max(16px,env(safe-area-inset-left,0px));border-radius:18px;border:1px solid rgba(224,176,74,.22);background:radial-gradient(ellipse at 50% 100%,rgba(224,176,74,.14),transparent 70%),rgba(8,8,12,.35);overflow:hidden}
.stage svg{position:absolute;inset:0;width:100%;height:100%}
.cap{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:1;max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:5px 12px;border-radius:999px;background:rgba(10,10,14,.8);border:1px solid var(--line);font-size:12px;color:var(--gold)}
.stage [class^="p"]{display:none}
.stage[data-s="idle"] .pIdle,.stage[data-s="write"] .pWrite,.stage[data-s="listen"] .pListen,.stage[data-s="work"] .pWork,.stage[data-s="done"] .pDone{display:inline}
.eyesC{display:none}.headListen .eyesO,.headWork .eyesO{display:none}
.headListen .eyesC,.headWork .eyesC{display:inline}
.walker{animation:walkX 14s ease-in-out infinite}
@keyframes walkX{0%{transform:translateX(70px)}28%,42%{transform:translateX(280px)}70%,100%{transform:translateX(70px)}}
.flipper{animation:flipX 14s steps(1) infinite}
@keyframes flipX{0%{transform:scaleX(1)}42%{transform:scaleX(-1)}70%{transform:scaleX(1)}}
.hopper{animation:hopK 14s ease-in-out infinite}
@keyframes hopK{0%,72%,100%{transform:translateY(0)}75%{transform:translateY(-16px)}78%{transform:translateY(0)}81%{transform:translateY(-12px)}84%{transform:translateY(0)}}
.legL{animation:legA .45s ease-in-out infinite alternate;transform-origin:-5px -30px}
.legR{animation:legA .45s ease-in-out infinite alternate-reverse;transform-origin:5px -30px}
@keyframes legA{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.armSwing{animation:legA .45s ease-in-out infinite alternate;transform-origin:-12px -54px}
.armPhone{animation:phn 1.6s ease-in-out infinite;transform-origin:12px -54px}
@keyframes phn{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
.glowS{animation:glowS 1.2s infinite alternate}@keyframes glowS{from{opacity:.5}to{opacity:1}}
.tie{animation:tieS 1s ease-in-out infinite alternate;transform-origin:0 -58px}@keyframes tieS{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
.think{opacity:0;animation:thinkK 14s infinite}
@keyframes thinkK{0%,30%{opacity:0}33%,41%{opacity:1}44%,88%{opacity:0}90%,98%{opacity:1}100%{opacity:0}}
.armWrite{animation:wrt .35s ease-in-out infinite alternate;transform-origin:10px -50px}
@keyframes wrt{from{transform:rotate(-6deg) translateX(-1px)}to{transform:rotate(4deg) translateX(2px)}}
.ink1,.ink2,.ink3,.ink4{stroke-dasharray:14;animation:ink 3.2s linear infinite}
.ink2{animation-delay:.8s}.ink3{animation-delay:1.6s}.ink4{animation-delay:2.4s}
@keyframes ink{0%{stroke-dashoffset:14}25%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:14}}
.lean{animation:lean 2s ease-in-out infinite;transform-origin:0 -30px}
@keyframes lean{0%,100%{transform:rotate(8deg)}50%{transform:rotate(14deg)}}
.bigEar{animation:earP 1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes earP{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.sw1,.sw2,.sw3{animation:swv 1.2s ease-out infinite}.sw2{animation-delay:.2s}.sw3{animation-delay:.4s}
@keyframes swv{0%{opacity:0;transform:translateX(10px)}40%{opacity:1}100%{opacity:0;transform:translateX(-30px)}}
.typeA{animation:tpA .16s infinite alternate;transform-origin:-2px -66px}.typeB{animation:tpA .16s infinite alternate-reverse;transform-origin:-10px -64px}
@keyframes tpA{from{transform:translateY(0)}to{transform:translateY(2px)}}
.loadBar{transform-box:fill-box;transform-origin:left;animation:load 1.4s ease-in-out infinite}
@keyframes load{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.code1,.code2,.code3{stroke-dasharray:30;animation:ink 1.2s linear infinite}.code2{animation-delay:.3s}.code3{animation-delay:.6s}
.steam{animation:swv 1.6s infinite}
.sweat{animation:swt 1.2s infinite}@keyframes swt{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
.jump{animation:jmp .7s ease-out infinite}@keyframes jmp{0%,100%{transform:translateY(0)}45%{transform:translateY(-18px)}}
.spark{animation:sprk .7s infinite alternate}@keyframes sprk{from{opacity:.2}to{opacity:1}}


/* the hideout */
.logo{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.logo.holding svg{animation:charge 1.5s linear forwards}
@keyframes charge{to{filter:drop-shadow(0 0 16px #E5534B) brightness(1.4)}}
#vault{position:fixed;inset:0;z-index:20;overflow:hidden;background:#000}
.door{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;transition:transform .8s cubic-bezier(.7,0,.3,1);
  background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.06),transparent 60%),linear-gradient(180deg,#0B0B0C,#050505 60%,#0B0B0C);
  box-shadow:inset 0 0 0 10px #070707,inset 0 0 0 11px #B8892E,inset 0 0 0 22px #070707,inset 0 0 0 23px rgba(224,176,74,.45),inset 0 0 80px rgba(0,0,0,.9)}
.door::before{content:"";position:absolute;inset:34px;border:1px solid rgba(224,176,74,.35);
  background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(224,176,74,.10) 22px 23px),repeating-linear-gradient(45deg,transparent 0 22px,rgba(224,176,74,.06) 22px 23px)}
.door::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(246,218,142,.18),transparent);animation:sheen 4.5s ease-in-out infinite}
.dr::after{animation-delay:.25s}
@keyframes sheen{0%,55%{left:-60%}100%{left:130%}}
.dl{left:0}.dr{right:0}
.dl::before{right:20px}.dr::before{left:20px}
.bolt{position:absolute;top:50%;width:34px;height:14px;margin-top:-7px;border-radius:4px;background:linear-gradient(#F6DA8E,#B07E22 60%,#7A5410);box-shadow:0 0 12px rgba(224,176,74,.6)}
.dl .bolt{right:0}.dr .bolt{left:0}
.door .bolt::before,.door .bolt::after{content:"";position:absolute;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F6DA8E,#8A6214)}
.door .bolt::before{top:-120px}.door .bolt::after{top:120px}
#vault.open .dl{transform:translateX(-102%)}#vault.open .dr{transform:translateX(102%)}
.wheel{position:absolute;left:50%;top:13%;width:150px;height:150px;margin-left:-75px;border-radius:50%;z-index:1;
  background:radial-gradient(circle,#0A0A0A 52%,transparent 53%),conic-gradient(from 0deg,#7A5410,#F6DA8E,#B07E22,#F6DA8E,#7A5410,#F6DA8E,#B07E22,#F6DA8E,#7A5410);
  box-shadow:0 0 0 3px #050505,0 0 0 5px rgba(224,176,74,.5),0 0 40px rgba(224,176,74,.35);transition:opacity .4s,transform .8s;animation:wheelT 9s ease-in-out infinite}
@keyframes wheelT{0%,100%{transform:rotate(0)}50%{transform:rotate(25deg)}}
.wheel i{position:absolute;left:50%;top:50%;width:122px;height:7px;margin:-3.5px 0 0 -61px;border-radius:4px;background:linear-gradient(#F6DA8E,#B07E22 60%,#7A5410)}
.wheel i:nth-child(2){transform:rotate(60deg)}.wheel i:nth-child(3){transform:rotate(120deg)}
.wheel b{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#F6DA8E,#B07E22 55%,#5A3E0C);color:#1A1406;font-family:var(--brand);font-weight:900;font-size:16px;box-shadow:0 0 0 2px #050505,inset 0 -3px 6px rgba(0,0,0,.4)}
#vault.open .wheel{opacity:0;transform:rotate(200deg) scale(.8)}
.pin{position:absolute;left:50%;top:39%;transform:translateX(-50%);z-index:1;width:min(300px,86%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 16px;border-radius:22px;
  background:linear-gradient(180deg,rgba(14,14,14,.94),rgba(4,4,4,.96));border:1px solid rgba(224,176,74,.75);box-shadow:0 0 0 4px rgba(0,0,0,.9),0 0 0 5px rgba(224,176,74,.25),0 20px 60px rgba(0,0,0,.8);transition:opacity .3s}
#vault.open .pin{opacity:0}
.pin.shake{animation:shk .4s}@keyframes shk{20%,60%{transform:translateX(calc(-50% - 8px))}40%,80%{transform:translateX(calc(-50% + 8px))}}
.pinT{font-family:var(--brand);font-weight:900;letter-spacing:.28em;font-size:17px;background:linear-gradient(#F6DA8E,#B07E22);-webkit-background-clip:text;background-clip:text;color:transparent}
.pinS{font-size:13px;color:#B8AE9E}
.pdots{display:flex;gap:12px;direction:ltr}.pdots i{width:12px;height:12px;transform:rotate(45deg);border:1.5px solid #E0B04A;transition:all .15s}.pdots i.on{background:linear-gradient(#F6DA8E,#B07E22);box-shadow:0 0 10px #E0B04A}
.pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;direction:ltr}
.pad button{height:50px;border-radius:14px;border:1px solid rgba(224,176,74,.45);background:linear-gradient(180deg,#141414,#070707);color:#F6DA8E;font-family:var(--brand);font-weight:700;font-size:20px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(246,218,142,.15)}
.pad button:active{background:linear-gradient(#B07E22,#7A5410);color:#0A0A0A}.pad button:focus-visible{outline:2px solid #E0B04A}
.pinH{font-size:11px;color:#7A7468;text-align:center}
#hq{position:fixed;inset:0;z-index:15;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% -10%,rgba(122,16,32,.55),transparent 60%),radial-gradient(ellipse at 100% 100%,rgba(224,176,74,.10),transparent 50%),#040304;color:var(--fg);overflow:hidden;animation:hqIn .6s ease-out}
#hq.closing{opacity:0;transition:opacity .5s}
@keyframes hqIn{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
.fog{position:absolute;inset:-20%;pointer-events:none;background:radial-gradient(circle at 30% 40%,rgba(160,30,50,.18),transparent 40%),radial-gradient(circle at 70% 70%,rgba(224,176,74,.08),transparent 35%);filter:blur(20px);animation:fogM 18s ease-in-out infinite alternate}
.f2{animation-duration:26s;animation-direction:alternate-reverse;opacity:.7}
@keyframes fogM{from{transform:translate(-4%,-3%)}to{transform:translate(5%,4%)}}
.hqgrid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(224,176,74,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(224,176,74,.05) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%)}
.hqh{position:relative;display:flex;align-items:center;gap:10px;padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-bottom:1px solid rgba(122,16,32,.6)}
.radar{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid rgba(229,83,75,.6);background:repeating-radial-gradient(circle,transparent 0 6px,rgba(229,83,75,.18) 6px 7px);overflow:hidden;flex-shrink:0}
.radar i{position:absolute;inset:0;background:conic-gradient(rgba(229,83,75,.7),transparent 25%);animation:spin 2.4s linear infinite;border-radius:50%}
.hqt{flex:1;min-width:0;display:flex;flex-direction:column}
.hqt b{font-family:var(--brand);font-weight:900;letter-spacing:.14em;color:#E0B04A;font-size:16px;text-shadow:0 0 12px rgba(229,83,75,.5)}
.hqt small,.alock small{font-size:11px;color:#9A8F80}
.alock{display:flex;flex-direction:column;align-items:center}.alock b{font-family:var(--mono);color:#FF8A84;font-size:14px}
.lockB{width:44px;height:44px;border-radius:12px;border:1px solid #7A1020;background:#1A0A0E;color:#FF8A84;display:flex;align-items:center;justify-content:center;cursor:pointer}
.hqtabs{position:relative;display:flex;gap:6px;overflow-x:auto;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.hqtabs button{flex-shrink:0;height:36px;padding:0 14px;border-radius:10px;border:1px solid rgba(224,176,74,.2);background:rgba(20,10,12,.7);color:#B8AE9E;font-family:var(--body);font-size:13px;cursor:pointer}
.hqtabs button[aria-selected="true"]{background:linear-gradient(#7A1020,#4A0A14);border-color:#E0B04A;color:#F6DA8E;font-weight:700}
.hqm{position:relative;flex:1;overflow-y:auto;padding-block:4px 20px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.hqm section{display:flex;flex-direction:column;gap:10px}
.hc{padding:12px 14px;border-radius:16px;background:rgba(14,8,10,.78);border:1px solid rgba(224,176,74,.18);display:flex;flex-direction:column;gap:8px}
.row2{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-direction:row}
.hc small{font-size:12px;color:#9A8F80}.hc>div{display:flex;flex-direction:column;gap:2px}
.hc>.row2{flex-direction:row}.hc>.kv{display:grid}.hc>.secret{display:block}
.ttl{color:#E0B04A!important;letter-spacing:.04em}
.okc{color:#7EE0A8}.g{color:var(--up)}.r{color:var(--down)!important}.mono{font-family:var(--mono);direction:ltr}
.btns{display:flex;flex-direction:row!important;gap:6px}
.hb{height:36px;padding:0 12px;border-radius:10px;border:1px solid rgba(224,176,74,.3);background:#140E0E;color:var(--fg);font-family:var(--body);font-size:12px;cursor:pointer;white-space:nowrap}
.hb.danger{border-color:#7A1020;color:#FF8A84}.hb.gold{background:linear-gradient(#F0C766,#C8952E);color:#1A1406;font-weight:700;border:0}.hb.wide{width:100%;height:46px;font-size:14px}
.tagB{padding:2px 8px;border-radius:6px;background:var(--up);color:#06210F;font-weight:700;font-size:12px}
.secret{position:relative;padding:8px 10px 8px 10px;border-radius:10px;border:1px dashed #7A1020;background:rgba(122,16,32,.15);font-size:12px;line-height:1.7;color:#F0D9C8}
.sl{display:inline-block;margin-inline-end:6px;padding:0 6px;border-radius:4px;background:#7A1020;color:#FFD5D2;font-size:10px;font-weight:700}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;font-size:11px;color:#9A8F80}.kv span{display:flex;flex-direction:column}.kv span:last-child{grid-column:1/-1}.kv b{font-size:13px;color:var(--fg);text-align:right}
.tg2{display:flex;justify-content:space-between;align-items:center;min-height:36px;cursor:pointer;font-size:14px}
.tg2 input{position:absolute;opacity:0;width:1px;height:1px}
.tg2 i{position:relative;width:44px;height:24px;border-radius:12px;background:#3A2A2A;transition:background .2s}
.tg2 i::after{content:"";position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#bbb;transition:transform .2s}
.tg2 input:checked+i{background:#7A1020}.tg2 input:checked+i::after{transform:translateX(-20px);background:#E0B04A}
.tg2 input:focus-visible+i{outline:2px solid #E0B04A;outline-offset:2px}
.rng{display:flex;flex-direction:column;gap:6px;font-size:14px}.rng span{display:flex;justify-content:space-between}.rng input{accent-color:#E0B04A}
.term{height:min(60vh,520px);overflow-y:auto;font-family:var(--mono),var(--body);font-size:12px;line-height:1.75;background:rgba(3,2,3,.9)}
.term .tm{color:#6E6A62}
.mrow{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;padding-block:6px;border-bottom:1px solid rgba(224,176,74,.1)}
.mrow .sp{flex:1}
.link{color:#F6DA8E;font-size:13px;word-break:break-all}
.drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;border-radius:16px;border:1.5px dashed rgba(224,176,74,.5);background:rgba(224,176,74,.05);color:#E0B04A;text-align:center;cursor:pointer}
.drop small{color:#9A8F80}.drop input{position:absolute;opacity:0;width:1px;height:1px}
.steps{margin:0;padding:12px 14px;border-radius:16px;background:rgba(14,8,10,.78);border:1px solid rgba(224,176,74,.18);list-style:none;display:flex;flex-direction:column;gap:8px;font-size:13px;color:#9A8F80}
.steps li::before{content:"○";margin-inline-end:8px}.steps li.run{color:#F6DA8E}.steps li.run::before{content:"◐"}.steps li.ok{color:#7EE0A8}.steps li.ok::before{content:"✓"}
.meter{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:4px 10px;align-items:center;font-size:13px}
.meter i{grid-column:1/-1;grid-row:2;height:6px;border-radius:3px;background:linear-gradient(90deg,#E0B04A var(--v),rgba(255,255,255,.08) var(--v))}
.meter.warn i{background:linear-gradient(90deg,#E5534B var(--v),rgba(255,255,255,.08) var(--v))}
.meter b{grid-row:1;grid-column:2;text-align:left;font-size:12px}
.alert{font-size:12px;color:#FFB3AE;padding:8px 10px;border-radius:10px;background:rgba(229,83,75,.1)}

/* prices sheet */
[hidden]{display:none!important}
#prices{position:fixed;inset:0;z-index:6;background:rgba(3,3,6,.72);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:440px;max-height:86%;box-sizing:border-box;background:#0D0D12;border:1px solid var(--line);border-radius:24px 24px 0 0;display:flex;flex-direction:column;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px calc(14px + env(safe-area-inset-bottom,0px))}
.sheet header{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px}
.sheet h2{margin:0;font-size:18px;color:var(--gold)}
.sheet button{height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);font-family:var(--body);cursor:pointer}
#plist{list-style:none;margin:0;padding:0;overflow-y:auto;display:flex;flex-direction:column}
#plist li{display:grid;grid-template-columns:minmax(0,1fr) 60px auto;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid rgba(224,176,74,.12);transition:background .6s}
#plist li.fu{background:rgba(63,191,127,.14)}#plist li.fd{background:rgba(229,83,75,.14)}
.sym{display:flex;flex-direction:column;min-width:0}.sym b{font-family:var(--mono);font-size:14px;direction:ltr;text-align:right}.sym small{font-size:12px;color:var(--muted)}
.px{display:flex;flex-direction:column;align-items:flex-start;direction:ltr;font-variant-numeric:tabular-nums}.px b{font-family:var(--mono);font-size:14px}.px small{font-family:var(--mono);font-size:12px}
.px .u{color:var(--up)}.px .d{color:var(--down)}
.note{font-size:12px;color:var(--muted);padding-top:8px;text-align:center}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

.spin{animation:spin 14s linear infinite;transform-origin:50px 50px}
@keyframes spin{to{transform:rotate(360deg)}}
.glow{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.35}50%{opacity:1}}

/* ───── app additions ───── */
[hidden]{display:none!important}
html,body{margin:0}
body{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{overflow-y:auto;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.modes{margin-top:0}
.tg{margin-top:auto}

/* real emblem with flapping wings (111 stays still) */
.emblem{position:relative;width:108px;height:47px;flex-shrink:0;margin-inline:-8px}
.emblem span{position:absolute;inset:0}
.emblem img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 6px rgba(224,176,74,.45))}
.emblem .wl{clip-path:inset(0 57% 0 0);transform-origin:43% 52%;animation:wingL 1.9s ease-in-out infinite}
.emblem .wr{clip-path:inset(0 0 0 57%);transform-origin:57% 52%;animation:wingR 1.9s ease-in-out infinite}
.emblem .wc{clip-path:inset(0 42.5% 0 42.5%)}
@keyframes wingL{0%,100%{transform:rotate(0)}50%{transform:rotate(9deg)}}
@keyframes wingR{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg)}}
.emblem.big{width:240px;height:104px;margin:0 auto}
.logo.holding .emblem{animation:charge 1.5s linear forwards}

/* gate */
.gate{position:fixed;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;overflow-y:auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:30px}
.gateIn{width:min(380px,100%);display:flex;flex-direction:column;gap:14px;text-align:center}
.gateIn .brand{font-size:24px}
.gateIn p{margin:0;color:var(--muted);font-size:14px}
.linkish{background:none;border:0;color:var(--muted);font-family:var(--body);font-size:13px;text-decoration:underline;cursor:pointer;padding:8px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:12px;border:1px solid var(--line)}
.seg button{height:38px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-family:var(--body);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--gold);color:#1A1406;font-weight:700}
.btnG{height:46px;border-radius:12px;border:0;background:linear-gradient(#F0C766,#C8952E);color:#1A1406;font-family:var(--body);font-weight:700;font-size:15px;cursor:pointer}
.btnG:disabled{opacity:.5}
.fl{font-size:12px;color:var(--muted);text-align:right}
#staffBox{gap:10px;display:flex;flex-direction:column}
#staffBox input,.inp{height:44px;border-radius:12px;border:1px solid var(--line);background:#0E0E14;color:var(--fg);font-family:var(--mono);font-size:18px;text-align:center;letter-spacing:.3em;box-sizing:border-box;width:100%}

/* trade cards */
.trade{display:flex;flex-direction:column;gap:10px}
.trade .tag.sell{background:var(--down);color:#2A0606}
.tgrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tbox{padding:8px 10px;border-radius:12px;background:rgba(28,28,34,.7);display:flex;flex-direction:column}
.tbox small{font-size:11px;color:var(--muted)}
.tbox b{font-family:var(--mono);font-size:15px;direction:ltr;text-align:right}
.tbox.sl{background:rgba(60,16,16,.65)}
.tlist{display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.tlist div{display:flex;justify-content:space-between;align-items:center}
.tlist b{font-family:var(--mono);direction:ltr}
.tlist .ok{color:#8FE6B4}
.tlist .wait{color:#C9C4B8}
.secureLine{padding:8px 10px;border-radius:10px;background:rgba(40,32,12,.75);color:#F0D28A;font-size:13px}
.empty{display:flex;align-items:center;gap:10px;color:#DCD5C8;font-size:14px}
.resCard{width:100%;text-align:right;color:var(--fg);font-family:var(--body);cursor:pointer;display:flex;flex-direction:column;gap:4px}
.resRow{display:flex;gap:14px;flex-wrap:wrap;font-size:14px}
.resRow b{font-family:var(--mono);direction:ltr}

/* generic sheet (news, prices, results) */
.sheetWrap{position:fixed;inset:0;z-index:6;background:rgba(3,3,6,.72);display:flex;align-items:flex-end;justify-content:center}
.sheetB{overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.nitem{padding:10px 12px;border-radius:12px;background:rgba(20,20,28,.85);border:1px solid rgba(224,176,74,.15);display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.6}
.nitem small{color:var(--muted);font-size:11.5px}
.pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px}
.pill.up{background:rgba(63,191,127,.15);color:#8FE6B4}.pill.down{background:rgba(229,83,75,.15);color:#FFB3AE}
.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rgrid div{padding:10px;border-radius:12px;background:rgba(20,20,28,.85);display:flex;flex-direction:column;gap:2px}
.rgrid small{color:var(--muted);font-size:11px}.rgrid b{font-family:var(--mono);font-size:17px;direction:ltr;text-align:right}
.hrow{display:flex;justify-content:space-between;align-items:center;padding:8px 2px;border-bottom:1px solid rgba(224,176,74,.1);font-size:13.5px}
.hrow b{font-family:var(--mono);direction:ltr}
.g{color:var(--up)}.r{color:var(--down)}

.installTip{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:9;display:flex;flex-direction:column;gap:2px;padding:12px 40px 12px 14px;border-radius:16px;background:rgba(16,16,22,.95);border:1px solid var(--gold);font-size:13px}
.installTip b{color:var(--gold)}
.installTip button{position:absolute;top:8px;left:8px;width:32px;height:32px;border:0;background:transparent;color:var(--muted);font-size:16px;cursor:pointer}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:30;max-width:90%;padding:10px 16px;border-radius:14px;background:rgba(14,14,20,.96);border:1px solid var(--line);font-size:14px;text-align:center}
.toast.bad{border-color:#7A1020;color:#FFC9C5}.toast.ok{border-color:rgba(63,191,127,.6);color:#BFF0D2}

/* chat (stage 2: preview) */
#ccomp{display:flex}

/* HQ dynamic */
.hqm .note{font-size:12px;color:#9A8F80}
.hqm .inp{font-family:var(--body);letter-spacing:0;font-size:14px;text-align:right;height:40px}
.hqm select.inp{appearance:auto}
.hqm .codeInp{font-family:var(--mono);letter-spacing:.3em;text-align:center;font-size:18px}
.termL div{unicode-bidi:plaintext;text-align:start}
.termL{font-family:var(--mono),var(--body);font-size:11.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.termL .tm{color:#6E6A62}
.btnRow{display:flex;gap:6px;flex-wrap:wrap}
.secretB{white-space:pre-wrap}
.plan{font-size:13px;line-height:1.75;color:#E8DCC8;white-space:pre-wrap}
.memRow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid rgba(224,176,74,.1)}
.memRow .nm2{flex:1;min-width:110px;display:flex;flex-direction:column}
.memRow small{color:#9A8F80;font-size:11px}
.role{padding:1px 6px;border-radius:5px;font-size:10px;font-weight:700}
.role.owner{background:#7A1020;color:#FFD5D2}.role.deputy{background:#3A2A60;color:#D8C8FF}
.role.vip{background:linear-gradient(#F6DA8E,#B07E22);color:#1A1406}.role.member{background:#2A2A33;color:#C9C4B8}
.linkBox{font-family:var(--mono);font-size:12px;color:#F6DA8E;word-break:break-all;direction:ltr;text-align:left;padding:8px;border-radius:8px;background:#0A0A0E}

.pairBox{display:flex;flex-direction:column;gap:8px}
#pairCode{height:48px;border-radius:12px;border:1px solid var(--line);background:#0E0E14;color:var(--fg);font-family:var(--mono);font-size:22px;text-align:center;letter-spacing:.35em}
.steps2{display:flex;flex-direction:column;gap:12px;text-align:right}
.steps2>div{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.7}
.steps2>div>b{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:linear-gradient(#F6DA8E,#B07E22);color:#1A1406;display:inline-flex;align-items:center;justify-content:center}
.pairBig{font-family:var(--mono);font-size:38px;font-weight:600;letter-spacing:.3em;text-align:center;color:var(--gold2,#F6DA8E);direction:ltr;padding:6px 0}
.pairNum{font-family:var(--mono);letter-spacing:.2em;color:var(--gold)}

/* v1.1 gold */
.tabs{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important}
.tab{font-size:11.5px!important;padding:6px 0!important}
.tab.gold{border-color:rgba(224,176,74,.75);color:var(--gold)}
.gateLogo{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.gateLogo.holding{animation:charge 1.5s linear forwards}
.curs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:4px;justify-content:center}
.curs button{flex:0 0 auto;height:34px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:#111117;color:var(--fg);font-family:var(--body);font-size:12.5px;cursor:pointer}
.curs button[aria-pressed="true"]{background:var(--gold);color:#1A1406;font-weight:700;border-color:var(--gold)}
.ktable{display:flex;flex-direction:column;gap:6px}
.krow{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(20,20,28,.85);border:1px solid rgba(224,176,74,.15)}
.krow .k{display:flex;align-items:center;gap:8px;font-size:14px}
.krow .k i{font-style:normal;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:600;color:#1A1406;background:linear-gradient(#F6DA8E,#B07E22)}
.krow b{font-family:var(--mono);font-size:16px;direction:ltr}
.calc{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;border:1px solid rgba(224,176,74,.35);background:rgba(28,22,10,.5)}
.calc h3{margin:0;font-size:15px;color:var(--gold)}
.calc .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.calc select,.calc input[type=number]{height:42px;border-radius:10px;border:1px solid var(--line);background:#0E0E14;color:var(--fg);font-family:var(--body);font-size:15px;padding:0 10px;width:100%;box-sizing:border-box}
.calc .out{display:flex;flex-direction:column;gap:6px}
.calc .out div{display:flex;justify-content:space-between;font-size:14px}
.calc .out b{font-family:var(--mono);direction:ltr}
.calc .out .tot{padding-top:6px;border-top:1px solid rgba(224,176,74,.25);font-size:15px}
.calc .out .tot b{color:var(--gold)}
.vatT{display:flex;align-items:center;gap:8px;font-size:13px;color:#DCD5C8}
.vatT input{accent-color:#E0B04A;width:18px;height:18px}
.gnote{font-size:11.5px;color:var(--muted);line-height:1.6}
.gmk{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:6px;align-items:center;font-size:12px}
.gmk input{height:34px;border-radius:8px;border:1px solid rgba(224,176,74,.3);background:#0A0A0E;color:var(--fg);font-family:var(--mono);text-align:center;width:100%;box-sizing:border-box}
/* v1.1.1: long-press on the logo must not open the iPhone "save image" menu */
.emblem img,.emblem span{pointer-events:none;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
.logo,.gateLogo,.emblem{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ───── v1.2: themes, settings, zoom-lock, team nav ───── */
/* lock zoom: inputs ≥16px so iOS doesn't auto-zoom, page can't pan sideways */
html{-webkit-text-size-adjust:100%;touch-action:pan-y}
input,select,textarea,#cmsg,#pairCode,#staffCode{font-size:16px!important}
.wrap,#chat,#settings,#sheet,#prices{overscroll-behavior:contain}
.top{gap:8px}
.topR{display:flex;align-items:center;gap:8px}
.iconbtn{width:40px;height:40px;flex-shrink:0;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--gold);display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.iconbtn:active{transform:scale(.94)}
/* team manual nav */
.rteam{display:flex;align-items:center;gap:6px}
.arrow{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:rgba(20,20,28,.6);color:var(--fg);display:flex;align-items:center;justify-content:center;cursor:pointer}
.arrow:active{background:var(--gold);color:#1A1406}
.reel .track{touch-action:pan-y}
/* gold currencies: fixed grid, never scrolls sideways */
.curs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;overflow:visible!important}
.curs button{height:auto;min-height:40px;padding:6px 4px!important;font-size:11px!important;flex-shrink:1!important;display:flex;flex-direction:column;gap:2px;line-height:1.3}
/* settings */
.setBlock{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:rgba(18,18,26,.6);border:1px solid rgba(224,176,74,.15)}
.setT{font-size:14px;font-weight:700;color:var(--gold)}
.themeGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.themeGrid button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:12px;border:1px solid var(--line);background:#0E0E14;color:var(--fg);font-family:var(--body);font-size:12px;cursor:pointer}
.themeGrid button[aria-pressed="true"]{border-color:var(--gold);background:rgba(224,176,74,.12)}
.themeGrid .sw{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.15)}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:12px;border:1px solid var(--line);background:#0E0E14}
.seg2.three{grid-template-columns:1fr 1fr 1fr}
.seg2 button{height:40px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-family:var(--body);font-size:14px;cursor:pointer}
.seg2 button[aria-pressed="true"]{background:var(--gold);color:#1A1406;font-weight:700}
/* LTR when English */
html[dir="ltr"] .wrap,html[dir="ltr"] #settings,html[dir="ltr"] #chat,html[dir="ltr"] #sheet{direction:ltr}
html[dir="ltr"] .tbox b,html[dir="ltr"] .px,html[dir="ltr"] .krow b{text-align:left}

/* themes: recolor accent + ground; sky canvas recolored from JS */
:root[data-theme="ocean"]{--bg:#04080E;--gold:#3FA7D9;--line:rgba(63,167,217,.38);--card:rgba(12,22,34,.5)}
:root[data-theme="ocean"] .emblem img{filter:drop-shadow(0 0 6px rgba(63,167,217,.5)) hue-rotate(165deg) saturate(1.1)}
:root[data-theme="emerald"]{--bg:#050B07;--gold:#2FB673;--line:rgba(47,182,115,.36);--card:rgba(10,24,16,.5)}
:root[data-theme="emerald"] .emblem img{filter:drop-shadow(0 0 6px rgba(47,182,115,.5)) hue-rotate(95deg) saturate(1.05)}
/* gold buttons use a gradient; rebuild it per theme */
:root[data-theme="ocean"] .btnG,:root[data-theme="ocean"] .tab.gold,:root[data-theme="ocean"] .hb.gold{background:linear-gradient(#6FC8EC,#1E6FA0);color:#04121C}
:root[data-theme="emerald"] .btnG,:root[data-theme="emerald"] .hb.gold{background:linear-gradient(#5AD39A,#176B43);color:#04140C}

/* v1.3 chat */
#ccomp{display:flex;align-items:center;gap:6px}
.round.gld{background:linear-gradient(#F0C766,#C8952E);color:#1A1406;border:0}
#cmic,#cimg{background:#15151C;border:1px solid var(--line);color:var(--gold);position:relative}
#cmic.rec{background:var(--down);color:#fff;animation:pulse 1.2s infinite}
.msg .typing .bub{opacity:.6}
.imgbub img{max-width:200px;max-height:200px;border-radius:12px;display:block}
.imgConfirm{position:absolute;inset:0;z-index:5;background:rgba(3,3,6,.82);display:flex;align-items:center;justify-content:center;padding:18px}
.imgCard{width:min(360px,100%);background:#101016;border:1px solid var(--gold);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:12px}
.imgCard img{width:100%;max-height:220px;object-fit:contain;border-radius:12px;background:#000}
.imgWarn{font-size:13px;line-height:1.7;color:#F0D9C8}
.imgWarn b{color:var(--gold)}
.imgBtns{display:flex;gap:8px}.imgBtns .btnG,.imgBtns .hb{flex:1;height:44px}
.genderRow{display:flex;gap:12px;margin-top:6px}
.genBtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px;border-radius:16px;border:1px solid var(--line);background:var(--card);color:var(--fg);font-family:var(--body);font-size:15px;cursor:pointer}
.genBtn:active{border-color:var(--gold)}
.genBtn .gi{font-size:34px}