.pch-table {
  --pch-paper: #fcf4df;
  --pch-gold: #e6bc6c;
  --pch-deep: #162d38;
  --pch-line: #dcc28d55;
  color: var(--pch-paper);
  padding-bottom: 40px;
}
.pch-table [hidden] { display: none !important; }
.pch-table h2, .pch-table h3, .pch-table h4, .pch-table p { margin: 0; }
.pch-table button, .pch-table input, .pch-table select { font: inherit; }
.pch-table button {
  padding: 10px 15px;
  color: #fcf3df;
  border: 1px solid #b4c4bd55;
  border-radius: 7px;
  background: #2b4c59;
  cursor: pointer;
  transition: transform .15s, background .15s;
}
.pch-table button:hover:not(:disabled) { background: #3a6472; transform: translateY(-2px); }
.pch-table button:disabled { opacity: .5; cursor: default; }
.pch-table :is(button,input,select):focus-visible { outline: 3px solid #f3cf82; outline-offset: 3px; }
.pch-table .cta, .pch-table .pch-primary-action { background: #e4bd73; color: #253740; font-weight: 800; }
.pch-table label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.pch-table input, .pch-table select {
  min-width: 0;
  max-width: 100%;
  padding: 11px;
  color: #273d46;
  border: 1px solid #c8b27c;
  border-radius: 6px;
  background: #fff6e1;
}
.pch-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 10px 0 25px; }
.pch-heading h2 { margin: 6px 0; font: 700 39px Georgia,serif; color: #f4d18e; }
.pch-heading > div > small { color: #d6bc83; font-size: 9px; letter-spacing: .16em; }
.pch-heading p { color: #b9c9ce; font-size: 13px; }
.pch-heading nav { display: flex; flex-wrap: wrap; gap: 7px; }
.pch-heading nav button { font-size: 12px; }
.pch-entry { display: grid; grid-template-columns: 1.65fr 1fr; gap: 22px; }
.pch-entry > article {
  position: relative;
  min-height: 435px;
  overflow: hidden;
  padding: 40px;
  border: 1px solid var(--pch-line);
  border-radius: 16px;
  background: radial-gradient(ellipse at 90% 90%,#5e9f9f77,transparent 65%),linear-gradient(140deg,#193d4b,#1d263e);
}
.pch-entry h3 { position: relative; z-index: 1; margin: 16px 0; font: 700 44px/1.12 Georgia,serif; color: #fff1d3; }
.pch-entry p { position: relative; z-index: 1; max-width: 380px; margin-bottom: 25px; line-height: 1.7; color: #cfdbd9; }
.pch-entry > article > small, .pch-entry > form > small { color: #dec487; font-size: 9px; letter-spacing: .12em; }
.pch-entry .cta { position: relative; z-index: 1; }
.pch-entry > form { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 30px; border: 1px solid var(--pch-line); border-radius: 16px; background: #172e39; }
.pch-entry > form h3 { font-size: 28px; margin: 0; }
.pch-entry input { text-transform: uppercase; letter-spacing: .18em; }
.pch-entry-skyline { position: absolute; bottom: -2px; left: 15px; right: 15px; height: 160px; display: flex; align-items: end; gap: 6px; opacity: .45; pointer-events: none; }
.pch-entry-skyline .pch-building { width: 13%; height: calc(50px + var(--building-length) * 17px); }
.pch-lobby { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; padding: 30px; background: #1b3542; border: 1px solid var(--pch-line); border-radius: 14px; }
.pch-lobby h3 { margin: 10px 0 12px; font: 700 29px Georgia,serif; }
.pch-lobby > div > small { color: #d7bc86; font-size: 9px; letter-spacing: .1em; }
.pch-lobby p { color: #bdcfd0; font-size: 12px; line-height: 1.6; }
.pch-lobby aside { display: flex; flex-direction: column; gap: 20px; border-left: 1px solid var(--pch-line); padding-left: 30px; }
.pch-members { display: grid; gap: 8px; margin-top: 20px; }
.pch-member { display: flex; align-items: center; gap: 9px; padding: 12px; background: #ffffff07; border: 1px solid #fff2; border-radius: 7px; }
.pch-member strong { margin-right: auto; }
.pch-member small { font-size: 9px; color: #dfc48a; }
.pch-member select, .pch-member button { padding: 7px; font-size: 11px; }
.pch-bot-form { display: flex; flex-direction: column; gap: 12px; }
.pch-turnbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 20px; background: #1e3b49; border: 1px solid var(--pch-line); border-radius: 12px 12px 0 0; }
.pch-turnbar h3 { margin-top: 5px; font: 700 25px Georgia,serif; }
.pch-turnbar small { color: #e4c88e; font-size: 10px; letter-spacing: .1em; }
.pch-turn-meta { display: grid; gap: 6px; text-align: right; font-size: 12px; color: #c4d8d9; }
.pch-turn-meta b { color: #f1d48e; font-size: 11px; }
.pch-instruction { padding: 12px 20px !important; color: #304149; background: #e6ce94; font-size: 13px; line-height: 1.5; border-radius: 0 0 8px 8px; }
.pch-rivals { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 14px; margin: 20px 0; }
.pch-skyline-panel { min-width: 0; padding: 15px; border: 1px solid #809aa466; border-radius: 10px; background: linear-gradient(#2a4652,#192f3c); box-shadow: 0 4px 9px #0002; }
.pch-skyline-panel.pch-skyline-current { border-color: #e6c47c; box-shadow: 0 0 0 1px #e6c47c33; }
.pch-skyline-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.pch-skyline-panel > header > div { display: grid; gap: 5px; }
.pch-skyline-panel header b { font-size: 13px; }
.pch-skyline-panel header small { font-size: 8px; color: #adc7c9; letter-spacing: .1em; }
.pch-score { color: #f0d38e; font: 700 20px Georgia,serif; }
.pch-skyline-track { position: relative; display: flex; align-items: end; height: 110px; margin-top: 7px; border-bottom: 8px solid #d0af69; box-shadow: 0 3px 0 #706142; background: linear-gradient(0deg,#b4d6d910,transparent 80%); }
.pch-building { position: relative; display: inline-flex; align-items: end; justify-content: center; flex: 0 0 auto; height: calc(31px + var(--building-length) * 7px); min-width: 0; }
.pch-building > img { width: 100%; height: 100%; object-fit: fill; object-position: bottom; filter: drop-shadow(2px 3px 2px #0004); }
.pch-skyline-track .pch-building > img { object-fit: contain; }
.pch-skyline-track .pch-building { border-bottom: 4px solid var(--building-color); }
.pch-skyline-track .pch-building::after { content: attr(data-length); position: absolute; bottom: -3px; left: 0; right: 0; text-align: center; color: #fff3d8; font: 600 7px/1 sans-serif; text-shadow: 0 1px 1px #000; }
.pch-building-fallback { background: repeating-linear-gradient(90deg,transparent 0 8px,#eddfab88 8px 11px,transparent 11px 19px),repeating-linear-gradient(0deg,var(--building-color) 0 12px,#293f4966 12px 15px); border: 1px solid #fff3; clip-path: polygon(0 15%,22% 15%,22% 0,70% 0,70% 10%,100% 10%,100% 100%,0 100%); }
.pch-finish-mark { position: absolute; left: var(--finish-position); top: 1px; bottom: -12px; border-left: 2px dashed #f7d88ba8; padding-left: 4px; color: #e5c57f; font-size: 7px; writing-mode: vertical-rl; letter-spacing: .1em; pointer-events: none; }
.pch-skyline-empty { margin: auto auto 15px; color: #a9bfc2; font-size: 10px; }
.pch-skyline-panel footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px; padding-top: 11px; color: #b5c7c9; font-size: 10px; }
.pch-board-wrap { display: grid; grid-template-columns: minmax(380px,1.25fr) minmax(280px,.85fr); gap: 24px; align-items: start; padding: 24px; border: 8px solid #51433b; border-radius: 15px; background: radial-gradient(ellipse at 20% 40%,#34585a,#1c3e43 75%); box-shadow: inset 0 0 0 1px #c6ae6a66,inset 0 0 70px #0003,0 8px 20px #0003; }
.pch-board { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(4,minmax(104px,1fr)); gap: 4px; padding: 5px; background: #ddcfaa; border: 2px solid #273d42; border-radius: 7px; box-shadow: 4px 6px 0 #a49b7f,6px 9px 10px #0005; }
.pch-table button.pch-property { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 3px; border: 0; border-top: 9px solid var(--property-color); border-radius: 1px; background: #fff5dc; color: #29404a; overflow: hidden; }
.pch-property > strong { font: 700 11px/1.1 Georgia,serif; text-align: center; overflow-wrap: anywhere; }
.pch-property > .pch-building { height: 37px; width: 45px; margin-top: auto; opacity: .9; }
.pch-property > small { font-size: 7px; white-space: nowrap; }
.pch-claim { position: absolute; left: 5px; right: 5px; bottom: 5px; display: grid; gap: 2px; padding: 5px 3px; background: #3e5464f2; color: #fff0ca; border: 1px solid #e9d7b1; box-shadow: 0 3px 4px #0003; transform: rotate(-4deg); }
.pch-claim b { font: 700 14px Georgia,serif; }
.pch-claim small { font-size: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pch-claim-self { background: #4d7c68f2; }
.pch-table button.pch-corner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px 3px; color: #f6e8c3; background: #263f54; border: 0; border-radius: 1px; min-width: 0; }
.pch-corner > b { font: 700 28px Georgia,serif; color: #e8c57d; }
.pch-corner > strong { font-size: 9px; text-align: center; }
.pch-corner-player { background: #e4c982; color: #31434a; font-size: 7px; padding: 3px 5px; max-width: 100%; overflow: hidden; }
.pch-board-center { grid-row: 2/4; grid-column: 2/4; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(ellipse at bottom,#6eaeb26b,#16364b); color: #edce91; text-align: center; border: 2px solid #d0be91; }
.pch-board-center > small { font-size: 12px; letter-spacing: .2em; }
.pch-board-center > strong { font: 700 clamp(18px,2.4vw,32px) Georgia,serif; }
.pch-board-center > span { max-width: 90%; font-size: 6px; line-height: 1.7; letter-spacing: .12em; margin-top: 9px; }
.pch-gray-count { padding: 7px; border-top: 1px solid #d3bc7d66; margin-top: 20px; font-size: 9px; }
.pch-play-desk { min-width: 0; display: grid; gap: 18px; padding-top: 7px; }
.pch-play-desk > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.pch-play-desk h3 { font: 700 24px Georgia,serif; margin-top: 6px; }
.pch-play-desk header small { color: #ccbd8f; font-size: 7px; letter-spacing: .12em; }
.pch-die { flex: 0 0 51px; width: 51px; height: 51px; display: grid; place-items: center; border: 1px solid #a9bbc277; border-radius: 9px; background: #203c48; color: #f0d699; font: 700 29px Georgia,serif; }
.pch-die.pc-die { border: 0; border-radius: 0; background-color: transparent; }
.pch-die-area { display: grid; justify-items: center; flex: 0 0 130px; gap: 8px; }
.pch-play-desk .pch-die-legend { color: #f3d797; font-size: 12px; font-weight: 700; line-height: 1.4; text-align: center; }
.pch-revealed, .pch-held { display: flex; gap: 10px; overflow-x: auto; padding: 8px 2px 14px; min-width: 0; align-items: stretch; }
.pch-revealed { min-height: 208px; }
.pch-card { position: relative; display: flex; flex-direction: column; flex: 0 0 120px; min-height: 185px; padding: 0 !important; overflow: hidden; border: 5px solid #f5eacf !important; border-radius: 9px !important; background: #fff7e3 !important; color: #294640 !important; text-align: left; box-shadow: 2px 4px 7px #0004; }
.pch-card > header { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 8px 6px; color: #f9f1d9; background: #3d7e71; }
.pch-card header small { font-size: 8px; }
.pch-card header b { white-space: nowrap; font: 700 15px Georgia,serif; }
.pch-card-art { display: block; height: 78px; width: 100%; flex: 0 0 auto; background: #d1d4ae; background-position: center; background-size: cover; background-repeat: no-repeat; }
.pch-card > strong { padding: 8px 7px 5px; font: 700 14px/1.1 Georgia,serif; }
.pch-card > p { padding: 3px 7px 10px; font: 11px/1.4 Georgia,serif; }
.pch-card[data-kind=bankrupt] > header { background: #a0574c; }
.pch-card[data-kind=chance] > header { background: #645389; }
.pch-card-copies { padding: 5px 7px 8px; font-size: 9px; margin-top: auto; }
.pch-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pch-actions button { font-size: 12px; }
.pch-action-select { display: flex; flex-wrap: wrap; gap: 7px; width: 100%; }
.pch-action-select select { flex: 1 1 180px; font-size: 12px; }
.pch-empty { align-self: center; font-size: 12px; line-height: 1.7; color: #b8cecd; max-width: 250px; }
.pch-personal { margin-top: 24px; }
.pch-skyline-self { padding: 20px; background: linear-gradient(#304c57,#1b303d); }
.pch-skyline-self .pch-skyline-track { height: 145px; }
.pch-skyline-self .pch-building { height: calc(43px + var(--building-length) * 11px); }
.pch-skyline-self header b { font-size: 17px; }
.pch-skyline-self .pch-score { font-size: 27px; }
.pch-reserves { display: grid; grid-template-columns: minmax(0,1fr) 180px; gap: 24px; padding: 23px; background: #172e3b; border: 1px solid var(--pch-line); border-radius: 12px; margin-top: 24px; }
.pch-reserves > div { min-width: 0; }
.pch-reserves h3 { font: 700 23px Georgia,serif; margin-top: 5px; }
.pch-reserves header small { font-size: 8px; letter-spacing: .1em; color: #ccb98d; }
.pch-held { min-height: 95px; margin-top: 10px; }
.pch-deck-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 17px; border-left: 1px solid var(--pch-line); padding-left: 20px; }
.pch-deck-pile { display: grid; justify-items: center; gap: 12px; }
.pch-deck-pile small { font-size: 9px; color: #c1cfca; }
.pch-deck-pile .pc-deck-back { width: 65px; height: 94px; }
.pch-deck-pile .pc-card-back { width: 65px; height: 94px; }
.pch-chance-event { padding: 12px; border: 1px solid #baacd277; border-radius: 7px; background: #403f5477; }
.pch-chance-event > small { font-size: 8px; color: #d7bddb; }
.pch-chance-event > b { display: block; margin: 6px 0; font-family: Georgia,serif; }
.pch-chance-event p { font-size: 12px; line-height: 1.6; }
.pch-result { display: grid; gap: 10px; text-align: center; padding: 30px; margin-top: 20px; background: #d8ba73; color: #253a40; border-radius: 12px; }
.pch-result h3 { font: 700 30px Georgia,serif; }
.pch-result small { font-size: 10px; letter-spacing: .15em; }
.pch-log { padding: 17px 0; margin-top: 15px; border-top: 1px solid var(--pch-line); font-size: 12px; }
.pch-log summary { color: #e2cc98; cursor: pointer; }
.pch-log ol { max-height: 220px; overflow: auto; line-height: 1.9; color: #bccdcd; padding-left: 20px; }
.pch-status { min-height: 22px; margin-top: 14px !important; color: #f1cc82; font-size: 13px; }
.pch-table dialog { width: min(800px,calc(100vw - 28px)); max-height: 86vh; padding: 25px; overflow: auto; border: 1px solid #bba36a; border-radius: 14px; background: #f9f0dc; color: #29444b; box-shadow: 0 25px 90px #0009; }
.pch-table dialog::backdrop { background: #071422bd; backdrop-filter: blur(4px); }
.pch-table dialog > form { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.pch-table dialog h2 { font: 700 30px Georgia,serif; margin-bottom: 18px; }
.pch-table dialog h3 { margin: 22px 0 10px; font: 700 23px Georgia,serif; }
.pch-table dialog p { font-size: 14px; line-height: 1.7; margin-bottom: 12px; }
.pch-table dialog small { font-size: 10px; }
.pch-detail .pch-card { width: 200px; min-height: 280px; margin: 0 auto; }
.pch-detail .pch-card-art { height: 130px; }
.pch-detail .pch-card p { font-size: 12px; }
.pch-detail-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.pch-detail-building { width: 120px; height: 135px; margin: 0 auto 20px; display: flex; }
.pch-property-detail-stack, .pch-discard-grid, .pch-catalog-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.pch-property-detail-stack section { display: grid; gap: 10px; text-align: center; }
.pch-property-detail-stack .pch-card, .pch-discard-grid .pch-card { width: 100%; min-width: 0; }
.pch-catalog .pch-card { width: 100%; min-width: 0; }
.pch-building-catalog { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: end; gap: 15px; }
.pch-building-catalog > h3 { grid-column: 1/-1; }
.pch-building-catalog > article { display: grid; justify-items: center; gap: 9px; padding: 13px 7px; border-bottom: 1px solid #bba36a77; }
.pch-building-catalog .pch-building { width: calc(22px + var(--building-length) * 12px); max-width: 100%; height: calc(38px + var(--building-length) * 12px); }
.pch-building-catalog b { font-size: 12px; text-align: center; }
.pch-building-catalog small { font-size: 9px; text-align: center; }
.pch-muted { color: #6d7772; }
.pch-chance-rules { padding-left: 20px; }
.pch-chance-rules li { padding: 8px 0; border-bottom: 1px solid #bba36a44; }
.pch-chance-rules strong { font-family: Georgia,serif; }
.pch-table .pch-chance-rules p { margin: 6px 0 0; font-size: 13px; }
.game-card[data-game=propertychance] .game-thumb { background: linear-gradient(140deg,#214956,#23334f); color: #e4c58a; font: 700 65px Georgia,serif; }

@media (max-width: 1180px) {
  .pch-board-wrap { grid-template-columns: minmax(0,1fr); padding: 20px; }
  .pch-board { max-width: 620px; width: 100%; justify-self: center; grid-template-rows: repeat(4,minmax(112px,1fr)); }
  .pch-play-desk { padding-top: 12px; border-top: 1px solid #d4c18b44; }
  .pch-revealed { min-height: 180px; }
  .pch-revealed .pch-card { flex-basis: 135px; }
  .pch-board-center > strong { font-size: 34px; }
  .pch-property > strong { font-size: 13px; }
}
@media (max-width: 800px) {
  .pch-heading { align-items: start; }
  .pch-heading h2 { font-size: 32px; }
  .pch-heading nav { justify-content: end; }
  .pch-heading nav button { font-size: 10px; padding: 8px; }
  .pch-entry { grid-template-columns: 1.3fr 1fr; }
  .pch-entry > article { padding: 28px; }
  .pch-entry h3 { font-size: 35px; }
  .pch-entry > form { padding: 25px; }
  .pch-entry > form h3 { font-size: 25px; }
  .pch-lobby { padding: 23px; gap: 20px; }
  .pch-lobby aside { padding-left: 20px; }
  .pch-rivals { grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }
  .pch-skyline-track { height: 95px; }
}
@media (max-width: 600px) {
  .pch-heading { display: block; margin: 14px 0 18px; }
  .pch-heading h2 { font-size: 33px; }
  .pch-heading > div > small { font-size: 7px; }
  .pch-heading nav { justify-content: start; margin-top: 14px; }
  .pch-heading nav button { padding: 9px 10px; }
  .pch-entry, .pch-lobby { grid-template-columns: minmax(0,1fr); }
  .pch-entry > article { min-height: 420px; }
  .pch-entry h3 { font-size: 37px; }
  .pch-entry p { font-size: 13px; }
  .pch-lobby { padding: 20px; }
  .pch-lobby aside { border-left: 0; border-top: 1px solid var(--pch-line); padding: 20px 0 0; }
  .pch-member { flex-wrap: wrap; font-size: 12px; }
  .pch-turnbar { padding: 15px; align-items: start; }
  .pch-turnbar h3 { font-size: 20px; }
  .pch-turn-meta { max-width: 100px; font-size: 10px; }
  .pch-turn-meta b { font-size: 9px; }
  .pch-instruction { font-size: 11px; padding: 10px 14px !important; }
  .pch-rivals { gap: 10px; margin: 15px 0; }
  .pch-skyline-panel { padding: 12px; }
  .pch-skyline-panel footer { font-size: 9px; }
  .pch-board-wrap { padding: 12px 7px; border-width: 4px; gap: 18px; }
  .pch-board { padding: 3px; gap: 3px; grid-template-rows: repeat(4,minmax(87px,1fr)); }
  .pch-table button.pch-property { padding: 5px 2px; border-top-width: 7px; gap: 2px; }
  .pch-property > strong { font-size: 9px; }
  .pch-property > small { font-size: 5px; letter-spacing: -.03em; }
  .pch-property > .pch-building { height: 32px; width: 34px; }
  .pch-claim { left: 3px; right: 3px; bottom: 4px; padding: 4px 2px; }
  .pch-claim b { font-size: 12px; }
  .pch-claim small { font-size: 6px; }
  .pch-corner > b { font-size: 23px; }
  .pch-corner > strong { font-size: 8px; }
  .pch-board-center > small { font-size: 8px; }
  .pch-board-center > strong { font-size: 22px; }
  .pch-board-center > span { font-size: 5px; }
  .pch-gray-count { font-size: 7px; margin-top: 12px; padding: 5px; }
  .pch-play-desk { gap: 15px; padding: 16px 5px 7px; }
  .pch-play-desk h3 { font-size: 23px; }
  .pch-play-desk header small { font-size: 6px; }
  .pch-die { flex-basis: 43px; height: 43px; font-size: 25px; margin-right: 5px; }
  .pch-die-area { flex-basis: 112px; }
  .pch-revealed .pch-card { flex-basis: 118px; }
  .pch-actions button { font-size: 11px; padding: 10px 12px; }
  .pch-personal { margin-top: 18px; }
  .pch-skyline-self { padding: 15px; }
  .pch-skyline-self .pch-skyline-track { height: 130px; }
  .pch-skyline-self .pch-building { height: calc(37px + var(--building-length) * 8px); }
  .pch-reserves { grid-template-columns: minmax(0,1fr); padding: 18px 14px; gap: 15px; margin-top: 18px; }
  .pch-deck-area { flex-direction: row; justify-content: space-between; border-left: 0; border-top: 1px solid var(--pch-line); padding: 17px 0 0; }
  .pch-held .pch-card { flex-basis: 115px; }
  .pch-card { border-width: 4px !important; }
  .pch-card > strong { font-size: 13px; }
  .pch-card > p { font-size: 10px; }
  .pch-table dialog { padding: 20px; }
  .pch-table dialog h2 { font-size: 27px; }
  .pch-property-detail-stack, .pch-discard-grid, .pch-catalog-cards, .pch-building-catalog { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.pch-turn-badge{padding:5px 8px;border:1px solid #e3c98766;border-radius:5px;background:#568b782b;color:#f3db9a;font-size:10px}