.pig-page{width:min(1080px,calc(100% - 32px));margin:0 auto}.pig-hero{padding:24px 0 22px}.pig-hero h1{font-size:clamp(1.55rem,4vw,2.4rem);line-height:1.4}.pig-hero p{margin:8px 0}.pig-page h2{font-size:1.15rem;line-height:1.5;margin:0 0 12px}.pig-game{border:1px solid var(--line,#dce9e4);border-radius:18px;background:#fffefa;overflow:hidden;box-shadow:var(--shadow,0 18px 45px #2d5c4e1f)}.pig-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;flex-wrap:wrap}.pig-toolbar p{margin:0}.pig-toolbar .shared-wallet-panel{margin:0;min-width:0;padding:6px 10px}.street-wrap{position:relative;background:#e5ede5;min-height:180px}.street-wrap canvas{display:block;width:100%;aspect-ratio:1120/600}.asset-error{position:absolute;inset:0;background:#fffefaed;display:grid;place-content:center;text-align:center;padding:20px}.asset-error[hidden]{display:none}.pig-page button,.pig-page select{font:inherit;min-height:44px}.pig-page button{cursor:pointer;border:1px solid #a9cabc;border-radius:9px;background:#fffefa;padding:9px 16px;color:#253331;font-weight:700}.pig-page button:hover:not(:disabled){background:#e7f7ef}.pig-page button:disabled{cursor:wait;opacity:.6}.pig-page .primary-button{background:#2f8f70;color:white;border-color:#2f8f70}.pig-page .primary-button:hover:not(:disabled){background:#257358}.pig-page :focus-visible{outline:3px solid #167559;outline-offset:3px}.pig-statuses{list-style:none;padding:12px 18px;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.pig-statuses li{padding:6px 10px;border-left:4px solid #bccfc5;background:#f0f7f2;font-size:.9rem;border-radius:5px}.pig-statuses li[data-chosen=true]{border-color:#246c53;background:#e4f5eb}.pig-statuses strong,.pig-statuses span{display:block}.bet-summary{margin:0;padding:10px 18px;background:#edf7f1;font-weight:700}.bet-panel{padding:20px 18px}.pig-page fieldset{border:0;margin:0;padding:0;min-width:0}.pig-page legend{margin-bottom:10px;font-size:.9rem;color:#667572}.pig-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.pig-choice{display:flex;flex-direction:column;align-items:stretch;border:2px solid #dce9e4;border-radius:12px;padding:10px;cursor:pointer;position:relative;min-width:0;background:#fff}.pig-choice:has(input:checked){border-color:#2f8f70;background:#edf9f2}.pig-choice input{position:absolute;top:12px;left:10px;accent-color:#2f8f70;width:18px;height:18px;margin:0}.pig-choice .pig-name{font-weight:800;margin-left:25px}.pig-choice .pig-trait{font-size:.82rem;line-height:1.6;margin:4px 0}.pig-choice .pig-odds{color:#245f4a;font-weight:800}.pig-portrait{width:100%;aspect-ratio:1;align-self:center;max-width:125px}.bet-actions{display:flex;align-items:end;gap:14px;margin-top:18px;flex-wrap:wrap}.bet-actions label{display:flex;flex-direction:column;gap:4px;font-size:.9rem}.pig-page select{padding:8px 12px;border:1px solid #a9cabc;border-radius:8px;background:#fff}.small-note{color:#667572;font-size:.85rem;margin:12px 0 0}.race-controls{padding:16px 18px;display:flex;align-items:center;gap:16px}.race-controls p{font-size:.9rem;margin:0}.race-controls[hidden],.bet-panel[hidden],.pig-result[hidden],.error-box[hidden]{display:none}.error-box{margin:12px 18px;padding:12px;background:#fff2e4;border:1px solid #b97432;border-radius:9px}.error-box p{margin:0 0 8px}.pig-result{padding:24px 18px;background:#f0faf3;border-top:1px solid #c8e6d3}.pig-result h2{font-size:clamp(1.5rem,3.5vw,2rem)}.result-verdict{font-size:1.35rem;font-weight:800;margin:8px 0}.pig-result dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}.pig-result dl div{background:white;border-radius:9px;padding:10px}.pig-result dt{font-size:.85rem;color:#667572}.pig-result dd{font-size:1.45rem;font-weight:800;margin:0}.pig-info{margin:24px 0;padding:20px;border:1px solid #dce9e4;border-radius:14px;background:#fffefa}.pig-info p{margin:10px 0}.pig-info details{margin-top:12px}.pig-info summary{cursor:pointer;font-weight:700}.breadcrumb{font-size:.85rem;padding-top:18px}.pig-info a{color:#2f8f70}@media(max-width:640px){.pig-page{width:calc(100% - 24px)}.pig-hero{padding:18px 0}.pig-toolbar{padding:10px 12px;gap:6px;font-size:.85rem}.street-wrap canvas{aspect-ratio:1.12}.pig-statuses{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px 12px;gap:6px}.pig-statuses li{font-size:.8rem;line-height:1.5}.pig-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pig-choice{padding:8px}.pig-choice .pig-trait{font-size:.78rem}.pig-portrait{max-width:112px}.bet-panel{padding:16px 12px}.bet-summary{padding:10px 12px;font-size:.9rem}.bet-actions{align-items:stretch;gap:10px}.bet-actions label,.bet-actions button{flex:1 1 150px}.race-controls{align-items:flex-start;padding:12px;gap:10px}.race-controls button{flex-shrink:0}.race-controls p{font-size:.8rem}.pig-result dl{grid-template-columns:repeat(2,minmax(0,1fr))}.pig-info{padding:16px}.pig-result dd{font-size:1.25rem}}@media(prefers-reduced-motion:reduce){.pig-page *{scroll-behavior:auto!important}}
/* Canvas surface and semantic controls use the same CSS-pixel coordinate space. */
#game.pig-game{padding:0;position:relative;overflow:hidden}#game-surface{position:relative;width:100%;height:min(760px,calc(100dvh - 24px));min-height:350px;background:#fffefa}#game #street{display:block;width:100%;height:100%;aspect-ratio:auto}#canvas-controls{position:absolute;inset:0;pointer-events:none}#game .canvas-hit{position:absolute!important;display:block;min-width:0;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:transparent;box-shadow:none;pointer-events:auto;touch-action:manipulation;font:inherit;z-index:2;transform:none}#game .canvas-hit[hidden]{display:none!important}#game .canvas-hit:hover:not(:disabled){background:rgba(47,143,112,.10)}#game .canvas-hit:disabled{opacity:1;cursor:wait}#game .canvas-hit:focus-visible{outline:3px solid #123f30;outline-offset:-4px;background:rgba(142,223,193,.18)}.canvas-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#game.is-game-fullscreen{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)!important;overflow:hidden!important;box-sizing:border-box}#game.is-game-fullscreen #game-surface{height:100%;min-height:0}#game.is-game-fullscreen .game-fullscreen-close{min-width:0}

/* Outside-game instructions reuse the existing white/green information panel. */
.pig-instructions h3{font-size:1.05rem;line-height:1.5;margin:24px 0 12px}.pig-instructions h4{font-size:1rem;line-height:1.5;margin:0 0 8px}.pig-instructions .pig-howto-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:12px 0 20px}.pig-instructions .pig-howto-steps li{min-width:0;padding:14px;border:1px solid #dce9e4;border-radius:10px;background:#f0f7f2}.pig-instructions .pig-howto-steps p{font-size:.9rem;margin:0;line-height:1.8}.pig-instructions .pig-ability-definitions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0}.pig-instructions .pig-ability-definitions dt{font-weight:700}.pig-instructions .pig-ability-definitions dd{font-size:.9rem;line-height:1.8;margin:4px 0 0}.pig-instructions .pig-guide-controls{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.9rem;line-height:1.8;margin:12px 0 20px}.pig-instructions .pig-guide-controls th,.pig-instructions .pig-guide-controls td{padding:10px;text-align:left;vertical-align:top;border-bottom:1px solid #dce9e4;overflow-wrap:anywhere}.pig-instructions .pig-guide-controls th:first-child{width:30%}.pig-instructions .pig-guide-controls thead{background:#f0f7f2}.pig-instructions details{border-top:1px solid #dce9e4;padding-top:4px}.pig-instructions summary{min-height:44px;padding:10px 0;line-height:1.5}.pig-instructions details p{font-size:.9rem;line-height:1.8}
@media(max-width:640px){.pig-instructions .pig-howto-steps,.pig-instructions .pig-ability-definitions{grid-template-columns:1fr}.pig-instructions .pig-guide-controls th,.pig-instructions .pig-guide-controls td{padding:9px 7px}.pig-instructions .pig-guide-controls th:first-child{width:34%}}
