/* Kept beneath :is(#gridlock-story-ui .pc-app-content, .pc-app-content) so the Story arcade and couch games are untouched. */
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic { display: flex; flex-direction: column; height: 100%; min-height: 0; color: #111; background: #c0c0c0; font: 12px/1.35 Tahoma, Verdana, Arial, sans-serif; text-align: left; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic *, :is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic *::before, :is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic *::after { box-sizing: border-box; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic button, :is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic select { font: inherit; color: #111; border-radius: 0; box-shadow: none; text-transform: none; letter-spacing: normal; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic button { min-width: 0; min-height: 0; padding: 3px 9px; border: 2px outset #eee; background: #c0c0c0; cursor: pointer; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic button:active { border-style: inset; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic button:disabled { color: #777; text-shadow: 1px 1px #eee; cursor: default; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic button:focus-visible, :is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic select:focus-visible { outline: 2px dotted #08086f; outline-offset: -4px; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic-menu { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 5px; padding: 4px 5px; border-bottom: 1px solid #808080; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic-menu label { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic-menu select { padding: 2px; background: #fff; border: 2px inset #ddd; max-width: 180px; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic-help { flex: 0 0 auto; padding: 8px 10px; border-bottom: 1px solid #808080; color: #232323; background: #ffffdf; font-size: 11px; max-height: 135px; overflow: auto; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic [hidden] { display: none !important; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic-status { flex: 0 0 auto; margin: 3px; padding: 4px 5px; border: 1px inset #ddd; font: 11px/1.3 Tahoma, Verdana, sans-serif; min-height: 24px; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic-bottom { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 5px; padding: 3px 7px; font-size: 11px; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-mines-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 9px; text-align: center; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-mines-case { width: max-content; margin: 0 auto; padding: 7px; border: 3px outset #eee; background: #c0c0c0; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-mines-dashboard { display: flex; justify-content: space-between; align-items: center; padding: 5px; margin-bottom: 7px; border: 2px inset #eee; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-mines-counter { padding: 0 3px; background: #150000; color: #ff1717; border: 1px inset #999; font: bold 29px/1.1 'Courier New', monospace; letter-spacing: -2px; min-width: 58px; text-align: center; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-mines-face { padding: 0; height: 32px; width: 34px; color: #000; font: 29px/28px 'Arial', sans-serif; background: #c0c0c0; text-shadow: 1px 0 #f8dc12, -1px 0 #f8dc12, 0 1px #f8dc12, 0 -1px #f8dc12; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-mines-board { display: grid; grid-template-columns: repeat(var(--pc-mine-columns), 24px); width: max-content; border: 3px inset #eee; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-mine-cell { width: 24px; height: 24px; padding: 0; margin: 0; border: 3px outset #e1e1e1; font: bold 17px/19px 'Arial', sans-serif; background: #c0c0c0; user-select: none; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-mine-open { border: 1px solid #8c8c8c; border-right: 0; border-bottom: 0; background: #c0c0c0; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-mine-cell[data-number="1"] { color: #0000cf; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-mine-cell[data-number="2"] { color: #007b00; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-mine-cell[data-number="3"] { color: #ed0000; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-mine-cell[data-number="4"] { color: #000077; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-mine-cell[data-number="5"] { color: #790000; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-mine-cell[data-number="6"] { color: #007b7b; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-mine-cell[data-number="7"] { color: #000; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-mine-cell[data-number="8"] { color: #666; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-mine-flag { color: #d40000 !important; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-mine-danger { color: #000 !important; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-mine-exploded { background: #f22; color: #000; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-reversi-layout { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; align-items: flex-start; gap: 13px; overflow: auto; padding: 12px; background: #c0c0c0; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-reversi-board { display: grid; flex: 0 0 auto; grid-template-columns: repeat(8, 34px); width: max-content; border: 4px inset #d2d2d2; background: #003c31; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-reversi-cell { display: flex; align-items: center; justify-content: center; border: 0; border-right: 1px solid #003c31; border-bottom: 1px solid #003c31; width: 34px; height: 34px; padding: 3px; background: #00815b; position: relative; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-reversi-cell:hover { background: #08946a; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-reversi-cell:focus-visible { outline: 2px dotted #fff; outline-offset: -3px; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-reversi-disk { display: block; width: 26px; height: 26px; border-radius: 50%; box-shadow: 1px 2px 1px #00392b; border: 1px solid #000; background: radial-gradient(circle at 35% 28%, #474747, #070707 65%); }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-reversi-white .pc-reversi-disk { background: radial-gradient(circle at 35% 28%, #fff, #eae8da 68%); border-color: #dedbca; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-reversi-last::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #f3b626; box-shadow: 0 0 0 1px #7e6303; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-reversi-dot { width: 6px; height: 6px; background: #72b198; border-radius: 50%; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-reversi-sidebar { min-width: 110px; max-width: 155px; font-size: 11px; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-reversi-sidebar h3 { font: bold 17px/1.4 'Courier New', monospace; margin: 4px 0 14px; letter-spacing: 2px; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-reversi-score { padding: 7px; background: #b3b3b3; border: 2px inset #ddd; margin-bottom: 13px; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-reversi-score > span { display: flex; align-items: center; gap: 5px; margin: 5px 0; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-reversi-score b { font-size: 20px; line-height: 1; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-reversi-white-mark { color: #fffef4; text-shadow: 1px 1px #555; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-reversi-score strong { margin-left: auto; font: bold 20px/1 'Courier New', monospace; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-reversi-sidebar label { display: flex; align-items: center; gap: 3px; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-reversi-sidebar input { margin: 0; accent-color: navy; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-reversi-legend { display: block; padding-top: 8px; border-top: 1px solid #888; font-size: 10px; line-height: 1.8; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; background: #008000; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-table { --pc-card-height: 92px; --pc-card-width: 65px; padding: 12px 11px 18px; min-width: 510px; min-height: 100%; background: #008000; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-top, :is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-columns { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-top { margin-bottom: 17px; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-slot { position: relative; height: calc(var(--pc-card-height) + 16px); min-width: 0; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-slot > small { position: absolute; top: calc(var(--pc-card-height) + 3px); left: 0; color: #b3dfad; font: 10px/1.1 Tahoma, sans-serif; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-column { position: relative; min-height: 115px; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-card, :is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic button.pc-sol-card { position: absolute; top: 0; left: 0; display: block; width: min(100%, var(--pc-card-width)); height: var(--pc-card-height); padding: 0; margin: 0; border: 1px solid #111; border-radius: 4px; box-shadow: 1px 1px 0 #005100; background: #fffef9; color: #080808; text-align: left; user-select: none; overflow: hidden; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-sol-card:active { border: 1px solid #111; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-card.pc-sol-red, :is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-sol-card.pc-sol-red { color: #c80000; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-card .pc-sol-corner { position: absolute; top: 3px; left: 4px; font: bold 15px/13px Georgia, 'Times New Roman', serif; text-align: center; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-corner small { display: block; font: 13px/12px Georgia, 'Times New Roman', serif; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-card .pc-sol-corner-bottom { top: auto; left: auto; right: 4px; bottom: 3px; transform: rotate(180deg); }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-pips { position: absolute; inset: 21px 13px; display: flex; align-items: center; justify-content: center; font: 30px/1 Georgia, 'Times New Roman', serif; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-pip { position: absolute; font: 17px/1 Georgia, 'Times New Roman', serif; transform: translate(-50%, -50%) rotate(var(--pc-pip-turn)); }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-ace { font-size: 34px; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-royal { flex-direction: column; font-size: 22px; border: 1px solid currentColor; padding: 2px; background: #fff3ba; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-royal b { font: bold 19px/1 Georgia, serif; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-card.pc-sol-back, :is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-sol-card.pc-sol-back { border: 3px solid #faf9ee; background-color: #153098; background-image: repeating-linear-gradient(45deg, #fff9 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, #fff5 0 1px, transparent 1px 4px); outline: 1px solid #111; outline-offset: -1px; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-back > span { display: flex; height: 100%; align-items: center; justify-content: center; color: #fff8cc; font-size: 35px; text-shadow: 1px 1px navy; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-sol-card.pc-sol-empty, :is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-placeholder { background: #007400; border: 1px solid #005300; box-shadow: inset 0 0 0 1px #289326; color: #4aa848; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-empty > span { display: flex; height: 100%; align-items: center; justify-content: center; font: 32px/1 Georgia, serif; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-sol-placeholder { position: absolute; width: min(100%, var(--pc-card-width)); height: var(--pc-card-height); border-radius: 4px; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-sol-selected { filter: invert(1); box-shadow: 0 0 0 2px #fff; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-sol-card:focus-visible { outline: 2px dotted #fc0; outline-offset: -4px; box-shadow: 0 0 0 2px #111; }
:is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic .pc-sol-waste > .pc-sol-card { left: calc(var(--pc-waste-offset, 0) * 12px); }
@media (max-width: 650px) {
  :is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic-menu { gap: 3px; }
  :is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-classic-menu button { padding: 3px 5px; }
  :is(#gridlock-story-ui .pc-app-content, .pc-app-content) .pc-reversi-layout { gap: 9px; padding: 8px; }
}
