/* Notebook War — page styles.
 *
 * Generated from games/tempgamefolder/Paper War copy/notebook_war-2.html <style>,
 * scoped for embedding in the site shell:
 *   - every selector lives under #nw-root; the sheet used generic names
 *     (.paper, canvas, .overlay-screen, .menu-panel, .preset-row) that would
 *     collide with base.css / games.css
 *   - the prototype's `body` rule collapsed onto #nw-root, which becomes the
 *     positioning context for the overlays. #nw-root deliberately sets no
 *     transform/filter/isolation: .export-cabinet-modal is position:fixed and
 *     must stay anchored to the viewport, not to #nw-root.
 *   - @keyframes screenShake -> nw-screenShake
 *   - the Google Fonts @import moved to a <link> in notebook-war.html's <head>
 *
 * Gameplay-affecting geometry (the 800x600 board, .paper rule lines at 39/759px,
 * 30px ruling) is load-bearing for hit detection in the canvas — do not "fix" it
 * to be responsive without reading js/games/notebook-war.js first.
 */

/* Was the prototype's `body`. Now the game's own surface, framed like any other
   card on the site. The desk backdrop (#1a1e17) is kept deliberately — it is the
   game's art direction and already reads as dark-theme against --bg (#0d0d14).
   NOTE: no transform / filter / isolation here on purpose; .export-cabinet-modal
   is position:fixed and must resolve against the viewport. */
