:root { --ink:#292f2b; --muted:#65736a; --green:#315e51; --green-dark:#234b40; --cream:#f7f4ea; --line:#dcded3; --paper:#fffef9; --gold:#dba45f; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:#e9e6da; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { overflow-x:hidden; }
button,select,input { font:inherit; }
button { cursor:pointer; touch-action:manipulation; }
button:focus-visible,select:focus-visible,input:focus-visible { outline:3px solid #b2752a; outline-offset:3px; }
[hidden] { display:none!important; }
.eyebrow { margin:0; color:#8c6e41; font-size:.7rem; font-weight:800; letter-spacing:.17em; }
.primary,.secondary,.quiet,.danger { min-height:48px; border-radius:13px; padding:11px 17px; border:1px solid transparent; font-weight:700; }
.primary { color:#fff; background:var(--green); box-shadow:0 8px 20px #315e512a; }
.primary:hover { background:var(--green-dark); }
.secondary { color:var(--ink); background:#fff; border-color:#d4dace; }
.secondary:hover { background:#f0f5ef; }
.quiet { color:var(--green); background:transparent; border-color:#d4dace; }
.danger { background:#9a4a3d; color:#fff; }
.wide { display:block; width:100%; margin-top:10px; }
.home-screen { min-height:100dvh; padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); background:radial-gradient(circle at 75% 25%,#dfe9dc 0,transparent 42%),#e9e6da; }
.home-shell { max-width:1180px; margin:auto; min-height:calc(100dvh - 28px); padding:clamp(20px,3vw,40px) clamp(20px,4vw,52px); background:radial-gradient(circle at 81% 20%,#eff4e8 0,transparent 35%),var(--cream); border-radius:27px; box-shadow:0 22px 70px #33483a18; }
.masthead,.home-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.masthead { border-bottom:1px solid var(--line); padding-bottom:22px; }
.brand { display:flex; align-items:center; gap:7px; font-size:.95rem; font-weight:850; letter-spacing:.17em; white-space:nowrap; }
.brand b { color:#a8743e; }
.brand-icon { color:var(--green); font-size:1.7rem; line-height:1; }
.brand-note,.home-footer { color:#7a877c; font-size:.73rem; font-weight:700; letter-spacing:.12em; }
.home-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.95fr); gap:clamp(18px,4vw,55px); align-items:center; padding:clamp(28px,5vw,65px) 0 24px; }
.home-copy h1 { margin:17px 0 0; font-size:clamp(3rem,6vw,5.5rem); letter-spacing:-.07em; line-height:1.03; font-weight:850; }
.home-copy h1 em { font-style:normal; color:var(--green); }
.lead { max-width:480px; color:var(--muted); line-height:1.68; font-size:clamp(1rem,1.5vw,1.18rem); margin:22px 0 28px; }
.home-actions { display:flex; flex-wrap:wrap; gap:11px; }
.home-actions .primary { min-width:190px; }
.home-actions .primary span { margin-left:16px; }
.home-quiet { color:#849084; margin-top:23px; font-size:.86rem; }
.home-illustration { min-height:370px; position:relative; display:grid; place-items:center; isolation:isolate; }
.art-halo { position:absolute; width:min(90%,450px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#faedcf 0 34%,#deeadb 70%,transparent 72%); z-index:-1; }
.art-stack { position:relative; width:270px; height:245px; transform:rotateX(48deg) rotateZ(-30deg); transform-style:preserve-3d; }
.art-stack span { position:absolute; width:95px; height:112px; display:grid; place-content:center; background:#fffdf4; border:7px solid #f4ead5; border-radius:12px; box-shadow:8px 11px 0 #acaa94,13px 18px 15px #445b3e42; color:#32604d; font-size:3rem; font-family:Georgia,serif; font-weight:700; }
.art-stack span:nth-child(1){left:0;top:12px}.art-stack span:nth-child(2){left:100px;top:12px;color:#a45d44}.art-stack span:nth-child(3){left:50px;top:130px;color:#bd8064}.art-stack span:nth-child(4){left:153px;top:130px;color:#417b6b}.art-stack span:nth-child(5){left:105px;top:78px;transform:translateZ(24px);color:#a4743e}
.art-stack small { position:absolute; right:10px; bottom:3px; font:700 1rem system-ui; }
.home-illustration p { position:absolute; bottom:0; color:#7d8a7b; font-size:.67rem; font-weight:800; letter-spacing:.18em; }
.home-links { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.home-links button { min-height:99px; display:flex; align-items:center; gap:16px; padding:17px 20px; border:1px solid #d9ded3; border-radius:18px; background:#fff; color:var(--ink); text-align:left; box-shadow:0 8px 18px #33483a0d; }
.home-links button:hover { border-color:#8ca898; transform:translateY(-2px); }
.home-links button>span:nth-child(2) { display:grid; gap:3px; flex:1; }
.home-links small { color:var(--muted); font-size:.84rem; }
.link-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:13px; flex:none; color:var(--green); background:#e6f1e9; font-size:1.5rem; }
.home-links button:nth-child(2) .link-icon { color:#a46d35; background:#fff0d7; }
.home-footer { border-top:1px solid var(--line); margin-top:28px; padding-top:18px; }

.game-screen { height:100dvh; min-height:420px; display:flex; flex-direction:column; overflow:hidden; padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); background:#e8e9dd; }
.game-header { display:flex; align-items:center; justify-content:space-between; gap:8px; max-width:1200px; width:100%; margin:auto auto 0; }
.game-header .plain { min-height:44px; min-width:74px; border:0; background:#ffffffac; color:var(--green); border-radius:11px; font-weight:700; }
.game-name { display:grid; text-align:center; gap:2px; }
.game-name strong { font-family:Georgia,serif; font-size:clamp(1.1rem,2.5vw,1.6rem); }
.scoreline { display:flex; justify-content:center; gap:clamp(25px,7vw,90px); padding:10px 0 8px; text-align:center; }
.scoreline div { display:grid; gap:1px; }
.scoreline small { color:#778579; font-size:.64rem; letter-spacing:.17em; font-weight:800; }
.scoreline strong { color:var(--green-dark); font-size:1.25rem; font-variant-numeric:tabular-nums; }
.board-shell { position:relative; min-height:0; flex:1; max-width:1200px; width:100%; margin:0 auto; border:1px solid #d4dccf; border-radius:23px; overflow:hidden; background:radial-gradient(ellipse at 50% 42%,#f9f8ed 0,#ebefe3 75%,#dce7d9 100%); box-shadow:inset 0 4px 28px #47644b12; }
.board-viewport { position:absolute; inset:0; perspective:1100px; overflow:hidden; touch-action:none; user-select:none; }
.scene { position:absolute; left:50%; top:49%; transform-style:preserve-3d; transform-origin:center center; transition:transform .12s ease-out; }
.board-base { position:absolute; inset:-7px; transform:translateZ(-8px); border-radius:14px; background:repeating-linear-gradient(90deg,#aa956a 0 23px,#a18d63 24px 25px); border:8px solid #9a8661; box-shadow:0 14px 30px #46513c44; pointer-events:none; }
.mah-tile { --size:calc(var(--unit) * 2); position:absolute; left:calc(var(--x) * var(--unit)); top:calc(var(--y) * var(--unit)); width:calc(var(--size) - 2px); height:calc(var(--size) - 2px); padding:0; border:0; background:transparent; transform-style:preserve-3d; transform:translateZ(calc(var(--z) * var(--rise))); transition:transform .14s ease-out,opacity .18s ease-out; -webkit-tap-highlight-color:transparent; }
.mah-tile::before,.mah-tile::after { content:''; position:absolute; background:#bdad91; border:1px solid #ab9b7e; pointer-events:none; }
.mah-tile::before { left:2px; right:2px; bottom:0; height:var(--thick); transform-origin:bottom; transform:rotateX(-90deg); border-radius:0 0 5px 5px; background:#c9baa0; }
.mah-tile::after { top:2px; bottom:2px; right:0; width:var(--thick); transform-origin:right; transform:rotateY(90deg); border-radius:0 5px 5px 0; background:#a99a7d; }
.tile-face { position:absolute; inset:0; display:grid; place-items:center; border:3px solid #efe4cf; border-radius:9px; background:linear-gradient(145deg,#fffef9,#f1ead9); box-shadow:inset 0 0 0 1px #d4cbb6,0 2px 5px #243c3024; transform:translateZ(var(--thick)); overflow:hidden; }
.tile-face::before { content:''; position:absolute; inset:6%; border:1px solid #ddd4c2; border-radius:5px; }
.tile-mark { position:relative; color:#2b7058; font-family:Georgia,"Noto Serif CJK SC",serif; font-weight:800; font-size:calc(var(--unit) * 1.02); line-height:1; text-shadow:0 1px #fff; }
.tile-detail { position:absolute; right:8%; bottom:5%; color:#af7447; font-size:calc(var(--unit) * .43); font-weight:850; }
.family-circle .tile-mark,.family-dragon .tile-mark { color:#a95745; }
.family-character .tile-mark,.family-season .tile-mark { color:#a36b35; }
.family-flower .tile-mark { color:#a2687f; }
.mah-tile.blocked .tile-face { filter:saturate(.75) brightness(.96); }
.mah-tile.free-mark .tile-face::after { content:''; position:absolute; inset:2px; border:2px solid #6caa85; border-radius:7px; opacity:.7; }
.mah-tile.selected { transform:translateZ(calc(var(--z) * var(--rise) + var(--thick) * 1.3)); }
.mah-tile.level-1 .tile-face,.mah-tile.level-2 .tile-face,.mah-tile.level-3 .tile-face { box-shadow:inset 0 0 0 1px #d4cbb6,0 8px 12px #283b2d66; }
.mah-tile.selected .tile-face { border-color:#d69d48; box-shadow:0 0 0 3px #e1a746,0 6px 15px #8e653d66; }
.mah-tile.hint .tile-face { box-shadow:0 0 0 4px #5ab79b,0 0 18px #5ab79b; }
.mah-tile.leaving { opacity:0; transform:translateZ(calc(var(--z) * var(--rise) + 35px)) scale(.7); pointer-events:none; }
.mah-tile:not(.blocked):hover .tile-face { filter:brightness(1.05); }
.mah-tile.blocked { cursor:not-allowed; }
.camera-tools { position:absolute; right:10px; top:50%; transform:translateY(-50%); display:grid; gap:7px; }
.camera-tools button { width:44px; height:44px; border:1px solid #cbd7c8; background:#fffefaeb; color:var(--green); border-radius:11px; font-size:1.35rem; box-shadow:0 3px 10px #38574016; }
.gesture-tip { position:absolute; left:12px; right:60px; bottom:4px; color:#6e7e70; font-size:.72rem; pointer-events:none; }
.game-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; max-width:800px; width:100%; margin:9px auto 0; }
.game-actions button { min-height:51px; border:1px solid #cdd9cc; background:#fffef9; color:var(--green-dark); border-radius:12px; font-weight:750; }
.game-actions button:hover { background:#f4f9f2; }
.game-actions button:disabled { opacity:.43; cursor:default; }
#status { min-height:18px; margin:5px 0 0; color:#6b786b; font-size:.76rem; text-align:center; }

dialog { width:min(94vw,480px); max-height:min(88dvh,760px); overflow:auto; border:1px solid #d9ded2; border-radius:22px; padding:25px; color:var(--ink); background:var(--paper); box-shadow:0 25px 70px #233b2a55; }
dialog::backdrop { background:#1b3024aa; backdrop-filter:blur(4px); }
.dialog-head { display:flex; align-items:center; justify-content:space-between; }
.dialog-head button { width:42px; height:42px; border:0; border-radius:50%; background:#edf1e9; color:var(--green); }
dialog h2 { margin:10px 0 13px; font-family:Georgia,serif; font-size:clamp(1.7rem,5vw,2.3rem); line-height:1.12; }
.dialog-copy { color:var(--muted); line-height:1.56; margin:12px 0 17px; }
.field-label { display:grid; gap:7px; font-weight:700; margin:16px 0; }
.field { width:100%; min-height:46px; padding:8px 10px; border:1px solid #c9d6c8; border-radius:10px; background:#fff; color:var(--ink); }
.help-list { padding-left:24px; display:grid; gap:14px; }
.help-list li { padding-left:5px; line-height:1.5; }
.help-list strong { display:block; color:var(--green); }
.help-list span { color:var(--muted); }
.setting-row { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:52px; border-bottom:1px solid var(--line); }
.setting-row input { width:23px; height:23px; accent-color:var(--green); flex:none; }
.privacy-note { color:var(--muted); font-size:.82rem; line-height:1.5; margin:18px 0; }
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:18px 0; }
.result-grid div { display:grid; gap:4px; border-radius:12px; padding:12px; background:#eef4e9; }
.result-grid small { color:var(--muted); }.result-grid strong { font-size:1.28rem; color:var(--green); }
.no-script { position:fixed; inset:20px; display:grid; place-items:center; background:#fff; }
.update-banner[hidden] { display:none; }
.update-banner { position:fixed; z-index:20; left:50%; bottom:max(16px,env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; align-items:center; flex-wrap:wrap; gap:10px; width:min(620px,calc(100vw - 28px)); padding:14px; border:1px solid #bed1be; border-radius:16px; background:#fffefa; box-shadow:0 12px 35px #233b2a40; color:var(--ink); }
.update-banner span { flex:1 1 220px; line-height:1.4; }
.update-banner button { min-height:42px; }
.economy .tile-face { box-shadow:none; }.economy .board-base { box-shadow:none; }.economy .scene { transition:none; }
@media (max-width:720px) { .brand-note{display:none}.home-main{grid-template-columns:1fr;gap:0;padding-top:36px}.home-illustration{min-height:300px}.art-stack{transform:scale(.83) rotateX(48deg) rotateZ(-30deg)} }
@media (max-width:480px) { .home-shell{padding:20px;border-radius:18px}.home-copy h1{font-size:clamp(2.8rem,12vw,4rem)}.home-actions button{flex:1 1 100%}.home-illustration{min-height:250px}.art-stack{transform:scale(.69) rotateX(48deg) rotateZ(-30deg)}.home-links{grid-template-columns:1fr}.home-links button{min-height:78px}.home-footer{align-items:flex-start;flex-direction:column;gap:5px}.gesture-tip{display:none}.game-header .plain{min-width:48px}.game-header .plain span{display:none}.scoreline{gap:30px}.scoreline strong{font-size:1.08rem}.game-actions button{font-size:1.2rem}.game-actions button span{display:block;font-size:.64rem}.camera-tools{top:8px;right:8px;transform:none;grid-template-columns:repeat(4,44px)}.camera-tools button{width:44px;height:44px}.board-shell{border-radius:14px} }
@media (orientation:landscape) and (max-height:520px) { .game-screen{min-height:0}.scoreline{padding:2px 0}.scoreline strong{font-size:1rem}.game-actions{margin-top:4px}.game-actions button{min-height:44px}#status{display:none}.camera-tools{grid-template-columns:repeat(2,44px);right:5px}.camera-tools button{width:44px;height:44px}.gesture-tip{display:none} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }
.reduce-motion *, .reduce-motion *::before,.reduce-motion *::after { transition:none!important; animation:none!important; }