/* 線上學習平台首頁「Fun學知識島嶼大冒險」（2026-10-31 設計稿，portal/island.html、js/island.js）
   方塊風格：木頭招牌、石頭灰面板、粗邊按鈕 */
body.isl { margin: 0; overflow: hidden; background: #8ec9ff; height: 100vh; height: 100dvh; font-family: 'Noto Sans TC', system-ui, sans-serif; }
.isl [hidden] { display: none !important; }
.isl-stage { position: fixed; inset: 0; touch-action: none; }
.isl-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.isl-stage.hover canvas { cursor: pointer; }
.isl-loading { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; font-size: 20px; font-weight: 900; color: #fff; text-shadow: 2px 2px 0 #1f4f7a; pointer-events: none; }

/* 方塊風格面板與按鈕 */
.mc { background: #c6c6c6; color: #2b2b2b; border: 3px solid #1e1e1e; box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 #555; border-radius: 0; }
.mc-btn { font: inherit; font-weight: 800; font-size: 15px; color: #fff; background: #7a7a7a; border: 3px solid #1e1e1e; box-shadow: inset 2px 2px 0 #a9a9a9, inset -2px -3px 0 #4a4a4a; padding: 7px 14px; cursor: pointer; text-shadow: 2px 2px 0 #3a3a3a; border-radius: 0; }
.mc-btn:hover { background: #7f8fc9; box-shadow: inset 2px 2px 0 #aab6e6, inset -2px -3px 0 #4b5891; }
.mc-btn:focus-visible { outline: 3px solid #ffd84a; outline-offset: 2px; }
.mc-btn.go { background: #3e8f2c; box-shadow: inset 2px 2px 0 #74c95b, inset -2px -3px 0 #24591a; }
.mc-btn.go:hover { background: #4aa835; }
.mc-btn.small { font-size: 13px; padding: 5px 10px; }

/* 上方：木頭招牌標題、使用者 */
.isl-top { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 12px 16px; pointer-events: none; z-index: 5; }
.isl-top > * { pointer-events: auto; }
.isl-sign { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border: 3px solid #3b2611;
  background: repeating-linear-gradient(0deg, #a0763f 0 14px, #8d6634 14px 16px, #b0844a 16px 30px, #8d6634 30px 32px);
  box-shadow: inset 3px 3px 0 #c99a5c, inset -3px -3px 0 #5e4020, 0 6px 0 rgba(0,0,0,.18); }
.isl-sign img { width: 46px; height: 46px; background: #fff; border: 3px solid #3b2611; image-rendering: auto; }
.isl-sign h1 { margin: 0; font-size: clamp(20px, 3.2vw, 34px); font-weight: 900; color: #fff7d6; letter-spacing: 1px; line-height: 1.15;
  text-shadow: 2px 2px 0 #3b2611, 3px 3px 0 #3b2611, 4px 4px 0 rgba(0,0,0,.25); }
.isl-sign p { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: #ffe8a8; text-shadow: 1px 1px 0 #3b2611; }
.isl-user { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding: 8px 10px; }
.isl-user .who { font-weight: 900; font-size: 15px; }
.isl-user a.mc-btn { text-decoration: none; }

/* 島嶼名牌（跟著 3D 位置移動） */
.isl-labels { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.isl-tag { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; white-space: nowrap;
  font: inherit; font-weight: 900; font-size: 14px; color: #fff; background: rgba(30,30,30,.72); border: 2px solid #111; padding: 4px 9px 4px 7px;
  text-shadow: 1px 1px 0 #000; display: flex; align-items: center; gap: 5px; transition: background .12s; }
.isl-tag .ic { font-size: 18px; }
.isl-tag .lk { font-size: 13px; }
.isl-tag:hover, .isl-tag.sel { background: rgba(62,143,44,.92); }
.isl-tag.locked, .isl-tag.expired { color: #e6e6e6; }
.isl-tag:focus-visible { outline: 3px solid #ffd84a; }
.isl-name { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); font-weight: 900; font-size: 13px; color: #fff; background: rgba(0,0,0,.45); padding: 1px 7px; white-space: nowrap; }
.isl-tag[hidden], .isl-name[hidden] { display: none; }

/* 選到島嶼的說明卡 */
.isl-card { position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%); width: min(460px, calc(100vw - 32px)); padding: 14px 16px; z-index: 6; }
.isl-card h2 { margin: 0 0 4px; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.isl-card h2 .ic { font-size: 28px; }
.isl-card p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; }
.isl-card .st { display: inline-block; font-weight: 800; font-size: 13.5px; padding: 3px 9px; border: 2px solid #1e1e1e; margin-bottom: 10px; }
.isl-card .st.open { background: #c7f0b8; color: #1b5e12; }
.isl-card .st.locked { background: #e0e0e0; color: #444; }
.isl-card .st.expired { background: #ffd2cc; color: #9b1c10; }
.isl-card .row { display: flex; gap: 8px; justify-content: flex-end; }

/* 下方：島嶼清單 */
.isl-dock { position: fixed; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; z-index: 5; }
.isl-hint { font-weight: 800; color: #fff; text-shadow: 1px 1px 0 #1f4f7a, 2px 2px 0 rgba(0,0,0,.2); font-size: 14px; }
.isl-list { position: fixed; left: 16px; bottom: 64px; width: min(340px, calc(100vw - 32px)); max-height: min(60vh, 460px); overflow: auto; padding: 8px; z-index: 6; display: grid; gap: 6px; }
.isl-list button { display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; font-weight: 800; font-size: 14px; background: #8b8b8b; color: #fff; border: 2px solid #1e1e1e; padding: 6px 9px; cursor: pointer; text-shadow: 1px 1px 0 #333; }
.isl-list button:hover { background: #3e8f2c; }
.isl-list button .ic { font-size: 20px; }
.isl-list button small { margin-left: auto; font-size: 12px; font-weight: 700; }

/* 不能登島、換造型的視窗 */
dialog.isl-dlg { padding: 18px 20px; max-width: min(440px, calc(100vw - 32px)); }
dialog.isl-dlg::backdrop { background: rgba(10,20,40,.45); }
.isl-dlg h2 { margin: 0 0 8px; font-size: 22px; }
.isl-dlg p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.7; }
.isl-dlg .row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.isl-deny-ic { font-size: 54px; text-align: center; line-height: 1.1; margin-bottom: 4px; }

dialog.isl-avatar { max-width: min(640px, calc(100vw - 24px)); width: 640px; }
.av-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 14px; }
.av-view { background: linear-gradient(#9fd3ff, #d8efff); border: 3px solid #1e1e1e; height: 260px; position: relative; }
.av-view canvas { width: 100% !important; height: 100% !important; display: block; }
.av-opts { display: grid; gap: 8px; max-height: 330px; overflow: auto; padding-right: 4px; }
.av-row b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.av-row .ch { display: flex; flex-wrap: wrap; gap: 5px; }
.av-row button { font: inherit; font-size: 13px; font-weight: 700; min-width: 30px; height: 30px; border: 2px solid #1e1e1e; background: #e6e6e6; cursor: pointer; padding: 0 7px; }
.av-row button.sw { width: 30px; padding: 0; }
.av-row button[aria-pressed="true"] { outline: 3px solid #ffd84a; outline-offset: 1px; box-shadow: 0 0 0 1px #1e1e1e; }
@media (max-width: 560px) {
  .av-wrap { grid-template-columns: 1fr; }
  .av-view { height: 200px; }
  .isl-sign img { width: 36px; height: 36px; }
  .isl-sign p { display: none; }
  .isl-hint { display: none; }
  .isl-top { flex-direction: column; align-items: stretch; }
  .isl-user { padding: 5px 8px; align-self: flex-end; }
}

/* 上島轉場 */
.isl-fade { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: #fff; opacity: 0; transition: opacity .6s; }
.isl-fade.on { opacity: 1; }
.isl-fade div { font-size: 22px; font-weight: 900; color: #2b6a1f; text-align: center; }
.isl-fade small { display: block; font-size: 14px; color: #555; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .isl-fade { transition: none; } }

/* 2026-10-31 自己開船、群島分區、滑鼠預覽 */
.isl-zone { position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap; font-weight: 900; font-size: 17px; color: #fff;
  background: var(--zc); border: 3px solid #1e1e1e; padding: 3px 12px; box-shadow: inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.25); text-shadow: 1px 1px 0 rgba(0,0,0,.45); opacity: .95; }
.isl-tag { font-size: 13px; padding: 3px 8px 3px 6px; }
.isl-tag .ic { font-size: 16px; }
.isl-card, .isl-tip { font-size: 14px; }
.isl-card .zn, .isl-tip .zn { display: inline-block; font-size: 12px; font-weight: 900; color: #fff; background: var(--zc); border: 2px solid #1e1e1e; padding: 1px 8px; margin-bottom: 6px; }
.isl-card .lt, .isl-tip .lt { display: block; font-size: 13.5px; margin-bottom: 2px; }
.isl-card ul, .isl-tip ul { margin: 0 0 8px; padding-left: 20px; line-height: 1.6; font-size: 14px; }
.isl-tip { position: fixed; z-index: 7; width: min(320px, calc(100vw - 16px)); padding: 10px 12px; pointer-events: none; }
.isl-tip h2 { margin: 0 0 2px; font-size: 17px; display: flex; align-items: center; gap: 6px; }
.isl-tip h2 .ic { font-size: 22px; }
.isl-tip p { margin: 0 0 6px; }
.isl-tip .st { display: inline-block; font-weight: 800; font-size: 12.5px; padding: 2px 8px; border: 2px solid #1e1e1e; }
.isl-tip .st.open { background: #c7f0b8; color: #1b5e12; } .isl-tip .st.locked { background: #e0e0e0; color: #444; } .isl-tip .st.expired { background: #ffd2cc; color: #9b1c10; }
.isl-tip .how { display: block; margin-top: 6px; font-weight: 800; color: #2b6a1f; }
.isl-list .zh { color: #fff; background: var(--zc); border: 2px solid #1e1e1e; padding: 3px 8px; font-size: 13.5px; margin-top: 4px; }
.isl-dock { flex-wrap: wrap; right: 16px; }
@media (max-width: 560px) { .isl-zone { font-size: 13px; padding: 2px 8px; } .isl-card ul { display: none; } }
@media (min-width: 900px) { .isl-card { left: auto; right: 16px; transform: none; } }

/* 2026-11-02 登入畫面和知識島嶼同一個風格：左邊形象區（木頭招牌＋方塊海面小圖）、右邊石頭面板登入 */
.login-screen.login-isl { background:
    linear-gradient(#5c97e8, #5c97e8) bottom / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, #3a7bd5 0 36px, #3570c4 36px 48px) bottom / 100% 22vh no-repeat,
    linear-gradient(#7dbdff 0%, #b8e0ff 78%);
  font-family: 'Noto Sans TC', system-ui, sans-serif; }
.login-isl .login-card { width: min(980px, 100%); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
.login-isl .login-hero { padding: 14px; gap: 12px; align-items: stretch; text-align: left; border: 3px solid #3b2611;
  background: repeating-linear-gradient(0deg, #a0763f 0 14px, #8d6634 14px 16px, #b0844a 16px 30px, #8d6634 30px 32px);
  box-shadow: inset 3px 3px 0 #c99a5c, inset -3px -3px 0 #5e4020, 0 8px 0 rgba(0,0,0,.18); }
.lh-sign { display: flex; align-items: center; gap: 12px; }
.lh-sign img { width: 56px; height: 56px; background: #fff; border: 3px solid #3b2611; flex: none; }
.lh-sign small { display: block; font-size: 13px; font-weight: 800; color: #ffe8a8; text-shadow: 1px 1px 0 #3b2611; }
.lh-sign b { display: block; font-size: clamp(22px, 3vw, 30px); font-weight: 900; color: #fff7d6; line-height: 1.2; letter-spacing: 1px;
  text-shadow: 2px 2px 0 #3b2611, 3px 3px 0 #3b2611, 4px 4px 0 rgba(0,0,0,.25); }
.lh-scene { display: block; width: 100%; height: auto; border: 3px solid #1e1e1e; background: #8ec9ff; }
.lh-scene text { font-family: 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; }
.lh-scene[data-game] { cursor: pointer; user-select: none; -webkit-user-select: none; }
.lh-scene:focus { outline: 3px solid #ffd84a; outline-offset: 0; }
.lh-hud text { font: 900 7px 'Segoe UI Emoji', 'Microsoft JhengHei', sans-serif; fill: #fff; paint-order: stroke; stroke: #1e1e1e; stroke-width: 1.6px; }
.lh-panel text { text-anchor: middle; fill: #fff; font-family: 'Microsoft JhengHei', 'Segoe UI Emoji', sans-serif; }
.lh-p1 { font-size: 9px; font-weight: 900; }
.lh-p2 { font-size: 6px; font-weight: 700; }
.lh-pop { font: 900 6px 'Microsoft JhengHei', sans-serif; paint-order: stroke; stroke: #1e1e1e; stroke-width: 1.4px; }
.lh-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lh-points li { font-size: 13.5px; font-weight: 800; color: #fff; background: rgba(30,30,30,.55); border: 2px solid #1e1e1e; padding: 5px 8px; text-shadow: 1px 1px 0 #000; }
@media (prefers-reduced-motion: no-preference) {
  .lh-boat { animation: lhBob 2.4s ease-in-out infinite; }
  .lh-scene .cl1 { animation: lhDrift 14s linear infinite alternate; }
  .lh-scene .cl2 { animation: lhDrift 18s linear infinite alternate-reverse; }
  .lh-scene .wv { animation: lhWave 3s steps(2) infinite; }
}
@keyframes lhBob { 50% { transform: translateY(1px); } }
@keyframes lhDrift { to { transform: translateX(14px); } }
@keyframes lhWave { 50% { transform: translateX(3px); } }

/* 右邊：石頭灰面板 */
.login-isl .login-main { padding: 22px 24px; background: #c6c6c6; color: #2b2b2b; border: 3px solid #1e1e1e; box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 #555, 0 8px 0 rgba(0,0,0,.18); }
.login-isl .login-main::before { content: '🔑 登入開始冒險'; display: block; margin-bottom: 12px; font-size: 20px; font-weight: 900; color: #2b2b2b; }
.login-isl .login-tabs { background: #8b8b8b; border: 3px solid #1e1e1e; border-radius: 0; padding: 3px; gap: 3px; }
.login-isl .login-tabs button { border-radius: 0; color: #fff; font-weight: 800; text-shadow: 1px 1px 0 #333; }
.login-isl .login-tabs button.on { background: #3e8f2c; box-shadow: inset 2px 2px 0 #74c95b, inset -2px -2px 0 #24591a; }
.login-isl .login-form label { color: #2b2b2b; font-weight: 800; }
.login-isl .login-form input { border: 3px solid #1e1e1e; border-radius: 0; background: #fff; box-shadow: inset 2px 2px 0 #9a9a9a; }
.login-isl .login-form input:focus { outline: 3px solid #ffd84a; outline-offset: 0; border-color: #1e1e1e; }
.login-isl .login-form .run { border-radius: 0; border: 3px solid #1e1e1e; background: #3e8f2c; color: #fff; font-weight: 900; text-shadow: 2px 2px 0 #24591a;
  box-shadow: inset 2px 2px 0 #74c95b, inset -2px -3px 0 #24591a; }
.login-isl .login-form .run:hover { background: #4aa835; }
.login-isl .login-form .hint { color: #444; }
.login-isl .login-reg, .login-isl .login-error, .login-isl .login-ok, .login-isl .demo-note { border-radius: 0; border: 2px solid #1e1e1e; }
.login-isl .login-reg-go { border-radius: 0; }
.login-isl .link { color: #1f4fa8; font-weight: 700; }
.login-isl .login-admin { color: #555 !important; }
.login-isl .login-foot { color: #fff; font-weight: 700; text-shadow: 1px 1px 0 #1f4f7a; }
@media (max-width: 760px) {
  .login-isl .login-card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .login-isl .login-hero { padding: 10px; gap: 8px; }
  .lh-sign img { width: 42px; height: 42px; }
  .lh-points { display: none; }
  .login-isl .login-main { padding: 16px 14px; }
  .login-isl .login-main::before { font-size: 17px; margin-bottom: 8px; }
}