.tile-gallery-panel { padding: 16px; }
.lobby-tile-gallery { margin-top: 20px; }
.tile-gallery-entrances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile-gallery-entrance { position: relative; display: flex; align-items: center; gap: 18px; min-height: 134px; padding: 21px; overflow: hidden; border: 1px solid #5e7055; border-radius: 10px; background: linear-gradient(125deg, #314833, #1b3229); text-align: left; transition: background .18s, border-color .18s, transform .18s; }
.tile-gallery-entrance:hover { transform: translateY(-2px); border-color: #c6ad72; background: linear-gradient(125deg, #405438, #263d2c); }
.special-entrance { border-color: #5c7380; background: linear-gradient(125deg, #2d4548, #1d3133); }
.special-entrance:hover { background: linear-gradient(125deg, #3b5356, #273c3e); }
.tile-entrance-icon { flex: 0 0 58px; width: 58px; height: 58px; }
.regular-tile-icon { display: grid; grid-template-columns: repeat(2, 23px); grid-template-rows: repeat(2, 23px); gap: 5px; transform: rotate(-8deg); }
.regular-tile-icon i { border-radius: 3px; border: 1px solid rgb(255 255 255 / 28%); box-shadow: 0 3px 6px #07141055, inset 0 1px 2px #ffffff33; background: #e8b651; }
.regular-tile-icon i:nth-child(2) { background: #b75742; }
.regular-tile-icon i:nth-child(3) { background: #79995d; }
.regular-tile-icon i:nth-child(4) { background: #62a1c2; }
.special-tile-icon { display: grid; place-items: center; font-size: 57px; line-height: 1; color: #d8bd79; text-shadow: 0 3px 8px #0b1619; }
.tile-entrance-copy { display: grid; gap: 8px; }
.tile-entrance-copy strong { color: #f2e6bf; font-size: 20px; font-weight: 650; letter-spacing: .04em; }
.tile-entrance-copy > span { color: #b9c8b6; font-size: 11px; line-height: 1.65; }
.special-entrance .tile-entrance-copy > span { color: #b7ccd0; }
.tile-entrance-arrow { position: absolute; right: 15px; top: 14px; color: #aec4aa; font-size: 20px; }
.game-reference-library { display: grid; gap: 12px; min-width: 0; }
.game-reference-library .tile-gallery-panel { margin: 0; padding: 12px; }
.game-reference-library .section-heading { margin-bottom: 9px; }
.game-reference-library .tile-gallery-entrances { grid-template-columns: 1fr; gap: 8px; }
.game-reference-library .tile-gallery-entrance { width: 100%; min-height: 74px; margin: 0; padding: 12px 23px 12px 11px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; border-radius: 8px; }
.game-reference-library .tile-entrance-icon { flex: 0 0 32px; width: 32px; height: 32px; }
.game-reference-library .regular-tile-icon { grid-template-columns: repeat(2, 14px); grid-template-rows: repeat(2, 14px); gap: 3px; }
.game-reference-library .special-tile-icon { font-size: 32px; }
.game-reference-library .kaupang-entry-rune { font-size: 27px; }
.game-reference-library .tile-entrance-copy { min-width: 0; gap: 4px; }
.game-reference-library .tile-entrance-copy strong { font-size: 14px; letter-spacing: .015em; }
.game-reference-library .tile-entrance-copy > span { font-size: 10px; line-height: 1.5; }
.game-reference-library .tile-entrance-arrow { top: 9px; right: 8px; font-size: 14px; }
@media (max-width: 760px) {
  .game-reference-library { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 480px) {
  .game-reference-library { grid-template-columns: 1fr; }
}
.tile-gallery-modal { width: min(1480px, calc(100vw - 32px)); max-height: 92vh; padding: 0 20px 20px; }
.tile-gallery-fixed-head { position: sticky; top: 0; z-index: 6; background: #172c25; padding-top: 18px; }
.tile-gallery-modal .modal-head h2 { font-size: 23px; }
.tile-gallery-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-top: 8px; }
.tile-gallery-tabs button { position: relative; border: 0; background: none; padding: 14px 3px; color: #9fb1a3; font-size: 14px; }
.tile-gallery-tabs button span { margin-left: 9px; color: #7f9988; font-size: 10px; }
.tile-gallery-tabs button[aria-selected="true"] { color: #f1d48e; }
.tile-gallery-tabs button[aria-selected="true"]::after { position: absolute; content: ""; bottom: -1px; left: 0; right: 0; height: 2px; background: #d9b15f; }
.tile-gallery-intro { margin: 14px 0; color: #aebfae; font-size: 12px; line-height: 1.65; }
#regularTilesView { --tile-unit: 24px; }
.regular-gallery-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 16px; margin-bottom: 12px; }
.regular-gallery-toolbar > div { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; }
.regular-gallery-toolbar label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #bbccba; }
.regular-gallery-toolbar input { accent-color: #d9b15f; }
.regular-gallery-toolbar select { padding: 5px 8px; border: 1px solid #536b56; border-radius: 5px; background: #1c342a; color: #e9e2c6; }
.tile-scale-key { display: flex; align-items: center; gap: 6px; color: #c6d3b6; font-size: 11px; }
.tile-scale-key i { width: var(--tile-unit); height: var(--tile-unit); border: 1px solid #c1b880; background: #b6bc8040; border-radius: 2px; }
.regular-tiles-scroll { overflow: auto; border: 1px solid #455b4d; border-radius: 8px; margin-top: 12px; }
.regular-tiles-table { width: 100%; table-layout: fixed; border-spacing: 0; border-collapse: separate; text-align: center; }
.tile-color-column { width: 70px; }
.regular-tiles-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.regular-tiles-table th, .regular-tiles-table td { border-right: 1px solid #45604b66; border-bottom: 1px solid #45604b88; }
.regular-tiles-table tr:last-child td, .regular-tiles-table tr:last-child th { border-bottom: 0; }
.regular-tiles-table th:last-child, .regular-tiles-table td:last-child { border-right: 0; }
.regular-tiles-table thead th { padding: 13px 6px; background: #253a2e; color: #d2d9c2; font-size: 12px; font-weight: 500; }
.regular-tiles-table .tile-color-corner { width: 70px; font-size: 10px; color: #8fa58e; }
.tile-column-shape { display: grid; place-items: center; height: 32px; margin-bottom: 6px; }
.tile-column-shape .tile-shape-outline { width: min(48px, calc(var(--shape-columns) * 13px)); margin: 0; }
.regular-tiles-table tbody th { position: sticky; left: 0; z-index: 2; width: 70px; background: #263b2d; box-shadow: 3px 0 10px #0c1c1633; font-size: 14px; letter-spacing: .1em; }
.regular-tiles-table tr[data-color="orange"] { --tile-row-color: #e7b454; --tile-row-bg: #a67e2f0e; }
.regular-tiles-table tr[data-color="red"] { --tile-row-color: #df9582; --tile-row-bg: #ad493819; }
.regular-tiles-table tr[data-color="green"] { --tile-row-color: #a9c77d; --tile-row-bg: #4e7d371c; }
.regular-tiles-table tr[data-color="blue"] { --tile-row-color: #8fc5e0; --tile-row-bg: #32607f22; }
.regular-tiles-table tbody th { color: var(--tile-row-color); }
.regular-tiles-table tbody th::before { content: ""; display: block; width: 19px; height: 4px; border-radius: 4px; margin: 0 auto 9px; background: var(--tile-row-color); }
.regular-tiles-table td { padding: 6px 4px; vertical-align: top; background: var(--tile-row-bg); }
.regular-tile-button { display: grid; grid-template-rows: calc(var(--tile-unit) * 3 + 10px) auto; justify-items: center; align-content: center; gap: 8px; width: 100%; border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 8px 2px; }
.regular-tile-button:hover { border-color: #c1ac6d99; background: #dae3c110; }
.regular-tile-art-stage { display: grid; place-items: center; width: 100%; height: calc(var(--tile-unit) * 3 + 10px); }
.regular-tile-art { --tile-art-width: calc(var(--tile-columns) * var(--tile-unit)); --tile-art-height: calc(var(--tile-rows) * var(--tile-unit)); position: relative; display: block; flex-shrink: 0; width: var(--tile-art-width); height: var(--tile-art-height); }
.regular-tile-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; filter: drop-shadow(0 3px 4px #0008); }
.regular-tile-art img.tile-art-rotated { top: 50%; left: 50%; width: var(--tile-art-height); height: var(--tile-art-width); max-width: none; max-height: none; transform: translate(-50%, -50%) rotate(90deg); }
.regular-tile-cell-grid { display: none; position: absolute; inset: 0; grid-template-columns: repeat(var(--tile-columns), 1fr); grid-template-rows: repeat(var(--tile-rows), 1fr); pointer-events: none; }
.show-cell-grid .regular-tile-cell-grid { display: grid; }
.regular-tile-cell-grid .filled-cell { border: 1px solid #ffffff73; box-shadow: inset 0 0 0 1px #19312630; }
.regular-tile-button .tile-label { display: block; color: #e1e4d2; font-size: 11px; line-height: 1.5; }
.tile-dimensions { display: block; margin-top: 4px; color: #c7c49a; font-size: 10px; line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap; }
.regular-tile-empty { display: grid; place-content: center; min-height: calc(var(--tile-unit) * 3 + 63px); gap: 6px; color: #677f6e; font-size: 10px; }
.regular-tile-empty span { font-size: 22px; color: #536d5b; }
.tile-shape-outline { display: grid; grid-template-columns: repeat(var(--shape-columns), 1fr); width: 48px; gap: 2px; margin: 0 auto 8px; }
.tile-shape-outline i { display: block; aspect-ratio: 1; border: 1px solid #a4b391; border-radius: 1px; background: #95aa6d22; }
.tile-shape-outline i.empty-cell { visibility: hidden; }
.tile-art-unavailable { display: grid; place-content: center; width: 66px; height: 70px; border: 1px dashed #7e9664; border-radius: 5px; background: #91a45b0d; }
.tile-art-unavailable small { color: #a8ba94; font-size: 9px; text-align: center; }
.regular-tile-variant { display: block; width: 100%; border: 0; border-top: 1px dashed #73836b55; padding: 6px 0 2px; background: none; color: #adbda1; font-size: 10px; }
.regular-tile-variant:hover { color: #f1d48e; }
.regular-tile-variant .tile-dimensions { font-size: 9px; color: #a8b395; }
.tile-size-sources { margin-top: 16px; border-top: 1px solid #435a49; padding-top: 12px; color: #a4b79f; font-size: 11px; line-height: 1.8; }
.tile-size-sources summary { cursor: pointer; color: #d4c18e; }
.tile-size-sources p { margin: 8px 0; }
.tile-size-sources a { color: #c9d5ac; text-underline-offset: 3px; }
.tile-gallery-footnote { margin: 13px 1px 0; color: #8fa48e; font-size: 11px; line-height: 1.7; }
.special-gallery-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 18px; margin: 2px 0 12px; }
.special-gallery-toolbar > div { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; }
.special-gallery-toolbar label { display: flex; align-items: center; gap: 5px; color: #b5c5b4; font-size: 11px; cursor: pointer; }
.special-gallery-toolbar input { accent-color: #d9b15f; }
.special-zoom-label select { border: 1px solid #536b56; border-radius: 5px; padding: 4px 6px; background: #1c342a; color: #e9e2c6; }
.special-tray-scroll { overflow: auto; max-height: 66vh; border: 1px solid #75817b; border-radius: 8px; background: #132121; }
.special-tray { position: relative; width: calc(var(--tray-base-width, 818px) * var(--tray-zoom, 1)); margin: 0 auto; aspect-ratio: 818 / 618; isolation: isolate; }
.special-tray-background { display: block; width: 100%; height: 100%; pointer-events: none; }
.special-tile-slot { position: absolute; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; }
.special-tile-slot:hover, .special-tile-slot:focus-visible { z-index: 3; border-color: #ffe3a6; background: #e7ce9129; box-shadow: 0 0 0 2px #ffe3a633; }
.special-tile-slot img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px #0008); }
.special-tile-slot.blue-tray-slot img { object-fit: fill; }
.special-tile-slot img.special-art-rotated { position: absolute; width: var(--rotated-art-width); height: var(--rotated-art-height); max-width: none; max-height: none; transform: rotate(var(--art-rotation)); }
.special-tile-slot .special-slot-label { position: absolute; z-index: 4; bottom: -13px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 130px; padding: 3px 6px; border: 1px solid #8e9c78; border-radius: 4px; background: #16251ef2; color: #f4e9c8; font-size: 10px; line-height: 1.2; pointer-events: none; opacity: 0; }
.special-tile-slot:hover .special-slot-label, .special-tile-slot:focus-visible .special-slot-label, .special-tray.show-names .special-slot-label { opacity: 1; }
.special-extra-heading { margin: 23px 0 6px; font-size: 15px; color: #e4d2a5; font-weight: 550; }
.special-extra-intro { margin: 0 0 13px; color: #93a99a; font-size: 11px; line-height: 1.6; }
.special-extra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 10px; }
.special-extra-tile { display: grid; justify-items: center; grid-template-rows: 95px auto; gap: 10px; min-height: 145px; border: 1px solid #456151; border-radius: 8px; padding: 13px 8px; background: #21372e; text-align: center; }
.special-extra-tile:hover { border-color: #c7ad71; background: #304431; }
.special-extra-tile img { width: 100%; height: 95px; object-fit: contain; filter: drop-shadow(0 3px 4px #0008); }
.special-extra-tile span { color: #d3ddc9; font-size: 11px; line-height: 1.4; }
.tile-detail-modal { width: min(660px, calc(100vw - 28px)); }
.tile-detail-image-wrap { display: grid; place-items: center; min-height: 200px; margin: 18px 0; padding: 20px; border: 1px solid #536252; border-radius: 9px; background: radial-gradient(ellipse, #42514466, #10241c); }
.tile-detail-image-wrap img { display: block; width: auto; max-width: 100%; height: auto; max-height: 48vh; filter: drop-shadow(0 5px 7px #0007); }
.tile-detail-image-wrap.regular-tile-detail { --tile-unit: min(64px, calc((100vw - 110px) / 5)); min-height: 250px; }
.regular-tile-detail .regular-tile-art img { width: 100%; height: 100%; max-height: none; }
.regular-tile-detail .regular-tile-art img.tile-art-rotated { width: var(--tile-art-height); height: var(--tile-art-width); }
.tile-detail-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12px; color: #b3c5af; }
.tile-detail-meta a { color: #dfc382; text-decoration: none; }
.tile-detail-meta a:hover { text-decoration: underline; }
.tile-gallery-error { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; min-height: 160px; color: #d6c8a6; font-size: 13px; }
@media (max-width: 760px) {
  .tile-gallery-entrance { gap: 12px; min-height: 132px; padding: 17px 14px; }
  .tile-entrance-icon { flex-basis: 45px; width: 45px; height: 45px; }
  .regular-tile-icon { grid-template-columns: repeat(2, 19px); grid-template-rows: repeat(2, 19px); gap: 4px; }
  .special-tile-icon { font-size: 45px; }
  .tile-entrance-copy strong { font-size: 17px; }
  .tile-entrance-copy > span { font-size: 10px; }
  .tile-gallery-modal { width: calc(100vw - 16px); max-height: 94vh; padding: 0 12px 14px; }
  .tile-gallery-tabs { gap: 20px; }
  .tile-gallery-tabs button { font-size: 13px; }
  .tile-gallery-tabs button span { display: none; }
  .special-tray-scroll { max-height: 62vh; }
}
@media (max-width: 480px) {
  .tile-gallery-panel { padding: 12px; }
  .tile-gallery-entrances { gap: 8px; }
  .tile-gallery-entrance { flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; min-height: 187px; padding: 17px; }
  .tile-entrance-copy strong { font-size: 18px; }
  .tile-entrance-arrow { top: 13px; right: 12px; }
  .tile-gallery-intro { font-size: 11px; }
  .special-gallery-toolbar > div { gap: 9px 12px; }
  .regular-gallery-toolbar > div { gap: 10px 12px; }
  .tile-gallery-fixed-head { padding-top: 13px; }
}

#regularTilesView, .tile-detail-image-wrap.regular-tile-detail { --tile-unit: var(--game-cell); }
.special-extra-grid { display: flex; flex-wrap: wrap; align-items: start; }
.special-extra-tile { flex: none; min-height: 0; grid-template-rows: auto auto; padding: 8px; gap: 5px; }
.special-tile-slot { border: 0; }
.special-tile-slot img { object-fit: fill; }
.tile-detail-image-wrap { overflow: auto; }