/* ⚠ ساخته می‌شود: python tools/build_info_pages.py */
#help{min-height:100vh}
#help{--scale:1;--touch:88px;--dock-h:300px;--ink:#102E50;--muted:#63798B;--accent:#1687ED;--accent-text:white;--focus:#1266D9;--primary-icon-filter:brightness(0) invert(1)}
#help *{box-sizing:border-box}
#help{margin:0;background:#FAF6ED;color:var(--ink);font-family:Vazirmatn,sans-serif;overflow-x:hidden}
#help h1,#help h2,#help h3,#help p{margin:0}
#help img{display:block}
#help button{font:inherit;border:0;background-color:transparent;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
#help button:disabled{cursor:default}
#help button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
#help button:active:not(:disabled){transform:scale(.982)}
#help [hidden]{display:none!important}
#help .skin{background-size:100% 100%;background-repeat:no-repeat;background-position:center}
#help .app{width:853px;zoom:var(--scale);margin:0 auto;min-height:1844px;padding:30px 34px calc(var(--dock-h) + 20px);background:url(../assets/ui/help/help-bg.webp) center top/853px 1844px repeat-y}
#help .page-header{display:grid;grid-template-columns:max(96px,var(--touch)) minmax(0,1fr) 128px;align-items:center;gap:14px;min-height:154px}
#help .back{width:96px;height:96px;min-width:var(--touch);min-height:var(--touch)}
#help .back img{width:49px;height:49px;margin:auto}
#help .page-header h1{font-size:69px;line-height:1.25;white-space:nowrap}
#help .logo{width:128px;height:128px;border-radius:25px;object-fit:cover}
#help .intro{font-size:30px;font-weight:700;color:var(--muted);line-height:1.7;text-align:center;margin:10px 0 28px}
#help .section{position:relative;padding:25px 29px 30px;margin:0 0 18px;background:url(../assets/ui/help/surfaces/section-normal.webp) center/100% 100% no-repeat}
#help .section-heading{position:relative;display:flex;align-items:center;gap:14px;min-height:84px;background:var(--heading-img) center/100% 100% no-repeat;padding:8px 18px;margin-bottom:16px}
#help .section-heading .section-num{font-size:27px;color:var(--focus);font-weight:700;border-left:1px solid #BBC9CB;padding-left:16px}
#help .section h2{font-size:36px;line-height:1.5}
#help .section p{font-size:27px;line-height:1.85;font-weight:400}
#help .section p strong{font-weight:700}
#help .section .note{font-size:24px;color:var(--muted);text-align:center;margin-top:12px}
#help .section-body{display:flex;align-items:center;gap:18px}
#help .section-body>div{flex:1;min-width:0}
#help .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:18px}
#help .step{min-height:124px;background:url(../assets/ui/help/surfaces/step-normal-normal.webp) center/100% 100% no-repeat;padding:15px 7px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:24px;font-weight:700}
#help .step img{width:39px;height:39px}
#help .step.active{background-image:var(--step-img)}
#help .turn-list{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;margin:15px 0 0}
#help .turn-list p{font-size:25px}
#help .turn-list b{color:var(--focus)}
#help .hand-scene{height:187px;display:flex;align-items:center;justify-content:center;position:relative;gap:0}
#help .letter{position:relative;display:flex;align-items:center;justify-content:center;background-size:100% 100%;font-size:41px;font-weight:700;color:#102E50}
#help .hand-card{width:74px;height:106px;margin:0 -4px;flex:none}
#help .letter.blue{background-image:url(../assets/ui/help/parts/letter-blue.webp)}
#help .letter.pink{background-image:url(../assets/ui/help/parts/letter-pink.webp)}
#help .letter.yellow{background-image:url(../assets/ui/help/parts/letter-yellow.webp)}
#help .board-letter.blue{background-image:url(../assets/ui/help/parts/board-letter-blue.webp)}
#help .board-letter.pink{background-image:url(../assets/ui/help/parts/board-letter-pink.webp)}
#help .board-letter.yellow{background-image:url(../assets/ui/help/parts/board-letter-yellow.webp)}
#help .hand-scene .scene-arrow{width:66px;height:66px;margin:0 20px}
#help .mini-target{width:83px;height:83px;background:url(../assets/ui/help/parts/cell-selected.webp) center/100% 100%;font-size:46px}
#help .scene-label{display:block;text-align:center;font-size:23px;font-weight:700;color:var(--muted);margin:8px 0}
#help .board-scene{display:flex;justify-content:center;align-items:center;gap:15px;padding:12px 0}
#help .mini-grid{display:grid;grid-template-columns:repeat(9,1fr);width:324px;height:324px;gap:0;position:relative;flex:none}
#help .mini-cell{width:36px;height:36px;background:url(../assets/ui/help/parts/cell-empty.webp) center/100% 100%;display:flex;align-items:center;justify-content:center}
#help .mini-cell.central{background-color:#F8EFD9;border-radius:5px}
#help .mini-cell .letter{width:33px;height:33px;font-size:25px}
#help .row-arrow{width:184px;height:35px;object-fit:fill;margin:5px auto}
#help .col-arrow{width:39px;height:170px;object-fit:fill}
#help .cross-scene{display:flex;justify-content:center;gap:14px;align-items:center;margin-top:18px}
#help .cross-grid{display:grid;grid-template-columns:repeat(5,48px);width:240px;height:240px;flex:none}
#help .cross-cell{width:48px;height:48px;background:url(../assets/ui/help/parts/cell-empty.webp) center/100% 100%;display:flex;align-items:center;justify-content:center}
#help .cross-cell.refill{background-image:url(../assets/ui/help/parts/cell-center.webp)}
#help .cross-cell .letter{width:43px;height:43px;font-size:31px}
#help .cross-scene>img{width:52px;height:52px}
#help .score-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;padding:8px;background:url(../assets/ui/help/surfaces/score-table-normal.webp) center/100% 100%}
#help .score-col{min-width:0;text-align:center}
#help .score-col strong{display:flex;height:74px;align-items:center;justify-content:center;background:url(../assets/ui/help/surfaces/score-header-normal.webp) center/100% 100%;font-size:31px}
#help .score-col span{display:flex;height:90px;align-items:center;justify-content:center;background:url(../assets/ui/help/surfaces/score-number-normal.webp) center/100% 100%;font-size:37px;font-weight:700}
#help .score-caption{display:flex;justify-content:space-between;gap:15px;font-size:24px;font-weight:700;color:var(--muted);padding:0 14px;margin-bottom:7px}
#help .bonus-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
#help .bonus{background:url(../assets/ui/help/surfaces/bonus-chip-normal.webp) center/100% 100%;min-height:125px;padding:14px 19px;display:flex;align-items:center;gap:12px}
#help .bonus img{width:47px;height:47px;flex:none}
#help .bonus p{font-size:23px;line-height:1.65}
#help .bonus:last-child{grid-column:1/-1}
#help .hand-word{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:13px}
#help .word-cards{display:flex;gap:1px}
#help .word-cards .letter{width:66px;height:94px;font-size:42px}
#help .skip-note{display:flex;align-items:center;justify-content:center;gap:7px;font-size:23px;color:var(--muted);font-weight:700}
#help .skip-note img{width:38px;height:38px}
#help .lock-scene{display:flex;justify-content:center;gap:24px;padding-top:12px}
#help .lock-piece{position:relative;width:112px;height:142px}
#help .lock-piece .letter{width:100%;height:100%;font-size:69px}
#help .lock-overlay{position:absolute;inset:0;background-size:100% 100%;border-radius:14px}
#help .lock-overlay img{position:absolute;bottom:-13px;left:-11px;width:55px;height:55px}
#help .lock-piece.self .lock-overlay{border:3px solid #C7A253}
#help .lock-piece.other .lock-overlay{border:3px dashed #D882AD}
#help .lock-piece .scene-label{font-size:22px;white-space:nowrap}
#help .special-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
#help .special{min-width:0;text-align:center}
#help .special-face{min-height:174px;background:url(../assets/ui/help/surfaces/special-card-normal.webp) center/100% 100%;padding:17px 7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
#help .special-face img{width:60px;height:60px}
#help .special-face strong{font-size:22px;line-height:1.6}
#help .special p{font-size:21px;line-height:1.65;margin-top:8px}
#help .charge-bar{background:url(../assets/ui/help/surfaces/recharge-strip-normal.webp) center/100% 100%;padding:18px;margin-top:19px;font-size:25px;text-align:center}
#help .charge-bar p{font-size:24px}
#help .charge-count{display:flex;align-items:center;justify-content:center;gap:19px;font-size:28px;font-weight:700;margin-top:7px}
#help .charge-count img{width:43px;height:43px}
#help .hold-scene{position:relative;background:url(../assets/ui/help/surfaces/mini-card-normal.webp) center/100% 100%;height:180px;display:flex;align-items:center;justify-content:center;gap:15px}
#help .hold-scene .sample-player{font-size:34px;font-weight:700}
#help .hold-scene>img{width:73px;height:73px}
#help .optional-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#help .optional{background:url(../assets/ui/help/surfaces/mini-card-normal.webp) center/100% 100%;padding:18px;text-align:center}
#help .optional img{width:66px;height:66px;margin:2px auto 12px}
#help .optional h3{font-size:29px;margin-bottom:8px}
#help .optional p{font-size:24px}
#help .end-row{display:flex;align-items:center;gap:20px}
#help .end-row p{flex:1}
#help .end-row button{flex:none;width:274px;min-height:var(--touch);height:104px;font-size:30px;font-weight:700;background-size:100% 100%}
#help .dock{position:fixed;bottom:0;left:calc((100vw - 853px * var(--scale))/2);width:853px;zoom:var(--scale);padding:24px 34px max(34px,env(safe-area-inset-bottom));background:url(../assets/ui/help/surfaces/bottom-fade.webp) center/100% 100% no-repeat;z-index:20;display:flex;flex-direction:column;gap:10px}
#help .dock button{width:785px;min-height:var(--touch);font-size:46px;font-weight:700;display:flex;justify-content:center;align-items:center;gap:22px}
#help .primary{height:128px;color:var(--accent-text);background-image:var(--primary-img)}
#help .primary img{width:62px;height:62px;filter:var(--primary-icon-filter)}
#help .secondary{height:104px;font-size:32px!important;background-image:url(../assets/ui/help/surfaces/secondary-normal.webp)}
#help .dock p{font-size:22px;text-align:center;line-height:1.5}
#help .dock p:empty{display:none}


#help .dock{z-index:40}