/* Round-end and game-over screens -- phase P4. The round-end screen is a translucent overlay INSIDE the stage (the stage is `overflow: hidden` and, on desktop, a phone-shaped 9:16 frame -- an overlay on would be the one thing allowed to spill out of it). The game-over screen re-skins index.html's existing #game-over-modal in place; every id there is load-bearing for app.js, so nothing is replaced. */ /* ---- round end ------------------------------------------------------- */ .round-end { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 16, 28, 0.66); backdrop-filter: blur(3px); animation: re-fade 220ms ease-out; } @keyframes re-fade { from { opacity: 0; } to { opacity: 1; } } .round-end-panel { width: min(300px, 100%); max-height: 100%; overflow: auto; text-align: center; padding: 16px 14px 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(16, 44, 70, 0.98), rgba(9, 26, 44, 0.98)); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); animation: re-rise 260ms cubic-bezier(0.2, 0.9, 0.3, 1); } @keyframes re-rise { from { transform: translateY(14px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } } /* A single accent colour per verdict, applied to the top rule and the score -- the panel itself stays neutral so the island art keeps the strongest colour on screen. */ .round-end { --re-accent: #9fb6ca; } .round-end.verdict-win { --re-accent: var(--gold, #f4c24f); } .round-end.verdict-loss { --re-accent: var(--danger, #e5352b); } .round-end.verdict-draw { --re-accent: #f2b544; } .round-end-head { border-bottom: 2px solid var(--re-accent); padding-bottom: 8px; } .round-end .re-round { display: block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #9fb6ca; } .round-end .re-verdict { margin: 2px 0 0; font-size: 22px; line-height: 1.2; color: #f2f7fc; } .round-end .re-reason { margin: 4px 0 0; font-size: 11px; color: #b9cddd; } .round-end .re-score { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 10px 0; font-size: 30px; font-weight: 800; color: #f2f7fc; } .round-end .re-score-mine { color: var(--re-accent); } .round-end .re-score-sep { font-size: 20px; color: #7d94a8; } .round-end .re-spoil { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: 12px; } #game-screen .round-end .re-spoil .island-card.ic-card { width: 132px; height: 66px; } #game-screen .round-end .re-spoil .island-card.ic-card .ic-name { font-size: 10px; } .round-end .re-spoil-note { font-size: 11px; color: #b9cddd; } .round-end .re-next { width: 100%; padding: 9px 0; font-size: 14px; } /* ---- game over ------------------------------------------------------- */ /* #game-over-modal keeps its `.modal` base from style.css; these rules only restyle the inner panel and the verdict block. */ #game-over-modal.go-screen { --go-accent: #9fb6ca; } #game-over-modal.go-screen.verdict-win { --go-accent: var(--gold, #f4c24f); } #game-over-modal.go-screen.verdict-loss { --go-accent: var(--danger, #e5352b); } #game-over-modal.go-screen.verdict-draw { --go-accent: #f2b544; } #game-over-modal.go-screen .modal-inner.go-skin { width: min(320px, 92vw); text-align: center; padding: 18px 16px 16px; border-radius: 18px; background: linear-gradient(180deg, rgba(16, 44, 70, 0.99), rgba(7, 22, 38, 0.99)); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.65); } #game-over-modal.go-screen .go-icon { color: var(--go-accent); line-height: 0; margin-bottom: 4px; } #game-over-modal.go-screen .go-icon-svg { width: 62px; height: 62px; } #game-over-modal.go-screen #go-title { margin: 0; font-size: 30px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--go-accent); } #game-over-modal.go-screen .go-score { font-size: 34px; font-weight: 800; color: #f2f7fc; margin: 6px 0 2px; } #game-over-modal.go-screen .go-rounds, #game-over-modal.go-screen .go-campaign-note { font-size: 11px; color: #b9cddd; } #game-over-modal.go-screen .go-reward { margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(242, 181, 68, 0.14); border: 1px solid rgba(242, 181, 68, 0.4); font-size: 12px; color: #f4d79a; } /* app.js unhides #go-reward / #go-campaign-note AFTER showGameOver returns -- never override `.hidden` here. */ #game-over-modal.go-screen .go-reward.hidden, #game-over-modal.go-screen .go-campaign-note.hidden { display: none; } #game-over-modal.go-screen .modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; } /* "Play again" and "Main menu" are the two primaries of the screen: they take the first row, the two side trips share the second. */ #game-over-modal.go-screen #btn-play-again { order: 1; } #game-over-modal.go-screen #btn-back-menu { order: 2; } #game-over-modal.go-screen #btn-go-leaderboard { order: 3; } #game-over-modal.go-screen #btn-go-shop { order: 4; } #game-over-modal.go-screen #btn-play-again, #game-over-modal.go-screen #btn-back-menu { font-size: 14px; padding: 10px 0; } #game-over-modal.go-screen #btn-go-leaderboard, #game-over-modal.go-screen #btn-go-shop { font-size: 12px; padding: 7px 0; } #game-over-modal.go-screen .modal-actions button { width: 100%; } @media (prefers-reduced-motion: reduce) { .round-end, .round-end-panel { animation: none; } } /* P8: the fifth action on the game-over screen is the feedback entry point. The four above it were laid out as two rows of two; this one spans the grid so it reads as the footnote it is rather than as a half-width peer. (render/shell.css may not carry this rule -- its header excludes #game-over-modal from that file by design.) */ #game-over-modal.go-screen #btn-go-feedback { order: 5; grid-column: 1 / -1; font-size: 12px; padding: 7px 0; } /* ============================================================ P12 "Living board" -- victory and defeat as a SCENE. `.go-fx` is one absolutely-positioned layer that render/screens.js inserts as #game-over-modal's FIRST child, so everything in it paints behind `.modal-inner`. The panel, its five buttons and every id inside it are untouched -- app.js still writes #go-reward and #go-campaign-note after showGameOver() returns, and they stay the topmost, tappable things on the screen. A DRAW gets no scene at all (screens.js returns early): confetti for a draw is a lie, and a sinking fleet for a draw is a different one. ============================================================ */ #game-over-modal .go-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* The panel has to sit above the scene, and it is a static-position flex item -- so it needs a stacking position of its own to beat a z-index: 0 sibling that comes before it in the DOM. */ #game-over-modal.go-scene .modal-inner { position: relative; z-index: 1; } /* ---- the wash -------------------------------------------------------- */ /* The stage dimming. One element, one opacity fade. NOT a backdrop-filter: that is a full-screen blur, and it would land on exactly the frame the fleet clones start moving over it. */ #game-over-modal .go-wash { position: absolute; inset: 0; animation: go-wash-in 520ms ease-out both; } #game-over-modal .go-fx-win .go-wash { background: radial-gradient(90% 60% at 50% 22%, rgba(255, 214, 130, 0.20), rgba(255, 214, 130, 0) 62%), linear-gradient(180deg, rgba(4, 10, 20, 0.62), rgba(6, 4, 2, 0.78)); } /* Defeat is cold, not dark: the light goes blue and stays there. */ #game-over-modal .go-fx-loss .go-wash { background: radial-gradient(90% 60% at 50% 30%, rgba(88, 140, 200, 0.22), rgba(88, 140, 200, 0) 60%), linear-gradient(180deg, rgba(8, 26, 54, 0.72), rgba(4, 14, 32, 0.86)); } @keyframes go-wash-in { from { opacity: 0; } to { opacity: 1; } } /* ---- the fleet ------------------------------------------------------- */ /* Real card elements, cloned out of the board and pinned in viewport coordinates (see screens.js's cloneFleetCard). The keyframes are written in JS because the travel is per-card and measured; all this rule does is take the clone out of flow and make sure nothing on it can be clicked. */ #game-over-modal .go-fleet-card { position: absolute; margin: 0; pointer-events: none; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55); } #game-over-modal .go-fx-win .go-fleet-card { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 206, 122, 0.45); } /* ---- confetti -------------------------------------------------------- */ /* Plain spans falling from above the top edge, each with one transform+opacity keyframe. Size, colour, delay and duration are set inline by screens.js from the particle's index -- index-derived, not random, so a headless screenshot pass reproduces exactly. */ #game-over-modal .go-confetti { position: absolute; top: -24px; border-radius: 1px; opacity: 0; animation-name: go-confetti-fall; animation-timing-function: cubic-bezier(0.35, 0.1, 0.65, 1); animation-iteration-count: infinite; } @keyframes go-confetti-fall { 0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate3d(18px, 105vh, 0) rotate(520deg); opacity: 0; } } /* ---- the trophy ------------------------------------------------------ */ /* The existing #go-icon SVG, scaled in with an overshoot, and a single radial flash behind it on the frame it lands. */ #game-over-modal.go-scene.verdict-win .go-icon { position: relative; } #game-over-modal.go-scene.verdict-win .go-icon-svg { animation: go-trophy-in 620ms cubic-bezier(0.2, 1.3, 0.35, 1) both; } #game-over-modal.go-scene.verdict-win .go-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 252, 240, 0.95) 0 18%, rgba(255, 216, 138, 0.6) 40%, rgba(255, 200, 100, 0) 70%); animation: go-trophy-flash 420ms ease-out 380ms both; } @keyframes go-trophy-in { 0% { transform: scale(0.2) rotate(-14deg); opacity: 0; } 55% { transform: scale(1.14) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } @keyframes go-trophy-flash { 0% { transform: scale(0.35); opacity: 0.95; } 100% { transform: scale(1.5); opacity: 0; } } /* ---- defeat: the muted banner ---------------------------------------- */ /* Not a second "Defeat" -- the title already says that. This is the caption under the sinking, and it is the one piece of the loss scene with any warmth taken out of it on purpose. */ #game-over-modal .go-banner { position: absolute; left: 0; right: 0; top: 15%; padding: 7px 0; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(186, 208, 232, 0.72); background: linear-gradient(90deg, rgba(10, 26, 48, 0) 0%, rgba(10, 26, 48, 0.72) 22%, rgba(10, 26, 48, 0.72) 78%, rgba(10, 26, 48, 0) 100%); border-top: 1px solid rgba(140, 176, 216, 0.18); border-bottom: 1px solid rgba(140, 176, 216, 0.18); animation: go-banner-in 700ms cubic-bezier(0.2, 0.8, 0.3, 1) 260ms both; } @keyframes go-banner-in { from { transform: translate3d(0, 10px, 0); opacity: 0; } to { transform: translate3d(0, 0, 0); opacity: 1; } } /* #go-score counts up in JS (screens.js's countScore). Tabular figures so the row does not twitch as the digits change width mid-count. */ #game-over-modal.go-screen .go-score { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { /* screens.js already skips the confetti and collapses the fleet to a fade; this stills what is left, so the scene is a static tableau. */ #game-over-modal .go-wash, #game-over-modal .go-banner, #game-over-modal.go-scene.verdict-win .go-icon-svg { animation: none; } #game-over-modal .go-confetti, #game-over-modal.go-scene.verdict-win .go-icon::after { display: none; } }