*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'Mitr','Sarabun',sans-serif}
button{font-family:'Mitr',sans-serif;cursor:pointer}


/* ======================================================
   หน้าปก + หน้าแผนที่
====================================================== */

#intro-container,#level-select-scene{
 position:fixed;inset:0;width:100vw;height:100vh;
 overflow:hidden;background:#000
}

#intro-container{display:block;z-index:10}
#level-select-scene{display:none;z-index:30}

#intro-stage,#level-stage{
 position:absolute;left:50%;top:50%;
 width:max(100vw,calc(100vh * 16 / 9));
 height:max(100vh,calc(100vw * 9 / 16));
 transform:translate(-50%,-50%);
 aspect-ratio:16/9;overflow:hidden
}

#intro-video,#level-map-image{
 position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;object-position:center;
 display:block;pointer-events:none;user-select:none
}


/* ======================================================
   ปุ่มเริ่มเกมหน้าแรก
====================================================== */

#start-btn{
 position:absolute;left:50%;top:88%;
 transform:translate(-50%,-50%);
 width:25%;height:10%;
 border:0;border-radius:22px;
 background:transparent;z-index:20
}

#start-btn:hover{
 box-shadow:0 0 18px rgba(255,220,60,.55),
            0 0 35px rgba(255,190,0,.25)
}

#start-btn:active{
 transform:translate(-50%,-50%) scale(.96)
}


/* ======================================================
   GUIDE SCENE
====================================================== */

.guide-scene{
 display:none;position:fixed;inset:0;
 width:100vw;height:100vh;
 background:
 radial-gradient(circle at 15% 20%,rgba(42,146,255,.22),transparent 34%),
 radial-gradient(circle at 85% 75%,rgba(0,220,255,.18),transparent 32%),
 linear-gradient(180deg,#dff5ff,#b7e2ff);
 z-index:25;overflow:hidden
}


/* ลาย Cyber background */

.guide-scene:before{
 content:"";
 position:absolute;inset:0;
 background-image:
 linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),
 linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);
 background-size:45px 45px;
 opacity:.22;
 pointer-events:none
}


/* กล่องหลัก */

.guide-stage{
 position:absolute;left:50%;top:50%;
 transform:translate(-50%,-50%);
 width:94vw;height:88vh;max-width:1450px;
 padding:18px 36px 80px;

 background:
 linear-gradient(180deg,rgba(252,254,255,.98),rgba(226,243,255,.98));

 border:5px solid #1f65aa;
 border-radius:30px;

 box-shadow:
 0 18px 45px rgba(0,55,110,.30),
 inset 0 0 0 3px rgba(255,255,255,.75);

 overflow:hidden
}


/* label บน */

.guide-top-label{
 width:max-content;
 max-width:80%;
 margin:0 auto 5px;
 padding:4px 18px;

 color:#2870b1;
 background:#e9f6ff;

 border:2px solid #96ceef;
 border-radius:20px;

 font-size:11px;
 font-weight:700;
 letter-spacing:1px
}


/* ======================================================
   TITLE
====================================================== */

.guide-title{
 position:relative;
 text-align:center;
 margin-bottom:9px
}

.guide-title h1{
 display:inline-block;
 padding:7px 30px;

 color:#fff;

 font-size:clamp(27px,2.7vw,40px);

 background:linear-gradient(180deg,#2a83d1,#164e93);

 border:3px solid #fff;
 border-radius:21px;

 box-shadow:0 5px 0 #0d3a70;

 text-shadow:0 2px 0 rgba(0,0,0,.15)
}

.guide-title p{
 color:#4d7095;
 font-size:clamp(14px,1.15vw,18px);
 margin-top:8px
}


/* จุดแสดงหน้า */

.page-dots{
 height:19px;
 text-align:center;
 margin-top:2px;

 color:#93b9d8;

 font-size:17px;
 letter-spacing:6px
}

.page-dots .active{
 color:#2078c7;
 text-shadow:0 0 8px rgba(32,120,199,.5)
}


/* ======================================================
   CHARACTER GRID
====================================================== */

.character-grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);

 gap:17px;

 height:65%;
 margin-top:7px;

 align-items:stretch
}


/* ======================================================
   CHARACTER CARD
====================================================== */

