/* One right-hand information area spans the game and its travel-log tab. */
html body .row > .statBox.tripInformation{height:auto;min-height:0;align-self:flex-start;justify-content:flex-start;overflow:visible;}
html body .tripInformation .statTop{width:100%;gap:2px;}
html body .tripInformation .tripCollection{width:100%;max-width:none;margin-top:6px;white-space:normal;opacity:1;}
.tripSymbolGrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px;width:100%;padding:3px;border:1px solid #a2bedc88;border-radius:5px;background:#112b4d;pointer-events:auto;}
.tripSymbolTile{display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-width:0;background:#b9c9dc;border:1px solid #cddff12b;border-radius:2px;overflow:hidden;}
.tripSymbolTile img{display:block;width:100%;height:100%;object-fit:contain;padding:1px;opacity:.65;}
.tripSymbolTile:not(.is-reached){opacity:.75;}
.tripSymbolTile.is-reached{background:#fff;border-color:#fff;}
.tripSymbolTile.is-reached img{opacity:1;}
.tripSymbolTile:focus-visible{outline:2px solid #ffe078;outline-offset:1px;}
html body .recordRow > .statBox[hidden]{display:none!important;}
/* Reserve the original game height; the information continues beside the log tab. */
html body .row:has(> .tripInformation){height:var(--btnH);align-items:flex-start;}
/* Keep two rows even in narrow portrait layouts. */
html body .tripInformation .tripCollection{margin-top:5px;}
@media(max-width:480px){
  .tripSymbolGrid{gap:1px;padding:2px;}
  .tripSymbolTile img{padding:0;}
  html body .row > .statBox.tripInformation{max-width:calc(100% - var(--btnW) - var(--sgk-menu-gap));}
}
/* Give the whole collection frame the same course glow as its Travel Log tab. */
.tripSymbolGrid[data-mode="dice1"]{--menu-light:#ffe078;--menu-glow:rgba(255,205,60,.65);--menu-inset:rgba(255,205,60,.2);}
.tripSymbolGrid[data-mode="dice2"]{--menu-light:#83dcff;--menu-glow:rgba(49,165,255,.65);--menu-inset:rgba(49,165,255,.2);}
.tripSymbolGrid[data-mode="dice3postcard"]{--menu-light:#88efaa;--menu-glow:rgba(50,218,116,.65);--menu-inset:rgba(50,218,116,.2);}
.tripSymbolGrid{cursor:pointer;transition:box-shadow .12s ease,border-color .12s ease;}
.tripSymbolGrid:focus-within,.tripSymbolGrid:active{border-color:var(--menu-light);box-shadow:0 0 22px var(--menu-glow),inset 0 0 16px var(--menu-inset);}
@media(hover:hover) and (pointer:fine){.tripSymbolGrid:hover{border-color:var(--menu-light);box-shadow:0 0 22px var(--menu-glow),inset 0 0 16px var(--menu-inset);}}
@media(prefers-reduced-motion:reduce){.tripSymbolGrid{transition:none;}}
/* Hairline progress: twelve arrivals to gold, then twelve more to platinum. */
.tripSymbolGrid{position:relative;}
.tripSymbolGrid::before,.tripSymbolGrid::after{content:"";position:absolute;left:0;height:2px;border-radius:2px;pointer-events:none;transition:width .3s ease;}
.tripSymbolGrid::before{top:-3px;width:var(--collection-gold,0%);background:linear-gradient(180deg,#fff7b0 0%,#ffd36b 45%,#ffb000 100%);box-shadow:0 0 2px #ffd36b,0 0 6px #ffb000,0 0 10px #ffcc3380;}
.tripSymbolGrid::after{bottom:-3px;width:var(--collection-platinum,0%);background:linear-gradient(90deg,#a9c9e2,#e7f5ff 55%,#ffffff);box-shadow:0 0 3px #effaff,0 0 8px #a9deff;}
@media(prefers-reduced-motion:reduce){.tripSymbolGrid::before,.tripSymbolGrid::after{transition:none;}}