/*
 * Wizard's Tome Frame — shared styling for the leather-and-brass surround
 * around any web-replay viewer that wants the in-game theme presence.
 *
 * Mirrors the in-game theme structure
 * (packages/shared-ui/css/themes/frame.css in mso-games):
 *   - solid leather-dark background fill
 *   - four edge strips that tile along their long axis using two
 *     orientations of edge.jpg (horizontal) + edge-v.jpg (vertical)
 *   - four ornamental brass corners over the edge intersections
 *
 * The viewer sits inset by frame padding so edge strips and corners
 * frame the leather, not the play area. Corner art's brass body anchors
 * on leather; only the diagonal tail extends into the viewer corner —
 * matches in-game.
 *
 * HTML structure consumers must produce:
 *   <div class="wt-frame">
 *     <div id="viewerContainer" class="viewer-wrapper"></div>
 *     <div class="wt-edge wt-edge-top"></div>
 *     <div class="wt-edge wt-edge-bottom"></div>
 *     <div class="wt-edge wt-edge-left"></div>
 *     <div class="wt-edge wt-edge-right"></div>
 *     <div class="wt-corner wt-corner-tl"></div>
 *     <div class="wt-corner wt-corner-tr"></div>
 *     <div class="wt-corner wt-corner-bl"></div>
 *     <div class="wt-corner wt-corner-br"></div>
 *   </div>
 *
 * Assets: /static/themes/wizards-tome/{corner-{tl,tr,bl,br}.png, edge.jpg, edge-v.jpg}
 */

.wt-frame {
    position: relative;
    width: 100%;
    max-width: 1008px; /* 960 viewer + 24 leather padding × 2 sides */
    margin: 0 auto 1.5rem;
    padding: 24px;
    background: #2b1810; /* WT leather-dark from theme.json */
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Viewer-wrapper styling specific to being inside a WT frame.
   Page-level `.viewer-wrapper` defines aspect-ratio / width / overflow;
   these rules add the gilt inset seam where leather meets felt. */
.wt-frame .viewer-wrapper {
    position: relative;
    border-radius: 4px;
    box-shadow: inset 0 0 0 2px rgba(201, 165, 92, 0.55);
    z-index: 1;
    margin: 0;
    box-sizing: border-box;
}

.wt-edge {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}
.wt-edge-top, .wt-edge-bottom {
    left: 0;
    right: 0;
    height: 24px;
    background: url('/static/themes/wizards-tome/edge.jpg') repeat-x;
    background-size: auto 100%;
}
.wt-edge-top { top: 0; }
.wt-edge-bottom { bottom: 0; transform: scaleY(-1); }
.wt-edge-left, .wt-edge-right {
    top: 0;
    bottom: 0;
    width: 24px;
    background: url('/static/themes/wizards-tome/edge-v.jpg') repeat-y;
    background-size: 100% auto;
}
.wt-edge-left { left: 0; }
.wt-edge-right { right: 0; transform: scaleX(-1); }

.wt-corner {
    position: absolute;
    width: 96px;
    height: 96px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 30000; /* above card animation z-index of 20000 (cards.css:351) */
}
.wt-corner-tl { top: 0; left: 0;
    background-image: url('/static/themes/wizards-tome/corner-tl.png'); }
.wt-corner-tr { top: 0; right: 0;
    background-image: url('/static/themes/wizards-tome/corner-tr.png'); }
.wt-corner-bl { bottom: 0; left: 0;
    background-image: url('/static/themes/wizards-tome/corner-bl.png'); }
.wt-corner-br { bottom: 0; right: 0;
    background-image: url('/static/themes/wizards-tome/corner-br.png'); }

/* Push the freecell-viewer's toolbar text inboard so the corner brass
   doesn't clip the "F" of FreeCell (top-left) or trailing seconds digit
   of Time (top-right). Default in cards.css is 2cqw; bump to 3.5cqw
   inside .wt-frame only — leaves in-game and other contexts unaffected. */
.wt-frame .fcv-toolbar {
    padding-left: 3.5cqw;
    padding-right: 3.5cqw;
}

@media (max-width: 600px) {
    .wt-frame {
        padding: 12px;
        border-radius: 8px;
    }
    .wt-edge-top, .wt-edge-bottom { height: 12px; }
    .wt-edge-left, .wt-edge-right { width: 12px; }
    .wt-corner { width: 56px; height: 56px; }
}