.character-card{
 position:relative;

 display:flex;
 flex-direction:column;
 align-items:center;

 min-width:0;

 padding:10px 13px 13px;

 background:linear-gradient(180deg,#fff,#f5fbff);

 border:3px solid #82c5ef;
 border-radius:22px;

 box-shadow:
 0 8px 20px rgba(0,70,130,.14),
 inset 0 0 0 2px rgba(255,255,255,.75);

 overflow:hidden;

 transition:transform .2s ease,box-shadow .2s ease
}


/* เส้นสีบนการ์ด */

.character-card:before{
 content:"";

 position:absolute;
 left:0;top:0;

 width:100%;
 height:7px;

 background:linear-gradient(90deg,#328fe1,#00d7ff)
}


/* Hover */

.character-card:hover{
 transform:translateY(-5px);

 box-shadow:
 0 14px 28px rgba(0,70,130,.23),
 0 0 18px rgba(68,166,235,.27)
}


/* ======================================================
   CHARACTER IMAGE
====================================================== */

.character-image-box{
 width:100%;
 height:51%;

 display:flex;
 justify-content:center;
 align-items:flex-end;

 margin-top:4px;

 overflow:hidden
}

.character-image-box img{
 width:100%;
 height:100%;

 object-fit:contain;
 object-position:center bottom;

 display:block;

 filter:drop-shadow(0 7px 7px rgba(0,40,80,.16))
}


/* ======================================================
   CHARACTER BADGE ICON
====================================================== */

.character-badge{
 position:absolute;
 top:14px;
 right:13px;

 width:38px;
 height:38px;

 display:flex;
 align-items:center;
 justify-content:center;

 border-radius:50%;

 background:#eaf7ff;
 border:2px solid #80c3ed;

 box-shadow:0 3px 8px rgba(0,80,150,.15);

 font-size:19px;

 z-index:3
}


/* ======================================================
   CHARACTER TEXT
====================================================== */

.character-card h2{
 color:#10539a;

 font-size:clamp(17px,1.4vw,22px);

 line-height:1.1;

 margin:5px 0 5px
}


/* Role */

.role-badge{
 display:inline-flex;

 align-items:center;
 justify-content:center;

 padding:4px 13px;

 border-radius:20px;

 background:linear-gradient(180deg,#42a8ec,#2477c6);

 color:#fff;

 font-size:11px;

 margin-bottom:7px;

 box-shadow:0 3px 0 #17609e
}


/* Description */

.character-card p{
 color:#425e76;

 font-size:clamp(11px,.88vw,14px);

 line-height:1.4;

 text-align:center;

 max-width:96%;

 margin:auto 0 0
}


/* ======================================================
   PLAYER / CYBIE / MENTOR DETAILS
====================================================== */

.player-card{border-color:#65b8ee}
.cybie-card{border-color:#64cde2}
.mentor-card{border-color:#71a9e5}


/* ======================================================
   VIRUS KING
====================================================== */

.villain-card{
 border-color:#8b55bf;

 background:
 linear-gradient(180deg,#fff,#faf3ff)
}

.villain-card:before{
 background:
 linear-gradient(90deg,#743ab4,#dc4cff)
}

.villain-card .character-badge{
 background:#f6e9ff;
 border-color:#a26cce
}

.villain-card .role-badge{
 background:
 linear-gradient(180deg,#9856ca,#69309c);

 box-shadow:
 0 3px 0 #481e70
}

.villain-card h2{
 color:#663195
}


/* ======================================================
   FOOTER TEXT
====================================================== */

.guide-footer-text{
 position:absolute;

 bottom:28px;
 left:50%;

 transform:translateX(-50%);

 color:#49749b;

 font-size:13px;

 white-space:nowrap
}


/* ======================================================
   GUIDE BACK / NEXT
====================================================== */

.guide-back,.guide-next{
 position:absolute;

 bottom:20px;

 min-width:125px;

 padding:10px 27px;

 border:3px solid #fff;
 border-radius:40px;

 color:#fff;

 font-size:15px;
 font-weight:700;

 z-index:20;

 transition:.15s
}

.guide-back{
 left:34px;

 background:
 linear-gradient(#ff6868,#d33030);

 box-shadow:0 5px 0 #9c1515
}

.guide-next{
 right:34px;

 background:
 linear-gradient(#4bc3ff,#1c72c8);

 box-shadow:0 5px 0 #0d4f91
}

.guide-back:hover,.guide-next:hover{
 transform:translateY(-3px)
}

.guide-back:active,.guide-next:active{
 transform:translateY(1px)
}


/* ======================================================
   HOW TO PLAY
====================================================== */

.howto-grid{
 display:grid;

 grid-template-columns:repeat(3,1fr);

 gap:14px;

 margin-top:9px
}

.howto-card{
 position:relative;

 min-height:155px;

 padding:15px;

 text-align:center;

 background:
 linear-gradient(180deg,#fff,#f5fbff);

 border:3px solid #8dc9ee;
 border-radius:19px;

 box-shadow:
 0 6px 15px rgba(0,70,130,.12);

 transition:.2s
}

.howto-card:hover{
 transform:translateY(-4px);

 border-color:#48a8e8;

 box-shadow:
 0 10px 22px rgba(0,80,150,.2)
}

.howto-icon{
 font-size:37px;

 line-height:1.1;

 margin-bottom:5px
}

.howto-card h2{
 color:#14569b;

 font-size:18px;

 margin-bottom:4px
}

.howto-card p{
 color:#50697e;

 font-size:13px;

 line-height:1.45
}


/* Tip */

.game-tip{
 width:max-content;

 max-width:80%;

 margin:14px auto 0;

 padding:9px 22px;

 text-align:center;

 color:#675000;

 background:
 linear-gradient(180deg,#fff5bf,#ffe88b);

 border:2px solid #eac43d;
 border-radius:30px;

 box-shadow:
 0 4px 10px rgba(130,100,0,.12);

 font-size:14px
}


/* ======================================================
   ปุ่มหน้าแผนที่
====================================================== */

.btn-back,.btn-play-right{
 position:absolute;
 bottom:7%;

 z-index:20;

 border:3px solid #fff;
 border-radius:40px;

 color:#fff;
 font-weight:700
}

.btn-back{
 left:4%;

 padding:10px 24px;

 background:
 linear-gradient(#ff5252,#c62828)
}

.btn-play-right{
 right:4%;

 padding:11px 28px;

 background:
 linear-gradient(#00e676,#2e7d32)
}


/* ======================================================
   เกาะ 1
====================================================== */

.island-1-click-area{
 position:absolute;

 left:18%;
 top:54%;

 width:20%;
 height:24%;

 border:0;
 border-radius:20px;

 background:transparent;

 z-index:15
}

.island-1-click-area:hover{
 background:rgba(76,175,80,.15);

 box-shadow:
 0 0 25px rgba(76,175,80,.6)
}


/* ======================================================
   GAME
====================================================== */

#game-container{
  display:none;
  position:fixed;
  inset:0;

  width:100vw;
  height:100vh;

  justify-content:center;
  align-items:center;

  background:#000;
  overflow:hidden;
}

#game-container canvas{
  display:block;

  /* ให้ความสูงเต็มหน้าจอ */
  height:100vh !important;

  /* ความกว้างคำนวณตาม 16:9 */
  width:calc(100vh * 16 / 9) !important;

  max-width:none !important;
  max-height:none !important;

  margin:0 auto;
}


/* ======================================================
   POPUP
====================================================== */

#summary-modal,#hacking-minigame-modal{
 display:none;

 position:fixed;
 inset:0;

 width:100vw;
 height:100vh;

 justify-content:center;
 align-items:center;

 padding:20px;

 background:rgba(0,0,0,.86);

 z-index:200
}

#hacking-minigame-modal{
 z-index:999;

 background:rgba(0,10,20,.95)
}

.summary-box,.minigame-box{
 width:min(92vw,680px);

 padding:28px;

 border-radius:22px;

 text-align:center;

 color:#fff
}

.summary-box{
 background:#18242b;

 border:4px solid #ffd54f
}

.summary-box h2{
 color:#ffd54f;

 margin-bottom:12px
}

.summary-box p{
 margin-bottom:20px;

 line-height:1.6
}


/* ======================================================
   CHOICE
====================================================== */

.choice-btn{
 display:block;

 width:100%;

 padding:12px;

 margin:9px 0;

 border:2px solid #78909c;
 border-radius:10px;

 background:#37474f;

 color:#fff;

 text-align:left
}

.choice-btn:hover{
 background:#006978;

 border-color:#00e5ff
}


/* ======================================================
   MINIGAME
====================================================== */

.minigame-box{
 width:min(92vw,550px);

 background:#0d1b2a;

 border:3px solid #00e5ff
}

.minigame-box h2{
 color:#00e5ff;

 margin-bottom:8px
}

.minigame-status{
 color:#ffd54f;

 font-size:19px;
 font-weight:700;

 margin-top:12px
}

.minigame-grid{
 display:grid;

 grid-template-columns:repeat(4,1fr);

 gap:12px;

 margin:22px 0
}

.virus-node{
 aspect-ratio:1/1;

 border:2px solid #415a77;
 border-radius:12px;

 background:#1b263b;

 color:#fff;

 font-size:34px
}

.virus-node.active{
 background:#e63946;

 border-color:#ff4d6d
}

.minigame-cancel-btn{
 padding:9px 22px;

 border:0;
 border-radius:8px;

 background:#415a77;

 color:#fff
}


/* ======================================================
   Responsive
====================================================== */

@media(max-width:900px){

 .character-grid{
  grid-template-columns:repeat(2,1fr);
  overflow-y:auto
 }

 .character-card{
  min-height:370px
 }

 .character-image-box{
  height:210px
 }

 .howto-grid{
  grid-template-columns:repeat(2,1fr);

  max-height:61%;

  overflow-y:auto
 }

 .guide-footer-text{
  display:none
 }
}


@media(max-width:700px){

 .guide-stage{
  width:96vw;
  height:92vh;

  padding:15px 17px 68px
 }

 .guide-title h1{
  font-size:25px
 }

 .character-grid{
  grid-template-columns:1fr 1fr;
  gap:10px
 }

 .character-card{
  padding:8px;

  min-height:320px
 }

 .character-image-box{
  height:150px
 }

 .character-card p{
  font-size:11px
 }

 .guide-back,.guide-next{
  font-size:12px;

  min-width:95px;

  padding:8px 14px
 }

 .summary-box,.minigame-box{
  padding:18px
 }

 .minigame-grid{
  gap:7px
 }
}

/* ======================================================
   STUDENT INFO
====================================================== */

#student-info-scene{
 display:none;
 position:fixed;
 inset:0;
 width:100vw;
 height:100vh;
 justify-content:center;
 align-items:center;
 background-image:
  linear-gradient(rgba(5,40,85,.18),rgba(5,40,85,.18)),
  url("../image/student-bg.png");
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 z-index:25;
}

#student-info-scene::before{
 content:none;
}

.student-info-card{
 position:relative;
 width:min(90vw,520px);
 padding:45px 50px;
 text-align:center;
 background:linear-gradient(180deg,#ffffff,#edf8ff);
 border:5px solid #1f65aa;
 border-radius:30px;
 box-shadow:
 0 20px 50px rgba(0,55,110,.3),
 inset 0 0 0 3px rgba(255,255,255,.8);
 z-index:2;
}

.student-icon{
 width:80px;
 height:80px;
 margin:-85px auto 18px;
 display:flex;
 justify-content:center;
 align-items:center;
 font-size:42px;
 background:#fff;
 border:4px solid #2a83d1;
 border-radius:50%;
 box-shadow:0 7px 20px rgba(0,80,150,.25);
}

.student-info-card h1{
 color:#14569b;
 font-size:30px;
 margin-bottom:5px;
}

.student-subtitle{
 color:#5d7891;
 font-size:14px;
 margin-bottom:28px;
}

.student-form{
 text-align:left;
}

.student-form label{
 display:block;
 color:#245a88;
 font-size:15px;
 font-weight:700;
 margin:15px 0 7px;
}

.student-form input,
.student-form select{
 width:100%;
 padding:14px 17px;
 border:3px solid #a7d2ee;
 border-radius:15px;
 background:#fff;
 color:#29485f;
 font-family:'Mitr','Sarabun',sans-serif;
 font-size:16px;
 outline:none;
 transition:.2s;
}

.student-form input:focus,
.student-form select:focus{
 border-color:#2a83d1;
 box-shadow:0 0 0 4px rgba(42,131,209,.12);
}

#student-error{
 min-height:25px;
 margin-top:10px;
 color:#e53935;
 font-size:13px;
 text-align:center;
}

.student-submit-btn{
 display:block;
 width:100%;
 margin-top:10px;
 padding:14px;
 border:3px solid #fff;
 border-radius:30px;
 background:linear-gradient(180deg,#4bc3ff,#1c72c8);
 color:#fff;
 font-size:17px;
 font-weight:700;
 box-shadow:0 5px 0 #0d4f91;
 transition:.15s;
}

.student-submit-btn:hover{
 transform:translateY(-3px);
 box-shadow:0 8px 0 #0d4f91;
}

.student-submit-btn:active{
 transform:translateY(2px);
 box-shadow:0 2px 0 #0d4f91;
}