/* ⚠ ساخته می‌شود: python tools/build_online_kit.py  (کیتِ ChatGPT + online.app.css) */
.vzOnline, .vzOnline *{box-sizing:border-box}
.vzOnline{margin:0;background:#F8F4E9;color:#102E50;font:18px/1.8 Vazirmatn,sans-serif}
.vzOnline button,.vzOnline input,.vzOnline select{font:inherit}
.vzOnline button{cursor:pointer;color:inherit}
.vzOnline button:disabled{cursor:default}
.vzOnline button,.vzOnline input,.vzOnline select,.vzOnline a{touch-action:manipulation}
.vzOnline button:focus-visible,.vzOnline input:focus-visible,.vzOnline select:focus-visible,.vzOnline a:focus-visible{outline:3px solid #276FA8;outline-offset:3px}
.vzOnline [hidden]{display:none!important}
.vzOnline{--accent:#2574B4;--accent-text:#fff;--paint:blue;max-width:853px;min-height:100vh;margin:auto;padding:28px 32px 22px;background:url(../assets/ui/online/parts/paper-background.svg) top center/100% 100% no-repeat}
.vzOnline[data-accent=pink]{--accent:#B65F8D;--accent-text:#102E50}
.vzOnline[data-accent=yellow]{--accent:#B68A25;--accent-text:#102E50}
.vzOnline h1,.vzOnline h2,.vzOnline p{margin:0}
.vzOnline h1{font-size:48px;line-height:1.4;font-weight:700}
.vzOnline h2{font-size:26px;line-height:1.6}
.vzOnline small{font-size:14px}
.vzOnline .page-head{display:flex;align-items:center;gap:18px;margin:10px 0 18px;min-height:112px}
.vzOnline .page-head>div{flex:1;min-width:0}
.vzOnline .eyebrow{font-size:15px;color:#63798B}
.vzOnline .brand{width:118px;height:100px;object-fit:contain}
.vzOnline .round{background:#FFFCF4;border:1px solid #CDD5D5;border-radius:50%;width:56px;height:56px;padding:12px;flex:none}
.vzOnline .round img{width:100%;height:100%}
.vzOnline .connection{display:flex;align-items:center;gap:5px;font-size:15px;color:#587C6F;margin:-6px 0 14px}
.vzOnline .connection img{width:32px;height:32px}
.vzOnline .connection.offline{color:#A55664}
.vzOnline .muted{color:#63798B;font-size:16px;overflow-wrap:anywhere}
.vzOnline .card{border:30px solid transparent;border-image:url(../assets/ui/online/surfaces/page-card.svg) 45 fill stretch;filter:drop-shadow(0 3px 5px #5146300A);margin-bottom:16px;min-width:0}
.vzOnline .profile{display:flex;align-items:center;gap:20px;padding:0 4px}
.vzOnline .profile>div{flex:1;min-width:0}
.vzOnline .profile h2{overflow-wrap:anywhere}
.vzOnline .avatar{width:90px;height:90px;object-fit:contain;border-radius:50%;padding:5px;background:#FBFAF3;border:2px solid #D0E0E6;flex:none}
.vzOnline .profile-note{font-size:14px;color:#63798B;max-width:96px;text-align:center}
.vzOnline .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vzOnline .pair .card{display:flex;flex-direction:column;margin-bottom:16px}
.vzOnline .card-title{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.vzOnline .card-title>img{width:42px;height:42px;flex:none}
.vzOnline .card-title>div{min-width:0}
.vzOnline .card-title h2{font-size:25px}
.vzOnline .quick>.muted{margin-bottom:16px}
.vzOnline .friends .card-title{margin-bottom:18px}
.vzOnline fieldset{border:0;padding:0;margin:0 0 18px;min-width:0}
.vzOnline legend{font-size:16px;font-weight:700;margin-bottom:8px}
.vzOnline .segments{display:flex;gap:4px;min-width:0}
.vzOnline .option{flex:1;min-width:0;border:18px solid transparent;border-image:url(../assets/ui/online/surfaces/option-unselected-blue-normal.svg) 0 42 fill stretch;border-top-width:0;border-bottom-width:0;background:transparent;min-height:52px;font-size:17px;font-weight:700;padding:0;white-space:nowrap}
.vzOnline .option[aria-pressed=true]{color:var(--accent-text)}
.vzOnline .option:disabled{opacity:.5}
.vzOnline .toggles{display:flex;flex-wrap:wrap;gap:12px 20px;margin:8px 0 22px}
.vzOnline .toggles label{display:flex;align-items:center;gap:7px;min-height:44px;font-size:16px;cursor:pointer}
.vzOnline .toggles input{width:22px;height:22px;margin:0;accent-color:var(--accent)}
.vzOnline .toggles img{width:23px;height:23px}
.vzOnline .art-button{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;min-height:60px;border:25px solid transparent;border-top-width:0;border-bottom-width:0;background:transparent;border-image:url(../assets/ui/online/surfaces/secondary-blue-normal.svg) 0 42 fill stretch;padding:5px 0;font-weight:700;font-size:21px;width:100%}
.vzOnline .art-button img{width:26px;height:26px}
.vzOnline .art-button.primary{color:var(--accent-text)}
.vzOnline .pair .art-button{margin-top:auto}
.vzOnline .join{padding:0 4px}
.vzOnline .join form{display:flex;gap:14px;margin-bottom:5px}
.vzOnline .join .art-button{width:220px;flex:none}
.vzOnline .code-input{width:100%;min-width:0;height:70px;border:24px solid transparent;border-top-width:0;border-bottom-width:0;border-image:url(../assets/ui/online/surfaces/code-input-normal.svg) 0 44 fill stretch;background:transparent;text-align:center;direction:ltr;font-size:31px;letter-spacing:.16em;color:#102E50;font-weight:700}
.vzOnline .code-input::placeholder{font-size:22px;color:#8F9EA8}
.vzOnline .toast{border:20px solid transparent;border-top-width:10px;border-bottom-width:10px;border-image:url(../assets/ui/online/surfaces/toast-info.svg) 38 fill stretch;padding:8px;font-size:16px;overflow-wrap:anywhere;margin-bottom:16px}
.vzOnline .toast[data-kind=error]{border-image-source:url(../assets/ui/online/surfaces/toast-error.svg);color:#934350}
.vzOnline .waiting{text-align:center}
.vzOnline .orbit{position:relative;width:168px;height:160px;margin:12px auto 18px;animation:vzOnlineOrbit 12s linear infinite}
.vzOnline .orbit span{position:absolute;width:70px;height:90px;left:50px;top:10px;transform-origin:35px 72px}
.vzOnline .orbit span:nth-child(2){transform:rotate(120deg)}
.vzOnline .orbit span:nth-child(3){transform:rotate(240deg)}
.vzOnline .orbit img{width:100%;height:100%}
.vzOnline .orbit b{position:absolute;inset:15px 10px;font-size:38px;font-weight:700}
.vzOnline .waiting .art-button{max-width:290px;margin:20px auto 0}
.vzOnline .code-card{text-align:center}
.vzOnline .code-card strong{display:block;font-size:64px;letter-spacing:.18em;line-height:1.5}
.vzOnline .code-card .art-button{max-width:320px;margin:16px auto 0}
.vzOnline .section-label{display:flex;align-items:center;justify-content:space-between;margin:25px 8px 12px;gap:14px}
.vzOnline .seat{display:flex;align-items:center;gap:16px;min-height:114px;padding:6px 2px;border:24px solid transparent;border-image:url(../assets/ui/online/surfaces/seat-normal.svg) 38 fill stretch;margin-bottom:6px}
.vzOnline .seat.me{border-image-source:url(../assets/ui/online/surfaces/seat-me.svg)}
.vzOnline .seat.bot{border-image-source:url(../assets/ui/online/surfaces/seat-bot.svg)}
.vzOnline .seat.empty{border-image-source:url(../assets/ui/online/surfaces/seat-empty.svg)}
.vzOnline .seat>.avatar{width:74px;height:74px}
.vzOnline .seat-copy{flex:1;min-width:0}
.vzOnline .seat-copy strong{font-size:23px;overflow-wrap:anywhere;display:block}
.vzOnline .seat-copy p{overflow-wrap:anywhere}
.vzOnline .badges{display:flex;gap:7px;flex-wrap:wrap}
.vzOnline .badge{font-size:13px;line-height:1.7;padding:2px 10px;background:#F0EEE4;border:1px solid #DCDACF;border-radius:15px;color:#64727C}
.vzOnline .badge.disconnect{background:#F9E8EA;color:#A15665}
.vzOnline .seat .round{width:48px;height:48px;padding:13px}
.vzOnline .add-bot{width:auto;min-width:125px;font-size:18px}
.vzOnline .room-settings{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}
.vzOnline .room-actions{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin:20px 4px}
.vzOnline .room-actions>p{grid-column:1/-1;text-align:center}
.vzOnline .page-foot{text-align:center;font-size:15px;color:#758391;margin:28px 0 4px}
.vzOnline .sound{width:52px;height:52px;border:0;background:url(../assets/ui/online/surfaces/sound-button-normal.svg) center/contain no-repeat;padding:12px;flex:none}
.vzOnline .sound img{width:100%;height:100%}
.vzOnline .sound:active{background-image:url(../assets/ui/online/surfaces/sound-button-pressed.svg)}
.vzOnline .sound:disabled{background-image:url(../assets/ui/online/surfaces/sound-button-disabled.svg)}
.vzOnline .sound:focus-visible{background-image:url(../assets/ui/online/surfaces/sound-button-focus.svg)}
.vzOnline .board-example{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:580px;margin:24px auto}
.vzOnline .board-tile{position:relative;aspect-ratio:1;background:center/100% 100% no-repeat;display:grid;place-items:center;font-size:25px;font-weight:700;min-width:0}
.vzOnline .board-tile b{font-size:25px}
.vzOnline .board-tile.covered{background:none}
.vzOnline .letter-card{position:absolute;inset:7%;border:2px solid #98ACB4;border-radius:14px;background:#FCFAF1;display:grid;place-items:center;font-size:52px;box-shadow:0 4px 6px #102E5019}
.vzOnline .covered-mark{position:absolute;width:36%;height:36%;left:4%;top:5%;display:grid;place-items:center}
.vzOnline .covered-mark img{position:absolute;width:100%;height:100%}
.vzOnline .covered-mark b{position:relative;font-size:11px;color:#fff;transform:rotate(-45deg) translateY(-3px)}
.vzOnline .activation{position:absolute;inset:-14%;width:128%;height:128%;pointer-events:none;opacity:0}
.vzOnline .board-tile.flash .activation{animation:vzOnlineActivation .85s ease-out}
.vzOnline .special-legend{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:16px}
.vzOnline .special-legend span{display:flex;align-items:center;gap:4px}
.vzOnline .special-legend img{width:36px;height:36px}
.vzOnline .chain-examples{display:flex;gap:30px;justify-content:center;margin:20px 0}
.vzOnline .chain-demo{position:relative;width:88px;height:100px}
.vzOnline .chain-demo>.avatar{width:70px;height:70px}
.vzOnline .chain-demo .flame{position:absolute;width:58px;right:40px;top:34px}
.vzOnline .chain-demo b{position:absolute;right:46px;top:74px;font-size:10px}
.vzOnline .chain-floating{margin:20px auto;width:240px;min-height:58px;border:26px solid transparent;border-top-width:0;border-bottom-width:0;border-image:url(../assets/ui/online/surfaces/chain-floating.svg) 0 42 fill stretch;text-align:center;font-size:22px;font-weight:700;white-space:nowrap}
.vzOnline .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes vzOnlineOrbit{to{transform:rotate(360deg)}}
@keyframes vzOnlineActivation{0%{opacity:0;transform:scale(.8)}30%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
@media(max-width:620px){.vzOnline{font-size:16px}
.vzOnline{padding:15px 12px}
.vzOnline .page-head{min-height:95px;gap:9px;margin-top:0}
.vzOnline h1{font-size:33px}
.vzOnline .brand{width:78px;height:76px}
.vzOnline .page-head .round{width:48px;height:48px}
.vzOnline .eyebrow{font-size:13px}
.vzOnline .card{border-width:22px}
.vzOnline .profile{gap:12px}
.vzOnline .profile .avatar{width:72px;height:72px}
.vzOnline .profile-note{display:none}
.vzOnline .pair{grid-template-columns:1fr;gap:0}
.vzOnline .pair .art-button{margin-top:12px}
.vzOnline .card-title h2,.vzOnline h2{font-size:23px}
.vzOnline .join form{flex-direction:column;gap:9px}
.vzOnline .join .art-button{width:100%}
.vzOnline .room-settings{grid-template-columns:1fr;gap:0}
.vzOnline .seat{border-width:18px;gap:10px}
.vzOnline .seat>.avatar{width:58px;height:58px}
.vzOnline .seat-copy strong{font-size:20px}
.vzOnline .seat-copy .muted{font-size:13px}
.vzOnline .add-bot{min-width:98px;font-size:15px;border-width:15px;border-top-width:0;border-bottom-width:0}
.vzOnline .room-actions{grid-template-columns:1fr}
.vzOnline .room-actions .art-button{min-height:60px}
.vzOnline .code-card strong{font-size:50px}
.vzOnline .section-label{align-items:flex-start;flex-direction:column;gap:0}
.vzOnline .board-example{gap:3px}
.vzOnline .board-tile b{font-size:19px}
.vzOnline .letter-card{font-size:38px;border-radius:10px}
.vzOnline .covered-mark b{font-size:8px}
.vzOnline .chain-examples{gap:17px}
.vzOnline .special-legend{gap:5px;font-size:13px}
.vzOnline .special-legend img{width:28px;height:28px}
.vzOnline .toggles{gap:8px 14px}
.vzOnline .muted{font-size:15px}
.vzOnline .option{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.vzOnline, .vzOnline *,.vzOnline *::before,.vzOnline *::after{animation:none!important;transition:none!important}
.vzOnline .board-tile.flash .activation{opacity:1}
}
.vzOnline .board-tile> b,.vzOnline .covered-mark b{direction:ltr;unicode-bidi:isolate}
.vzOnline .covered-mark{width:30%;height:30%;left:4%;top:5%}
.vzOnline .covered-mark b{position:absolute;inset:0;display:grid;place-items:center;transform:none;font-size:12px;color:#102E50}
.vzOnline .board-tile[data-type=triple] .covered-mark b{color:#fff}
@media(max-width:620px){.vzOnline .covered-mark b{font-size:10px}
}

.vzSpecialArt{position:absolute;inset:0;pointer-events:none;z-index:5;font-family:Vazirmatn,sans-serif}.vzSpecialArt>.vzHouseArt{width:100%;height:100%;object-fit:fill}.vzSpecialArt>.vzHouseLabel{position:absolute;inset:0;display:grid;place-items:center;color:#102E50;font-size:clamp(12px,1.8vw,24px);font-weight:700;direction:ltr;unicode-bidi:isolate}.vzSpecialArt.covered>.vzHouseArt{position:absolute;left:2%;top:2%;width:32%;height:32%;object-fit:contain}.vzSpecialArt.covered>.vzHouseLabel{inset:auto;left:2%;top:2%;width:32%;height:32%;font-size:clamp(8px,1vw,12px)}.vzSpecialArt.covered[data-type=triple]>.vzHouseLabel{color:white}.vzSpecialArt>.vzActivation{position:absolute;left:-14%;top:-14%;width:128%;height:128%;opacity:0}.vzSpecialArt.active>.vzActivation{animation:vzHouseActivate .85s ease-out}.vzChainArt{position:absolute;right:-5px;bottom:-8px;width:56px;height:56px;pointer-events:none;z-index:6;font-family:Vazirmatn,sans-serif}.vzChainArt img{width:100%;height:100%}.vzChainArt b{position:absolute;right:0;bottom:0;width:21px;height:21px;display:grid;place-items:center;color:#102E50;font-size:10px;line-height:1;direction:ltr}.vzSoundArt{min-width:44px;min-height:44px;aspect-ratio:1;border:0;padding:0;display:grid;place-items:center;background:url(../assets/ui/online/surfaces/sound-button-normal.svg) center/contain no-repeat;color:#102E50;cursor:pointer}.vzSoundArt>img{width:55%;height:55%;display:block}.vzSoundArt:active{background-image:url(../assets/ui/online/surfaces/sound-button-pressed.svg)}.vzSoundArt:focus-visible{background-image:url(../assets/ui/online/surfaces/sound-button-focus.svg);outline:3px solid #2574B4;outline-offset:2px}.vzSoundArt:disabled{background-image:url(../assets/ui/online/surfaces/sound-button-disabled.svg);cursor:default}.vzChainFloat{font:700 22px/1.5 Vazirmatn,sans-serif;min-height:52px;display:inline-flex;align-items:center;justify-content:center;border:24px solid transparent;border-top-width:0;border-bottom-width:0;border-image:url(../assets/ui/online/surfaces/chain-floating.svg) 0 42 fill stretch;color:#102E50;padding:6px;white-space:nowrap}@keyframes vzHouseActivate{0%{opacity:0;transform:scale(.8)}30%{opacity:1}100%{opacity:0;transform:scale(1.2)}}@media(prefers-reduced-motion:reduce){.vzSpecialArt.active>.vzActivation{animation:none;opacity:1}}

/* افزوده‌های برنامه روی کیت: هر صفحه (#online / #room) یک .vzOnline جدا است و فاصله‌ی پایین برای نوارِ سیستم */
#online .vzOnline,#room .vzOnline{min-height:100vh;padding-bottom:max(22px,env(safe-area-inset-bottom))}
#online .vzOnline,#room .vzOnline{padding-top:max(28px,calc(env(safe-area-inset-top) + 12px))}
.vzOnline .connection[data-ok="1"]{color:#587C6F}
.vzOnline .seat .seat-x{background:#FFFCF4}
.vzOnline .join .toast,.vzOnline .toast{margin-top:4px}
#online .vzOnline,#room .vzOnline{background-color:#F8F4E9}
/* دکمه‌ی «بازی آنلاین» در خانه (فعال): هنرِ دکمه‌ی راهنما با رنگِ چرخانده */
.vh-live img{filter:hue-rotate(165deg) saturate(1.1)}
.vh-live .lbl{height:calc(60*100%/158);top:calc((1520 - 1482)*100%/158);left:calc((596 - 426)*100%/397);width:calc(200*100%/397);display:flex;align-items:center;justify-content:flex-start;font-size:calc(34*var(--u));font-weight:800;color:#12142b;white-space:nowrap}
.vh-live .ico{left:calc((496 - 426)*100%/397);top:calc((1522 - 1482)*100%/158);width:calc(84*100%/397);height:calc(76*100%/158);fill:none;stroke:#12142b;stroke-width:3.4;stroke-linecap:round}