* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  body { margin:0; font-family:"Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif; background:#1c1420; color:#fff; }
  header { padding:12px 14px 4px; text-align:center; }
  header h1 { font-size:21px; margin:2px 0; }
  header p { margin:2px 0 0; font-size:13px; color:#d8c7dd; }
  .btn { background:#e63946; color:#fff; font-weight:bold; cursor:pointer; font-size:16px; padding:10px 16px; border-radius:12px; border:none; }
  a.btn { text-decoration:none; display:inline-block; text-align:center; }
  .btn.sub { background:#4a3550; }
  .btn:active { opacity:.75; }
  .bar { display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; padding:8px 10px; }
  /* home / stage select */
  #stageList { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px; max-width:480px; margin:0 auto; }
  #collectionList { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px; max-width:480px; margin:0 auto; }
  .gitem { border-radius:10px; overflow:hidden; cursor:pointer; border:2px solid #ffd700; }
  .gitem img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
  #choiceOverlay { background:rgba(10,5,16,.55); z-index:55; }
  .modal { background:#241a2e; border:1px solid #6b5570; border-radius:18px; padding:18px 16px; display:flex; flex-direction:column; gap:12px; align-items:center; max-width:94vw; }
  .modalTitle { margin:0; font-weight:700; }
  #choiceRow { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:min(88vw,380px); }
  .adcell { border-radius:12px; overflow:hidden; border:3px solid #ffd700; aspect-ratio:1/1; background:rgba(255,255,255,.03); position:relative; }
  .adcell ins { display:block; width:100%; height:100%; text-decoration:none; }
  .adcell > div, .adcell > div > div, .adcell a { display:block !important; width:100% !important; height:100% !important; margin:0 !important; padding:0 !important; max-width:none !important; }
  .adcell img, .adcell video, .adcell iframe { width:100% !important; height:100% !important; object-fit:cover; display:block; border:0; }
  .adcell .msg-native-widget { width:100% !important; max-width:100% !important; display:block !important; }
  .adcell .msg-native-widget-outer-container { width:100% !important; margin:0 !important; }
  .adcell .msg-native-widget-item-container { padding:0 !important; }
  .adcell .msg-native-widget-item-image-wrapper { width:100% !important; }
  .adcell .msg-native-widget-item-image-ratio { padding-top:100% !important; }
  .adcell .msg-native-widget-item-image { background-size:cover !important; background-position:center !important; transform:none !important; }
  .adchip { position:absolute; left:5px; bottom:5px; z-index:5; background:rgba(10,6,14,.72); color:#fff; font-size:8px; font-weight:700; letter-spacing:.05em; padding:1px 4px; border-radius:4px; pointer-events:none; }
  #adOverlay { background:rgba(5,2,8,.97); z-index:70; }
  .adfull { width:min(92vw,380px); height:min(68vh,560px); border:2px dashed #6b5570; border-radius:14px; color:#9a8aa0; display:flex; align-items:center; justify-content:center; font-size:15px; background:rgba(255,255,255,.03); }
  #adClose { position:absolute; top:calc(12px + env(safe-area-inset-top)); right:14px; width:56px; height:56px; border-radius:50%; border:2px solid #8a7396; background:rgba(20,12,28,.88); color:#fff; font-size:22px; line-height:1; cursor:pointer; z-index:3; }
  #adClose:disabled { opacity:.45; cursor:default; }
  #imgViewer { background:#000; z-index:60; touch-action:none; overflow:hidden; padding:0; }
  #zoomImg { width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; border:none; border-radius:0; }
  #zoomClose { position:absolute; top:calc(12px + env(safe-area-inset-top)); right:14px; width:56px; height:56px; border-radius:50%; border:2px solid #8a7396; background:rgba(20,12,28,.88); color:#fff; font-size:26px; line-height:1; cursor:pointer; z-index:3; }
  #viewerClose { position:absolute; top:calc(10px + env(safe-area-inset-top)); right:12px; width:40px; height:40px; border-radius:50%; border:1px solid #6b5570; background:rgba(20,12,28,.85); color:#fff; font-size:17px; cursor:pointer; z-index:2; }
  .choice { border-radius:12px; overflow:hidden; cursor:pointer; border:3px solid #ffd700; aspect-ratio:1/1; background-repeat:no-repeat; position:relative; }
  .choice:active { opacity:.75; }
  .seg { display:flex; border:2px solid #ffd700; border-radius:12px; overflow:hidden; }
  .seg button { flex:1; font-size:16px; font-weight:bold; padding:10px 18px; border:none; background:#2a1e30; color:#d8c7dd; cursor:pointer; }
  .seg button.on { background:#ffd700; color:#241722; }
  #viewerOverlay img { max-height:58vh; }
  .card { background:#2a1e30; border-radius:14px; overflow:hidden; border:2px solid #4a3550; text-align:center; padding-bottom:10px; }
  .card.open { cursor:pointer; border-color:#e63946; }
  .card.cleared { border-color:#ffd700; }
  .card .thumb { width:100%; aspect-ratio:2/1; overflow:hidden; position:relative; background-repeat:no-repeat; }
  .card .thumb::after { content:""; position:absolute; inset:auto 0 0 0; height:45%; background:linear-gradient(transparent, rgba(20,10,24,.55)); }
  .card.locked .thumb { filter:grayscale(1) brightness(.45); }
  .card.pickable { cursor:pointer; border-color:#ffd700; animation:pulse 1.1s ease-in-out infinite alternate; }
  @keyframes pulse { from { box-shadow:0 0 0 0 rgba(255,215,0,.0);} to { box-shadow:0 0 16px 3px rgba(255,215,0,.65);} }
  .card .t { font-size:16px; font-weight:bold; margin-top:8px; }
  .card .s { font-size:12px; color:#d8c7dd; margin-top:2px; }
  /* game */
  .gamebar { display:flex; align-items:center; gap:10px; padding:8px 10px 6px; max-width:480px; margin:0 auto; }
  .iconbtn { font-size:20px; padding:8px 14px; line-height:1; }
  #progressBarOuter { flex:1; height:12px; background:#3a2a40; border-radius:6px; overflow:hidden; }
  #progressBar { height:100%; width:0%; background:linear-gradient(90deg,#ffb7d5,#e63946); transition:width .4s; }
  #boardWrap { display:flex; justify-content:center; padding:2px 8px 10px; }
  #board { display:grid; gap:3px; width:min(94vw, 430px); aspect-ratio:784/1168; touch-action:none; overscroll-behavior:none; }
  .tile { cursor:pointer; position:relative; touch-action:none; user-select:none; -webkit-user-select:none; }
  .tile.locked { cursor:default; }
  .tile.dragging { z-index:20; cursor:grabbing; }
  .tile.dragging .face { box-shadow:0 12px 26px rgba(0,0,0,.6); }
  .face { position:absolute; inset:0; border-radius:5px; overflow:hidden; background-repeat:no-repeat; border:2px solid rgba(255,255,255,.28); }
  .tile.locked .face { border:2px solid #ffd700; }
  .clearFace { position:absolute; inset:0; border-radius:5px; background-repeat:no-repeat; pointer-events:none; opacity:0; transition:opacity 1.1s ease; z-index:2; }
  #board.revealed .clearFace { opacity:1; }
  .tile.selected .face { border:3px solid #ffd23f; box-shadow:0 0 0 3px #e63946, 0 0 14px #ffd23f; }
  .tile.just-locked .face { animation:shine .7s ease; }
  @keyframes shine { 0% { filter:brightness(2.2); } 100% { filter:brightness(1); } }
  .overlay { position:fixed; inset:0; background:rgba(12,6,16,.93); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:50; padding:22px; text-align:center; gap:10px; }
  .overlay h2 { font-size:24px; margin:0; }
  .overlay p { font-size:15px; line-height:1.7; color:#e9dcef; max-width:340px; margin:0; }
  .overlay .big { font-size:19px; padding:15px 30px; border-radius:14px; }
  .overlay img { max-height:56vh; max-width:88vw; border-radius:12px; border:3px solid #ffd700; }
  #doneImg { cursor:pointer; }
  .hidden { display:none !important; }
  footer { text-align:center; font-size:12px; color:#9a8aa0; padding:0 12px 22px; line-height:1.6; }