:root {
  --bg:#09120f;
  --panel:#101d18;
  --panel2:#162720;
  --text:#f2f1e8;
  --muted:#b8c4ba;
  --accent:#d7b56d;
  --line:rgba(255,255,255,.14);
  --radius:28px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:Arial,Helvetica,sans-serif; }
button { font:inherit; }
.app { width:100vw; height:100vh; display:flex; flex-direction:column; background:
  radial-gradient(circle at 80% 10%, rgba(215,181,109,.10), transparent 30%),
  linear-gradient(160deg,#08110e,#0e1c17 60%,#08110e); }
.topbar { height:11vh; min-height:92px; display:flex; align-items:center; gap:24px; padding:0 3.2vw; border-bottom:1px solid var(--line); background:rgba(7,15,12,.88); }
.brand { display:flex; align-items:center; gap:18px; flex:1; }
.brand-mark { width:54px; height:54px; border:1px solid var(--accent); display:grid; place-items:center; color:var(--accent); transform:rotate(45deg); }
.brand-mark::first-letter { transform:rotate(-45deg); }
.brand-title { font-size:clamp(18px,1.25vw,34px); letter-spacing:.08em; font-weight:700; }
.brand-subtitle { color:var(--muted); font-size:clamp(12px,.85vw,22px); margin-top:4px; }
.icon-btn,.back-btn,.lang,.primary-btn,.secondary-btn,.menu-card,.species-card { cursor:pointer; border:none; color:var(--text); }
.icon-btn { width:62px; height:62px; border-radius:50%; background:var(--panel2); font-size:34px; }
.hidden { display:none !important; }
.lang-switch { display:flex; gap:8px; }
.lang { min-width:58px; padding:13px 16px; border-radius:999px; background:transparent; border:1px solid var(--line); color:var(--muted); }
.lang.active { background:var(--accent); color:#16120a; border-color:var(--accent); font-weight:700; }
#screen { flex:1; min-height:0; overflow:auto; scrollbar-width:none; }
#screen::-webkit-scrollbar{display:none}
.hero { min-height:36vh; position:relative; margin:2.2vh 3.2vw 1.6vh; border-radius:var(--radius); overflow:hidden;
  background:
    linear-gradient(90deg, rgba(7,14,12,.95) 0%, rgba(7,14,12,.58) 46%, rgba(7,14,12,.12) 72%),
    radial-gradient(circle at 75% 45%, rgba(219,187,112,.22), transparent 22%),
    linear-gradient(135deg,#264938,#102118 65%,#674f2f);
}
.hero::after {
  content:""; position:absolute; inset:0; opacity:.32;
  background-image:
    linear-gradient(120deg, transparent 0 58%, rgba(255,255,255,.13) 58.3% 58.6%, transparent 59%),
    linear-gradient(30deg, transparent 0 68%, rgba(255,255,255,.07) 68.2% 68.5%, transparent 69%);
}
.hero-content { position:relative; z-index:2; padding:4.6vh 4vw; max-width:62%; }
.eyebrow { color:var(--accent); letter-spacing:.18em; font-size:clamp(12px,.8vw,20px); font-weight:700; }
.hero h1,.page h1 { margin:.8vh 0 1.2vh; font-size:clamp(42px,4.2vw,104px); line-height:.97; letter-spacing:-.035em; }
.hero p { color:var(--muted); font-size:clamp(18px,1.25vw,32px); }
.menu-grid { padding:0 3.2vw 3vh; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2vw; }
.menu-card { min-height:18vh; text-align:left; padding:2vw; border-radius:24px; background:linear-gradient(145deg,rgba(26,45,37,.96),rgba(15,28,23,.96)); border:1px solid var(--line); position:relative; }
.menu-card:active,.species-card:active { transform:scale(.985); }
.menu-card:hover { border-color:rgba(215,181,109,.55); }
.card-no { color:var(--accent); font-weight:700; letter-spacing:.14em; }
.menu-card h2 { font-size:clamp(24px,2vw,50px); margin:2vh 0 .6vh; }
.menu-card p { margin:0; color:var(--muted); font-size:clamp(14px,1vw,26px); }
.page { padding:3vh 3.2vw 4vh; }
.page-head { display:flex; align-items:flex-start; gap:2.4vw; margin-bottom:3vh; }
.page-head > div { flex:1; }
.page-head h1 { font-size:clamp(44px,3.8vw,92px); margin:.4vh 0; }
.back-btn { padding:16px 24px; border-radius:999px; background:var(--panel2); border:1px solid var(--line); font-size:clamp(16px,1vw,26px); }
.intro-card { display:grid; grid-template-columns:1.1fr .9fr; gap:1.5vw; }
.text-panel,.visual-panel { min-height:52vh; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel); padding:2.3vw; }
.text-panel p { color:var(--muted); line-height:1.55; font-size:clamp(20px,1.35vw,34px); }
.visual-panel { background:
  linear-gradient(145deg,rgba(9,17,14,.15),rgba(9,17,14,.65)),
  radial-gradient(circle at 70% 30%,rgba(215,181,109,.35),transparent 22%),
  linear-gradient(135deg,#3f7157,#172d23 60%,#9b7a45); }
.species-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3vw; }
.species-card { min-height:28vh; border-radius:24px; overflow:hidden; background:var(--panel); border:1px solid var(--line); padding:0; text-align:left; }
.species-thumb { height:18vh; position:relative; display:flex; align-items:flex-end; padding:1.2vw; background:
  radial-gradient(circle at 68% 36%,rgba(215,181,109,.34),transparent 22%),
  linear-gradient(135deg,#375f4b,#14281f 65%,#695133); }
.species-card:nth-child(2n) .species-thumb { background:
  radial-gradient(circle at 35% 30%,rgba(255,255,255,.15),transparent 20%),
  linear-gradient(135deg,#223b4c,#16262d 60%,#73664b); }
.species-symbol { font-size:clamp(54px,5vw,118px); opacity:.88; filter:grayscale(.2); }
.species-info { padding:1.35vw; }
.species-info h3 { margin:0 0 .6vh; font-size:clamp(24px,1.8vw,44px); }
.species-info p { margin:0; color:var(--muted); font-size:clamp(15px,1vw,25px); }
.detail-layout { display:grid; grid-template-columns:1.08fr .92fr; gap:1.5vw; }
.detail-image { min-height:58vh; border-radius:var(--radius); border:1px solid var(--line); position:relative; display:flex; align-items:flex-end; padding:2vw;
  background:
    radial-gradient(circle at 65% 35%,rgba(215,181,109,.34),transparent 22%),
    linear-gradient(135deg,#386048,#16291f 62%,#795d37); }
.species-badge { font-size:clamp(70px,8vw,190px); }
.detail-copy { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:2.4vw; }
.detail-copy > p { color:var(--muted); line-height:1.55; font-size:clamp(19px,1.25vw,31px); margin-top:0; }
.fact-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:2vh 0; }
.fact { background:var(--panel2); border-radius:18px; padding:18px; border:1px solid var(--line); }
.fact b { display:block; color:var(--accent); margin-bottom:6px; font-size:clamp(13px,.8vw,20px); }
.fact span { font-size:clamp(16px,1vw,25px); }
.detail-actions { display:flex; gap:12px; margin-top:2vh; }
.primary-btn,.secondary-btn { flex:1; padding:20px; border-radius:18px; font-weight:700; font-size:clamp(17px,1vw,25px); }
.primary-btn { background:var(--accent); color:#18130b; }
.secondary-btn { background:transparent; border:1px solid var(--line); }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2vw; }
.gallery-item { aspect-ratio:16/10; border-radius:22px; border:1px solid var(--line); background:
  radial-gradient(circle at 70% 30%,rgba(215,181,109,.28),transparent 18%),
  linear-gradient(135deg,#385d48,#14251d 65%,#70583a); }
.video-stage { min-height:55vh; border-radius:var(--radius); border:1px solid var(--line); display:grid; place-items:center; text-align:center; background:#050807; }
.video-stage .play { width:110px; height:110px; border-radius:50%; display:grid; place-items:center; margin:auto; background:var(--accent); color:#1c160b; font-size:44px; padding-left:8px; }
.video-stage h2 { font-size:clamp(28px,2vw,50px); }
.video-stage p { color:var(--muted); font-size:clamp(16px,1vw,24px); }
.modal { position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.82); display:grid; place-items:center; padding:4vw; }
.modal-card { width:min(1500px,92vw); min-height:65vh; border-radius:28px; background:#0d1713; border:1px solid var(--line); position:relative; padding:2vw; }
.modal-close { position:absolute; right:20px; top:18px; width:56px; height:56px; border-radius:50%; border:none; background:var(--panel2); color:white; font-size:34px; }
.modal-showcase { min-height:55vh; border-radius:20px; display:grid; place-items:center; font-size:clamp(100px,13vw,280px); background:
  radial-gradient(circle at 70% 30%,rgba(215,181,109,.3),transparent 20%),
  linear-gradient(135deg,#355b46,#14261e 65%,#6d5536); }
.idle-bar { height:5px; background:transparent; }
.idle-progress { height:100%; width:100%; transform-origin:left; background:var(--accent); opacity:.65; }
@media (orientation:portrait) {
  .menu-grid,.species-grid,.gallery-grid { grid-template-columns:repeat(2,1fr); }
  .intro-card,.detail-layout { grid-template-columns:1fr; }
  .hero-content { max-width:85%; }
}

/* Photo-backed demo */
.species-thumb {
  background-size: cover !important;
  background-position: center !important;
}
.detail-image {
  background-size: cover !important;
  background-position: center !important;
}
.gallery-item {
  background-size: cover !important;
  background-position: center !important;
}
.modal-showcase {
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color:#050807 !important;
}