@font-face{font-family:"Plex Thai";font-weight:400;font-display:swap;src:url(/fonts/plex-thai-400.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Plex Thai";font-weight:500;font-display:swap;src:url(/fonts/plex-thai-500.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Plex Thai";font-weight:600;font-display:swap;src:url(/fonts/plex-thai-600.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Plex Thai";font-weight:700 900;font-display:swap;src:url(/fonts/plex-thai-700.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Plex Thai";font-weight:400;font-display:swap;src:url(/fonts/plex-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+0E3F}
@font-face{font-family:"Plex Thai";font-weight:500;font-display:swap;src:url(/fonts/plex-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+0E3F}
@font-face{font-family:"Plex Thai";font-weight:600;font-display:swap;src:url(/fonts/plex-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+0E3F}
@font-face{font-family:"Plex Thai";font-weight:700 900;font-display:swap;src:url(/fonts/plex-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+0E3F}
@font-face{font-family:"Prompt";font-weight:500;font-display:swap;src:url(/fonts/prompt-thai-500.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Prompt";font-weight:600;font-display:swap;src:url(/fonts/prompt-thai-600.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Prompt";font-weight:700 900;font-display:swap;src:url(/fonts/prompt-thai-700.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Prompt";font-weight:500;font-display:swap;src:url(/fonts/prompt-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+0E3F}
@font-face{font-family:"Prompt";font-weight:600;font-display:swap;src:url(/fonts/prompt-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+0E3F}
@font-face{font-family:"Prompt";font-weight:700 900;font-display:swap;src:url(/fonts/prompt-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+0E3F}
/* Hopfaddict Karaoke — blue theme (matches the shop websites: navy + royal blue, gold trim, red accent, cream text) */
:root{--bg:#081634;--bg2:#0d214b;--navy:#1d3567;--navy-d:#14264b;--blue:#2f6fd6;--blue2:#4c8dff;--sky:#62c3ff;--sky2:#b8e6ff;
  --card:rgba(120,170,255,.08);--card2:rgba(120,170,255,.14);--line:rgba(230,201,119,.30);--line2:rgba(98,195,255,.35);
  --gold:#e6c977;--gold2:#ffe7a3;--gold3:#c9a24b;--red:#e5323a;--red2:#a81d22;--pink:#ff6b81;--txt:#f7f2e4;--mut:#a9bbdc;--ok:#2ee59d;
  --f:"Plex Thai","Noto Sans Thai","Leelawadee UI",system-ui,sans-serif;--fh:"Prompt","Plex Thai",system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:var(--f)}
body{background:radial-gradient(1100px 700px at 15% -10%,rgba(76,141,255,.38),transparent 60%),radial-gradient(900px 650px at 110% 110%,rgba(98,195,255,.22),transparent 60%),radial-gradient(700px 500px at 60% 40%,rgba(29,53,103,.55),transparent 70%),linear-gradient(180deg,#0c1f49,#071230);background-attachment:fixed}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,textarea,select{font:inherit;color:var(--txt)}
.h{font-family:var(--fh);font-weight:700;letter-spacing:.2px}
.neon{color:#fff;text-shadow:0 0 6px rgba(98,195,255,.95),0 0 22px rgba(76,141,255,.75),0 0 44px rgba(47,111,214,.5)}
.neong{color:var(--gold2);text-shadow:0 0 6px rgba(230,201,119,.9),0 0 22px rgba(230,201,119,.55)}
.gold{background:linear-gradient(180deg,#fff6d2 0%,#e6c977 50%,#b98a2a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.glass{background:linear-gradient(160deg,rgba(130,180,255,.13),rgba(40,80,170,.06));border:1px solid var(--line2);border-radius:22px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 20px 50px rgba(0,8,30,.5),inset 0 1px 0 rgba(255,255,255,.12)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--card2);border:1px solid var(--line2);font-size:13px;white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.mut{color:var(--mut)}
.row{display:flex;align-items:center;gap:10px}.grow{flex:1;min-width:0}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:14px;background:var(--card2);border:1px solid var(--line2);font-weight:600;transition:transform .12s,background .2s,box-shadow .2s}
.btn:active{transform:scale(.96)}
.btn.pri{background:linear-gradient(180deg,#ffeaa6,#d9ac3e);color:#1d1400;border:0;box-shadow:0 8px 24px rgba(230,201,119,.32),inset 0 1px 0 rgba(255,255,255,.6)}
.btn.blue{background:linear-gradient(180deg,#5aa0ff,#2a5fc4);border:0;color:#fff;box-shadow:0 8px 24px rgba(76,141,255,.4),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.red{background:linear-gradient(180deg,#ff5a61,#b9232a);border:0;color:#fff;box-shadow:0 8px 24px rgba(229,50,58,.35)}
.btn[disabled]{opacity:.38;pointer-events:none}
.badge{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(98,195,255,.15);color:var(--sky2);border:1px solid var(--line2);white-space:nowrap}
.badge.red{background:rgba(229,50,58,.16);color:#ffb3b8;border-color:rgba(229,50,58,.4)}
.badge.gold{background:rgba(230,201,119,.16);color:var(--gold2);border-color:var(--line);-webkit-text-fill-color:currentColor}
.logo-ring{border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--gold),0 0 0 6px rgba(29,53,103,.9),0 0 40px rgba(98,195,255,.45)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes shimmer{to{background-position:200% 0}}
.eq{display:inline-flex;gap:3px;align-items:flex-end;height:16px}.eq i{width:3px;background:var(--sky);border-radius:2px;animation:eq 1s infinite ease-in-out}.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}.eq i:nth-child(4){animation-delay:.1s}
.eq.off i{animation:none;height:3px}
@keyframes eq{0%,100%{height:3px}50%{height:16px}}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:rgba(10,24,58,.96);border:1px solid var(--line2);padding:12px 18px;border-radius:14px;z-index:99;font-weight:600;animation:rise .25s;max-width:90vw;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 20px rgba(98,195,255,.2)}
.toast.err{border-color:rgba(229,50,58,.6);color:#ffb3b8}
/* ===== Space-bridge layer: starfield, HUD grid, neon cyan glow, sliding doors (GPU-cheap: transforms/opacity only) ===== */
:root{--cy:#3ee8ff;--cy2:#9ff4ff;--cyg:rgba(62,232,255,.55);--line2:rgba(62,232,255,.38)}
body::before{content:"";position:fixed;inset:-50% 0 0 0;height:200%;z-index:-1;pointer-events:none;opacity:.75;
  background-image:radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 120px 80px,#bfe9ff,transparent),radial-gradient(1.5px 1.5px at 200px 160px,#fff,transparent),radial-gradient(1px 1px at 260px 40px,#9ff4ff,transparent),radial-gradient(1px 1px at 330px 220px,#fff,transparent),radial-gradient(1.5px 1.5px at 60px 250px,#cfe6ff,transparent),radial-gradient(1px 1px at 160px 300px,#fff,transparent);
  background-size:360px 340px;animation:stardrift 120s linear infinite;will-change:transform}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(62,232,255,.05) 1px,transparent 1px) 0 0/100% 46px,linear-gradient(90deg,rgba(62,232,255,.04) 1px,transparent 1px) 0 0/46px 100%;
  -webkit-mask:radial-gradient(ellipse at 50% 100%,#000 10%,transparent 70%);mask:radial-gradient(ellipse at 50% 100%,#000 10%,transparent 70%)}
@keyframes stardrift{to{transform:translateY(50%)}}
.neon{text-shadow:0 0 6px rgba(62,232,255,.95),0 0 22px rgba(62,232,255,.6),0 0 44px rgba(47,111,214,.5)}
.glass{position:relative;border-color:rgba(62,232,255,.32);box-shadow:0 20px 50px rgba(0,8,30,.5),0 0 24px rgba(62,232,255,.10),inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 30px rgba(62,232,255,.05)}
.glass::before{content:"";position:absolute;inset:6px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(var(--cy),var(--cy)) 0 0/18px 2px,linear-gradient(var(--cy),var(--cy)) 0 0/2px 18px,linear-gradient(var(--cy),var(--cy)) 100% 0/18px 2px,linear-gradient(var(--cy),var(--cy)) 100% 0/2px 18px,linear-gradient(var(--cy),var(--cy)) 0 100%/18px 2px,linear-gradient(var(--cy),var(--cy)) 0 100%/2px 18px,linear-gradient(var(--cy),var(--cy)) 100% 100%/18px 2px,linear-gradient(var(--cy),var(--cy)) 100% 100%/2px 18px;
  background-repeat:no-repeat;opacity:.7;filter:drop-shadow(0 0 4px var(--cyg))}
.btn{border-color:rgba(62,232,255,.35);box-shadow:inset 0 0 14px rgba(62,232,255,.08)}
.btn:hover{box-shadow:0 0 16px rgba(62,232,255,.35),inset 0 0 14px rgba(62,232,255,.15)}
.btn.blue,.btn.cy{background:linear-gradient(180deg,#5ff0ff,#1a8fd6);color:#021a2b;border:0;box-shadow:0 0 22px rgba(62,232,255,.55),inset 0 1px 0 rgba(255,255,255,.6)}
.logo-ring{box-shadow:0 0 0 3px var(--gold),0 0 0 6px rgba(29,53,103,.9),0 0 0 8px rgba(62,232,255,.7),0 0 46px rgba(62,232,255,.55)}
.chip,.badge{border-color:rgba(62,232,255,.4)}
/* sci-fi sliding doors */
.sdoor{position:fixed;inset:0;z-index:9999;pointer-events:none;display:flex}
.sdoor i{flex:1;background:linear-gradient(90deg,#06122e,#10295a 70%,#0b1c42);position:relative;transition:transform .9s cubic-bezier(.7,0,.2,1)}
.sdoor i:first-child{border-right:2px solid var(--cy);box-shadow:inset -18px 0 30px -18px var(--cy),6px 0 24px var(--cyg)}
.sdoor i:last-child{background:linear-gradient(270deg,#06122e,#10295a 70%,#0b1c42);border-left:2px solid var(--cy);box-shadow:inset 18px 0 30px -18px var(--cy),-6px 0 24px var(--cyg)}
.sdoor i::after{content:"";position:absolute;top:50%;width:46%;height:6px;margin-top:-3px;border-radius:3px;background:var(--cy);box-shadow:0 0 14px var(--cy);opacity:.85}
.sdoor i:first-child::after{right:8%}.sdoor i:last-child::after{left:8%}
.sdoor b{position:absolute;left:50%;top:50%;width:min(26vh,160px);height:min(26vh,160px);margin:max(-13vh,-80px) 0 0 max(-13vh,-80px);border-radius:50%;background:#fff url(/img/logo.jpeg) center/cover;box-shadow:0 0 0 3px var(--gold),0 0 0 7px #0b1c42,0 0 0 9px var(--cy),0 0 50px var(--cy);transition:opacity .35s,transform .35s}
.sdoor.open i:first-child{transform:translateX(-101%)}.sdoor.open i:last-child{transform:translateX(101%)}.sdoor.open b{opacity:0;transform:scale(.6)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}body::before{animation:none}.sdoor{display:none}}
html.lowfx body::before{animation:none}html.lowfx .glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(16,38,84,.92)}