/* Puso Sungka — Islands Board styles (v94). Original Puso styling,
   adapted from the Sungka package. Dark plum-night is the default;
   the capiz-day light variant follows the app theme, not a separate
   in-game toggle. Counts are numbers, never colour-only. Tap
   targets meet the app floor at phone widths; the narrow layout
   stacks heads above and below the houses. */
.sg-board{display:flex;gap:10px;align-items:stretch;background:linear-gradient(180deg,#8a5a33,#7a4a2b);border:3px solid #d9a441;border-radius:24px;padding:14px}
.sg-head{flex:0 0 92px;border-radius:18px;background:#fff8e6;color:#241026;text-align:center;padding:10px 6px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.sg-head.sg-current{outline:3px solid #e86a7c;outline-offset:2px}
.sg-head-partner.sg-current{outline-color:#ff8a6b}
.sg-head .sg-home{font-size:34px}
.sg-head .sg-count{font-size:30px;font-weight:800;line-height:1}
.sg-head .sg-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.sg-houses{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.sg-houses .sg-row-label{grid-column:1/-1;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#e8cfe0}
.sg-row{display:contents}
.sg-house{min-height:64px;border-radius:16px;border:2px solid rgba(255,255,255,.35);background:rgba(0,0,0,.28);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px;cursor:pointer;font:inherit}
.sg-house:disabled{opacity:.55;cursor:default}
.sg-house.sg-theirs{background:rgba(74,124,89,.55)}
.sg-house.sg-own{background:rgba(46,139,122,.55)}
.sg-house.sg-current{outline:3px solid #d9a441;outline-offset:2px}
.sg-house.sg-hint{outline:3px dashed #fff;outline-offset:2px}
.sg-house.sg-sowing{background:#d9a441;color:#241026}
.sg-house .sg-n{font-size:20px;font-weight:800;line-height:1}
.sg-house .sg-dots{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;max-width:56px}
.sg-house .sg-dot{width:9px;height:9px;border-radius:50%;background:#fff8e6;border:1px solid #d9a441;display:inline-block}
.sg-status{text-align:center;font-weight:700;margin:10px 0;min-height:24px}
.sg-msg{text-align:center;min-height:24px;margin:10px 0;font-weight:600}
.sg-controls,.sg-toggles,.sg-reactions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.sg-controls select{min-height:44px;border-radius:99px;padding:10px 16px;font:inherit;background:#fff;color:#241026;border:0}
.sg-win{text-align:center;padding:18px;background:#3d1a3e;border:2px solid #d9a441;border-radius:20px;margin:14px 0}
.sg-win .sg-hearts{font-size:40px}
.sg-tip,.sg-series,.sg-recent{text-align:center;font-size:14px;margin:8px 0}
.sg-how{background:#3d1a3e;border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:14px 18px;margin:14px 0;line-height:1.55}
.sg-how h4{margin:12px 0 6px;font-size:16px}
.sg-how h4:first-child{margin-top:0}
.sg-how ol,.sg-how ul{margin:8px 0;padding-left:20px}
.sg-how li{margin:4px 0}
.sg-tile{width:100%;text-align:left;background:#3d1a3e;border:2px solid #d9a441;border-radius:20px;padding:16px;color:#fff8e6;cursor:pointer;font:inherit}
.sg-tile h4{margin:0 0 6px;font-size:17px}
.sg-tile p{margin:4px 0;font-size:14px;line-height:1.5}
.sg-tile .sg-tile-modes{font-weight:700;color:#d9a441}
.sg-tabs{display:flex;gap:8px;margin:0 0 12px}
.sg-tab{flex:1;min-height:44px;border-radius:99px;border:2px solid rgba(255,255,255,.25);background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.sg-tab[aria-selected="true"]{background:#d9a441;color:#241026;border-color:#d9a441}
.sg-leaderboard{background:#3d1a3e;border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:12px;margin:14px 0}
.sg-leaderboard h4{margin:0 0 8px;font-size:15px}
.sg-leaderboard p{margin:4px 0;font-size:14px}
.sg-high-contrast .sg-board{background:#000;border-color:#fff}
.sg-high-contrast .sg-head{background:#000;color:#fff;border:2px solid #fff}
.sg-high-contrast .sg-house{border-color:#fff}
.sg-large-numbers .sg-house .sg-n{font-size:28px}
.sg-large-numbers .sg-head .sg-count{font-size:38px}
/* Capiz-day light variant, driven by the app theme. Pale ivory
   panels, gold accents, dark ink text. */
html[data-theme="light"] .sg-tile,
html[data-theme="light"] .sg-leaderboard,
html[data-theme="light"] .sg-how,
html[data-theme="light"] .sg-win{background:#fff;border-color:#d9a441;color:#241026}
html[data-theme="light"] .sg-tile p,
html[data-theme="light"] .sg-leaderboard p{color:#241026}
html[data-theme="light"] .sg-houses .sg-row-label{color:#4a2a4a}
html[data-theme="light"] .sg-tab{border-color:rgba(0,0,0,.25)}
/* Narrow phone and folded layout: heads stack above and below the
   houses instead of squeezing beside them. */
@media (max-width:640px){
  .sg-board{flex-direction:column;padding:6px;gap:8px}
  .sg-head{flex-basis:auto;flex-direction:row;justify-content:space-between;align-items:center;min-height:84px;padding:8px 14px}
  .sg-head .sg-count{font-size:26px}
  .sg-head .sg-label{font-size:11px}
  .sg-houses{gap:4px}
  .sg-house{min-height:56px}
  .sg-house .sg-n{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .sg-house{transition:none}
}