* { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
        html, body { width: 100%; height: 100vh; height: 100dvh; margin: 0; padding: 0; overflow: hidden; background-color: #e0f2fe; color: #333; font-family: Arial, Helvetica, sans-serif; }
        #game-ui-container { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; z-index: 999999; overflow: hidden; display: flex; flex-direction: column; 
            background: radial-gradient(circle 50vmin at 15% 20%, rgba(255,182,255,0.7), transparent 100%), radial-gradient(circle 60vmin at 80% 80%, rgba(100,181,246,0.6), transparent 100%), radial-gradient(circle 70vmin at 50% 50%, rgba(132,250,176,0.5), transparent 100%), radial-gradient(circle 50vmin at 90% 10%, rgba(255,235,150,0.6), transparent 100%);
            background-size: 200% 200%; animation: gradientBlobs 25s ease-in-out infinite alternate; }
        @keyframes gradientBlobs { 0% { background-position: 0% 0%,100% 100%,50% 50%,100% 0%; } 50% { background-position: 100% 100%,0% 0%,20% 80%,0% 100%; } 100% { background-position: 0% 100%,100% 0%,80% 20%,100% 100%; } }
        
        .top-header { width: 100%; height: 10dvh; flex-shrink: 0; position: relative; background: rgba(255,255,255,0.85); backdrop-filter: blur(10px); border-bottom: 2px solid rgba(255,255,255,0.9); box-shadow: 0 5px 25px rgba(0,0,0,0.2); display: flex; justify-content: space-between; align-items: center; padding: 0 3vmin; z-index: 5000; touch-action: none; }
        .header-title { position: absolute; left: 50%; transform: translateX(-50%); width: min(64vw, 520px); text-align: center; font-size: 4.5vmin; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; background: linear-gradient(90deg, #8c5a00, #d8a331, #f7d774); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 2px rgba(255,255,255,1)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 2vmin; line-height: 1.1; word-break: break-word; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); pointer-events: none; z-index: 1; }
        
        .btn-icon { height: 5vh; min-width: 5vh; border-radius: 12px; flex-shrink: 0; background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); color: #fff; display: flex; justify-content: center; align-items: center; font-size: 3vmin; cursor: pointer; border: 2px solid #fff; pointer-events: auto; box-shadow: 0 3px 0 #e67e22, 0 5px 10px rgba(0,0,0,0.2); transition: 0.1s; padding: 0 1vmin; }
        .btn-icon:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,0.2); }
        
        .btn-back { height: 5vh; padding: 0 3vmin; border-radius: 15px; flex-shrink: 0; background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); color: #fff; display: flex; justify-content: center; align-items: center; font-size: 3vmin; font-weight: 900; letter-spacing: 1px; cursor: pointer; border: 2px solid #fff; pointer-events: auto; box-shadow: 0 3px 0 #e67e22, 0 5px 10px rgba(0,0,0,0.2); transition: 0.1s; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); white-space: nowrap; position: relative; z-index: 2; }
        .btn-back:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,0.2); }
        
        .btn-placeholder { width: 10vmin; height: 5vh; flex-shrink: 0; visibility: hidden; }
        
        .content-area { width: 100%; flex: 1; position: relative; overflow-y: auto; touch-action: pan-y; padding: 2vmin; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
        
        .btn { background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%); border: 3px solid #fff; border-radius: 30px; color: white; font-size: 3.8vmin; font-weight: 900; padding: 1.5vh 3vw; margin: 1.5vh auto; cursor: pointer; display: block; width: 85%; max-width: 400px; text-transform: uppercase; letter-spacing: 2px; box-shadow: 0 4px 0 #28a745, 0 5px 10px rgba(0,0,0,0.2); text-align: center; transition: all 0.1s ease; text-shadow: 1px 1px 0 #28a745; flex-shrink: 0; }
        .btn:active { transform: translateY(4px); box-shadow: 0 0 0 #28a745; }
        .btn-secondary { background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); box-shadow: 0 4px 0 #007bff, 0 5px 10px rgba(0,0,0,0.2); text-shadow: 1px 1px 0 #007bff; }
        .btn-secondary:active { box-shadow: 0 0 0 #007bff; }
        .btn-upload { background: linear-gradient(90deg, #f83600 0%, #f9d423 100%); box-shadow: 0 4px 0 #d35400, 0 5px 10px rgba(0,0,0,0.2); text-shadow: 1px 1px 0 #d35400; width: 90%; max-width: 500px; margin-bottom: 3vh; }
        .btn-upload:active { box-shadow: 0 0 0 #d35400; }
        
        .gallery-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4vmin; width: 100%; max-width: 600px; align-content: start; justify-items: center; margin-top: 2vh; padding-bottom: 5vh; }
        @media (min-width: 768px) { .gallery-container { grid-template-columns: repeat(4, 1fr); gap: 3vmin; } }
        
        .gallery-item { position: relative; width: 100%; aspect-ratio: 9/16; border-radius: 15px; cursor: pointer; border: 3px solid #fff; transition: 0.1s ease; box-shadow: 0 6px 10px rgba(0,0,0,0.2); overflow: hidden; background: #fff; }
        .gallery-item:active { transform: scale(0.95); }
        .puzzle-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: 1; transition: 0.3s ease; }
        .puzzle-unsolved .puzzle-bg { filter: brightness(0.1); }
        .puzzle-solved { border-color: #4facfe; box-shadow: 0 6px 15px rgba(79,172,254,0.6); }
        .puzzle-solved .puzzle-bg { filter: brightness(1.0); }
        
        .delete-custom-btn { position: absolute; top: 1.5vmin; right: 1.5vmin; width: 6vmin; height: 6vmin; background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%); border: 2px solid white; border-radius: 50%; color: white; font-size: 3vmin; font-weight: bold; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 10; box-shadow: 0 3px 0 #c2002f; transition: 0.1s; }
        .delete-custom-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #c2002f; }
        
        .board { position: absolute; background: rgba(255,255,255,0.5); border: 3px dashed #fff; border-radius: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.15); backdrop-filter: blur(8px); pointer-events: none; overflow: hidden; touch-action: none; z-index: 50; }
        .board-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 5.5vmin; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; text-align: center; pointer-events: none; width: 100%; transition: opacity .5s; opacity: 1; text-shadow: 2px 2px 8px rgba(0,0,0,0.4); }
        .tray-area { position: absolute; background: rgba(255,255,255,0.85); border: 3px solid #fff; border-radius: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.2); backdrop-filter: blur(12px); pointer-events: auto; touch-action: none; z-index: 100; }
        .tray-panel { position: absolute; background: rgba(255,255,255,0.82); border: 3px solid rgba(255,255,255,0.96); border-radius: 22px; box-shadow: 0 10px 22px rgba(0,0,0,0.18); backdrop-filter: blur(12px); pointer-events: none; touch-action: none; z-index: 90; overflow: hidden; }
        .tray-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)); pointer-events: none; }
        
        .piece { position: absolute; background-size: 100% 100%; cursor: grab; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.4)); pointer-events: auto; transform-origin: center center; transition: transform .15s cubic-bezier(0.175,0.885,0.32,1.275); touch-action: none; z-index: 200; }
        .piece.dragging { z-index: 9999 !important; cursor: grabbing; filter: drop-shadow(6px 12px 15px rgba(0,0,0,0.6)); transform: scale(1) !important; }
        .piece.locked { filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.3)); z-index: 60 !important; pointer-events: none; transition: transform .2s; transform: scale(1) !important; }
        
        .modal-overlay { position: fixed; top:0; left:0; width:100%; height:100vh; height:100dvh; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); display: flex; justify-content: center; align-items: center; z-index: 9999999; animation: fadeIn .3s ease-out; pointer-events: auto; touch-action: none; }
        .modal-box { padding: 6vmin; width: 85%; max-width: 400px; text-align: center; border: 4px solid #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.4); background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); border-radius: 25px; position: relative; overflow: hidden; }
        .modal-overlay-bottom { position: absolute; left:0; width:100%; display: flex; justify-content: center; align-items: center; z-index: 9999999; animation: slideUp .4s cubic-bezier(0.175,0.885,0.32,1.275); pointer-events: auto; touch-action: none; }
        .modal-box-bottom { padding: 4vmin; width: 85%; max-width: 400px; max-height: 95%; text-align: center; border: 4px solid #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.4); border-radius: 25px; position: relative; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }
        
        @keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .epic-text { color: #fff; font-size: 8vmin; margin: 0 0 2vmin 0; font-weight: 900; text-transform: uppercase; filter: drop-shadow(0 3px 0 #4facfe); }
        .sub-text { color: #333; font-size: 3.5vmin; font-weight: 800; margin-bottom: 4vmin; position: relative; z-index: 1; text-shadow: 1px 1px 0 rgba(255,255,255,0.8); }
        .fullscreen-view { position: fixed; top:0; left:0; width:100%; height:100vh; height:100dvh; background: rgba(0,0,0,0.85); z-index: 9999999; display: flex; justify-content: center; align-items: center; pointer-events: auto; touch-action: none; }
        .fullscreen-img { max-width: 95%; max-height: 95%; object-fit: contain; border-radius: 15px; border: 3px solid #fff; box-shadow: 0 0 30px rgba(255,255,255,0.4); }
        
        .anime-title { font-size: 10vmin; margin-bottom: 4vh; margin-top: 4vh; background: linear-gradient(to right, #8c5a00, #d8a331, #f7d774, #fff1b2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; letter-spacing: 2px; line-height: 1.1; text-align: center; filter: drop-shadow(0px 4px 0px rgba(255,255,255,0.9)); animation: bounce 2s ease-in-out infinite; }
        @keyframes bounce { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.02); } }
        @keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
        .snap-anim { animation: snapPulse .4s ease-out; }
        @keyframes snapPulse { 0% { filter: brightness(1) drop-shadow(0 0 0 #fff); } 50% { filter: brightness(1.3) drop-shadow(0 0 15px #4facfe); z-index:99; } 100% { filter: brightness(1) drop-shadow(1px 2px 2px rgba(0,0,0,0.3)); } }
        
        .shuffle-btn { position: absolute; background: linear-gradient(90deg, #b8860b 0%, #f0c44c 55%, #d99a1a 100%); border: 2px solid #fff; border-radius: 15px; color: white; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 0 #8a5c00, 0 5px 10px rgba(0,0,0,0.3); cursor: pointer; z-index: 150; text-shadow: 1px 1px 0 #8a5c00; transition: 0.1s; font-weight: 900; letter-spacing: 1px; font-size: 3.8vmin; }
        .shuffle-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #5b108f; }
        
        .win-btn { background: linear-gradient(135deg, #d39a20 0%, #f5cf64 55%, #c78208 100%); border: 2px solid #fff; border-radius: 30px; color: white; font-size: 4.5vmin; font-weight: 900; padding: 2.5vmin 4vmin; margin-top: 2vmin; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 0 #8c5a00; transition: 0.1s; flex-shrink: 0; width: 100%; text-shadow: 1px 1px 0 #8c5a00; }
        .win-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #8c5a00; }


:root { --app-height: 100vh; }
html { height: 100%; background: #e0f2fe; }
body { min-height: 100%; position: fixed; inset: 0; overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
button, input { font: inherit; }
button { -webkit-appearance: none; appearance: none; }
img { -webkit-user-drag: none; user-drag: none; }
#game-ui-container { height: var(--app-height); padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); }
.top-header { width: 100%; height: calc(10vh + env(safe-area-inset-top)); min-height: 58px; padding-top: env(safe-area-inset-top); padding-left: max(3vmin, env(safe-area-inset-left)); padding-right: max(3vmin, env(safe-area-inset-right)); }
.header-controls { display:flex; align-items:center; gap:1.2vmin; flex-shrink:0; margin-left:auto; position:relative; z-index:2; }
.btn-icon.lang-btn { min-width: 7vh; font-size: 2.3vmin; font-weight: 900; text-transform: uppercase; }
.loading-screen-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#loading-screen { position: fixed; inset: 0; z-index: 20000000; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 20% 20%,#ffd9f7,transparent 45%),radial-gradient(circle at 80% 80%,#aee9ff,transparent 50%),#e8fff4; transition: opacity .25s ease, visibility .25s ease; padding:24px; }
.loading-card { width:min(86vw,420px); padding:32px 24px; border-radius:28px; border:4px solid #fff; background:rgba(255,255,255,.88); box-shadow:0 16px 45px rgba(0,0,0,.2); text-align:center; }
.loading-dino { font-size:72px; animation:bounce 1.4s ease-in-out infinite; }
.loading-title { margin:12px 0 18px; font-size:24px; font-weight:900; }
.loading-track { height:18px; border-radius:999px; background:#d8e4ef; overflow:hidden; border:2px solid #fff; }
.loading-bar { height:100%; width:0; background:linear-gradient(90deg,#43e97b,#38f9d7); transition:width .15s linear; }
.loading-percent { margin-top:10px; font-size:18px; font-weight:900; }
.system-pause { position:fixed; inset:0; z-index:19000000; display:none; background:rgba(0,0,0,.56); align-items:center; justify-content:center; color:#fff; font-size:5vmin; font-weight:900; text-align:center; padding:10vw; }
body.user-visible-paused .system-pause { display:flex; }
body.game-paused #game-ui-container { pointer-events:none; }
.ad-warning { position:fixed; inset:0; z-index:21000000; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,.92); color:#fff; text-align:center; padding:10vw; }
.ad-warning-card { max-width:460px; border:3px solid #fff; border-radius:24px; padding:28px; background:linear-gradient(135deg,#4facfe,#7c4dff); box-shadow:0 18px 55px rgba(0,0,0,.35); }
.ad-warning-title { font-size:clamp(24px,7vmin,42px); font-weight:900; margin-bottom:12px; }
.ad-warning-text { font-size:clamp(16px,4.2vmin,24px); font-weight:800; }
.gallery-empty { margin:10vh auto; text-align:center; font-size:4vmin; font-weight:900; color:#334155; }
.upload-note { width:90%; max-width:500px; text-align:center; color:#475569; font-size:2.8vmin; font-weight:800; margin-top:-.5vh; }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }
@supports not (aspect-ratio: 9 / 16) { .gallery-item { height:0; padding-bottom:177.777%; } }
@media (max-height: 540px) and (orientation: landscape) {
  .top-header { height:16vh; min-height:48px; }
  .anime-title { font-size:8vmin; margin:2vh 0; }
  .content-area { padding:1vmin; }
}

@media (max-width: 640px) {
  .header-title { width: min(54vw, 360px); font-size: 5.1vmin; }
}


/* Release 2026-08: strict mobile viewport protection and title-free dino menu */
:root { --app-width: 100vw; }
html, body { width: 100%; max-width: 100%; overflow: hidden; overscroll-behavior: none; }
body { touch-action: none; }
#game-ui-container {
  position: fixed;
  inset: 0 auto auto 0;
  width: min(100%, var(--app-width));
  max-width: 100%;
  height: var(--app-height);
  max-height: 100%;
  overflow: hidden;
  contain: layout paint size;
}
.top-header, .content-area, .modal-overlay-bottom { width: 100%; max-width: 100%; }
.modal-overlay, .fullscreen-view { width: 100%; max-width: 100%; height: var(--app-height); }
.content-area { overscroll-behavior: contain; }
.piece { will-change: left, top, transform; }

.menu-content {
  justify-content: center !important;
  gap: clamp(10px, 1.6vh, 22px);
  padding-top: clamp(8px, 1.5vh, 20px);
  padding-bottom: max(2vh, env(safe-area-inset-bottom));
}
.menu-dino-hero {
  position: relative;
  width: min(76vw, 360px);
  height: min(43vh, 500px);
  min-height: 230px;
  max-height: 52vh;
  flex: 0 1 auto;
  border-radius: 34px;
  border: 4px solid rgba(255,255,255,.96);
  box-shadow: 0 18px 40px rgba(28,54,76,.28), inset 0 0 0 2px rgba(255,255,255,.35);
  overflow: hidden;
  background-image:
    linear-gradient(to bottom, rgba(15,23,42,.02) 55%, rgba(15,23,42,.42) 100%),
    url('assets/ui/menu-dino.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.menu-dino-hero::before,
.menu-dino-hero::after {
  content: '';
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(224,242,254,.98);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.92);
}
.menu-dino-hero::before { left: 50%; top: -31px; transform: translateX(-50%); }
.menu-dino-hero::after { right: -31px; top: 42%; }
.menu-jigsaw-glow {
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(circle at 68% 28%, rgba(255,255,255,.30), transparent 34%);
}
.loading-dino-art {
  width: 112px;
  height: 112px;
  margin: 0 auto 8px;
  border-radius: 28px;
  border: 4px solid #fff;
  background-image: url('assets/ui/menu-dino.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
@media (max-height: 700px) {
  .menu-dino-hero { height: 37vh; min-height: 180px; width: min(62vw, 300px); }
  .menu-content { gap: 6px; }
  .menu-content .btn { margin: .6vh auto; padding-top: 1.1vh; padding-bottom: 1.1vh; }
}

/* 2026-08 icon branding: the catalog icon is also the in-game logo. */
.menu-game-icon {
  display: block;
  width: min(58vw, 300px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  flex: 0 1 auto;
  border: 0;
  border-radius: 0;
  box-shadow: 0 16px 34px rgba(28,54,76,.26);
  user-select: none;
  -webkit-user-drag: none;
}
.loading-dino-art {
  border-radius: 0 !important;
  background-image: url('assets/ui/game-icon.png') !important;
  background-position: center center !important;
}
@media (max-height: 700px) {
  .menu-game-icon { width: min(44vw, 230px); }
}

/* Result layout follows the gameplay slots instead of floating over the puzzle. */
.win-modal-card {
  position: fixed;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 2vw, 20px);
  box-sizing: border-box;
  padding: clamp(10px, 2vmin, 22px);
  background: linear-gradient(135deg, #c68b1a, #f3cf6e);
  border: 4px solid #fff;
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(78,20,52,.28);
  z-index: 9999999;
  text-align: left;
  overflow: hidden;
}
.win-modal-landscape { position: fixed; inset: 0; z-index: 9999999; pointer-events: none; }
.win-side-card {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: clamp(16px, 2.6vmin, 26px);
  border: 4px solid #fff;
  border-radius: 22px;
  box-shadow: 0 14px 35px rgba(78,20,52,.22);
  overflow: hidden;
  pointer-events: auto;
}
.win-side-card-copy,
.win-side-card-action { background: linear-gradient(135deg, #c68b1a, #f3cf6e); }
.win-side-card-copy { text-align: center; }
.win-side-copy { width: 100%; text-align: center; }
.win-side-card .win-modal-title { margin-bottom: 10px; }
.win-side-card .win-modal-subtitle { font-size: clamp(16px, 2.3vmin, 22px); }
.win-side-button { width: min(80%, 280px) !important; margin: 0 auto !important; font-size: clamp(22px, 3.2vmin, 34px) !important; padding: 14px 24px !important; }
.win-side-card-action { justify-content: center; }
.win-side-card-action::before, .win-side-card-copy::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)); pointer-events: none; }
.win-side-card-action .win-modal-button { max-width: 320px; background: linear-gradient(135deg, #8d5b00 0%, #c9870d 48%, #f1c146 100%); box-shadow: 0 5px 0 #6f4500, 0 10px 18px rgba(0,0,0,.18); }
.win-modal-copy { min-width: 0; overflow: hidden; }
.win-modal-title {
  margin: 0 0 5px;
  color: #fff;
  font-size: clamp(17px, 3.4vmin, 34px);
  font-weight: 900;
  line-height: 1;
  white-space: normal;
  overflow: visible;
  filter: drop-shadow(0 3px 0 #9a6300);
}
.win-modal-subtitle {
  margin: 0;
  color: #333;
  font-size: clamp(12px, 2vmin, 19px);
  font-weight: 800;
  line-height: 1.15;
  white-space: normal;
  overflow: visible;
  text-shadow: 1px 1px 0 rgba(255,255,255,.8);
}
.win-modal-card .win-modal-button {
  width: auto;
  min-width: clamp(88px, 19vw, 150px);
  max-width: 34%;
  margin: 0;
  padding: clamp(8px, 1.7vmin, 14px) clamp(12px, 2.5vmin, 24px);
  font-size: clamp(15px, 2.8vmin, 26px);
  line-height: 1;
  white-space: nowrap;
  align-self: center;
}
@media (max-width: 440px) {
  .win-modal-card { gap: 6px; padding: 8px 10px; }
  .win-modal-title { font-size: clamp(15px, 5vw, 20px); }
  .win-modal-subtitle { font-size: clamp(10px, 3.4vw, 14px); }
  .win-modal-card .win-modal-button { min-width: 82px; max-width: 36%; padding: 8px 10px; font-size: clamp(13px, 4vw, 17px); }
}
.board.board-completed { background-color: rgba(255,255,255,0.12); border-style: solid; border-color: rgba(255,255,255,0.92); }
.board.board-completed .board-hint { display: none !important; }


/* Playgama monetization + bilingual release UI */
.lang-btn {
  font-size:clamp(13px,2.8vmin,18px) !important;
  font-weight:1000 !important;
  letter-spacing:.03em;
}
.game-dialog-overlay {
  position:fixed;
  inset:0;
  z-index:22000000;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:rgba(8,18,33,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:dialogFade .18s ease-out;
}
.game-dialog-card {
  width:min(88vw,440px);
  max-height:min(82vh,650px);
  overflow:auto;
  box-sizing:border-box;
  padding:clamp(20px,4vmin,32px);
  border:3px solid rgba(255,255,255,.96);
  border-radius:28px;
  background:linear-gradient(165deg,rgba(255,255,255,.98),rgba(231,245,255,.98));
  box-shadow:0 25px 70px rgba(0,0,0,.38),inset 0 0 0 2px rgba(255,255,255,.7);
  text-align:center;
  color:#182238;
  animation:dialogPop .22s cubic-bezier(.2,.9,.3,1.15);
}
.game-dialog-icon,.rating-dino { font-size:clamp(48px,12vmin,76px); line-height:1; margin-bottom:10px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.15)); }
.game-dialog-title { font-size:clamp(23px,6vmin,34px); line-height:1.05; font-weight:1000; margin:2px 0 12px; }
.game-dialog-text { font-size:clamp(16px,4vmin,21px); line-height:1.35; font-weight:750; color:#46536a; margin:0 auto 20px; }
.game-dialog-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.game-dialog-btn,.rating-later {
  min-height:50px;
  border:0;
  border-radius:16px;
  padding:12px 15px;
  font:inherit;
  font-size:clamp(14px,3.5vmin,18px);
  font-weight:1000;
  cursor:pointer;
  touch-action:manipulation;
}
.game-dialog-btn.primary { color:#fff; background:linear-gradient(135deg,#7c3aed,#4f46e5); box-shadow:0 5px 0 #3730a3; }
.game-dialog-btn.secondary,.rating-later { color:#344054; background:#e7eef7; box-shadow:0 4px 0 #c7d2df; }
.rating-card { width:min(92vw,470px); background:linear-gradient(165deg,#fffdf6,#fff1c9 58%,#ffe6a0); border-color:#fff7d8; }
.rating-card .game-dialog-title { color:#6b3e00; }
.rating-stars { display:flex; justify-content:center; align-items:center; gap:clamp(3px,1.2vw,8px); margin:7px 0 22px; }
.rating-star {
  border:0;
  background:transparent;
  padding:2px;
  color:#ffb300;
  font-size:clamp(39px,10vw,58px);
  line-height:1;
  text-shadow:0 4px 0 #c47c00,0 7px 12px rgba(98,61,0,.18);
  cursor:pointer;
  transform-origin:center bottom;
  touch-action:manipulation;
}
.rating-star:active { transform:scale(.88); }
.rating-later { width:100%; color:#6a4b19; background:rgba(255,255,255,.72); box-shadow:0 4px 0 rgba(140,91,7,.2); }
.game-toast {
  position:fixed;
  left:50%;
  bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px));
  z-index:23000000;
  transform:translateX(-50%);
  width:max-content;
  max-width:min(88vw,520px);
  box-sizing:border-box;
  padding:13px 18px;
  border:2px solid rgba(255,255,255,.95);
  border-radius:999px;
  background:rgba(21,32,52,.94);
  color:#fff;
  font-size:clamp(14px,3.6vmin,18px);
  font-weight:900;
  text-align:center;
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  animation:toastIn .2s ease-out;
}
.platform-banner-active #game-ui-container { padding-bottom:64px; box-sizing:border-box; }
.platform-banner-active .content-area { padding-bottom:max(70px,calc(64px + env(safe-area-inset-bottom))); }
@media (orientation:landscape) and (max-height:560px) {
  .game-dialog-card { width:min(72vw,520px); padding:14px 20px; }
  .game-dialog-icon,.rating-dino { font-size:38px; margin-bottom:4px; }
  .game-dialog-title { font-size:23px; margin-bottom:7px; }
  .game-dialog-text { font-size:15px; margin-bottom:10px; }
  .rating-star { font-size:38px; }
  .rating-stars { margin:3px 0 10px; }
  .game-dialog-btn,.rating-later { min-height:42px; padding:8px 12px; }
}
@keyframes dialogFade { from { opacity:0; } to { opacity:1; } }
@keyframes dialogPop { from { opacity:0; transform:scale(.9) translateY(12px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes toastIn { from { opacity:0; transform:translate(-50%,12px) scale(.96); } to { opacity:1; transform:translate(-50%,0) scale(1); } }


/* Rewarded dinosaur unlock progression */
.gallery-item.puzzle-locked{border-color:rgba(255,255,255,.88);box-shadow:0 8px 18px rgba(0,0,0,.30)}
.gallery-item.puzzle-locked .puzzle-bg{filter:brightness(.42) saturate(.65) blur(1.5px);transform:scale(1.025)}
.puzzle-lock-overlay{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(5px,1.2vmin,10px);padding:12px 7px;box-sizing:border-box;text-align:center;color:#fff;background:linear-gradient(180deg,rgba(8,17,31,.10),rgba(8,17,31,.58));text-shadow:0 2px 5px rgba(0,0,0,.85)}
.puzzle-lock-icon{font-size:clamp(24px,6.5vmin,48px);filter:drop-shadow(0 4px 5px rgba(0,0,0,.45))}
.puzzle-lock-label{font-size:clamp(9px,2.15vmin,15px);font-weight:1000;line-height:1.05;letter-spacing:.035em}
.puzzle-lock-ad{max-width:94%;padding:5px 7px;border-radius:9px;font-size:clamp(8px,1.8vmin,12px);font-weight:1000;line-height:1;color:#2b1600;background:linear-gradient(135deg,#ffe082,#ffb300);text-shadow:none;box-shadow:0 3px 0 #b77800,0 5px 9px rgba(0,0,0,.24)}
.unlock-dino-card{max-width:min(92vw,420px)}
.unlock-preview{width:min(44vw,170px);aspect-ratio:9/16;margin:0 auto 12px;border-radius:16px;background-size:cover;background-position:center;border:3px solid rgba(255,255,255,.92);box-shadow:0 9px 22px rgba(0,0,0,.25)}

/* Playgama QA mobile header fix: controls must never overlap localized titles. */
@media (max-width: 640px) {
  .top-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(5px, 1.4vw, 9px);
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  .header-title {
    position: static;
    left: auto;
    transform: none;
    width: auto;
    min-width: 0;
    padding: 0 2px;
    font-size: clamp(15px, 4.5vw, 21px);
    letter-spacing: .04em;
    line-height: 1.05;
    justify-self: stretch;
  }
  .header-controls {
    margin-left: 0;
    gap: 5px;
    justify-self: end;
  }
  .btn-back {
    height: clamp(42px, 5.2vh, 54px);
    padding: 0 clamp(8px, 2.2vw, 13px);
    font-size: clamp(12px, 3.2vw, 16px);
    letter-spacing: 0;
  }
  .btn-icon {
    height: clamp(42px, 5.2vh, 54px);
    min-width: clamp(42px, 5.2vh, 54px);
    padding: 0 7px;
  }
  .btn-icon.lang-btn {
    min-width: clamp(48px, 12vw, 58px);
    font-size: clamp(12px, 3.3vw, 16px) !important;
  }
}


/* Language selector lives only on the main menu. */
.menu-language-btn {
  width: auto;
  min-width: 118px;
  max-width: 220px;
  margin-top: 0.3vh;
  padding-left: clamp(18px, 5vw, 34px);
  padding-right: clamp(18px, 5vw, 34px);
  background: linear-gradient(90deg, #f6d365 0%, #fda085 100%);
  box-shadow: 0 4px 0 #e67e22, 0 5px 10px rgba(0,0,0,0.2);
  text-shadow: 1px 1px 0 #c56a12;
  font-size: clamp(15px, 3.2vmin, 20px) !important;
  letter-spacing: .08em;
}
.menu-language-btn:active { box-shadow: 0 0 0 #e67e22; }
@media (max-height: 700px) {
  .menu-language-btn { margin-top: 0; padding-top: .8vh; padding-bottom: .8vh; }
}


/* QA 2026-08: login is exposed in the main menu; sound uses the same dimensions as Play/Gallery. */
.menu-content .menu-sound-btn,
.menu-content .menu-auth-btn,
.menu-content .menu-language-btn {
  width: 85%;
  max-width: 400px;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5vh 3vw;
  min-height: 0;
  font-size: 3.8vmin !important;
  letter-spacing: 2px;
  border-radius: 30px;
}
.menu-content .menu-sound-btn {
  background: linear-gradient(90deg, #f6d365 0%, #fda085 100%);
  box-shadow: 0 4px 0 #e67e22, 0 5px 10px rgba(0,0,0,0.2);
  text-shadow: 1px 1px 0 #c56a12;
}
.menu-content .menu-auth-btn {
  background: linear-gradient(90deg, #8b5cf6 0%, #6366f1 100%);
  box-shadow: 0 4px 0 #4f46e5, 0 5px 10px rgba(0,0,0,0.2);
  text-shadow: 1px 1px 0 #4338ca;
}
.menu-content .menu-auth-btn:disabled { opacity: .65; cursor: wait; }
.menu-content .menu-language-btn {
  background: linear-gradient(90deg, #f6d365 0%, #fda085 100%);
  box-shadow: 0 4px 0 #e67e22, 0 5px 10px rgba(0,0,0,0.2);
  text-shadow: 1px 1px 0 #c56a12;
}
@media (max-height: 760px) {
  .menu-content .btn { margin: .45vh auto; padding-top: .95vh; padding-bottom: .95vh; }
  .menu-content .menu-sound-btn,
  .menu-content .menu-auth-btn,
  .menu-content .menu-language-btn { padding-top: .95vh; padding-bottom: .95vh; }
  .menu-game-icon { width: min(38vw, 190px); }
}


/* 2026-08: main-menu language and sound live in the top corners only. */
.menu-top-header {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  height: calc(8.5vh + env(safe-area-inset-top));
  min-height: 54px;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}
.menu-top-header .header-title { display: none; }
.menu-top-header .header-controls { margin-left: auto; }
.menu-top-header .menu-corner-btn {
  width: clamp(48px, 7.2vh, 62px) !important;
  min-width: clamp(48px, 7.2vh, 62px) !important;
  height: clamp(44px, 6.4vh, 56px) !important;
  min-height: 44px;
  padding: 0 10px !important;
  margin: 0 !important;
  border-radius: 16px !important;
  border: 2px solid #fff !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: clamp(16px, 2.7vmin, 22px) !important;
  line-height: 1;
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%) !important;
  box-shadow: 0 3px 0 #e67e22, 0 5px 10px rgba(0,0,0,.18) !important;
  text-shadow: 1px 1px 0 #c56a12 !important;
}
.menu-top-header .menu-language-btn {
  text-transform: uppercase;
  font-weight: 900;
}
.menu-top-header .menu-sound-btn {
  font-size: clamp(19px, 3vmin, 25px) !important;
}
.menu-content .menu-sound-btn,
.menu-content .menu-language-btn {
  display: none !important;
}
@media (max-width: 430px) {
  .menu-top-header { height: calc(7.5vh + env(safe-area-inset-top)); min-height: 50px; }
  .menu-top-header .menu-corner-btn {
    width: 50px !important;
    min-width: 50px !important;
    height: 44px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
  }
  .menu-top-header .menu-sound-btn { font-size: 20px !important; }
}