/* shell-arcade/public/shared/theme.css */
@font-face{
  font-family:'ShellPower';
  src:url('/asset/fonts/shell/Shell%20Book%20font%20Shell%20Power.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+20A0-20CF;
}
@font-face{
  font-family:'ShellPower';
  src:url('/asset/fonts/shell/Shell%20Medium%20Font.otf') format('opentype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+20A0-20CF;
}
@font-face{
  font-family:'ShellPower';
  src:url('/asset/fonts/shell/Shell%20Bold%20Font%20for%20Shell%20Power.otf') format('opentype');
  font-weight:800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+20A0-20CF;
}
@font-face{
  font-family:'KittiShell';
  src:url('/asset/fonts/kitti/KIT55F.TTF') format('truetype'),
      url('../../../asset/fonts/kitti/KIT55F.TTF') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0E00-0E7F;
}
@font-face{
  font-family:'KittiShell';
  src:url('/asset/fonts/kitti/KIT55F.TTF') format('truetype'),
      url('../../../asset/fonts/kitti/KIT55F.TTF') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0E00-0E7F;
}
@font-face{
  font-family:'KittiShell';
  src:url('/asset/fonts/kitti/KIT55F.TTF') format('truetype'),
      url('../../../asset/fonts/kitti/KIT55F.TTF') format('truetype');
  font-weight:800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0E00-0E7F;
}
/* Use the Thai face for punctuation and numerals that belong to Thai copy too. */
@font-face{
  font-family:'KittiShellContext';
  src:url('/asset/fonts/kitti/KIT55F.TTF') format('truetype'),
      url('../../../asset/fonts/kitti/KIT55F.TTF') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0020,U+0021-002F,U+0030-0039,U+003A-0040,U+005B-0060,U+007B-007E,U+00B7,U+2010-2015,U+2018-201F,U+2022,U+2026,U+0E00-0E7F;
}
@font-face{
  font-family:'KittiShellContext';
  src:url('/asset/fonts/kitti/KIT55F.TTF') format('truetype'),
      url('../../../asset/fonts/kitti/KIT55F.TTF') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0020,U+0021-002F,U+0030-0039,U+003A-0040,U+005B-0060,U+007B-007E,U+00B7,U+2010-2015,U+2018-201F,U+2022,U+2026,U+0E00-0E7F;
}
@font-face{
  font-family:'KittiShellContext';
  src:url('/asset/fonts/kitti/KIT55F.TTF') format('truetype'),
      url('../../../asset/fonts/kitti/KIT55F.TTF') format('truetype');
  font-weight:800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0020,U+0021-002F,U+0030-0039,U+003A-0040,U+005B-0060,U+007B-007E,U+00B7,U+2010-2015,U+2018-201F,U+2022,U+2026,U+0E00-0E7F;
}
:root{
  --shell-red:#e30613; --shell-yellow:#fdc500; --ink:#141414;
  --shell-green:#0B7F2A; --shell-lime:#77C83D; --paper:#fffef9; --soft:#f8f6ef;
  --g900:#1d1d1d; --g800:#262626; --g700:#383838; --g500:#6b6b6b; --white:#fff;
  --brand-font:'ShellPower','KittiShell',system-ui,sans-serif;
  --thai-font:'KittiShellContext','ShellPower',Tahoma,system-ui,sans-serif;
  --disp:var(--brand-font);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--disp);color:var(--white);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;font-synthesis:none}
.thai,.thai-text{font-family:var(--thai-font);font-weight:600;line-height:1.16;padding-top:.03em;padding-bottom:.02em;overflow:visible}
.kicker{font-size:11px;letter-spacing:.42em;color:var(--shell-yellow);font-weight:700}
.btn{font-family:var(--disp);font-weight:800;letter-spacing:.06em;font-size:18px;border:none;border-radius:999px;padding:18px 40px;cursor:pointer;color:#000;background:var(--shell-yellow);transition:transform .12s}
.btn:active{transform:scale(.96)}
.btn.red{background:var(--shell-red);color:#fff}
.btn.ghost{background:transparent;color:#fff;border:1.5px solid var(--g700)}
.pecten{width:34px;height:34px;flex:0 0 auto}
.thai{font-family:var(--thai-font)}
.brand-header{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-height:54px}
.brand-header .pecten{width:auto;height:44px}
.nextopia-logo{font-family:var(--brand-font);font-size:22px;font-weight:800;letter-spacing:-.02em;color:#67b95f;text-transform:uppercase}
.nextopia-logo .blue{color:#38a5cf}
.shell-swoosh-footer{display:none;position:absolute;left:0;right:0;bottom:0;height:110px;pointer-events:none;overflow:hidden;border-radius:0 0 28px 28px}
.shell-swoosh-footer::before,.shell-swoosh-footer::after{content:'';position:absolute;left:-12%;right:-12%;bottom:-72px;height:118px;border-radius:50% 50% 0 0;transform:rotate(-7deg)}
.shell-swoosh-footer::before{background:linear-gradient(90deg,var(--shell-yellow),var(--shell-yellow));bottom:-58px}
.shell-swoosh-footer::after{background:linear-gradient(90deg,transparent 0 55%,var(--shell-red) 58% 70%,var(--shell-yellow) 74% 100%);bottom:-76px;opacity:.96}
.primary-red-button,.primary-yellow-button{border:none;border-radius:999px;font-family:var(--brand-font);font-weight:800;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.16),0 12px 22px rgba(0,0,0,.16)}
.primary-red-button{background:#e30613;color:#fff;box-shadow:inset 0 1px 1px rgba(255,255,255,.42),inset 0 -2px 2px rgba(119,0,0,.28),0 5px 0 rgba(119,0,0,.72),0 10px 18px rgba(0,0,0,.14)}
.primary-yellow-button{background:#fdc500;color:#080808;box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -2px 2px rgba(153,105,0,.2),0 5px 0 rgba(153,105,0,.72),0 10px 18px rgba(0,0,0,.14)}
.phone-shell-screen{position:relative;min-height:100dvh;background:var(--paper);color:#080808;overflow:hidden;padding:28px 24px 34px;display:flex;flex-direction:column}
.phone-shell-screen::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 6% 7%,rgba(253,197,0,.22) 0 1px,transparent 1.8px),radial-gradient(circle at 94% 14%,rgba(253,197,0,.24) 0 1px,transparent 1.8px);background-size:9px 9px,10px 10px;mask-image:linear-gradient(#000 0 22%,transparent 45%);pointer-events:none}
.phone-content{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;align-items:center;text-align:center;width:100%}
.hero-media{position:relative;overflow:hidden;border-radius:10px;background:#d9eee7}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;display:block}
.play-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:82px;height:82px;border:6px solid rgba(255,255,255,.95);border-radius:50%;background:rgba(0,0,0,.25)}
.play-mark::after{content:'';position:absolute;left:31px;top:21px;border-left:25px solid #fff;border-top:17px solid transparent;border-bottom:17px solid transparent}
.qr-card{background:#fff;border-radius:10px;padding:10px;box-shadow:0 3px 12px rgba(0,0,0,.12);display:inline-flex}
.qr-card img{display:block;width:100%;height:100%}