:root{--ink:#2b2015;--cream:#f6edda;--panel:#fff8ea;--grass:#8fac55;--grass-deep:#5f7f35;--grid:rgba(247,238,198,0.72);--red:#c9503f;--blue:#3f77bb;--water:#4ec3d2;--water-deep:#208fa8;--soil:#8b5b31;--shadow:rgba(61,43,22,0.28)}*{box-sizing:border-box}body,html{margin:0;min-height:100vh}body{color:var(--ink);font-family:Georgia,"Noto Serif SC",Songti SC,serif;background:radial-gradient(circle at 16% 12%,rgba(255,245,199,.92),transparent 28%),radial-gradient(circle at 78% 78%,rgba(162,204,143,.42),transparent 32%),linear-gradient(135deg,#efe4cf,#fbf4e8 48%,#dce7c9)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}.shell{display:grid;grid-template-columns:minmax(280px,380px) minmax(640px,1fr);grid-gap:24px;gap:24px;width:min(1320px,calc(100vw - 32px));margin:0 auto;padding:32px 0}.game-panel,.hero-panel{border:1px solid rgba(122,95,55,.12);border-radius:34px;background:rgba(255,248,234,.88);box-shadow:0 28px 70px var(--shadow)}.hero-panel{position:-webkit-sticky;position:sticky;top:24px;height:calc(100vh - 64px);min-height:680px;padding:34px;overflow:hidden}.hero-panel:after{content:"🦁";position:absolute;right:-18px;bottom:-44px;font-family:Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif;font-size:180px;opacity:.1}.eyebrow{margin:0 0 16px;color:#8a6034;font-size:13px;font-weight:900;letter-spacing:.22em;text-transform:uppercase}h1{margin:0;font-size:clamp(48px,7vw,88px);line-height:.92;letter-spacing:-.08em}.subtitle{max-width:310px;margin:22px 0 34px;color:#5e4a2f;font-size:17px;line-height:1.7}.room-actions{position:relative;z-index:1;display:grid;grid-gap:14px;gap:14px}.ghost-button,.join-row button,.primary-button,.room-code{border:0;border-radius:999px;padding:13px 18px;color:#fff8ea;background:linear-gradient(135deg,#6f4a2a,#2f6d49);box-shadow:0 12px 22px rgba(84,57,29,.2)}.primary-button{min-height:54px;font-size:18px;font-weight:900}.join-row button:disabled,.primary-button:disabled{opacity:.52}.join-row{display:grid;grid-template-columns:1fr auto;grid-gap:10px;gap:10px}.join-row input{min-width:0;border:2px solid rgba(116,88,48,.18);border-radius:999px;padding:0 18px;color:var(--ink);background:rgba(255,255,255,.72);outline:none}.invite-card,.status-card{position:relative;z-index:1;display:grid;grid-gap:8px;gap:8px;margin-top:18px;padding:18px;border-radius:22px;background:rgba(255,255,255,.5)}.invite-card button{width:100%;overflow:hidden;border:1px dashed rgba(95,72,39,.35);border-radius:16px;padding:10px 12px;color:var(--ink);background:rgba(255,255,255,.55);text-align:left;text-overflow:ellipsis;white-space:nowrap}.invite-card small{color:rgba(58,43,24,.74);line-height:1.55}.invite-card span,.label,.status-card span{color:rgba(43,32,21,.58);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.game-panel{padding:22px}.game-header{display:grid;grid-template-columns:1fr 1fr 1fr auto;grid-gap:12px;gap:12px;align-items:center;margin-bottom:18px}.game-header>div{display:grid;grid-gap:4px;gap:4px;padding:14px 16px;border-radius:20px;background:rgba(255,255,255,.54)}.room-code{width:-moz-fit-content;width:fit-content;padding:8px 13px;color:var(--ink);background:rgba(255,255,255,.62);box-shadow:none}.ghost-button:disabled,.room-code:disabled{opacity:.48}.ghost-button{color:var(--ink);background:rgba(255,255,255,.6)}.board-wrap{display:grid;grid-template-columns:minmax(420px,720px) minmax(220px,1fr);grid-gap:20px;gap:20px;align-items:start}.board{position:relative;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(9,1fr);aspect-ratio:7/9;padding:18px;border:10px solid #334d25;border-radius:30px;background:radial-gradient(circle at 10% 8%,#d9efa0 0 5%,transparent 8%),radial-gradient(circle at 92% 92%,#c8e58a 0 6%,transparent 10%),linear-gradient(145deg,#8daf54,#6f973e 48%,#87a94f);box-shadow:inset 0 0 0 5px rgba(225,245,177,.45),inset 0 0 28px rgba(36,67,22,.45),0 24px 44px rgba(66,48,26,.28);overflow:hidden}.board:after,.board:before{content:"";position:absolute;inset:10px;pointer-events:none;border-radius:22px}.board:before{background:radial-gradient(circle at 4% 8%,#2f6d36 0 2%,transparent 5%),radial-gradient(circle at 93% 8%,#335f31 0 3%,transparent 7%),radial-gradient(circle at 9% 93%,#2e7a45 0 3%,transparent 8%),radial-gradient(circle at 92% 90%,#2d6e34 0 3%,transparent 8%);opacity:.95}.board:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}.cell{position:relative;display:grid;place-items:center;min-width:0;border:1px solid var(--grid);background:transparent}.cell:after{content:""}.cell:before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(255,248,205,.9);box-shadow:0 0 8px rgba(255,250,216,.8)}.cell.river{border-color:rgba(239,252,255,.5);background:radial-gradient(ellipse at 35% 28%,rgba(255,255,255,.45),transparent 18%),repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 4px,transparent 4px 14px),linear-gradient(180deg,var(--water),var(--water-deep));box-shadow:inset 0 3px 0 rgba(255,255,255,.35),inset 0 -5px 0 rgba(14,92,111,.22)}.cell.river:before{display:none}.cell.trap:after{content:"";position:absolute;width:58%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at center,#3a210f 0 18%,transparent 19%),repeating-conic-gradient(from 8deg,#5e3217 0 10deg,#d09a58 10deg 20deg,#6e3c1c 20deg 30deg);border:4px solid #6b3c1e;box-shadow:inset 0 0 0 5px rgba(255,217,151,.22),0 7px 12px rgba(47,30,12,.32)}.cell.trap:before{display:none}.cell.den:after{content:"";position:absolute;width:70%;height:58%;border-radius:46% 46% 12px 12px;background:radial-gradient(ellipse at 50% 64%,#1b1512 0 28%,transparent 29%),radial-gradient(ellipse at 50% 76%,rgba(255,199,132,.38),transparent 34%),linear-gradient(160deg,#b6a26e,#6f5a38 62%,#403423);border:4px solid #5a4528;box-shadow:0 8px 14px rgba(46,31,15,.32),inset 0 5px 0 rgba(255,255,255,.22)}.cell.den:before{content:"🐾";display:grid;place-items:center;z-index:1;width:28px;height:28px;color:#5a3c21;background:#ead8a3;font-family:Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif;font-size:15px;transform:translateY(-34px)}.cell.selected{outline:4px solid #fff4a4;outline-offset:-7px;z-index:3}.cell.legal:before{width:28%;height:auto;aspect-ratio:1;background:rgba(255,250,186,.92);box-shadow:0 0 18px rgba(255,248,160,.78)}.cell.last-move{box-shadow:inset 0 0 0 4px rgba(255,248,175,.55)}.piece{position:relative;z-index:2;display:grid;place-items:center;width:86%;border:4px solid rgba(255,240,200,.96);color:#fff7df;box-shadow:inset 0 -8px 0 rgba(80,38,15,.18),inset 0 5px 0 rgba(255,255,255,.38),0 10px 0 rgba(91,50,24,.24),0 16px 22px rgba(46,22,7,.25);transition:transform .16s ease,filter .16s ease}.piece,.piece:before{aspect-ratio:1;border-radius:50%}.piece:before{content:"";position:absolute;inset:10% 12% auto auto;width:24%;background:rgba(255,255,255,.34)}.piece.red{background:radial-gradient(circle at 50% 32%,rgba(255,255,255,.4),transparent 22%),linear-gradient(145deg,#ec7865,var(--red) 62%,#87372c)}.piece.blue{background:radial-gradient(circle at 50% 32%,rgba(255,255,255,.42),transparent 22%),linear-gradient(145deg,#72b6ed,var(--blue) 62%,#28548d)}.piece.selectable:hover{transform:translateY(-5px) scale(1.06);filter:brightness(1.08) saturate(1.12)}.animal-face{font-family:Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif;font-size:clamp(28px,5vw,58px);line-height:1;filter:drop-shadow(0 3px 0 rgba(0,0,0,.18))}.animal-badge{position:absolute;left:50%;bottom:-12px;display:grid;place-items:center;min-width:24px;height:24px;border:3px solid rgba(255,245,205,.98);border-radius:999px;color:#5b3018;background:#fff2bf;font-size:13px;font-weight:900;box-shadow:0 4px 8px rgba(52,24,7,.22);transform:translateX(-50%)}.piece.elephant .animal-face,.piece.lion .animal-face,.piece.tiger .animal-face{font-size:clamp(31px,5.4vw,62px)}.piece.cat .animal-face,.piece.rat .animal-face{font-size:clamp(27px,4.6vw,52px)}.side-log{min-height:360px;padding:24px;border-radius:28px;color:#fff5da;background:linear-gradient(160deg,#557436,#2e654e 58%,#284434);box-shadow:inset 0 0 0 1px rgba(255,236,189,.15)}.side-log h2{margin:0 0 18px;font-size:32px}.side-log p{min-height:76px;margin:0;line-height:1.65}.legend{display:grid;grid-gap:10px;gap:10px;margin-top:24px}.legend span{display:flex;align-items:center;gap:10px}.legend i{width:20px;height:20px;border-radius:6px}.legend-river{background:var(--water)}.legend-trap{background:var(--soil);border-radius:50%!important}.legend-den{background:#90734a;border-radius:50% 50% 8px 8px!important}.animal-guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:9px;gap:9px;margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,236,189,.18)}.animal-guide span{display:flex;align-items:center;gap:8px;min-width:0;color:#fff0c4;font-size:14px}.animal-guide b{font-family:Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif;font-size:22px}@media (max-width:1040px){.board-wrap,.shell{grid-template-columns:1fr}.hero-panel{position:relative;top:0;height:auto;min-height:0}}@media (max-width:640px){.shell{width:min(100vw - 18px,560px);padding:9px 0}.game-panel,.hero-panel{border-radius:24px;padding:18px}.game-header{grid-template-columns:1fr 1fr}.board{border-width:5px;border-radius:18px;padding:8px}.animal-badge{display:none}}