:root{
  --ink:#151513;
  --ink-soft:#5c5c5a;
  --hair: rgba(0,0,0,0.1);
  --hair-dark: rgba(255,255,255,0.14);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; height:100%; overscroll-behavior-y:none; }
body{
  font-family:'Noto Sans JP', sans-serif;
  color:#fff;
  background:#0e0e0d;
}
button{ font-family:inherit; }

.app{
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  position:relative;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(140% 50% at 50% -10%, #2c2c2a 0%, transparent 60%),
    radial-gradient(90% 60% at 100% 110%, #1c1c1a 0%, transparent 55%),
    linear-gradient(180deg, #0e0e0d 0%, #060606 55%, #000000 100%);
  background-attachment:fixed;
  overflow:hidden;
}
.app::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.35; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:3px 3px;
}
.app-header, .place, .tideswitch, .content, .tabbar{ position:relative; z-index:1; }

/* ---------- header ---------- */
.app-header{
  padding:calc(env(safe-area-inset-top) + 14px) 20px 4px;
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand .mark{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(150deg, #4a4a47, #232220 55%, #0a0a09);
  border:1px solid rgba(255,255,255,.14);
  position:relative;
}
.brand .mark svg{ position:absolute; inset:0; margin:auto; width:20px; height:20px; }
.brand .wordmark{ font-family:'Shippori Mincho', serif; font-weight:800; font-size:17px; letter-spacing:.02em; }
.brand .wordmark small{ display:block; font-family:'Noto Sans JP',sans-serif; font-size:9.5px; letter-spacing:.18em; color:#c7c6c2; font-weight:700; }

.cart-btn{
  position:relative; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:17px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.cart-count{
  position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 3px;
  border-radius:9px; background:#f0efec; color:#151513; font-size:9.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}

.place{ padding:6px 20px 2px; font-size:11.5px; color:#d8d7d3; flex-shrink:0; }
.place b{ color:#fff; font-weight:800; }

/* ---------- tab switch ---------- */
.tideswitch{
  margin:14px 20px 0; position:relative; height:46px; border-radius:23px;
  background:rgba(255,255,255,.045); backdrop-filter:blur(6px);
  display:flex; padding:3px; flex-shrink:0;
  border:1px solid rgba(255,255,255,.1);
}
.tideswitch .thumb{
  position:absolute; top:3px; left:3px; width:calc(50% - 3px); height:calc(100% - 6px);
  border-radius:20px; background:linear-gradient(120deg, #f4f3f0, #d9d8d4 55%, #b8b7b2);
  box-shadow:0 6px 16px -4px rgba(0,0,0,.65);
  transition:transform .38s cubic-bezier(.65,0,.35,1);
}
.tideswitch.ec .thumb{ transform:translateX(100%); background:linear-gradient(120deg,#3a3a38,#232220 55%,#0c0c0b); border:1px solid rgba(255,255,255,.12); }
.tideswitch button{
  flex:1; position:relative; z-index:2; border:none; background:transparent;
  font-size:12.5px; font-weight:700; color:#e6e5e1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px; transition:color .3s;
}
.tideswitch button.active{ color:#151513; }
.tideswitch.ec button.active{ color:#f2f1ee; }

/* ---------- content ---------- */
.content{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 20px calc(100px + env(safe-area-inset-bottom)); }

.section-label{
  font-family:'Shippori Mincho', serif; font-weight:800; font-size:15px; margin:18px 0 10px; color:#fff;
  display:flex; align-items:baseline; gap:8px;
}
.section-label .n{ font-size:10px; font-family:'Noto Sans JP',sans-serif; font-weight:700; color:#c9c8c4; letter-spacing:.1em; }

.chiprow{ display:flex; gap:7px; overflow-x:auto; padding-bottom:6px; margin-bottom:2px; scrollbar-width:none; }
.chiprow::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0; font-size:12px; font-weight:700; padding:8px 15px; border-radius:16px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); color:#eceae6;
  white-space:nowrap; cursor:pointer;
}
.chip.on{ background:#f0efec; color:#151513; border-color:#f0efec; }

/* ---------- video grid ---------- */
.vgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.vcard{
  border-radius:14px; overflow:hidden; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); cursor:pointer;
  transition:transform .15s ease;
}
.vcard:active{ transform:scale(.97); }
.thumb-img{
  height:96px; position:relative; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff;
  filter:grayscale(1) contrast(1.05);
}
.thumb-img .dur{
  position:absolute; bottom:5px; right:6px; font-size:9px; background:rgba(0,0,0,.55); color:#fff;
  padding:2px 5px; border-radius:4px; font-weight:700; filter:none;
}
.thumb-img .play{
  position:relative; z-index:2; width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.22); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; border:1.5px solid rgba(255,255,255,.65); color:#fff;
}
.g1{ background:linear-gradient(140deg,#7a7975,#242320); }
.g2{ background:linear-gradient(140deg,#4a4946,#0f0f0e); }
.g3{ background:linear-gradient(140deg,#94938f,#3f3e3b); }
.g4{ background:linear-gradient(140deg,#65645f,#1c1b19); }
.vinfo{ padding:9px 10px 11px; }
.vinfo .vtitle{ font-size:11.5px; font-weight:700; line-height:1.4; margin-bottom:3px; color:#fff; }
.vinfo .vmeta{ font-size:9.5px; color:#c6c5c1; }

.empty-state{ font-size:12px; color:#d8d7d3; text-align:center; padding:40px 10px; line-height:1.8; }
.hide{ display:none !important; }

/* ---------- EC ---------- */
.ec-hero{ border-radius:16px; padding:16px; background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); margin-bottom:12px; }
.ec-hero .eb{ font-size:10px; font-weight:700; letter-spacing:.15em; color:#c9c8c4; margin-bottom:4px; }
.ec-hero h3{ margin:0 0 5px; font-family:'Shippori Mincho',serif; font-size:16px; font-weight:800; line-height:1.5; color:#fff; }
.ec-hero p{ margin:0; font-size:11.5px; color:#b8b7b3; line-height:1.7; }

.pgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.pcard{ background:linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.1); border-radius:14px; overflow:hidden; }
.pimg{ height:88px; display:flex; align-items:center; justify-content:center; font-size:28px; position:relative; filter:grayscale(1); }
.p1{ background:linear-gradient(150deg,#7a7975,#2c2b28); }
.p2{ background:linear-gradient(150deg,#94938f,#403f3c); }
.p3{ background:linear-gradient(150deg,#5f5e5b,#1e1d1b); }
.p4{ background:linear-gradient(150deg,#48473f,#111); }
.pbadge{ position:absolute; top:6px; left:6px; font-size:8.5px; font-weight:700; background:rgba(0,0,0,.55); color:#f2f1ee; padding:2px 6px; border-radius:5px; filter:none; border:1px solid rgba(255,255,255,.18); }
.pinfo{ padding:10px 10px 12px; }
.pinfo .pname{ font-size:11.5px; font-weight:700; line-height:1.4; margin-bottom:6px; color:#f2f1ee; min-height:31px; }
.pinfo .prow{ display:flex; align-items:center; justify-content:space-between; }
.pinfo .price{ font-size:12.5px; font-weight:800; color:#fff; }
.addbtn{
  width:26px; height:26px; border-radius:50%; background:#f2f1ee; color:#151513; border:none;
  font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.addbtn:active{ transform:scale(.9); }
.donate-note{
  margin-top:18px; font-size:10.5px; color:#c9c8c4; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  padding:11px 13px; border-radius:10px; line-height:1.7; font-weight:500;
}

/* ---------- tab bar ---------- */
.tabbar{
  position:absolute; bottom:0; left:0; right:0; height:calc(72px + env(safe-area-inset-bottom));
  background:rgba(15,15,14,.6); backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.08); display:flex; padding-bottom:env(safe-area-inset-bottom); z-index:30;
}
.tabbar .tb{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:9.5px; color:#8f8e8a; font-weight:700; background:none; border:none; cursor:pointer;
}
.tabbar .tb.on{ color:#fff; }
.tabbar .tb .ic{ font-size:17px; filter:grayscale(1); }

/* ---------- modals ---------- */
.modal{
  position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.55);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.modal.open{ opacity:1; pointer-events:auto; }
.modal-sheet{
  width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
  background:linear-gradient(180deg,#232220,#151412);
  border-radius:24px 24px 0 0; padding:18px 20px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(24px); transition:transform .3s cubic-bezier(.32,.72,0,1);
  position:relative;
}
.modal.open .modal-sheet{ transform:translateY(0); }
.modal-close{
  position:absolute; top:14px; right:16px; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.12); border:none; color:#fff; font-size:14px; cursor:pointer; z-index:2;
}
.player-stage{
  margin-top:20px; height:220px; border-radius:16px;
  background:linear-gradient(150deg,#3a3a38,#111);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:0 24px;
}
.player-play{
  width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.15);
  border:1.5px solid rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff;
}
.player-caption{ font-size:11px; color:#c9c8c4; line-height:1.7; }
.player-meta{ padding:16px 2px 4px; }
.player-meta h3{ margin:0 0 6px; font-family:'Shippori Mincho',serif; font-size:17px; }
.player-meta p{ margin:0; font-size:12px; color:#c9c8c4; }

.cart-sheet{ padding-top:20px; }
.cart-title{ font-family:'Shippori Mincho', serif; font-size:18px; margin:4px 0 14px; }
.cart-items{ display:flex; flex-direction:column; gap:10px; max-height:38vh; overflow-y:auto; }
.cart-empty{ font-size:12.5px; color:#c9c8c4; text-align:center; padding:24px 0; }
.cart-item{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.06); border-radius:12px; padding:10px; }
.cart-item .ci-thumb{ width:44px; height:44px; border-radius:8px; flex-shrink:0; filter:grayscale(1); }
.cart-item .ci-info{ flex:1; min-width:0; }
.cart-item .ci-name{ font-size:12px; font-weight:700; margin-bottom:2px; }
.cart-item .ci-price{ font-size:11px; color:#c9c8c4; }
.cart-item .ci-remove{ background:none; border:none; color:#c9c8c4; font-size:16px; cursor:pointer; padding:4px; }
.cart-footer{ margin-top:18px; border-top:1px solid rgba(255,255,255,.12); padding-top:16px; }
.cart-total{ display:flex; align-items:center; justify-content:space-between; font-size:14px; margin-bottom:14px; }
.cart-total b{ font-size:19px; }
.checkout-btn{
  width:100%; padding:14px; border-radius:14px; background:#f0efec; color:#151513;
  font-weight:800; font-size:14px; border:none; cursor:pointer;
}
.checkout-btn:active{ transform:scale(.98); }
.checkout-note{ text-align:center; font-size:10px; color:#8f8e8a; margin:10px 0 0; }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:110px; transform:translate(-50%, 20px);
  background:#f0efec; color:#151513; font-size:12.5px; font-weight:700;
  padding:10px 18px; border-radius:20px; z-index:200; opacity:0; pointer-events:none;
  transition:all .3s ease; box-shadow:0 10px 24px -8px rgba(0,0,0,.5);
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

@media (min-width:521px){
  body{ background:#0e0e0d; }
  .app{ box-shadow:0 0 0 1px rgba(255,255,255,.05); }
}