/* ============================================================
   FAZO 98 — APP STYLES (Windows 98 material)
   ============================================================ */
input[type=range]{accent-color:#000080}

/* shared signup widget */
.signup{padding:10px;background:var(--gray);box-shadow:var(--bi1);margin:8px 0}
.signup.compact{padding:8px}
.signup-h{font-size:12px;font-weight:bold;color:#000;margin-bottom:7px}
.signup-b{font-size:12px;color:#222;margin-bottom:7px}
.signup-row{display:flex;gap:6px;margin-bottom:6px}
.signup-row .field{flex:1;min-width:0}
.signup .btn{width:100%}
.signup-msg{min-height:18px;font-size:12px;margin-top:5px}
.signup-msg.ok{color:var(--good);font-weight:bold} .signup-msg.err{color:var(--danger);font-weight:bold}
.signup-fine{margin-top:6px;font-size:11px;color:#444}
.signup-fine a{color:var(--navy)}
@media (max-width:560px){.signup-row{flex-direction:column}}

/* ===================== MUSIC (FazoAMP) ===================== */
.app-music{display:flex;height:100%;background:var(--gray)}
.amp-left{flex:0 0 46%;max-width:290px;padding:8px;display:flex;flex-direction:column;gap:7px}
.amp-cover{position:relative;aspect-ratio:1;background-size:cover;background-position:center;box-shadow:var(--bi)}
.amp-viz{position:absolute;left:0;right:0;bottom:0;width:100%;height:50px}
.amp-yt{position:absolute;inset:0;z-index:3;background:#000}
.amp-yt.hidden{display:none}
.amp-yt iframe,.amp-yt>div{width:100%!important;height:100%!important;border:0;display:block}
.amp-meta{background:#000;box-shadow:var(--bi1);padding:5px 8px;font-family:var(--term)}
.amp-title{font-size:22px;color:#36e0c0;line-height:1;letter-spacing:1px;text-shadow:0 0 6px rgba(54,224,192,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amp-sub{font-size:14px;color:#1f9f8c;margin-top:2px}
.amp-seek{width:100%}
.amp-times{display:flex;justify-content:space-between;font-size:12px;color:#000}
.amp-ctrls{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}
.amp-btn{font-family:var(--ui);font-size:13px;color:#000;cursor:inherit;background:var(--gray);width:36px;height:28px;box-shadow:var(--bo1)}
.amp-btn.big{width:46px;font-weight:bold}
.amp-btn:active{box-shadow:var(--bi1)}
.amp-volwrap{display:flex;align-items:center;gap:4px;font-size:11px;color:#000}
.amp-vol{width:64px}
.amp-badge{font-size:11px;color:#333;text-align:center}
/* restricted / leaked snippet visuals */
.amp-cover.amp-restricted{filter:grayscale(.5) contrast(1.2) brightness(.8)}
.amp-cover.amp-restricted::after{content:"⚠ CORRUPTED FILE";position:absolute;top:6px;left:0;right:0;text-align:center;font-family:var(--term);font-size:15px;color:#ff5a5a;letter-spacing:2px;text-shadow:0 0 6px #000;animation:flick .25s steps(2) infinite}
.amp-cover.amp-restricted::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(255,255,255,.06) 2px 3px);mix-blend-mode:screen;animation:rollbar 5s linear infinite}
@keyframes flick{50%{opacity:.55}}
@keyframes rollbar{0%{transform:translateY(0)}100%{transform:translateY(20px)}}
.amp-title.amp-glitch{color:#ff6a6a;text-shadow:1px 0 #1ad,-1px 0 #d23b5a;animation:flick .3s steps(2) infinite}
.amp-right{flex:1;overflow:auto;background:#fff;box-shadow:var(--bi1);margin:8px 8px 8px 0}
.amp-rhead{font-size:12px;font-weight:bold;color:#fff;background:var(--navy);padding:4px 6px;position:sticky;top:0}
.amp-rows,.amp-singles{margin-bottom:2px}
.amp-row{display:flex;align-items:center;gap:8px;padding:3px 6px;cursor:inherit;font-size:12px;color:#000}
.amp-row:hover{background:#d6d6ff}
.amp-row.now{background:var(--navy);color:#fff}
.amp-row.now .amp-n,.amp-row.now .amp-rl{color:#cdd}
.amp-n{flex:0 0 22px;color:#666;font-size:11px}
.amp-rt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amp-rl{color:#666;font-size:11px}
.amp-row.link{color:var(--navy)}
.amp-row.link:hover{background:#d6d6ff}
@media (max-width:560px){.app-music{flex-direction:column}.amp-left{flex:none;max-width:none}.amp-right{margin:0 8px 8px}.amp-cover{max-width:170px;margin:0 auto}}

/* ===================== VIDEOS ===================== */
.app-videos{display:flex;height:100%;background:var(--gray)}
.vid-screen-wrap{flex:1;display:flex;flex-direction:column;padding:8px;min-width:0}
.vid-screen{flex:1;background:#000;box-shadow:var(--bi);position:relative;min-height:150px}
.vid-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-cap{font-size:12px;color:#000;padding:6px 2px 0}
.vid-list{flex:0 0 210px;overflow:auto;background:#fff;box-shadow:var(--bi1);margin:8px 8px 8px 0}
.vid-lhead{font-size:12px;font-weight:bold;color:#fff;background:var(--navy);padding:4px 6px;position:sticky;top:0}
.vid-row{display:flex;gap:7px;padding:5px;cursor:inherit;border-bottom:1px solid #e3e3e3}
.vid-row:hover{background:#d6d6ff}
.vid-row.now{background:var(--navy)}
.vid-row.now .vid-rt{color:#fff}.vid-row.now .vid-rs{color:#cdd}
.vid-thumb{flex:0 0 72px;height:44px;overflow:hidden;box-shadow:var(--bi1);background:#000}
.vid-thumb img{width:100%;height:100%;object-fit:cover}
.vid-rmeta{min-width:0}
.vid-rt{font-size:12px;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vid-rs{font-size:11px;color:#555}
@media (max-width:620px){.app-videos{flex-direction:column}.vid-list{flex:none;max-height:38%;margin:0 8px 8px}}

/* ===================== BROWSER (FazoNet Explorer) ===================== */
.app-browser{display:flex;flex-direction:column;height:100%;background:var(--gray)}
.br-bar{display:flex;gap:3px;padding:3px;align-items:center}
.br-nav{font-family:var(--ui);font-size:13px;width:26px;height:24px;cursor:inherit;color:#000;background:var(--gray);box-shadow:var(--bo1)}
.br-nav:disabled{color:var(--gray-d)}
.br-nav:active{box-shadow:var(--bi1)}
.br-addr{flex:1;font-family:var(--ui);font-size:12px;color:#000;background:#fff;padding:3px 6px;box-shadow:var(--bi1);border:0}
.br-go{font-family:var(--ui);font-size:12px;font-weight:bold;color:#000;background:var(--gray);cursor:inherit;padding:0 10px;height:24px;box-shadow:var(--bo1)}
.br-go:active{box-shadow:var(--bi1)}
.br-bookmarks{display:flex;gap:3px;padding:2px 4px;overflow-x:auto;align-items:center}
.br-bm{font-size:11px;color:#000;cursor:inherit;white-space:nowrap;padding:2px 6px;background:var(--gray);box-shadow:var(--bo1)}
.br-bm:active{box-shadow:var(--bi1)}
.br-view{flex:1;overflow:auto;position:relative;background:#fff;box-shadow:var(--bi1);margin:0 3px 3px}
.br-iframe{width:100%;height:100%;border:0;background:#fff}
.br-loading{padding:18px;font-family:var(--term);font-size:18px;color:#000}
/* internal "web" pages — light retro web */
.web-page{padding:0 0 18px;color:#000;font-family:var(--ui);font-size:13px;background:#fff}
.web-banner{background:var(--navy);color:#fff;font-size:13px;padding:4px 0;border-bottom:2px solid #000}
.web-hero{text-align:center;padding:14px 12px;background:#dfe7ef;border-bottom:2px groove #fff}
.web-h1{font-family:var(--pixel);font-size:18px;color:var(--navy);margin-bottom:8px;line-height:1.5}
.web-tag{color:#333;font-size:13px;margin-bottom:10px}
.web-search{display:flex;gap:5px;justify-content:center}
.web-q{font-family:var(--ui);font-size:13px;background:#fff;color:#000;padding:4px 7px;width:min(300px,70%);box-shadow:var(--bi1);border:0}
.web-go{height:25px}
.web-cols{display:flex;gap:14px;padding:14px}
.web-main{flex:1;min-width:0}
.web-side{flex:0 0 170px}
.web-sect{font-weight:bold;font-size:13px;color:var(--navy);border-bottom:2px solid #000080;margin:14px 0 8px;padding-bottom:2px}
.web-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.web-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;background:var(--gray);box-shadow:var(--bo1);cursor:inherit;font-size:22px;color:#000}
.web-tile span{font-size:11px;font-weight:bold}
.web-tile:active{box-shadow:var(--bi1)}
.web-links{list-style:none;display:flex;flex-direction:column;gap:4px}
.web-links a{cursor:inherit;color:#0000cc;text-decoration:underline}
.web-links a:hover{color:#cc0000}
.web-box{background:#eee;box-shadow:var(--bo1);margin-bottom:10px;padding:6px;text-align:center}
.web-boxh{font-weight:bold;font-size:11px;color:#fff;background:var(--navy);margin:-6px -6px 6px;padding:2px}
.web-counter{font-family:var(--term);font-size:22px;color:#0f0;background:#000;padding:3px;letter-spacing:3px;box-shadow:var(--bi1)}
.web-spin{width:74px;height:74px;object-fit:cover;box-shadow:var(--bi1)}
.web-mini{display:inline-block;margin-top:6px;color:#0000cc;cursor:inherit;font-size:12px;text-decoration:underline}
.web-small{font-size:11px;color:#555;margin-top:4px}
.web-ring a{color:var(--navy);cursor:inherit;font-size:14px;font-weight:bold}
.web-uc{font-size:20px}
.web-foot{text-align:center;font-size:11px;color:#555;padding:10px;border-top:1px solid #ccc;margin-top:10px}
.web-doc{padding:18px;max-width:720px;margin:0 auto;line-height:1.5;background:#fff}
.web-doc p{margin:10px 0}
.web-doc blockquote{border-left:3px solid var(--navy);padding-left:12px;color:#222;font-style:italic;margin:12px 0}
.web-img-r{float:right;width:110px;margin:0 0 10px 14px;box-shadow:var(--bi1)}
.web-img-c{display:block;width:180px;margin:10px auto;box-shadow:var(--bi1)}
.web-tracklist{list-style:none}
.web-tracklist li{display:flex;gap:10px;padding:4px 0;border-bottom:1px solid #ddd}
.web-tracklist li span{color:#888;width:24px}
.web-tracklist li em{margin-left:auto;color:#888;font-style:normal}
.web-error{padding:28px;text-align:center}
.web-url{font-family:var(--term);color:var(--navy);word-break:break-all;background:#eee;padding:8px;box-shadow:var(--bi1)}
@media (max-width:620px){.web-cols{flex-direction:column}.web-side{flex:none}.web-grid{grid-template-columns:repeat(2,1fr)}}

/* ===================== MERCH (FazoMart) ===================== */
.app-merch{height:100%;background:#fff;box-shadow:var(--bi1);overflow:auto}
.mart-head{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;font-size:12px;font-weight:bold;color:#fff;background:var(--navy);position:sticky;top:0;z-index:2}
.mart-cart{font-size:12px;color:#cdd;font-weight:normal}
.mart-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:12px}
.mart-card{background:var(--gray);box-shadow:var(--bo1);padding:8px;cursor:inherit}
.mart-card:active{box-shadow:var(--bi1)}
.mart-thumb{aspect-ratio:1;background:#fff;box-shadow:var(--bi1);overflow:hidden;display:flex;align-items:center;justify-content:center}
.mart-thumb img{width:100%;height:100%;object-fit:cover}
.mart-name{font-size:13px;font-weight:bold;color:#000;margin-top:7px}
.mart-var{font-size:11px;color:#444;margin-top:2px}
.mart-row{display:flex;justify-content:space-between;align-items:center;margin-top:7px}
.mart-price{font-size:15px;font-weight:bold;color:#000}
.mart-stock{font-size:11px;color:var(--good);font-weight:bold}
.mart-stock.out{color:var(--danger)}
.mart-foot{text-align:center;font-size:11px;color:#555;padding:10px}
.mart-d-top{display:flex;gap:16px;padding:14px;flex-wrap:wrap;background:#fff}
.mart-d-media{flex:1;min-width:220px}
.mart-d-stage{aspect-ratio:1;background:#fff;box-shadow:var(--bi);overflow:hidden}
.mart-d-stage img{width:100%;height:100%;object-fit:cover}
.mart-d-thumbs{display:flex;gap:8px;margin-top:8px}
.mart-d-thumbs img{width:54px;height:54px;object-fit:cover;background:#fff;box-shadow:var(--bo1);cursor:inherit}
.mart-d-thumbs img.sel{box-shadow:var(--bi1);outline:1px dotted #000;outline-offset:-3px}
.mart-d-info{flex:1;min-width:220px}
.mart-back{color:#0000cc;cursor:inherit;font-size:12px;display:inline-block;margin-bottom:8px;text-decoration:underline}
.mart-d-name{font-size:18px;color:#000}
.mart-d-var{font-size:12px;color:#444}
.mart-d-price{font-size:20px;font-weight:bold;color:#000;margin:8px 0}
.mart-d-desc{font-size:12px;color:#222;line-height:1.4}
.mart-d-stock{display:inline-block;margin:8px 0;padding:3px 8px;font-size:11px;font-weight:bold;color:var(--good);box-shadow:var(--bo1)}
.mart-d-stock.out{color:var(--danger)}
.mart-buy{width:100%;margin-top:6px}
.mart-notify{margin-top:12px}
.mart-notify-h{font-size:12px;font-weight:bold;color:#000;margin-bottom:6px}

/* ===================== TOUR ===================== */
.app-tour{position:relative;height:100%;background:var(--gray);overflow:hidden;padding:6px}
.tour-stage{position:absolute;left:6px;right:6px;top:6px;bottom:30px;display:flex;align-items:center;justify-content:center;background:#03242e;box-shadow:var(--bi)}
.tour-mapbox{position:relative;width:100%;max-width:100%;aspect-ratio:2/1;max-height:100%}
.tour-map{position:absolute;inset:0;width:100%;height:100%;display:block}
.tdot{fill:#2f7da0;opacity:.85}
.tour-scan{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#5fb6da,transparent);box-shadow:0 0 10px #5fb6da;animation:scan 4s linear infinite;opacity:.6;pointer-events:none}
@keyframes scan{0%{top:0}100%{top:100%}}
.tour-pin{position:absolute;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%);cursor:inherit;border:1px solid #021}
.tour-pin.past{background:#3a6a80}
.tour-pin.hq{background:#eaf7ff;box-shadow:0 0 0 3px rgba(95,182,218,.3),0 0 12px #5fb6da;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 2px rgba(95,182,218,.5)}100%{box-shadow:0 0 0 14px rgba(95,182,218,0)}}
.tour-pin:hover{transform:translate(-50%,-50%) scale(1.4)}
.tour-pop{position:absolute;transform:translate(-50%,calc(-100% - 12px));min-width:150px;background:var(--gray);box-shadow:var(--bo);padding:7px 9px;z-index:6;font-size:12px;color:#000}
.tour-pop b{display:block;font-weight:bold;font-size:13px}
.tour-pop .tp-sub{font-size:11px;color:#555}
.tour-pop .tp-note{display:block;font-size:11px;color:var(--navy);margin-top:3px}
.tour-pop .tp-stat{display:block;font-size:11px;color:#555;margin-top:2px}
.tour-pop-x{position:absolute;top:2px;right:5px;cursor:inherit;color:#555}
.tour-overlay{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:min(400px,86%);background:var(--gray);box-shadow:var(--bo);padding:12px;text-align:center}
.tour-radar{font-family:var(--term);font-size:15px;color:var(--navy);animation:blink 1.6s steps(1) infinite}
.tour-ns-h{font-family:var(--pixel);font-size:14px;color:var(--navy);margin:6px 0 6px}
.tour-ns-b{font-size:12px;color:#333;margin-bottom:8px}
.tour-legend{position:absolute;left:6px;right:6px;bottom:6px;height:20px;display:flex;align-items:center;padding:0 8px;font-size:11px;color:#000;box-shadow:var(--bi1);background:var(--gray)}
.tour-legend .lg{font-size:11px}.tour-legend .lg.upc{color:var(--good)}.tour-legend .lg.past{color:#3a6a80}.tour-legend .lg.hq{color:#1084d0}

/* ===================== UPDATES ===================== */
.app-updates{height:100%;overflow:auto;padding:12px;background:var(--gray)}
.up-hero{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.up-sigil{width:72px;height:72px;object-fit:cover;box-shadow:var(--bi1);background:#000}
.up-h1{font-family:var(--pixel);font-size:17px;color:var(--navy)}
.up-h2{font-size:12px;color:#222;margin-top:8px;line-height:1.4}
.up-h3{font-size:11px;color:#555;margin-top:6px}
.up-note{margin-top:8px;font-size:12px;color:#222;line-height:1.5}
.up-note .up-small{font-size:11px;color:#555}

/* ===================== VIDEO CHAT ===================== */
.app-call{height:100%;display:flex;flex-direction:column;background:var(--gray);padding:8px;overflow:auto}
.call-screen{position:relative;aspect-ratio:16/10;background:#000;box-shadow:var(--bi);overflow:hidden}
.call-static{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.call-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:8px;font-family:var(--term)}
.call-rec{color:#ff5a5a;font-size:15px;animation:blink 1.4s steps(1) infinite}
.call-time{align-self:flex-end;color:#bfe6f7;font-size:15px}
.call-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center}
.call-ring{font-size:42px;animation:pulse2 1.4s ease-in-out infinite}
@keyframes pulse2{50%{transform:scale(1.15);opacity:.7}}
.call-status{font-size:19px;color:#fff}
.call-sub{font-family:var(--pixel);font-size:15px;color:#5fb6da}
.call-ctrls{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.call-signup{margin-top:8px}
.call-signup-h{font-size:11px;color:#444;text-align:center;margin-bottom:6px}

/* ===================== LOGBOOK ===================== */
.app-logbook{height:100%;display:flex;flex-direction:column;background:var(--gray)}
.lb-head{font-size:12px;font-weight:bold;color:#fff;background:var(--navy);padding:4px 8px}
.lb-list{flex:1;overflow:auto;background:#fff;box-shadow:var(--bi1);margin:6px;padding:4px}
.lb-note{padding:5px 6px;border-bottom:1px solid #e6e6e6}
.lb-meta{display:flex;justify-content:space-between;font-size:11px}
.lb-meta b{color:var(--navy)} .lb-meta span{color:#888}
.lb-msg{font-size:13px;color:#000;margin-top:2px;word-break:break-word}
.lb-empty{padding:18px;text-align:center;color:#777;font-size:12px}
.lb-form{display:flex;gap:5px;padding:0 6px 6px}
.lb-form .lb-name{flex:0 0 90px}
.lb-form .lb-msgin{flex:1;min-width:0}
@media (max-width:520px){.lb-form{flex-wrap:wrap}.lb-form .lb-name{flex:1}}
.lb-auth{font-size:11px;color:#202020;padding:2px 8px 0}
.lb-auth a{color:var(--navy);cursor:pointer;text-decoration:underline}
.lb-form .lb-name.locked{background:#dcdcdc;color:#303030;font-weight:bold}

/* ===================== ACCOUNT (FAZO ID) ===================== */
.app-account{height:100%;display:flex;align-items:center;justify-content:center;background:var(--gray);padding:14px}
.acc-card{width:100%;max-width:286px;text-align:center;background:var(--gray);padding:16px 16px 14px;box-shadow:var(--bo1)}
.acc-logo{width:48px;height:48px;margin:0 auto 8px}
.acc-logo svg{width:100%;height:100%;image-rendering:pixelated}
.acc-logo img{width:100%;height:100%;object-fit:contain}
.acc-av{width:54px;height:54px;display:block;margin:0 auto 8px;object-fit:cover;box-shadow:var(--bi1)}
.acc-h{font-size:15px;margin:2px 0;color:#000}
.acc-p{font-size:12px;color:#303030;margin:0 0 12px;word-break:break-word}
.acc-btn{display:block;width:100%;margin:6px 0;min-height:25px}
.acc-fine{font-size:10px;color:#404040;margin-top:10px}
.acc-load{padding:20px;text-align:center;color:#202020;font-size:12px}

/* ===================== EXPLORER / NOTEPAD ===================== */
.app-explorer{height:100%;background:#fff;box-shadow:var(--bi1);overflow:auto}
.exp-head{font-size:12px;font-weight:bold;color:#fff;background:var(--navy);padding:4px 8px;position:sticky;top:0}
.exp-grid{display:flex;flex-wrap:wrap;gap:6px;padding:12px;align-content:flex-start}
.exp-item{width:96px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:inherit;text-align:center}
.exp-item:hover{background:#d6d6ff}
.exp-item .ei-ico{font-size:30px;line-height:1}
.exp-item .ei-ico svg{width:34px;height:34px;image-rendering:pixelated}
.exp-item .ei-lbl{font-size:12px;color:#000}
.bin-note{font-size:11px;color:#a80000;background:#fff4f4;box-shadow:var(--bi1);margin:6px 8px;padding:5px 8px}
.bin-lost .ei-lbl.glitch{color:#333;text-shadow:0.7px 0 rgba(210,59,90,.7),-0.7px 0 rgba(26,150,221,.6);animation:flick .9s steps(2) infinite}
.bin-lost .bin-prod{font-size:10px;color:#777;text-shadow:none}
.bin-lost:hover{background:#ffe9e9}
.bin-lost .ei-ico{filter:grayscale(.4) contrast(1.1)}
.app-notepad{height:100%;background:#fff;box-shadow:var(--bi1)}
.np-text{width:100%;height:100%;border:0;resize:none;background:#fff;color:#000;font-family:var(--term);font-size:18px;line-height:1.35;padding:8px;outline:none}

/* ===================== PHOTOS (gallery) ===================== */
.app-photos{height:100%;display:flex;flex-direction:column;background:var(--gray)}
.ph-stage{flex:1;background:#000;box-shadow:var(--bi);margin:6px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:140px}
.ph-stage img{max-width:96%;max-height:94%;width:auto;height:auto;image-rendering:pixelated;display:block}
.ph-cap{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#eaf7ff;font-family:var(--term);font-size:16px;padding:3px 8px;text-align:center}
.ph-strip{flex:0 0 78px;display:flex;gap:6px;padding:6px;overflow-x:auto;background:var(--gray)}
.ph-thumb{flex:0 0 88px;height:62px;background:#000;box-shadow:var(--bo1);overflow:hidden;cursor:inherit}
.ph-thumb.sel{box-shadow:var(--bi1);outline:1px dotted #000;outline-offset:-3px}
.ph-thumb img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.ph-toolbar{display:flex;gap:5px;padding:5px;align-items:center}
.ph-toolbar .px{margin-left:auto;font-size:11px;color:#222;display:flex;gap:6px;align-items:center}

/* ===================== SETTINGS (Display Properties) ===================== */
.app-settings{height:100%;display:flex;flex-direction:column;background:var(--gray);padding:8px;overflow:auto}
.set-tabs{display:flex;gap:2px;margin-bottom:-1px;position:relative;z-index:2}
.set-tab{font-family:var(--ui);font-size:12px;padding:4px 12px;background:var(--gray);box-shadow:var(--bo1);cursor:inherit;border:0}
.set-tab.sel{font-weight:bold;box-shadow:inset 1px 1px #fff,inset -1px 0 #808080;padding-bottom:6px}
.set-panel{box-shadow:var(--bo);background:var(--gray);padding:12px}
.set-h{font-size:12px;font-weight:bold;margin-bottom:8px}
.set-wp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.set-wp{cursor:inherit;text-align:center}
.set-wp .prev{aspect-ratio:4/3;box-shadow:var(--bo1);background:#0d3b4a center/cover no-repeat;image-rendering:pixelated}
.set-wp.sel .prev{box-shadow:var(--bi1);outline:2px solid #000080;outline-offset:-2px}
.set-wp .nm{font-size:11px;margin-top:4px}
.set-row{display:flex;align-items:center;gap:8px;padding:6px 2px;font-size:12px}
.set-row label{display:flex;align-items:center;gap:8px;cursor:inherit}
.set-row .desc{color:#444;font-size:11px}
.set-mon{width:140px;height:110px;margin:0 auto 10px;box-shadow:var(--bo);background:var(--gray);padding:8px 8px 18px;position:relative}
.set-mon .scr{height:100%;box-shadow:var(--bi);background:#0d3b4a center/cover no-repeat;image-rendering:pixelated}
.set-mon .base{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:40px;height:5px;background:#808080;box-shadow:var(--bo1)}

/* ===================== DAMAGE ASCII ===================== */
.app-damage{height:100%;background:#000;display:flex;flex-direction:column}
.dmg-screen{flex:1;position:relative;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:var(--bi)}
.dmg-video{max-width:100%;max-height:100%;display:block;background:#000}
.dmg-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.16) 2px 3px);mix-blend-mode:multiply;opacity:.4}
.dmg-tap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(0,0,0,.5);cursor:inherit;color:#37d24a;font-family:var(--term)}
.dmg-play{width:72px;height:72px;border-radius:50%;border:2px solid #37d24a;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 0 18px rgba(55,210,74,.4)}
.dmg-cap{font-size:18px;letter-spacing:2px;text-shadow:0 0 8px rgba(55,210,74,.5)}

/* ===================== GAME ===================== */
.app-game{height:100%;display:flex;flex-direction:column;background:var(--gray);padding:4px}
.game-screen{position:relative;flex:1;overflow:hidden;background:#000;box-shadow:var(--bi);min-height:200px}
.game-cv{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;background:#02060a}
.game-cross{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:rgba(191,230,247,.7);font-size:22px;font-family:var(--term);pointer-events:none}
.game-flash{position:absolute;inset:0;background:radial-gradient(circle,rgba(191,230,247,.5),transparent 70%);opacity:0;transition:opacity .05s;pointer-events:none}
.game-gun{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:86px;height:66px;pointer-events:none;
  background:linear-gradient(#1b465f,#0a1a24),radial-gradient(circle at 50% 0,#5fb6da,transparent 60%);
  clip-path:polygon(30% 100%,30% 40%,42% 40%,42% 10%,58% 10%,58% 40%,70% 40%,70% 100%);filter:drop-shadow(0 0 6px rgba(95,182,218,.4))}
.game-hud{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:5px 9px;background:linear-gradient(transparent,rgba(2,8,12,.9));font-family:var(--term);pointer-events:none}
.gh-left{display:flex;align-items:center;gap:7px}
.gh-face{width:34px;height:34px;object-fit:cover;box-shadow:var(--bo1)}
.gh-stats{font-size:17px;color:#cfe}
.gh-hp b{color:#ff6a6a} .gh-an b{color:#5fb6da}
.gh-lvl{font-size:14px;color:#5fb6da}
.gh-msg{margin-left:auto;font-size:16px;color:#fff}
.game-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;background:rgba(2,6,10,.93);padding:20px}
.go-title{font-family:var(--pixel);font-size:26px;color:#fff;text-shadow:2px 2px 0 #000,0 0 20px rgba(95,182,218,.5)}
.go-sub{font-family:var(--pixel);font-size:13px;color:#5fb6da}
.go-ctrls{font-size:14px;color:#9bb;max-width:420px;line-height:1.6}
.go-ctrls b{color:#fff}
.go-btn{font-size:14px;margin-top:6px}
.go-fine{font-size:12px;color:#788}
.game-touch{display:none}
@media (hover:none) and (pointer:coarse){
  .game-touch{display:flex;justify-content:space-between;align-items:flex-end;padding:8px 14px;background:var(--gray)}
  .gt-pad{display:flex;flex-direction:column;align-items:center;gap:4px}
  .gt-mid{display:flex;gap:4px}
  .gt-b{width:46px;height:42px;font-size:18px;color:#000;background:var(--gray);box-shadow:var(--bo1)}
  .gt-b:active{box-shadow:var(--bi1)}
  .gt-fire .gt-b{width:70px;height:70px;border-radius:50%;font-size:28px}
}