/* --------------------------------------------------------------------------
   Tracks  -  www.transum.org
   Styles for the puzzle only. The page furniture (tabs, trophy button,
   containers) is styled by Quiz_2026.css.
   -------------------------------------------------------------------------- */

#TRKWrap {
    font-family: Arial, Helvetica, sans-serif;
    padding: 0 12px 12px;
    box-sizing: border-box;
    max-width: 100%;
}

/* ---------- the row of buttons ---------- */

#TRKControls {
    text-align: center;
    margin: 10px auto 12px;
    line-height: 2.2;
}

#TRKControls button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    padding: 5px 12px;
    margin: 2px 3px;
    border: 1px solid #999;
    border-radius: 6px;
    background: linear-gradient(to bottom, #ffffff, #e4e4e4);
    color: #222;
    cursor: pointer;
    vertical-align: middle;
}

#TRKControls button:hover:enabled {
    background: linear-gradient(to bottom, #ffffff, #d0e8ff);
    border-color: #4682b4;
}

#TRKControls button:active:enabled { transform: translateY(1px); }

#TRKControls button:disabled {
    color: #aaa;
    background: #f2f2f2;
    cursor: default;
}

#TRKControls #Checkbutton {
    font-weight: bold;
    background: linear-gradient(to bottom, #ffffff, #cfe9cf);
    border-color: #4a7d4a;
}

/* ---------- grid on the left, railway on the right ---------- */

#TRKPanels {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
}

#TRKLeft  { flex: 1 1 420px; min-width: 280px; max-width: 480px; }
#TRKRight { flex: 1 1 300px; min-width: 260px; max-width: 330px; }

/* the big grids get the full width, with the railway view underneath */
#TRKPanels.trk-stacked { display: block; }
#TRKPanels.trk-stacked #TRKLeft,
#TRKPanels.trk-stacked #TRKRight { max-width: 100%; margin: 0 auto; }
#TRKPanels.trk-stacked #TRKRight { max-width: 460px; margin-top: 16px; }

#TRKBoard { width: 100%; text-align: center; }

/* ---------- the grid ---------- */

#TRKGrid {
    margin: 0 auto;
    border-collapse: collapse;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#TRKGrid td {
    padding: 0;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
    position: relative;
}

#TRKGrid td.trk-cell {
    border: 1px solid #b6c7a4;
    background-color: #e8f2dd;      /* open countryside */
    background-image: linear-gradient(180deg, #edf6e3 0%, #e2eed4 100%);
    cursor: pointer;
    touch-action: none;             /* dragging lays track */
}

#TRKGrid td.trk-cell:hover { filter: brightness(1.04); }

/* Squares the puzzle gave you. The outline is drawn as an overlay so that
   the ballast cannot hide half of it. */
#TRKGrid td.trk-clue::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px solid #b8860b;
    pointer-events: none;
}

#TRKGrid td.trk-no { background-image: linear-gradient(180deg, #e6e6e6 0%, #dcdcdc 100%); }

#TRKGrid td.trk-error {
    background-image: repeating-linear-gradient(45deg,
        rgba(204, 0, 0, 0.5) 0, rgba(204, 0, 0, 0.5) 6px,
        rgba(255, 255, 255, 0.28) 6px, rgba(255, 255, 255, 0.28) 12px);
}

/* ---------- the track artwork ---------- */

.trk-svg {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.trk-shadow  { fill: none; stroke: rgba(0,0,0,0.22); stroke-width: 62; stroke-linecap: round; }
.trk-ballast { fill: none; stroke: #a99a80; stroke-width: 60; stroke-linecap: round; }
.trk-ballast-top { fill: none; stroke: #c5b89f; stroke-width: 52; stroke-linecap: round; }
.trk-sleepers {
    fill: none; stroke: #6b4a33; stroke-width: 44;
    stroke-dasharray: 9 11; stroke-linecap: butt;
}
.trk-rail     { fill: none; stroke: #4f5b67; stroke-width: 8; stroke-linecap: round; }
.trk-rail-top { fill: none; stroke: #cdd8e2; stroke-width: 3.5; stroke-linecap: round; }

.trk-cross { fill: none; stroke: #9aa0a6; stroke-width: 9; stroke-linecap: round; }

/* ---------- the numbers and the two stations ---------- */

#TRKGrid td.trk-num {
    border: 0;
    font-weight: bold;
    color: #333;
    background: transparent;
}
#TRKGrid td.trk-num-done { color: #a9b3bd; }
#TRKGrid td.trk-num-bad  { color: #cc0000; }

#TRKGrid td.trk-edge { border: 0; background: transparent; }
#TRKGrid td.trk-station { color: #b8860b; }
#TRKGrid td.trk-corner { border: 0; background: transparent; }

#TRKGrid.trk-won td.trk-cell { animation: trk-glow 1.2s ease; }

@keyframes trk-glow {
    0%   { filter: brightness(1); }
    40%  { filter: brightness(1.35); }
    100% { filter: brightness(1); }
}

/* ---------- the railway in three dimensions ---------- */

#TRK3D {
    width: 100%;
    height: 320px;
    border: 1px solid #b6c2ce;
    border-radius: 8px;
    background: #d8ecf7;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
}
#TRK3D:active { cursor: grabbing; }
#TRK3D canvas { display: block; }

#TRKViewButtons { text-align: center; margin: 8px 0 4px; }

#TRKViewButtons button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 4px 12px;
    margin: 0 3px;
    border: 1px solid #999;
    border-radius: 6px;
    background: linear-gradient(to bottom, #ffffff, #e4e4e4);
    cursor: pointer;
}
#TRKViewButtons button:disabled { color: #aaa; background: #f2f2f2; cursor: default; }

#TRKCaption {
    font-size: 15px;
    color: #333;
    text-align: center;
    margin: 6px auto 0;
    line-height: 1.4;
}

/* ---------- the message under the puzzle ---------- */

#TRKMessage {
    min-height: 1.6em;
    margin: 14px auto 4px;
    text-align: center;
    font-size: 17px;
    color: #333;
    max-width: 640px;
}
#TRKMessage .trk-red { color: #cc0000; font-weight: bold; }

p.TRKReminder {
    text-align: center;
    font-size: 16px;
    margin: 6px auto 0;
    color: #444;
    max-width: 680px;
}

/* ---------- how to play ---------- */

.TRKInstructions {
    max-width: 700px;
    margin: 20px auto;
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
}
.TRKInstructions h3 { font-size: 19px; margin-bottom: 6px; }
.TRKInstructions ul { margin: 8px 0 8px 20px; }
.TRKInstructions li { margin-bottom: 6px; }

#TRKSolve {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding: 6px 16px;
    border: 1px solid #4a7d4a;
    border-radius: 6px;
    background: linear-gradient(to bottom, #ffffff, #cfe9cf);
    cursor: pointer;
}

/* ---------- smaller screens ---------- */

@media screen and (max-width: 760px) {
    #TRKLeft, #TRKRight { max-width: 100%; flex-basis: 100%; }
    #TRK3D { height: 280px; }
    #TRKControls button { font-size: 14px; padding: 4px 9px; }
    .TRKInstructions { padding: 0 10px; }
}

@media print {
    #TRKControls, #TRKMessage, #TRKViewButtons, #TRK3D, #TRKCaption { display: none; }
}