@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink:#192c2a; --muted:#71827d; --paper:#f5f3ed; --cream:#fffdf8; --line:#dfe2d8; --coral:#f06e59; --coral-dark:#cb503f; --mint:#dcece1; --yellow:#f7d86d; --mud:#755645; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Space Grotesk', system-ui, sans-serif; }
button, select { font:inherit; }
.app-shell { max-width:1240px; margin:auto; padding:30px 42px 54px; }
.topbar, .hero-row, .zone-heading, .panel-heading, .top-actions, .brand-lockup, .turn-card { display:flex; align-items:center; }
.topbar { justify-content:space-between; padding-bottom:34px; border-bottom:1px solid var(--line); }
.brand-lockup { gap:12px; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; color:#fff; background:var(--coral); border-radius:12px 12px 12px 4px; font-weight:700; letter-spacing:-1px; }
.eyebrow, .zone-kicker { margin:0; color:var(--muted); font:500 10px 'DM Mono', monospace; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow.coral { color:var(--coral-dark); }
h1,h2,h3,p { margin-top:0; }
h1 { margin:2px 0 0; font-size:21px; letter-spacing:-.04em; }
h1 span { color:var(--muted); font-size:14px; font-weight:400; letter-spacing:0; }
.top-actions { gap:17px; }
.difficulty-control { display:flex; align-items:center; gap:10px; color:var(--muted); font:500 11px 'DM Mono', monospace; text-transform:uppercase; }
select { appearance:none; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:var(--cream); padding:10px 30px 10px 12px; font:500 12px 'Space Grotesk', sans-serif; }
.button { border:0; border-radius:7px; padding:11px 17px; cursor:pointer; font-size:12px; font-weight:600; transition:transform .15s, background .15s; }
.button:hover { transform:translateY(-1px); }.button-dark { background:var(--ink); color:#fff; }
.hero-row { justify-content:space-between; padding:55px 0 43px; gap:30px; }
h2 { max-width:700px; margin:9px 0 13px; font-size:clamp(34px, 5vw, 58px); line-height:.98; letter-spacing:-.065em; }
h2 em { color:var(--coral); font-style:normal; }.hero-copy { max-width:520px; margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.turn-card { gap:12px; min-width:195px; padding:15px 17px; border:1px solid var(--line); border-radius:10px; background:var(--cream); box-shadow:0 5px 0 #e6e4db; }
.turn-dot { width:9px; height:9px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 5px #fce2dc; }.turn-card strong,.turn-card small { display:block; }.turn-card strong { font-size:13px; }.turn-card small { margin-top:4px; color:var(--muted); font-size:11px; }
.game-board { overflow:hidden; border:1px solid var(--line); border-radius:13px; background:var(--cream); }
.player-zone { padding:25px 29px 28px; }.opponent-side { background:#faf9f4; }.table-divider { height:1px; position:relative; background:var(--line); }.table-divider span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:5px 12px; color:var(--muted); background:var(--cream); font:500 10px 'DM Mono',monospace; }
.zone-heading { justify-content:space-between; margin-bottom:19px; }.zone-heading h3, .panel-heading h3 { margin:4px 0 0; font-size:17px; letter-spacing:-.035em; }.zone-heading h3 span { margin-left:5px; color:var(--muted); font-size:11px; font-weight:400; letter-spacing:0; }
.score-pill { display:flex; align-items:baseline; gap:4px; color:var(--muted); font-size:10px; }.score-pill b { color:var(--ink); font-size:27px; letter-spacing:-.06em; }.score-coral b { color:var(--coral); }
.pig-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.pig-card { min-height:107px; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:13px; border:1px solid var(--line); border-radius:9px; background:#f1eee5; cursor:pointer; transition:transform .15s, border-color .15s; }.pig-card:hover { transform:translateY(-2px); border-color:#a9b7ab; }.pig-card.selected { border:2px solid var(--coral); padding:12px; box-shadow:0 0 0 3px #fce2dc; }.pig-card.dirty { background:#5b4033; color:#fff; border-color:#5b4033; }.pig-card.sheltered:not(.dirty) { background:#f1eee5; }.pig-illustration { position:absolute; right:12px; top:10px; font-size:40px; filter:grayscale(.15); }.pig-card.dirty .pig-illustration { filter:sepia(.7) saturate(2); }.pig-name { font:500 10px 'DM Mono',monospace; z-index:1; }.pig-status { position:absolute; left:13px; top:12px; color:var(--muted); font:500 9px 'DM Mono',monospace; }.dirty .pig-status { color:#f5dcd0; }.shelter-tag { position:absolute; right:9px; bottom:9px; color:#327255; font:500 9px 'DM Mono',monospace; }
.control-row { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr); gap:18px; margin-top:18px; }.hand-panel,.rules-panel { padding:25px 29px; border:1px solid var(--line); border-radius:13px; background:var(--cream); }.panel-heading { justify-content:space-between; align-items:flex-start; }.deck-count { padding:6px 8px; border-radius:5px; color:var(--muted); background:#f2f1eb; font:500 10px 'DM Mono',monospace; }.hand { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }.card { width:100px; min-height:110px; position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:11px; border:1px solid var(--line); border-radius:8px; background:#f2f0e8; cursor:pointer; transition:transform .15s, box-shadow .15s, border .15s; }.card:hover { transform:translateY(-3px); }.card.selected { border:2px solid var(--coral); padding:10px; box-shadow:0 4px 0 #f3c1b5; }.card-icon { font-size:26px; line-height:1; }.card-name { font-size:12px; font-weight:600; }.card-desc { color:var(--muted); font-size:9px; line-height:1.2; }.card-mud { background:#eee2da; }.card-rain { background:#e1edf0; }.card-barn { background:#e3eee2; }.card-lightning { background:#f8edc9; }.hint { min-height:16px; margin:16px 0 0; color:var(--muted); font-size:11px; }.rules-panel ul { margin:19px 0 18px; padding:0; list-style:none; }.rules-panel li { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:11px; }.rules-panel li b { font-size:12px; }.rules-panel li span { color:var(--muted); text-align:right; }.rule-icon { width:21px; height:21px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--ink); font:600 12px Georgia,serif; }.log-box { padding:12px; border-radius:8px; background:#f5f3eb; }.log-box p { margin:7px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; padding:11px 16px; border-radius:7px; color:#fff; background:var(--ink); font-size:12px; pointer-events:none; transition:.2s; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:720px) { .app-shell { padding:20px 16px 35px; }.topbar { align-items:flex-start; gap:18px; flex-direction:column; padding-bottom:22px; }.top-actions { width:100%; justify-content:space-between; }.hero-row { align-items:flex-start; flex-direction:column; padding:35px 0 28px; }.turn-card { width:100%; }.player-zone { padding:20px 16px; }.pig-row { gap:7px; }.pig-card { min-height:88px; padding:9px; }.pig-card.selected { padding:8px; }.pig-illustration { right:7px; top:8px; font-size:29px; }.pig-status { left:8px; top:8px; font-size:8px; }.pig-name { font-size:8px; }.shelter-tag { right:6px; bottom:6px; font-size:7px; }.control-row { grid-template-columns:1fr; }.hand-panel,.rules-panel { padding:20px 16px; }.card { width:calc(25% - 8px); min-height:105px; }.card-icon { font-size:21px; }.card-name { font-size:10px; } }
.hand-actions { display:flex; align-items:center; gap:8px; margin-top:17px; }.button-light { padding:8px 11px; color:var(--ink); background:#f1f0e8; border:1px solid var(--line); }.button-light:disabled { opacity:.4; cursor:not-allowed; transform:none; }.action-note { color:var(--muted); font:10px 'DM Mono',monospace; }
.top-actions .button-light { padding:10px 12px; }.top-actions .button-light.playing { color:#fff; border-color:var(--coral); background:var(--coral); }
.card-rod { background:#e8e3f2; }.card-farmer { background:#f3e2d1; }.card-lock { background:#dfe8e4; }.pig-protections { position:absolute; right:8px; bottom:8px; z-index:2; display:flex; gap:3px; }.protection { width:17px; height:17px; display:grid; place-items:center; border:1px solid currentColor; border-radius:4px; color:#aeb9b1; background:rgba(255,255,255,.55); font:600 12px/1 Georgia,serif; opacity:.4; }.protection.active { color:#327255; background:#eef8ef; opacity:1; }.dirty .protection { color:#c6a99a; background:rgba(61,35,24,.35); }.dirty .protection.active { color:#f6dc9a; background:rgba(91,53,34,.8); }
.game-board { position:relative; }.fx-banner { position:fixed; left:50%; top:96px; z-index:9; display:flex; align-items:center; gap:11px; padding:13px 20px; border:2px solid var(--ink); border-radius:12px; background:var(--cream); box-shadow:0 6px 0 rgba(25,44,42,.14),0 18px 44px rgba(25,44,42,.3); font-size:17px; font-weight:700; letter-spacing:-.02em; opacity:0; transform:translate(-50%,-28px) scale(.65); pointer-events:none; transition:transform .3s cubic-bezier(.2,1.7,.4,1), opacity .2s ease; }.fx-banner.show { opacity:1; transform:translate(-50%,0) scale(1); }.fx-banner-side { padding:4px 10px; border-radius:6px; color:#fff; background:var(--ink); font-size:12px; }.fx-banner-side.ai { background:var(--coral-dark); }.fx-banner-glyph { display:inline-grid; place-items:center; width:27px; height:27px; border-radius:6px; font-style:normal; font-size:16px; }
.pig-fx { position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit; overflow:hidden; }.pig-fx span { position:absolute; border-radius:50%; animation:fx-pop 1.1s ease-out forwards; }.fx-mud span { background:#63432f; box-shadow:inset 0 -3px 0 rgba(0,0,0,.28); }.fx-farmer span { background:radial-gradient(circle at 32% 32%, #e6f5fd, #7db3d6); box-shadow:0 0 8px rgba(125,179,214,.9); }.fx-icon { position:absolute; left:50%; top:42%; margin:0; width:auto; height:auto; border-radius:0; background:none; font:800 56px/1 Georgia,serif; color:#fff; text-shadow:0 4px 0 rgba(25,44,42,.35),0 0 30px rgba(247,216,109,.95); animation:fx-icon 1.2s cubic-bezier(.2,1.5,.4,1) forwards; }.flash-lightning { animation:zap .45s ease-out 3; }@keyframes fx-pop { 0% { transform:translateY(6px) scale(.3); opacity:0; } 25% { opacity:1; } 100% { transform:translateY(-66px) scale(1.7); opacity:0; } }@keyframes fx-icon { 0% { transform:translate(-50%,-50%) scale(.2) rotate(-18deg); opacity:0; } 30% { transform:translate(-50%,-52%) scale(1.55) rotate(7deg); opacity:1; } 60% { transform:translate(-50%,-58%) scale(1.15) rotate(-4deg); opacity:1; } 100% { transform:translate(-50%,-130%) scale(1) rotate(0deg); opacity:0; } }@keyframes zap { 0%,100% { box-shadow:none; filter:none; } 40% { box-shadow:0 0 0 7px var(--yellow),0 0 48px var(--yellow); filter:brightness(1.6); } }
.fx-full-flash { position:fixed; inset:0; z-index:11; pointer-events:none; background:#fff; opacity:0; animation:full-flash .8s ease-out forwards; }@keyframes full-flash { 0% { opacity:0; } 12% { opacity:.92; } 30% { opacity:.15; } 45% { opacity:.55; } 100% { opacity:0; } }.shake-board { animation:shake .55s ease-in-out; }@keyframes shake { 0%,100% { transform:translate(0,0) rotate(0); } 15% { transform:translate(-7px,3px) rotate(-.4deg); } 30% { transform:translate(6px,-4px) rotate(.4deg); } 45% { transform:translate(-5px,2px) rotate(-.3deg); } 60% { transform:translate(4px,-2px) rotate(.25deg); } 80% { transform:translate(-2px,1px) rotate(-.1deg); } }
.rain-overlay { position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; transition:opacity .25s; background-image:linear-gradient(rgba(31,58,74,.22),rgba(31,58,74,.22)),repeating-linear-gradient(112deg, rgba(125,179,214,.75) 0 2px, transparent 2px 7px),repeating-linear-gradient(108deg, rgba(160,205,228,.5) 0 1px, transparent 1px 12px); }.rain-overlay.on { opacity:1; animation:rain-fall .38s linear infinite; }@keyframes rain-fall { from { background-position:0 0,0 0,0 0; } to { background-position:0 0,-62px 130px,-40px 110px; } }
.victory-screen { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px; background:rgba(25,44,42,.72); opacity:0; pointer-events:none; transition:opacity .25s; }.victory-screen.visible { opacity:1; pointer-events:auto; }.victory-modal { width:min(470px,100%); position:relative; overflow:hidden; padding:39px 30px 30px; border:1px solid #f0d2a1; border-radius:16px; background:#fffaf0; text-align:center; box-shadow:0 18px 60px rgba(0,0,0,.2); }.victory-modal h2 { margin:8px 0 9px; font-size:42px; }.victory-modal p:not(.eyebrow) { color:var(--muted); font-size:13px; }.rolling-pigs { display:flex; justify-content:center; gap:7px; margin:27px 0 29px; padding:17px 12px; border-radius:100px; background:#765543; box-shadow:inset 0 -7px 0 #634535; }.rolling-pigs span { display:block; font-size:35px; animation:roll 1.25s ease-in-out infinite; }.rolling-pigs span:nth-child(2) { animation-delay:.12s; }.rolling-pigs span:nth-child(3) { animation-delay:.24s; }.rolling-pigs span:nth-child(4) { animation-delay:.36s; }.rolling-pigs span:nth-child(5) { animation-delay:.48s; }.mud-splash { position:absolute; width:13px; height:13px; border-radius:50%; background:#98705a; animation:splash 1.5s ease-in-out infinite; }.splash-one { left:45px; top:120px; }.splash-two { right:56px; top:162px; animation-delay:.45s; }
@keyframes roll { 0%,100% { transform:translateY(5px) rotate(-13deg); } 50% { transform:translateY(-9px) rotate(18deg); } } @keyframes splash { 0%,100% { transform:scale(.5); opacity:.3; } 50% { transform:scale(1.4); opacity:1; } }
.game-board { display:grid; grid-template-columns:1fr 1fr; }.opponent-side { border-bottom:1px solid var(--line); }.alt-zone { background:#faf9f3; border-left:1px solid var(--line); }.table-divider,.player-side { grid-column:1/-1; }.score-pill.alt b { color:#a06a2c; }.fx-banner-side.you { background:var(--ink); }
@media (max-width:720px) { .game-board { grid-template-columns:1fr; }.alt-zone { border-left:0; border-top:1px solid var(--line); } }
.game-board.duo { grid-template-columns:1fr; }.game-board.duo #zone-ai-b { display:none; }.top-actions .difficulty-control select { min-width:104px; }