:root{--bg:#090512;--panel-bg:#140e28f2;--purple:#956cff;--purple-light:#b9a6ff;--text:#fff;--panel-width:clamp(230px, 23vw, 360px);--panel-padding:clamp(14px, 1.5vw, 28px);--symbol-size:clamp(42px, 4vw, 68px);--font-size:clamp(12px, 1vw, 16px)}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);width:100%;min-width:0;height:100%;min-height:100%;overflow:hidden}body{overscroll-behavior:none;font-family:Arial,sans-serif}canvas{touch-action:none;width:100%;height:100%;display:block}#element-info{width:var(--panel-width);overscroll-behavior:contain;max-width:calc(100vw - 20px);max-height:calc(100dvh - 30px);padding:var(--panel-padding);background:var(--panel-bg);border:1px solid var(--purple);color:var(--text);text-align:right;z-index:10;opacity:0;visibility:hidden;pointer-events:none;-webkit-backdrop-filter:blur(15px);direction:rtl;border-radius:clamp(12px,1.5vw,20px);transition:opacity .3s,visibility .3s,transform .3s;position:fixed;top:50%;right:clamp(8px,2vw,25px);overflow-y:auto;transform:translateY(-50%)translate(30px);box-shadow:0 0 35px #894bff59}#element-info.active{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%)translate(0)}#close-info{color:#fff;cursor:pointer;touch-action:manipulation;background:0 0;border:none;font-size:clamp(23px,2vw,32px);position:absolute;top:7px;left:10px}.info-number{color:var(--purple-light);font-size:var(--font-size)}.info-symbol{font-size:var(--symbol-size);text-align:center;color:#fff;text-shadow:0 0 20px #a36bff;margin:12px 0;font-weight:700}#info-persian{text-align:center;color:#d8c8ff;font-size:clamp(17px,1.7vw,26px)}#info-english{text-align:center;color:#aaa0c5;font-size:var(--font-size);margin-top:6px}.info-line{background:#7853c9;height:1px;margin:clamp(12px,1.5vw,20px) 0}.info-details p{font-size:var(--font-size);color:#c7bddf;justify-content:space-between;gap:10px;margin:clamp(9px,1vw,14px) 0;display:flex}.info-details span{color:#fff;font-weight:700}.info-description{color:#d5c9ed;border-right:3px solid var(--purple);font-size:var(--font-size);overflow-wrap:anywhere;background:#825ad21f;border-radius:8px;margin-top:18px;padding:clamp(9px,1vw,14px);line-height:2}@media (width<=600px){:root{--panel-width:min(92vw, 420px);--panel-padding:15px;--symbol-size:clamp(38px, 12vw, 55px)}#element-info{top:auto;bottom:max(8px, env(safe-area-inset-bottom));width:var(--panel-width);max-width:calc(100vw - 16px);max-height:min(43dvh,330px);left:50%;right:auto;transform:translate(-50%,20px)}#element-info.active{transform:translate(-50%)}.info-line{margin:10px 0}.info-details p{margin:8px 0}.info-description{margin-top:12px}}@media (width>=601px) and (width<=1024px){:root{--panel-width:clamp(240px, 30vw, 320px)}#element-info{max-height:85dvh}}@media (width>=1600px){:root{--panel-width:clamp(300px, 19vw, 420px);--panel-padding:28px}#element-info{max-height:85dvh}}@media (height<=500px){#element-info{max-height:calc(100dvh - 12px)}.info-symbol{margin:5px 0}.info-line{margin:8px 0}}@media (prefers-reduced-motion:reduce){#element-info{transition:none}}