#nw-root {
    background-color: #1a1e17;
    display: flex; flex-direction: column; align-items: center;
    font-family: 'Stardos Stencil', cursive;
    color: #333;
    /* max-content + auto margins: centred when the viewport is wide enough, and
       still fully reachable (rather than clipped on the left) once .nw-scroll
       starts scrolling horizontally on narrow screens. */
    width: max-content;
    margin: 0 auto 40px;
    padding: 20px;
    user-select: none;
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

        #nw-root #ui-panel {
            background: #e8e6d9; padding: 15px 30px; border-radius: 4px; margin-bottom: 20px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.6), inset 0 0 40px rgba(0,0,0,0.05);
            border: 2px solid #2a2e25; text-align: center; width: 800px; box-sizing: border-box; position: relative;
            display: none; 
        }

        #nw-root #ui-panel::before {
            content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
            width: 120px; height: 20px; background: #888; border-radius: 4px;
            box-shadow: inset 0 2px 5px rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.5); border: 1px solid #333;
        }

        #nw-root .status-section { display: flex; justify-content: center; align-items: center; margin-top: 10px; }

        #nw-root .lead-display {
            display: flex; gap: 15px; font-size: 16px; font-weight: bold; align-items: center;
            background: rgba(0,0,0,0.05); padding: 5px 15px; border-radius: 3px; border: 1px dashed #777;
        }

        #nw-root .player-lead { text-align: right; color: #444; }
        #nw-root .global-val { font-size: 20px; color: #222; }
        #nw-root .highlight-lead { color: #004d40; font-size: 24px; border-bottom: 2px solid #004d40; }
        #nw-root .resupply-text { color: #d35400; font-size: 14px; }
        #nw-root .wind-text { color: #004aad; font-size: 16px; display: none; margin-left: 10px; border-left: 2px solid #ccc; padding-left: 15px; white-space: nowrap; }

        #nw-root #action-ui {
            display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 6px;
            border-top: 2px solid #ccc; margin-top: 15px; padding-top: 15px; width: 100%;
            overflow-x: auto;
        }

        #nw-root button.action-btn {
            background: #3e4c33; color: #f2efe4; border: 2px solid #1b2216;
            box-shadow: 0px 3px 0px #1b2216;
            padding: 8px 10px; text-transform: uppercase; font-family: 'Stardos Stencil', cursive;
            font-size: 11px; font-weight: bold; letter-spacing: 0.5px; border-radius: 2px;
            cursor: pointer; transition: all 0.08s ease; margin: 0; display: flex; justify-content: center; align-items: center;
            white-space: nowrap; flex: 1 1 auto;
        }
        
        #nw-root button.action-btn:active { box-shadow: 0px 0px 0px #1b2216; transform: translateY(3px); }
        #nw-root button.action-btn:disabled { background: #61685c; border-color: #2b3028; color: #9da398; box-shadow: none; transform: none; cursor: not-allowed; }
        #nw-root button.action-red { background: #841f1f; border-color: #350909; box-shadow: 0px 3px 0px #350909; }
        #nw-root button.action-red:active { box-shadow: 0px 0px 0px #350909; }
        #nw-root button.action-blue { background: #264a7f; border-color: #0f223f; box-shadow: 0px 3px 0px #0f223f; }
        #nw-root button.action-blue:active { box-shadow: 0px 0px 0px #0f223f; }
        #nw-root button.action-gold { background: #967117; border-color: #3f3009; box-shadow: 0px 3px 0px #3f3009; color: #fff; }
        #nw-root button.action-gold:active { box-shadow: 0px 0px 0px #3f3009; }
        #nw-root button.action-pink { background: #b05a61; border-color: #4f2529; box-shadow: 0px 3px 0px #4f2529; color: #ffd6d9; }
        #nw-root button.action-pink:active { box-shadow: 0px 0px 0px #4f2529; }

        #nw-root #inventory-ui { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; border-top: 2px solid #ccc; margin-top: 15px; padding-top: 15px; display: none; }
        #nw-root .inv-item { padding: 4px 15px; background: #dcd9c6; border-radius: 2px; border: 2px solid #888; font-weight: bold; font-size: 16px; }
        #nw-root .inv-item.active { background: #4b5320; color: white; border-color: #1a1f0c; }

        #nw-root #orders-bar { width: 800px; display: none; justify-content: space-between; margin-bottom: 12px; }
        #nw-root .orders-text {
            width: 380px; font-size: 18px; font-weight: bold; color: #a80000;
            text-align: center; background: #e8e6d9; border: 2px dashed #a80000;
            padding: 8px; border-radius: 4px; box-sizing: border-box;
            box-shadow: 0 4px 6px rgba(0,0,0,0.4); visibility: hidden; 
        }
        #nw-root #orders-left { color: #004aad; border-color: #004aad; }

        #nw-root #game-container { position: relative; width: 800px; height: 600px; perspective: 2000px; }

        #nw-root .paper {
            width: 100%; height: 100%; background-color: #fdfdfd;
            background-image: linear-gradient(#e4e4e4 1px, transparent 1px), linear-gradient(90deg, transparent 39px, #ff9e9e 39px, #ff9e9e 41px, transparent 41px), linear-gradient(90deg, transparent 759px, #ff9e9e 759px, #ff9e9e 761px, transparent 761px);
            background-size: 100% 30px, 100% 100%, 100% 100%; background-position: 0 5px, 0 0, 0 0;
            box-shadow: 0 15px 40px rgba(0,0,0,0.7); border-radius: 2px; position: absolute; top: 0; left: 0;
        }

        #nw-root .center-crease { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(0,0,0,0.1); border-left: 1px dashed rgba(0,0,0,0.3); transform: translateX(-50%); z-index: 5; }
        #nw-root canvas { position: absolute; top: 0; left: 0; z-index: 10; cursor: crosshair; }

        #nw-root .fold-flap {
            position: absolute; top: 0; width: 50%; height: 100%; background-color: #fdfdfd;
            background-image: linear-gradient(#e4e4e4 1px, transparent 1px); background-size: 100% 30px; background-position: 0 5px;
            z-index: 20; visibility: hidden; transition: transform 1s ease-in-out; box-shadow: inset 0 0 20px rgba(0,0,0,0.1); pointer-events: none; 
        }

        #nw-root #left-flap { left: 0; transform-origin: right center; border-right: 1px solid #ccc; }
        #nw-root #right-flap { right: 0; transform-origin: left center; border-left: 1px solid #ccc; }
        #nw-root .folded-left { transform: rotateY(180deg); }
        #nw-root .folded-right { transform: rotateY(-180deg); }

        #nw-root .overlay-screen {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(15, 23, 42, 0.15); z-index: 100; display: none;
            flex-direction: column; align-items: center; justify-content: center;
            color: #e8e6d9; border-radius: 2px; text-align: center;
            overflow: hidden;
        }

        #nw-root #main-title-screen { display: flex; z-index: 110; }
        #nw-root #leaderboard-modal { z-index: 150; }

        #nw-root .title-screen-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            width: 530px;
            max-height: 95vh;
            overflow: visible !important; 
            padding: 10px;
            z-index: 120;
            pointer-events: none;
        }

        #nw-root .paper-shadow-wrapper {
            filter: drop-shadow(3px 4px 6px rgba(0,0,0,0.45));
            width: 100%;
            box-sizing: border-box;
            pointer-events: auto;
        }

        #nw-root .button-strip {
            width: 90%;
            margin: 2px 0;
        }

        #nw-root .ripped-paper {
            box-sizing: border-box;
            transition: transform 0.15s ease, filter 0.15s ease;
        }

        #nw-root .title-screen-panel {
            background: rgba(22, 28, 18, 0.94);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            color: #e8e6d9; padding: 35px; border-radius: 4px;
            border: 2px solid #4a5c3e; text-align: left; width: 480px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), inset 0 0 25px rgba(74, 92, 62, 0.15);
            display: flex; flex-direction: column; gap: 15px;
            max-height: 95vh; overflow-y: auto;
            font-family: 'Courier Prime', monospace;
            position: relative;
        }

        #nw-root .title-screen-panel::before {
            content: ''; position: absolute; top: 10px; left: 10px; width: 12px; height: 12px;
            border-top: 2px solid #5c754d; border-left: 2px solid #5c754d;
        }
        #nw-root .title-screen-panel::after {
            content: ''; position: absolute; bottom: 10px; right: 10px; width: 12px; height: 12px;
            border-bottom: 2px solid #5c754d; border-right: 2px solid #5c754d;
        }

        #nw-root .title-header-group { text-align: center; margin-bottom: 10px; position: relative; }
        #nw-root .title-header-group h1 { font-family: 'Stardos Stencil', cursive; font-size: 38px; color: #d4af37; margin: 0; padding-bottom: 5px; letter-spacing: 2px; text-shadow: 0 0 10px rgba(212, 175, 55, 0.2); }
        #nw-root .title-header-group .subtitle { font-family: 'Courier Prime', monospace; font-size: 12px; color: #9da398; margin-top: 5px; letter-spacing: 1px; text-transform: uppercase; }

        #nw-root .callsign-input-wrapper {
            background: #4b5320; border: 2px solid #1a1f0c; padding: 15px; border-radius: 2px; margin-bottom: 5px;
            position: relative;
        }
        #nw-root .callsign-input-wrapper label {
            font-size: 11px; font-weight: bold; letter-spacing: 2px; color: #ffffff; text-transform: uppercase; display: block; margin-bottom: 10px;
        }
        #nw-root .callsign-inputs {
            display: flex; gap: 12px;
        }
        #nw-root .callsign-inputs input {
            flex: 1; padding: 10px 14px; border: 1px solid #4a5c3e; background: #0f130c;
            border-radius: 2px; font-family: 'Courier Prime', monospace; font-size: 13px; color: #fff;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); transition: all 0.2s ease-in-out;
            text-transform: uppercase;
        }
        #nw-root .callsign-inputs input:focus {
            outline: none; border-color: #d4af37; background: #181f14;
            box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
        }

        #nw-root .menu-btn-group { display: flex; flex-direction: column; gap: 10px; margin-top: 5px; }
        #nw-root .menu-btn-large {
            padding: 12px 15px; font-size: 13px; letter-spacing: 2px;
            border-radius: 2px; cursor: pointer; text-transform: uppercase;
            font-family: 'Stardos Stencil', cursive; font-weight: bold;
            transition: all 0.15s ease; text-align: center;
        }

        #nw-root .leaderboard-title { font-family: 'Stardos Stencil', cursive; font-size: 20px; border-bottom: 2px solid #4a5c3e; color: #d4af37; text-align: center; margin-bottom: 12px; padding-bottom: 5px; letter-spacing: 1px; }
        #nw-root .leaderboard-list { font-size: 12px; font-family: 'Courier Prime', monospace; list-style: none; padding: 0; margin: 0; overflow-y: auto; max-height: 250px; }
        #nw-root .leaderboard-item { display: flex; justify-content: space-between; padding: 8px 10px; border-bottom: 1px dashed rgba(74, 92, 62, 0.25); color: #c4ccbe; border-radius: 2px; transition: background 0.2s; }
        #nw-root .leaderboard-item:nth-child(1) { color: #d4af37; font-weight: bold; }

        #nw-root #start-menu { display: none; z-index: 105; overflow-y: auto; padding: 20px 0; }
        #nw-root .menu-panel { 
            background: #e8e6d9; color: #333; padding: 25px 40px; border-radius: 4px; 
            border: 2px solid #555; text-align: left; width: 560px; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.8);
            max-height: 90vh; overflow-y: auto;
        }
        #nw-root .menu-panel h1 { text-align: center; color: #1a1f0c; border-bottom: 2px solid #ccc; padding-bottom: 4px; margin-top: 0; font-size: 26px; }
        #nw-root .menu-panel .subtitle { text-align: center; font-family: 'Gochi Hand', cursive; font-size: 18px; color: #b01e1e; margin-top: -5px; margin-bottom: 15px; }
        
        #nw-root .preset-row {
            display: flex; flex-direction: column; margin-bottom: 15px; background: rgba(0,0,0,0.04);
            padding: 10px; border-radius: 4px; border: 1px solid #c8c5b3;
        }
        #nw-root .preset-title { font-size: 13px; font-weight: bold; letter-spacing: 1px; color: #555; margin-bottom: 8px; text-transform: uppercase; }
        #nw-root .preset-badges { display: flex; gap: 8px; flex-wrap: wrap; }
        #nw-root .preset-badge {
            background: #dcd9c6; border: 1.5px solid #888; border-radius: 4px; padding: 4px 8px;
            font-size: 12px; font-weight: bold; cursor: pointer; transition: all 0.15s ease;
        }
        #nw-root .preset-badge:hover { background: #cfcbad; }
        #nw-root .preset-badge.active { background: #4b5320; color: white; border-color: #1a1f0c; }

        #nw-root .setting-section-title {
            font-size: 12px; font-weight: bold; letter-spacing: 1px; color: #27301c;
            border-bottom: 1px solid #7f8c8d; margin: 15px 0 8px 0; padding-bottom: 2px;
            text-transform: uppercase;
        }

        #nw-root .setting-row { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; border-bottom: 1px dashed #ccc; padding-bottom: 6px; }
        #nw-root .setting-label { font-size: 15px; font-weight: bold; }
        #nw-root .setting-desc { font-size: 11px; color: #666; display: block; margin-top: 2px; font-family: sans-serif; }
        
        #nw-root .spinner-control { display: flex; align-items: center; background: #dcd9c6; border: 2px solid #888; border-radius: 4px; overflow: hidden; }
        #nw-root .spinner-btn { background: #4b5320; border: none; width: 24px; height: 24px; font-size: 16px; font-weight: bold; cursor: pointer; color: white; display: flex; align-items: center; justify-content: center; }
        #nw-root .spinner-btn:hover { background: #606b29; }
        #nw-root .spinner-btn:active { background: #3b4219; }
        #nw-root .spinner-val { width: 34px; text-align: center; font-size: 14px; font-weight: bold; background: white; padding: 2px 0; }
        #nw-root .spinner-label { margin-right: 6px; font-weight: bold; font-size: 13px; }
        
        #nw-root .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
        #nw-root .toggle-switch input { opacity: 0; width: 0; height: 0; }
        #nw-root .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .2s; border-radius: 24px; border: 2px solid #888; }
        #nw-root .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .2s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
        #nw-root input:checked + .slider { background-color: #4b5320; border-color: #2a2e25; }
        #nw-root input:checked + .slider:before { transform: translateX(20px); }

        #nw-root #tutorial-card {
            background: #fcf8e3;
            border-radius: 4px 15px 4px 15px/15px 4px 15px 4px;
            border: 2.5px solid #8a4f7d;
            box-shadow: 2px 8px 15px rgba(0,0,0,0.25);
            position: absolute;
            z-index: 120;
            padding: 15px;
            box-sizing: border-box;
            width: 310px;
            min-height: 180px;
            top: 20px;
            left: 20px;
            font-family: 'Courier Prime', monospace;
            cursor: grab;
            user-select: none;
            display: none;
        }

        #nw-root #tutorial-card:active {
            cursor: grabbing;
        }

        #nw-root #tutorial-card::before {
            content: '';
            position: absolute;
            top: -10px; left: 35%;
            width: 30%; height: 20px;
            background: rgba(138, 79, 125, 0.15);
            transform: rotate(1deg);
            border: 1px dashed rgba(138, 79, 125, 0.3);
            pointer-events: none;
        }

        #nw-root .post-it-title {
            font-size: 24px;
            margin: 0 0 10px 0;
            text-align: center;
            border-bottom: 1.5px dashed rgba(0,0,0,0.15);
            padding-bottom: 4px;
            font-weight: bold;
        }

        #nw-root #endgame-screen {
            background-color: #f6f5ea;
            color: #2d2d2d;
            border: 4px solid #3c3c3c;
            border-radius: 2px;
            box-sizing: border-box;
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            overflow: hidden;
        }

        #nw-root #endgame-bg-snapshot {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: fill;
            opacity: 0.35;
            pointer-events: none;
            z-index: 1;
        }

        #nw-root .debrief-header {
            position: absolute;
            top: 15px; left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            text-align: center;
            width: 90%;
            pointer-events: none;
        }

        #nw-root .post-it {
            position: absolute;
            width: 250px;
            min-height: 290px;
            padding: 18px 15px;
            box-shadow: 2px 8px 15px rgba(0,0,0,0.25);
            cursor: grab;
            user-select: none;
            z-index: 50;
            box-sizing: border-box;
            font-family: 'Gochi Hand', cursive;
            transition: transform 0.1s ease, box-shadow 0.1s ease;
        }

        #nw-root .post-it:active {
            cursor: grabbing;
            transform: scale(1.02);
            box-shadow: 4px 14px 20px rgba(0,0,0,0.3);
            z-index: 100; 
        }

        #nw-root .post-it::before {
            content: '';
            position: absolute;
            top: -12px; left: 30%;
            width: 40%; height: 22px;
            background: rgba(220, 215, 180, 0.6);
            transform: rotate(-3deg);
            border: 1px dashed rgba(0,0,0,0.1);
            pointer-events: none;
        }

        #nw-root #post-it-p1 {
            background: #fff9c4; 
            border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
            border: 1.5px solid rgba(0, 0, 0, 0.1);
            top: 130px; left: 80px;
        }

        #nw-root #post-it-p2 {
            background: #ffcc80; 
            border-radius: 15px 255px 15px 225px/225px 15px 255px 15px;
            border: 1.5px solid rgba(0, 0, 0, 0.1);
            top: 140px; right: 80px;
        }

        #nw-root .post-it-row {
            display: flex;
            justify-content: space-between;
            font-size: 16px;
            margin: 6px 0;
            line-height: 1.3;
        }

        #nw-root .post-it-total {
            border-top: 1.5px dashed rgba(0,0,0,0.2);
            margin-top: 10px;
            padding-top: 6px;
            font-size: 18px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
        }

        #nw-root .post-it-rank {
            text-align: center;
            font-size: 19px;
            font-weight: bold;
            margin-top: 12px;
            border: 1.5px dashed rgba(0,0,0,0.25);
            padding: 3px;
            text-transform: uppercase;
            border-radius: 5px;
        }

        #nw-root .reload-wrapper {
            position: absolute;
            bottom: 20px; left: 50%;
            transform: translateX(-50%);
            z-index: 10;
        }

        #nw-root .export-cabinet-modal {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(10, 15, 10, 0.95); z-index: 250;
            display: none; flex-direction: column; align-items: center; justify-content: center;
            color: #e8e6d9; text-align: center; box-sizing: border-box; padding: 20px;
        }
        #nw-root .export-cabinet-panel {
            background: #e8e6d9; color: #2d2d2d; border-radius: 4px; border: 3px solid #4b5320;
            padding: 20px; max-width: 600px; box-shadow: 0 12px 35px rgba(0,0,0,0.9);
            display: flex; flex-direction: column; align-items: center;
        }
        #nw-root .export-cabinet-title {
            font-family: 'Stardos Stencil', cursive; font-size: 22px; color: #1a1f0c;
            border-bottom: 2px dashed #4b5320; width: 100%; padding-bottom: 8px; margin-bottom: 12px;
        }
        #nw-root .export-cabinet-instructions {
            font-family: sans-serif; font-size: 13px; color: #555; margin-bottom: 15px; line-height: 1.4;
        }
        #nw-root .export-cabinet-img-wrapper {
            border: 2px solid #555; box-shadow: 0 4px 10px rgba(0,0,0,0.3); background: white;
            max-width: 100%; margin-bottom: 15px; overflow: hidden; border-radius: 2px;
        }
        #nw-root .export-cabinet-img {
            max-width: 100%; max-height: 40vh; display: block; object-fit: contain;
        }

        #nw-root .construction-paper {
            position: relative;
            padding: 0; 
            box-sizing: border-box;
            border-radius: 1px;
            width: 100%;
            height: 100%;
        }

        #nw-root .construction-paper-color-bg {
            position: absolute;
            inset: 0px; 
            border-radius: 1px;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.15);
        }

        #nw-root .construction-paper-content {
            position: relative;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 10px 15px;
            background-image: 
                repeating-radial-gradient(rgba(0,0,0,0.01) 0 1px, transparent 0 100%),
                radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), rgba(0,0,0,0.08) 120%);
            background-blend-mode: overlay;
        }

        #nw-root .compact-button-strip {
            width: 320px;
            max-width: 90%;
            margin: 4px 0;
            transform: rotate(var(--paper-rot, 0deg));
        }

        #nw-root .compact-ripped-btn {
            width: 100%;
            border: none;
            outline: none;
            color: #fdfcf7;
            font-size: 12px;
            letter-spacing: 1.5px;
            font-family: 'Stardos Stencil', cursive;
            font-weight: bold;
            text-transform: uppercase;
            cursor: pointer;
            display: block;
            text-align: center;
            background: transparent;
            padding: 4px 0;
            filter: url(#text-fuzz); 
        }
        #nw-root .compact-ripped-btn:hover {
            filter: url(#text-fuzz) brightness(1.1) contrast(1.1);
        }
        #nw-root .compact-ripped-btn:active {
            transform: scale(0.97);
        }

        #nw-root .tape-label-strip {
            padding: 0;
            transform: rotate(var(--tape-rot, 1deg));
            border-radius: 1px;
            display: flex;
            flex-direction: column;
            width: 165px;
            pointer-events: auto;
            position: relative;
        }

        #nw-root .tape-input {
            width: 100%;
            border: none;
            outline: none;
            background: transparent;
            color: #20221c;
            font-family: 'Gochi Hand', cursive;
            font-size: 18px;
            text-align: center;
            text-transform: uppercase;
            border-bottom: 1.5px dashed rgba(255,255,255,0.18);
            padding: 2px 0;
            filter: url(#text-fuzz); 
        }
        #nw-root .tape-input:focus {
            border-bottom-style: solid;
            background-color: rgba(255, 255, 240, 0.05);
        }

        #nw-root .draggable-menu-item {
            cursor: grab;
            user-select: none;
            will-change: transform, left, top;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
        }
        #nw-root .draggable-menu-item:active {
            cursor: grabbing;
        }

        @keyframes nw-screenShake {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            15% { transform: translate(-7px, 5px) rotate(-0.3deg); }
            35% { transform: translate(6px, -6px) rotate(0.3deg); }
            55% { transform: translate(-5px, -4px) rotate(-0.2deg); }
            75% { transform: translate(5px, 4px) rotate(0.2deg); }
        }
        #nw-root .shake { animation: nw-screenShake 0.45s ease; }

        #nw-root #cpu-speech {
            position: absolute;
            top: 60px; right: 18px;
            max-width: 220px;
            background: #fff9c4;
            border: 1.5px solid rgba(0,0,0,0.18);
            border-radius: 14px 16px 14px 2px;
            padding: 10px 16px;
            font-family: 'Gochi Hand', cursive;
            font-size: 17px;
            line-height: 1.25;
            color: #4a3500;
            box-shadow: 2px 5px 10px rgba(0,0,0,0.25);
            transform: rotate(1.5deg);
            z-index: 95;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.25s ease;
        }
        #nw-root #cpu-speech.visible { opacity: 1; }
        #nw-root #cpu-speech::after {
            content: '';
            position: absolute;
            bottom: -10px; right: 22px;
            border-left: 10px solid transparent;
            border-top: 11px solid #fff9c4;
        }

        #nw-root .solo-diff-btn {
            border: none; outline: none; background: transparent;
            color: #fdfcf7; font-family: 'Stardos Stencil', cursive;
            font-weight: bold; font-size: 11px; letter-spacing: 1px;
            text-transform: uppercase; cursor: pointer;
            padding: 3px 8px; flex: 1;
            border: 1.5px dashed rgba(255,255,255,0.35);
            border-radius: 3px;
            filter: url(#text-fuzz);
        }
        #nw-root .solo-diff-btn:hover { background: rgba(255,255,255,0.14); }
        #nw-root .solo-diff-btn:active { transform: scale(0.95); }

        /* Paper Wars — the node-graph conquest Daily (Murray's 2026-08-14 review).
           Deliberately its own scope, not #nw-root: the Battle canvas above is a
           hard-coded 800x600 element with unscaled click mapping, and Paper Wars'
           1147x553 canvas (js/games/daily-generators.js's genPaperWars) has its
           own (scaled) mapping — keeping the two apart avoids any risk of one's
           rules leaking into the other's hit detection. */
        #pw-root {
            position: relative; overflow: hidden;
            background-color: #f5efd9;
            background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(75,132,176,.22) 28px, transparent 29px);
            border: 1px solid #c9bea1; border-radius: 6px; padding: 20px 18px 20px 54px;
            box-shadow: 0 8px 22px rgba(49,38,20,.2), inset 0 0 45px rgba(121,96,48,.08);
            display: flex; gap: 16px; font-family: 'Courier Prime', monospace; color: #302c25;
        }
        #pw-root::before { content:""; position:absolute; top:0; bottom:0; left:36px; width:2px; background:rgba(190,73,73,.42); box-shadow:4px 0 0 rgba(190,73,73,.1); }
        #pw-root > * { position:relative; z-index:1; }
        #pw-root .pw-main { flex: 1; min-width: 0; }
        /* .action-btn's real rules live under #nw-root (see above), which
           #pw-root deliberately isn't part of — reused here so Withdraw/End
           Turn get the same pressed-paper button look instead of a bare
           unstyled <button>. */
        #pw-root button.action-btn {
            background: #3e4c33; color: #f2efe4; border: 2px solid #1b2216;
            box-shadow: 0px 3px 0px #1b2216;
            padding: 8px 14px; text-transform: uppercase; font-family: 'Stardos Stencil', cursive;
            font-size: 11px; font-weight: bold; letter-spacing: 0.5px; border-radius: 2px;
            cursor: pointer; transition: all 0.08s ease; margin: 0; display: flex; justify-content: center; align-items: center;
            white-space: nowrap;
        }
        #pw-root button.action-btn:active { box-shadow: 0px 0px 0px #1b2216; transform: translateY(3px); }
        #pw-root button.action-btn:disabled { background: #61685c; border-color: #2b3028; color: #9da398; box-shadow: none; transform: none; cursor: not-allowed; }
        #pw-root button.action-red { background: #841f1f; border-color: #350909; box-shadow: 0px 3px 0px #350909; }
        #pw-root button.action-red:active { box-shadow: 0px 0px 0px #350909; }
        #pw-root button.action-gold { background: #967117; border-color: #3f3009; box-shadow: 0px 3px 0px #3f3009; color: #fff; }
        #pw-root button.action-gold:active { box-shadow: 0px 0px 0px #3f3009; }
        #pw-root .pw-controls {
            display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
            flex-wrap: wrap;
        }
        #pw-root .pw-status {
            font-family: 'Gochi Hand', cursive; font-size: 17px; color: #394f78;
            line-height: 1.3;
        }
        #pw-root .pw-canvas-wrap {
            position: relative; width: 100%; max-width: 1147px;
            border-radius: 3px; overflow: hidden;
            background-color: rgba(250,247,232,.82);
            background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(75,132,176,.13) 28px, transparent 29px);
            border: 2px solid rgba(74,63,42,.35); box-shadow: 2px 3px 0 rgba(74,63,42,.16);
        }
        #pw-root #pwCanvas { display: block; width: 100%; height: auto; touch-action: none; cursor: pointer; }
        #pw-root .pw-shake { animation: nw-screenShake 0.45s ease; }
        #pw-root .pw-sidebar {
            width: 220px; flex: 0 0 220px; display: flex; flex-direction: column;
        }
        #pw-root .pw-sidebar h3 {
            font-family: 'Stardos Stencil', cursive; font-size: 14px; letter-spacing: 1px;
            color: #684a2d; margin: 0 0 8px;
        }
        #pw-root .pw-log {
            flex: 1; overflow-y: auto; max-height: 380px; font-size: 12px;
            background: rgba(255,248,184,.72); border: 1px solid rgba(99,77,31,.25);
            color:#3b3324; border-radius: 2px; padding: 8px; transform:rotate(.35deg);
        }
        #pw-root .pw-log-entry { padding: 3px 0; border-bottom: 1px dashed rgba(77,62,36,.16); }
        #pw-root .pw-log-player { color: #35558e; }
        #pw-root .pw-log-ai { color: #9b3935; }
        #pw-root .pw-log-system { color: #477044; }
        #pw-root .pw-floating-text {
            position: absolute; font-family: 'Stardos Stencil', cursive; font-weight: bold;
            font-size: 15px; pointer-events: none; animation: pw-float-up 1s ease-out forwards;
            text-shadow: 1px 1px 2px #000;
        }
        @keyframes pw-float-up {
            0% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(-30px); }
        }
        #pw-root .pw-end-screen {
            position: absolute; inset: 0; background: rgba(20,17,10,0.94);
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            opacity: 0; transition: opacity 0.35s ease; text-align: center; padding: 20px;
        }
        #pw-root .pw-end-screen.visible { opacity: 1; }
        #pw-root .pw-end-title {
            font-family: 'Stardos Stencil', cursive; font-size: 30px; letter-spacing: 1px;
            margin-bottom: 16px;
        }
        #pw-root .pw-end-stats { width: 100%; max-width: 320px; }
        #pw-root .pw-stat-row {
            display: flex; justify-content: space-between; font-size: 13px;
            padding: 5px 0; border-bottom: 1px dashed rgba(255,255,255,0.1); color: #d8d3bf;
        }
        #pw-root .pw-stat-val { color: #dfba59; font-weight: bold; }
        #pwPromptOverlay {
            position: fixed; inset: 0; background: rgba(10,8,4,0.7); z-index: 10010;
            display: none; align-items: center; justify-content: center;
        }
        #pwPromptOverlay.visible { display: flex; }
        #pwPromptOverlay .pw-prompt-panel {
            background: #23291f; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px;
            padding: 20px 24px; width: 280px; font-family: 'Courier Prime', monospace; color: #d8d3bf;
        }
        #pwPromptOverlay .pw-prompt-title { font-family: 'Gochi Hand', cursive; font-size: 17px; color: #dfba59; margin-bottom: 12px; }
        #pwPromptOverlay input {
            width: 100%; box-sizing: border-box; padding: 8px 10px; margin-bottom: 14px;
            border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); background: #1a1e17;
            color: #fdfcf7; font-size: 15px;
        }
        #pwPromptOverlay .pw-prompt-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap:wrap; }
        #pwPromptOverlay button.action-btn { border:2px solid #27301f; border-radius:2px; padding:7px 10px; background:#46573a; color:#fff;
            box-shadow:0 3px 0 #27301f; font:700 10px 'Stardos Stencil',cursive; text-transform:uppercase; cursor:pointer; }
        #pwPromptOverlay button.action-red { background:#841f1f; border-color:#350909; box-shadow:0 3px 0 #350909; }
        #pwPromptOverlay button.action-gold { background:#967117; border-color:#3f3009; box-shadow:0 3px 0 #3f3009; }

        /* Daily debrief: a field report pinned onto the shared results frame. */
        .pw-results-sheet { position:relative; overflow:hidden; padding:22px 24px 24px 54px; color:#302c25;
            border:1px solid #c9bea1; border-radius:5px; box-shadow:0 7px 18px rgba(45,34,18,.16);
            background-color:#f7f1dc; background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 27px,rgba(75,132,176,.18) 28px,transparent 29px); }
        .pw-results-sheet::before { content:""; position:absolute; inset:0 auto 0 34px; width:2px; background:rgba(190,73,73,.42); }
        .pw-results-hero { display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; margin-bottom:18px; }
        .pw-results-stamp { width:112px; aspect-ratio:1; display:grid; place-items:center; text-align:center; border:4px double currentColor;
            border-radius:50%; font:700 17px/1.05 'Stardos Stencil',cursive; letter-spacing:1px; transform:rotate(-5deg); }
        .pw-results-stamp.is-win { color:#3f7048; } .pw-results-stamp.is-loss { color:#9a3f3b; } .pw-results-stamp.is-giveup { color:#82692d; }
        .pw-results-score strong { display:block; font:700 38px/1 'Stardos Stencil',cursive; color:#263b63; }
        .pw-results-score strong .pw-results-score__max { font-size:17px; color:#69583e; }
        .pw-results-score span { font:17px 'Gochi Hand',cursive; color:#69583e; }
        .pw-territory { height:18px; display:flex; overflow:hidden; border:2px solid #514732; border-radius:2px; margin-top:10px; background:#9b3f3b; }
        .pw-territory__player { background:#3f5e96; } .pw-territory-labels { display:flex; justify-content:space-between; font-size:11px; font-weight:bold; margin-top:3px; }
        /* A quiet affordance, not a transport control — it only reads as
           interactive once you're already near it (hover/focus), and the
           tooltip (title attribute) carries the explanation instead of a
           permanent "Start"/"End" caption row. */
        .pw-territory-scrub { width:100%; display:block; margin:5px 0 0; height:10px; -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer; opacity:.45; transition:opacity .15s; }
        .pw-territory-scrub:hover, .pw-territory-scrub:focus-visible { opacity:1; }
        .pw-territory-scrub::-webkit-slider-runnable-track { height:2px; background:rgba(81,71,50,.4); border-radius:2px; }
        .pw-territory-scrub::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:8px; height:8px; margin-top:-3px; border-radius:50%; background:#3f5e96; }
        .pw-territory-scrub::-moz-range-track { height:2px; background:rgba(81,71,50,.4); border-radius:2px; }
        .pw-territory-scrub::-moz-range-thumb { width:8px; height:8px; border:none; border-radius:50%; background:#3f5e96; }
        .pw-results-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0; }
        .pw-results-card { padding:12px; background:rgba(255,249,193,.64); border:1px solid rgba(91,70,32,.25); box-shadow:2px 2px 0 rgba(91,70,32,.12); transform:rotate(-.25deg); }
        .pw-results-card:nth-child(2) { background:rgba(210,226,244,.65); transform:rotate(.25deg); }
        .pw-results-card:nth-child(3) { background:rgba(239,210,207,.62); }
        .pw-results-card h4 { margin:0 0 8px; font:700 14px 'Stardos Stencil',cursive; color:#4e402b; }
        .pw-results-card strong { font-size:23px; color:#263b63; } .pw-results-card small { display:block; color:#6b604e; }
        .pw-score-breakdown { margin-top:14px; padding:12px 14px; border:1px dashed rgba(55,76,112,.38); background:rgba(255,255,255,.34); }
        .pw-score-breakdown h4 { margin:0 0 9px; font:700 14px 'Stardos Stencil',cursive; color:#374c70; }
        .pw-score-breakdown > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
        .pw-score-breakdown span { padding:6px; background:rgba(55,76,112,.07); text-align:center; }
        .pw-score-breakdown b,.pw-score-breakdown strong { display:block; }
        .pw-score-breakdown b { color:#6b604e; font:700 10px 'Courier Prime',monospace; text-transform:uppercase; }
        .pw-score-breakdown strong { margin-top:2px; color:#3f7048; font-size:16px; }
        .pw-score-breakdown strong.is-penalty { color:#9a3f3b; }
        .pw-score-breakdown small { display:block; margin-top:9px; color:#6b604e; line-height:1.4; }
        .pw-roll-panels { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
        .pw-roll-panel { padding:12px; background:rgba(255,255,255,.45); border:1px dashed rgba(63,54,37,.35); }
        .pw-roll-panel h4 { margin:0 0 8px; color:#4e402b; font:16px 'Gochi Hand',cursive; }
        .pw-roll-chart { height:92px; display:flex; align-items:flex-end; gap:3px; border-bottom:2px solid #766b56; }
        .pw-roll-bar { flex:1; min-width:0; background:#42639c; position:relative; border-radius:2px 2px 0 0; }
        .pw-roll-panel.is-defense .pw-roll-bar { background:#a34a45; }
        .pw-roll-bar i { position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); font:9px 'Courier Prime',monospace; font-style:normal; }
        .pw-roll-bar b { position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:9px; }
        @media (max-width: 720px) {
            #pw-root { flex-direction: column; }
            #pw-root .pw-sidebar { width: 100%; flex: none; }
            .pw-results-hero { grid-template-columns:1fr; }
            .pw-results-cards,.pw-roll-panels { grid-template-columns:1fr; }
            .pw-score-breakdown > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
        }
