*{box-sizing:border-box}body{margin:0;font-family:"Microsoft JhengHei",sans-serif;color:#26374b;background:radial-gradient(ellipse at 10% 0%,#ddf7ee,transparent 50%),radial-gradient(ellipse at 95% 30%,#fff1c2,transparent 55%),#f6f9fc}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}.page{max-width:1100px;margin:auto;padding:24px}header{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.brand{text-decoration:none;font-size:26px;font-weight:900;color:#24474c}header>span{font-size:13px;color:#708493;flex:1}.teacher-button,.secondary{border:2px solid #b9d0e4;background:white;color:#325c82;padding:12px 20px;border-radius:16px;font-weight:900}.welcome{position:relative;margin:36px 0 24px;padding:8px 0}.tag{letter-spacing:3px;color:#249586;font-size:12px;font-weight:bold}h1{font-size:32px;margin:12px 0;color:#24434a}.welcome p{color:#708493}.island-art{position:absolute;right:30px;top:0;font-size:64px;opacity:.8}.island-art span{font-size:72px;display:inline-block;transform:rotate(-8deg)}.entry-card{background:white;border:5px solid #ffc338;border-radius:36px;padding:28px 34px;margin:20px 0;box-shadow:0 14px 32px #365f7212}.card-title{display:flex;gap:17px;align-items:center;border-bottom:1px solid #edf1f5;padding-bottom:20px;margin-bottom:22px}.icon{display:grid;place-items:center;width:62px;height:62px;flex-shrink:0;border-radius:20px;background:#ffa700;font-size:30px}.card-title h2{font-size:26px;margin:0 0 6px}.card-title p{margin:0;color:#728295;font-size:14px;font-weight:bold}.identity-banner{background:#fffae9;border:2px solid #ffe078;border-radius:20px;padding:17px;color:#88552a;font-weight:bold}.selection-label{display:flex;justify-content:space-between;color:#8395a7;font-size:14px;margin:18px 0 10px}.student-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-height:285px;overflow:auto;padding:5px}.student-tile{display:flex;gap:10px;align-items:center;text-align:left;min-height:72px;border:3px solid #e2e8f0;background:#f8fafc;border-radius:21px;padding:14px;color:#26374b;font-size:21px;font-weight:900}.student-tile .class{font-size:14px;padding:5px 9px;border:1px solid #7bd9b4;border-radius:8px;background:#ddf8ed;color:#166959}.student-tile .check{margin-left:auto;color:#bac8d6}.student-tile.selected{background:#10b989;border-color:#078765;color:white;box-shadow:0 0 0 4px #adefd7}.student-tile.selected .class{background:#ffffff26;border-color:#ffffff77;color:white}.student-tile.selected .check{color:white}.start-button{width:100%;border:0;border-bottom:5px solid #c85b14;border-radius:22px;background:linear-gradient(110deg,#f6a100,#fc7916);color:white;padding:19px;font-size:21px;font-weight:900;margin-top:22px;box-shadow:0 5px 10px #bf601b18}.note{color:#7e8a98;font-size:13px;line-height:1.7}.activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.activity-grid a{background:#f6fafd;border:2px solid #e0ebf3;border-radius:20px;padding:20px;text-decoration:none;color:#28465b;display:flex;flex-direction:column;gap:9px;transition:transform .15s}.activity-grid a:hover{transform:translateY(-3px);border-color:#7fd7bc}.activity-grid a>span{font-size:33px}.activity-grid strong{font-size:18px}.activity-grid small{color:#70889a;line-height:1.5}.room-box{margin-top:24px;padding:18px;border-radius:20px;background:#edf8fa}.room-box form{display:grid;grid-template-columns:1fr 1fr;gap:15px}.room-box .start-button{grid-column:1/-1}label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:bold}input,select{width:100%;border:2px solid #d4e4ec;background:white;border-radius:13px;padding:13px;color:#28465b}.status{color:#168271;font-weight:bold;text-align:center;line-height:1.7}footer{text-align:center;color:#8b9bab;font-size:13px;padding:20px}button:focus-visible,a:focus-visible{outline:3px solid #126bba;outline-offset:4px}@media(max-width:750px){.page{padding:16px}.island-art{display:none}h1{font-size:27px}.entry-card{padding:20px;border-radius:28px}.card-title h2{font-size:21px}.student-grid{grid-template-columns:repeat(2,1fr)}.student-tile{font-size:18px;padding:12px}.activity-grid{grid-template-columns:repeat(2,1fr)}.room-box form{grid-template-columns:1fr}.start-button{font-size:18px}}@media(max-width:420px){.student-tile{gap:6px;padding:9px}.student-tile .class{padding:4px 6px}.activity-grid{grid-template-columns:1fr}}
.student-choices{display:grid;grid-template-columns:1fr 1fr;gap:18px}.student-choices button{display:flex;align-items:center;flex-direction:column;gap:12px;min-height:170px;border:3px solid #bce5da;border-radius:24px;padding:24px;background:#ecfaf5;color:#20594d}.student-choices button:nth-child(2){background:#fff6e5;border-color:#ffda85;color:#805412}.student-choices span{font-size:44px}.student-choices strong{font-size:25px}.student-choices small{font-size:15px}.activity-grid button{display:flex;flex-direction:column;gap:9px;text-align:left;background:#f6fafd;border:2px solid #e0ebf3;border-radius:20px;padding:20px;color:#28465b;min-height:110px}.activity-grid button>span{font-size:33px}.activity-grid button strong{font-size:18px}#back-choices{margin-top:18px}@media(max-width:500px){.student-choices{grid-template-columns:1fr}.student-choices button{min-height:130px;padding:18px}.student-choices strong{font-size:23px}}

.cannon-choices{display:grid;grid-template-columns:1fr 1fr;gap:20px}.cannon-choice{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;border:5px solid #f1b45a;border-radius:24px;background:#fff6e8;color:#704217;text-align:center}.cannon-choice.sea{border-color:#29b8d5;background:#e9fbff;color:#075f7b}.cannon-choice>img,.sea-choice-picture{width:100%;height:150px;object-fit:cover;border-radius:14px}.cannon-choice strong{font-size:27px}.game-rule{font-size:20px;font-weight:900}.cannon-choice small{font-size:15px}.choose-label{padding:10px 25px;border-radius:12px;background:#bc6a15;color:white;font-size:19px;font-weight:900}.sea .choose-label{background:#087e9a}.sea-choice-picture{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;background:repeating-radial-gradient(ellipse at 30% 20%,#1db5cd 0 18px,#67ddeb 20px 22px,#139fc2 25px 42px);padding:14px;color:white}.sea-choice-picture>span{font-size:38px}.sea-choice-picture>i{position:absolute;top:45px;left:45%;font-size:35px}.other-game-heading{margin-top:30px;border-top:2px solid #e8eff3;padding-top:22px}@media(max-width:650px){.cannon-choices{grid-template-columns:1fr}.cannon-choice>img,.sea-choice-picture{height:130px}}

.student-confirmed .welcome{display:none}.student-confirmed #student-panel{display:flex;align-items:center;gap:14px;padding:12px 20px;border-width:2px;margin-bottom:14px;border-radius:20px}.student-confirmed #student-panel .card-title,.student-confirmed #student-panel>.note{display:none}.student-confirmed #current-identity{margin:0;flex:1;background:none;border:0;padding:5px;font-size:17px}.student-confirmed #change-student{font-size:14px;padding:9px 14px}.student-confirmed #activities{margin-top:12px}@media(max-width:500px){.student-confirmed #student-panel{flex-wrap:wrap}.student-confirmed #current-identity{font-size:15px}}
