@font-face{font-family:THSarabunNew;src:url(../assets/fonts/THSarabunNew.ttf) format("truetype");font-display:swap}
@font-face{font-family:THSarabunNewBold;src:url(../assets/fonts/THSarabunNew_Bold.ttf) format("truetype");font-display:swap}
@font-face{font-family:DBHeavent;src:url(../assets/fonts/DB_Heavent.ttf) format("truetype");font-display:swap}

*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0}
body{
  overflow-x:hidden;
  color:#fff;
  background:radial-gradient(circle at top,#8b3f83 0,#4b215a 48%,#25112f 100%);
  font-family:THSarabunNew,Arial,sans-serif;
}
.game-toolbar{
  min-height:64px;
  padding:8px max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));
  display:flex;
  align-items:center;
  gap:18px;
  background:rgba(30,12,39,.88);
  border-bottom:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
}
.game-toolbar>div{display:flex;flex-direction:column;line-height:1.15}
.game-toolbar strong{font-family:THSarabunNewBold;font-size:24px}
.game-toolbar span{color:#eadcf0;font-size:17px}
.back-link{
  flex:0 0 auto;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  color:#fff;
  font-family:THSarabunNewBold;
  font-size:18px;
  text-decoration:none;
}
.back-link:hover,.back-link:focus{background:#fff;color:#4b215a;outline:none}
.back-link:focus-visible{outline:3px solid #facc15;outline-offset:2px}
#game-shell{position:relative;width:100%;height:calc(100vh - 64px);min-height:360px}
#thegame{position:relative;width:100%;height:100%;overflow:hidden}
#thegame canvas{max-width:100%;max-height:100%;box-shadow:0 16px 48px rgba(0,0,0,.35)}
#game-loading{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:#4b215a;
  transition:opacity .25s ease,visibility .25s ease;
}
#game-loading.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
#game-loading strong{font-family:THSarabunNewBold;font-size:28px}
#game-loading small{font-size:18px;color:#eadcf0}
.loader{width:42px;height:42px;border:4px solid rgba(255,255,255,.25);border-top-color:#facc15;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.rotate-notice{display:none}
.font-preload{position:absolute;left:-10000px;visibility:hidden}
.font-sarabun{font-family:THSarabunNew}.font-sarabun-bold{font-family:THSarabunNewBold}.font-heavent{font-family:DBHeavent}
input,input:focus,input:active{
  width:850px;
  max-width:850px;
  height:96px;
  margin:0;
  padding:0 24px;
  font-family:THSarabunNewBold;
  font-size:60px;
  line-height:96px;
  text-align:center;
  vertical-align:middle;
  border:none;
  background-color:transparent;
  outline:none;
  box-shadow:none;
}
input::placeholder{color:#422746;opacity:.88}
noscript{display:block;padding:20px;text-align:center;background:#7f1d1d}
@media(max-width:680px){
  .game-toolbar{min-height:54px;padding-top:6px;padding-bottom:6px;gap:10px}
  .game-toolbar strong{font-size:20px}.game-toolbar span{font-size:14px}
  .back-link{padding:6px 10px;font-size:15px}
  #game-shell{height:calc(100vh - 54px)}
}
@media(max-width:680px) and (orientation:portrait){
  .rotate-notice{
    display:block;
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom));
    z-index:5;
    padding:9px 12px;
    border-radius:12px;
    text-align:center;
    color:#3b1850;
    background:#fef3c7;
    box-shadow:0 8px 24px rgba(0,0,0,.3);
    font-family:THSarabunNewBold;
    font-size:17px;
  }
}
@media(prefers-reduced-motion:reduce){.loader{animation:none}}