:root { color-scheme: dark; --scale: 1; --slot-w: 390px; --slot-h: 788px; }
* { box-sizing: border-box; } body { margin: 0; min-width: 320px; min-height: 100vh; background: #0d1b2c; color: #f8fafc; font-family: Arial, "Noto Sans TC", sans-serif; } button, select { font: inherit; } button { cursor: pointer; } .hidden { display: none !important; }
body.playing { overflow: hidden; }
body.playing > .game-page-info { display: none; }
.main-screen { max-width: 720px; margin: 0 auto; padding: 12px; } .main-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; } .main-top label { display: grid; gap: 4px; font-size: 12px; color: #d9f2e8; } .main-top select { min-height: 38px; border: 1px solid #6bc9b0; border-radius: 7px; background: #102d3a; color: #fff; padding: 0 9px; }
.loading-screen { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: #071d31eF; color: #f8fafc; } .loading-screen > div { width: min(280px, calc(100vw - 48px)); display: grid; justify-items: center; gap: 14px; padding: 26px; border: 1px solid #93c5fd; border-radius: 14px; background: #102b45; font-weight: 800; text-align: center; } .loading-mark { width: 46px; height: 46px; border: 5px solid #93c5fd44; border-top-color: #f5c542; border-radius: 50%; animation: habitat-loading-spin .7s linear infinite; } @keyframes habitat-loading-spin { to { transform: rotate(360deg); } }
.home-link { width: 58px; min-height: 44px; display: grid; grid-template-columns: 16px 28px; align-items: center; gap: 4px; padding: 4px; border-radius: 10px; background: #f8fafc; color: #1d4ed8; font-size: 21px; text-decoration: none; } .home-link img { width: 28px; height: 28px; object-fit: contain; }
.main-card { overflow: hidden; border: 1px solid #5cc6a5; border-radius: 12px; background: #12283a; box-shadow: 0 12px 30px #0008; } .cover { display: block; width: 100%; aspect-ratio: 1 / .72; object-fit: cover; object-position: center; } .main-copy { padding: 16px; display: grid; gap: 11px; } h1, h2, p { margin: 0; } h1 { font-size: 28px; } .eyebrow { color: #9ae6b4; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .progress-summary { min-height: 40px; padding: 9px 10px; border-radius: 8px; background: #0b2029; color: #d7fae9; font-size: 14px; } .primary { background: #f5c542 !important; color: #1f2937 !important; border-color: #ffd970 !important; font-weight: 800; } .main-copy button { min-height: 50px; border: 0; border-radius: 9px; background: #236b62; color: #fff; } .public-guide { margin-top: 14px; padding: 16px; border-radius: 10px; background: #f8fafc; color: #16293b; display: grid; gap: 9px; } .public-guide h2 { font-size: 20px; }
.fixed-screen { position: fixed; inset: 0; overflow: hidden; background: #0d1b2c; display: grid; place-items: end center; padding: 4px; } .canvas-slot { position: relative; width: var(--slot-w); height: var(--slot-h); overflow: visible; } .logical-canvas { position: absolute; inset: 0 auto auto 0; width: 390px; height: 788px; transform: scale(var(--scale)); transform-origin: top left; overflow: hidden; }
.stage-canvas, .battle-canvas, .result-canvas { background: #112842; } .stage-canvas::before, .battle-canvas::before { content: ""; position: absolute; inset: 0; background: linear-gradient(#06223799, #0d1b2ce6), url("../../assets/animal-habitat-mahjong-bg-forest.webp") center / cover; opacity: .9; } .stage-canvas > *, .battle-canvas > *, .result-canvas > * { position: relative; z-index: 1; }
.play-header, .battle-header { height: 78px; display: grid; align-items: center; padding: 14px 16px; background: #0b1d31e8; border-bottom: 1px solid #ffffff22; } .play-header { grid-template-columns: 48px 1fr; gap: 12px; } .play-header b { display:block; font-size: 21px; } .play-header span { color:#a7f3d0; font-size: 13px; } .back-btn { width: 48px; height: 48px; border: 1px solid #90cdf4; border-radius: 10px; background: #f8fafc; color: #1d4ed8; font-size: 28px; }
.stage-intro { height: 185px; margin: 18px; padding: 12px; display:grid; grid-template-columns: 154px 1fr; gap: 14px; border: 1px solid #93c5fd55; border-radius: 12px; background: #0b1d31d9; } .stage-intro img { width: 154px; height: 160px; object-fit: cover; border-radius: 8px; } .stage-intro b { font-size: 21px; } .stage-intro p { margin-top: 9px; color: #d1fae5; line-height: 1.35; }
.stage-rail { position:relative; height:190px; display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; touch-action:pan-x; user-select:none; padding:0 63px; } .stage-rail::-webkit-scrollbar { display:none; } .stage-card { position:relative; flex:0 0 264px; width:264px; height:190px; scroll-snap-align:center; padding:16px; border:2px solid #6ee7b7; border-radius:12px; background:#092c3dcc; color:#fff; text-align:left; display:grid; grid-template-rows:auto 1fr auto; } .stage-card.selected { border-color:#f5c542; box-shadow:0 0 0 4px #f5c54244; } .stage-card.locked { filter:saturate(.45); opacity:.6; } .stage-card b { font-size:20px; } .stage-card span { color:#d1fae5; font-size:14px; } .stage-card small { color:#fde68a; font-weight:bold; } .rail-hint { margin:20px 32px; text-align:center; color:#dbeafe; }
.battle-header { grid-template-columns: 48px 58px 1fr 58px; gap: 8px; height: 76px; } .stat { display:grid; text-align:center; gap:3px; font-size:11px; color:#bfdbfe; } .stat b { font-size:18px; color:#fff; } .objective { min-width:0; display:grid; gap:3px; text-align:center; } .objective b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; } .objective span { color:#bbf7d0; font-size:12px; }
.board { position: relative; width: 356px; height: 500px; margin: 20px auto 0; border: 9px solid #e6d4a8; border-radius: 14px; background: #0e3344 center / cover; box-shadow: inset 0 0 0 2px #7c5d32, 0 8px 18px #0008; } .tile { position:absolute; width:70px; height:88px; padding:0; border:0; border-radius:9px; background:#fff; box-shadow:0 4px 0 #493728, 0 0 0 2px #f9e4b5; transition: transform .16s, opacity .16s; overflow:hidden; } .tile img { display:block; width:100%; height:100%; object-fit:cover; } .tile.free { outline: 3px solid #86efac; } .tile.selected { transform: translateY(-8px); outline: 4px solid #facc15; } .tile.blocked { filter: brightness(.52) saturate(.7); } .tile.hinted { animation: pulse .65s 3 alternate; } @keyframes pulse { to { box-shadow:0 0 0 6px #facc15, 0 4px 0 #493728; } }
.tile:focus { outline:5px solid #fff176; outline-offset:3px; box-shadow:0 0 0 3px #163a58,0 4px 0 #493728; }
.feedback { height: 40px; margin: 8px 24px; text-align:center; color:#fef3c7; font-weight:bold; } .tool-row { height: 88px; display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; padding: 8px 20px 16px; } .tool-row button { border:1px solid #93c5fd; border-radius:10px; background:#102b45; color:#fff; display:grid; grid-template-columns:36px 1fr; align-items:center; gap:7px; text-align:left; padding:7px; } .tool-row button:disabled { opacity:.42; cursor:default; } .tool-row img { width:36px; height:36px; object-fit:contain; }
.result-overlay { position:absolute; inset:0; z-index:5; display:grid; place-items:center; padding:40px; background:linear-gradient(#071d31dd,#071d31ee),url("../../assets/animal-habitat-mahjong-bg-ocean.webp") center/cover; } .result-card { width:310px; max-height:708px; overflow-y:auto; overscroll-behavior:contain; padding:24px; border:2px solid #fde68a; border-radius:16px; background:#102b45f5; text-align:center; display:grid; gap:13px; } .result-card h2 { font-size:28px; } .result-best { min-height:38px; padding:8px 10px; border:1px solid #6ee7b7; border-radius:9px; background:#0b3b43; color:#d1fae5; font-weight:700; } .result-best.new-best { border-color:#fcd34d; background:#4a3410; color:#fef3c7; } .skill-report { padding:12px; border-radius:10px; background:#071d31; display:grid; gap:7px; color:#d1fae5; } .result-actions { display:grid; gap:8px; } .result-actions button { min-height:45px; border:1px solid #93c5fd; border-radius:9px; background:#edf7ff; color:#102b45; font-weight:bold; }
.result-actions button:focus { outline:4px solid #fff176; outline-offset:3px; box-shadow:0 0 0 3px #163a58; }
.tool-row img { border-radius:7px; object-fit:cover; object-position:center; }
@media (max-width: 430px) { .main-screen { padding: 8px; } .main-copy { padding: 13px; } h1 { font-size: 25px; } }