/* Not Struggle for Catan on the phone: parchment panels on the wooden table, the market, your
   cards in a sideways scroller, the hand fanned in the dock. Dark first, then light. */
body.g-notstruggle .h2, body.g-notstruggle .sfp-bar.me .ndp-tbtext > b { font-family: "IM Fell English SC", Georgia, serif; font-weight: 400; letter-spacing: .02em; }
.sfp { display: flex; flex-direction: column; gap: 9px; padding-bottom: 214px; min-width: 0; max-width: 100%; }
.sfp > * { min-width: 0; }
.sfp-bar { min-height: 64px; }
.sfp-bar.me .ndp-tbtext > b { font-style: normal; font-size: 32px; }
.sfp-bar.me.pop { animation: sfp-pop .35s cubic-bezier(.2,1.4,.4,1) both, nup-throb 1.6s ease-in-out .4s infinite; }
.sfp-bar .ndp-tbtext { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.sfp-bar.idle { background: linear-gradient(180deg, rgba(58,43,24,.92), rgba(38,28,15,.94)); border: 1.5px solid #8a6b3a; color: rgba(243,227,191,.78); }
.sfp-bar.idle b { color: #f3e3bf; }
.sfp-bar.idle small { color: rgba(243,227,191,.6); }
@keyframes sfp-pop { from { transform: scale(.85); opacity: 0; } }
body.sfp-myturn::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 15; box-shadow: inset 0 0 0 5px #ffc400, inset 0 0 50px rgba(255,196,0,.45); animation: sfp-frame 1.6s ease-in-out infinite; }
@keyframes sfp-frame { 50% { box-shadow: inset 0 0 0 7px #ffc400, inset 0 0 80px rgba(255,196,0,.6); } }

/* rivals */
.sfp-rivals { display: grid; grid-template-columns: repeat(var(--k, 1), minmax(0, 1fr)); gap: 6px; }
.sfp-rivals.k1 { --k: 1; } .sfp-rivals.k2 { --k: 2; } .sfp-rivals.k3 { --k: 3; }
.sfp-rival { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding: 6px 8px; border-radius: 14px; background: rgba(0,0,0,.28); color: #f3e3bf; border: 2px solid transparent; font-size: 13px; min-width: 0; }
.sfp-rival.turn { border-color: #ffb800; box-shadow: 0 0 14px rgba(255,184,0,.35); }
.sfp-rival .avatar { width: 26px; height: 26px; font-size: 13px; }
.sfp-rival .nm { font-weight: 800; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfp-rl2 { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; }
.sfp-rivals.k1 .sfp-rl2 { flex-basis: auto; }
.sfp-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 99px; background: rgba(255,255,255,.1); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.sfp-chip.vp { flex: none; }
.sfp-chip .sf-coin { width: 15px; height: 15px; }
.sfp-chip i { display: inline-block; width: 9px; height: 13px; border-radius: 2px; }
.sfp-minib { display: inline-block; width: 10px; height: 14px; border-radius: 2px; background: #5a2f17; box-shadow: inset 0 0 0 1.5px #d9b56a; }
.sfp-chip.k-road i { background: #5f9a55; } .sfp-chip.k-sheriff i { background: #5b74b3; }
.sfp-rivals.k3 .sfp-chip { padding: 2px 4px; gap: 2px; font-size: 12px; }

/* the market */
.sfp-market { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 16px; background: rgba(0,0,0,.24); }
.sfp-mlabel { writing-mode: vertical-rl; transform: rotate(180deg); font: 800 10px "Inter", Arial, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: rgba(243,227,191,.6); }
.sfp-mcards { display: flex; gap: 5px; flex: 1; justify-content: space-between; min-width: 0; }
.sfp-mc .sfcard { --cw: min(13vw, 54px); }
.sfp-mc.swapped .sfcard { animation: sfp-swap .6s cubic-bezier(.2,1.3,.4,1) both; box-shadow: 0 0 0 3px #ffb800; }
@keyframes sfp-swap { from { transform: translateY(-20px) rotateY(90deg); } }
.sfp-mempty { display: block; width: min(13vw, 54px); aspect-ratio: 63 / 96; border-radius: 5px; border: 2px dashed rgba(243,227,191,.3); }
.sfp-pile { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; }
.sfp-pile .sfcard { --cw: min(10vw, 40px); }
.sfp-pile b { position: absolute; right: -6px; top: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 99px; background: #1d1406; color: #f3e3bf; font: 900 12px/22px "Inter", Arial, sans-serif; text-align: center; box-shadow: 0 0 0 1.5px #c9a54a; }

/* your cards on the table */
.sfp-mine { display: flex; align-items: center; gap: 8px; }
.sfp-myvp { flex: none; display: flex; align-items: center; gap: 5px; padding: 4px 12px 4px 6px; border-radius: 999px; background: linear-gradient(180deg, rgba(58,43,24,.92), rgba(38,28,15,.94)); border: 1.5px solid #8a6b3a; color: #f0c860; line-height: 1; }
.sfp-myvp .sf-coin { width: 28px; height: 28px; }
.sfp-myvp b { font: 700 32px/1 "Spectral", Georgia, serif; }
.sfp-myvp small { font: 700 10px "Inter", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(243,227,191,.7); align-self: flex-end; margin-bottom: 4px; }
.sfp-perks { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: rgba(243,227,191,.75); flex: 1; min-width: 0; }
.sfp-perks span { display: inline-flex; align-items: center; gap: 4px; }
.sfp-perks .sf-tico { width: 15px; height: 15px; }
.sfp-perks b { color: #f3e3bf; font-size: 15px; }
.sfp-vane { flex: none; border: none; background: none; padding: 0; cursor: pointer; }
.sfp-vane .sfcard { --cw: 92px; }
.sfp-tablewrap { margin: 0 -16px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sfp-tablewrap::-webkit-scrollbar { display: none; }
.sfp-table { --cw: 62px; --ch: calc(var(--cw) / .656); display: flex; align-items: flex-end; gap: 7px; padding: 6px 16px 4px; width: max-content; min-width: 100%; justify-content: center; }
.sfp-tc { position: relative; width: var(--cw); height: calc(var(--ch) * 1.16); cursor: pointer; }
.sfp-tc > .sfcard { position: absolute; left: 0; bottom: 0; }
.sfp-tc.up > .sfcard:first-child { top: 0; bottom: auto; }
.sfp-col { position: relative; width: var(--cw); height: calc(var(--ch) + (var(--n) - 1) * var(--ch) * .18); margin-left: 6px; }
.sfp-cc { position: absolute; left: 0; top: calc(var(--k) * var(--ch) * .18); cursor: pointer; }
.sfp-col.none { height: var(--ch); border-radius: 6px; border: 2px dashed rgba(243,227,191,.3); display: flex; align-items: center; justify-content: center; text-align: center; }
.sfp-none { font: 700 10px "Inter", Arial, sans-serif; color: rgba(243,227,191,.5); padding: 0 4px; }
.sfcard.sf-land { animation: sfp-land .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes sfp-land { from { transform: translateY(-30px) scale(1.3) rotate(-8deg); opacity: 0; } }

/* actions */
.sfp-acts { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; }
.sfp-acts .btn { min-height: 56px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; }
.sfp-acts .btn em { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: #2a1c08; color: #f3e3bf; font: 900 13px/22px "Inter", Arial, sans-serif; }
.sfp-acts .btn:disabled em { display: none; }
.sfp-acts .btn small { display: block; font-size: 11px; font-weight: 700; opacity: .8; }
.sfp-acts .btn.primary { flex-direction: column; gap: 0; }
.sfp-acts .sf-tico { width: 18px; height: 18px; }
.btn.sfp-gold { background: linear-gradient(180deg, #f3e3bf, #d9c08a); color: #2a1c08; border: 1.5px solid #8a6b3a; }
.btn.sfp-guild { min-height: 48px; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(180deg, #ffe08a, #e8b83a); color: #2a1c08; }
.btn.sfp-guild .sf-coin { width: 22px; height: 22px; }
.sfp-autoend { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; color: #ffd60a; font-size: 15px; }
.sfp-autoend i { width: 14px; height: 14px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: sfp-spin .8s linear infinite; }
@keyframes sfp-spin { to { transform: rotate(360deg); } }
.sfp-log { font-size: 13px; line-height: 1.35; color: rgba(243,227,191,.72); padding: 0 2px; }
.sfp-log div { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sfp-log .l-turn { color: #f3e3bf; font-weight: 700; } .sfp-log .l-steal, .sfp-log .l-bandit { color: #ff9a8a; } .sfp-log .l-trade { color: #8ed0f5; } .sfp-log .l-draw { color: #b5e36b; } .sfp-log .l-event, .sfp-log .l-vane { color: #c9b6ff; }
.sfp.waiting .ndp-fan { opacity: .66; filter: saturate(.75); transition: opacity .3s; }

/* the hand */
.sfp-dock { background: linear-gradient(to top, rgba(28,18,8,.96) 72%, rgba(28,18,8,0)); }
.sfp-dock .ndp-fan { height: calc(var(--cw) / .656 + 34px); }
.ndp-fan .sfcard { position: absolute; top: 20px; transform-origin: 50% 100%; transition: transform .18s ease, filter .2s; cursor: pointer; }
.ndp-fan .sfcard.peeking { translate: 0 -30px; z-index: 60 !important; filter: none; }
.ndp-fan .sfcard.lit { box-shadow: 0 0 0 3px #ffd60a, 0 0 18px rgba(255,214,10,.55), 0 6px 16px rgba(0,0,0,.4); }
.ndp-fan .sfcard.sfp-in { animation: sfp-in .55s cubic-bezier(.2,1.1,.35,1) both; }
@keyframes sfp-in { from { translate: 0 -52vh; scale: .45; opacity: 0; } 60% { opacity: 1; } }
.ndp-peekcard .sfcard { --cw: min(40vw, 150px); }
.sfp-big { --cw: min(44vw, 180px); }
.sfp-big.wide { --cw: min(70vw, 280px); }

/* sheets */
.sfp-sheet { gap: 9px; max-height: 78vh; }
.sfp-sheet .h2 { font-size: 26px; display: flex; align-items: center; gap: 8px; }
.sfp-sheet .p.small { font-size: 13px; }
.sfp-n { font: 700 1em/1 "Spectral", Georgia, serif; }
.sfp-shead { display: flex; align-items: center; gap: 12px; }
.sfp-sicon { flex: none; --cw: 62px; }
.sfp-sicon.wide { --cw: 110px; }
.sfp-sub { font: 800 12px "Inter", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--label-2); margin-top: 4px; }
.sfp-cards { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-height: 40vh; overflow-y: auto; padding: 6px 2px; }
.sfp-cards.row { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: visible; max-height: none; padding: 8px 4px; }
.sfp-cpick { position: relative; flex: none; border: none; background: none; padding: 3px; border-radius: 10px; cursor: pointer; --cw: 56px; transition: transform .12s; }
.sfp-cpick.on { transform: translateY(-6px); box-shadow: 0 0 0 3px #a3e635, 0 0 16px rgba(163,230,53,.6); }
.sfp-cpick em { position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); background: #38bdf8; color: #0a1620; font: 900 9px "Inter", Arial, sans-serif; font-style: normal; padding: 2px 5px; border-radius: 6px; white-space: nowrap; }
.sfp-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(120,120,128,.2); }
.sfp-tabs button { border: none; background: none; color: var(--text); font: 700 14px "Inter", Arial, sans-serif; padding: 9px 4px; border-radius: 9px; cursor: pointer; min-height: 40px; }
.sfp-tabs button.on { background: var(--bg-3, #3a3a3c); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.sfp-roads { display: inline-flex; gap: 2px; }
.sfp-roads .sf-tico { width: 20px; height: 20px; color: #5f9a55; }
.sfp-rrow { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 14px; background: rgba(255,255,255,.06); }
.sfp-rrow .btn { width: auto; min-height: 46px; padding: 8px 12px; font-size: 15px; font-weight: 800; }
.sfp-rinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sfp-rinfo b { font-size: 16px; } .sfp-rinfo small { font-size: 12px; color: var(--label-2); }
.sfp-brow { display: flex; gap: 10px; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.06); align-items: flex-start; }
.sfp-bcard { flex: none; --cw: 56px; }
.sfp-binfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sfp-binfo b { font-size: 16px; } .sfp-binfo small { font-size: 12px; color: var(--label-2); line-height: 1.3; }
.sfp-plans { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sfp-plan { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 7px 10px; border-radius: 12px; border: 2px solid #ffb800; background: rgba(255,184,0,.14); color: var(--text); cursor: pointer; font: 700 12px "Inter", Arial, sans-serif; }
.sfp-plan.main { background: linear-gradient(120deg, #ffd60a, #ffb000); border-color: #e09a00; color: #1b1b1b; box-shadow: 0 4px 14px rgba(255,170,0,.35); }
.sfp-plabel { font: 900 16px "Inter", Arial, sans-serif; }
.sfp-more { border: none; background: none; color: var(--blue, #0a84ff); font: 700 13px "Inter", Arial, sans-serif; padding: 8px 4px; cursor: pointer; min-height: 40px; }
.sfp-plan:active { transform: scale(.97); }
.sfp-picons { display: flex; gap: 3px; }
.sfp-picons .sf-ico { width: 24px; height: 24px; }
.sfp-plan small { font-size: 10px; color: inherit; opacity: .75; }
.sfp-prices { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--label-2); padding: 4px 2px; }
.sfp-prices span { display: inline-flex; align-items: center; gap: 2px; }
.sfp-prices b { margin-right: 3px; }
.sfp-prices .sf-ico { width: 16px; height: 16px; }

/* full-screen moments */
.sfp-moment { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(circle, color-mix(in srgb, var(--pc) 50%, transparent), rgba(10,6,2,.72) 75%); animation: sfp-moment 2.7s ease both; }
.sfp-moment.k-steal, .sfp-moment.k-bandit, .sfp-moment.hit { background: radial-gradient(circle, rgba(198,40,40,.6), rgba(20,4,4,.8) 75%); }
@keyframes sfp-moment { 0% { opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.sfp-mcard { animation: sfp-slam .5s cubic-bezier(.2,1.5,.4,1) both; }
.sfp-mcard .sfcard { box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 0 0 0 3px #8a6b3a; transform: rotate(-3deg); }
@keyframes sfp-slam { from { transform: scale(2.4); opacity: 0; } }
.sfp-moment .who { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.74); color: #fff; font: 800 18px/1.25 "Inter", Arial, sans-serif; padding: 8px 16px 8px 8px; border-radius: 999px; max-width: 90vw; }
.sfp-moment .avatar { width: 40px; height: 40px; font-size: 18px; flex: none; }
.sfp-final .sfp-fcards { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }

/* ---- light theme: daylight parchment on light oak ---- */
[data-theme="light"] .sfp-bar.idle, [data-theme="light"] .sfp-myvp { background: linear-gradient(180deg, rgba(250,242,222,.97), rgba(238,224,190,.97)); border-color: #a9844a; color: #2a1c08; }
[data-theme="light"] .sfp-bar.idle b { color: #2a1c08; }
[data-theme="light"] .sfp-bar.idle, [data-theme="light"] .sfp-bar.idle small, [data-theme="light"] .sfp-myvp small, [data-theme="light"] .sfp-perks { color: rgba(61,42,18,.75); }
[data-theme="light"] .sfp-myvp b { color: #9a6410; }
[data-theme="light"] .sfp-perks b { color: #2a1c08; }
[data-theme="light"] .sfp-rival { background: rgba(255,250,235,.82); color: #2a1c08; box-shadow: 0 4px 14px rgba(90,60,20,.12); }
[data-theme="light"] .sfp-chip { background: rgba(90,60,20,.1); }
[data-theme="light"] .sfp-market { background: rgba(255,250,235,.45); box-shadow: inset 0 0 0 1.5px rgba(90,60,20,.14); }
[data-theme="light"] .sfp-mlabel { color: rgba(61,42,18,.6); }
[data-theme="light"] .sfp-mempty, [data-theme="light"] .sfp-col.none { border-color: rgba(90,60,20,.3); }
[data-theme="light"] .sfp-none { color: rgba(61,42,18,.55); }
[data-theme="light"] .sfp-log { color: rgba(61,42,18,.75); }
[data-theme="light"] .sfp-log .l-turn { color: #2a1c08; } [data-theme="light"] .sfp-log .l-steal, [data-theme="light"] .sfp-log .l-bandit { color: #c2410c; } [data-theme="light"] .sfp-log .l-trade { color: #0369a1; } [data-theme="light"] .sfp-log .l-draw { color: #3f7d0e; } [data-theme="light"] .sfp-log .l-event, [data-theme="light"] .sfp-log .l-vane { color: #6b3fa0; }
[data-theme="light"] .sfp-dock { background: linear-gradient(to top, rgba(232,214,178,.97) 72%, rgba(232,214,178,0)); }
[data-theme="light"] .ndp-fan .sfcard.lit { box-shadow: 0 0 0 3px #d99a00, 0 0 16px rgba(255,190,0,.5), 0 6px 16px rgba(90,60,20,.3); }
[data-theme="light"] .sfp-rrow, [data-theme="light"] .sfp-brow { background: rgba(120,80,30,.07); }
[data-theme="light"] .sfp-plan:not(.main) { background: rgba(255,184,0,.16); border-color: #d99a00; }
[data-theme="light"] .sfp-tabs button.on { background: #fff; }
[data-theme="light"] .sfp-autoend { color: #b57d00; }