/* ===================================================================== app.arcade.css — 一枚謎 / Arcade Neon ドロップインCSS public/css/ に置き、Bladeに class を当てて使用。既存 app.css の .btn / .m-card 等はこれらに置換 or マージ。 ===================================================================== */ :root{ --bg:#07070e; --bg-sink:#05050b; --panel:#0f1018; --neon:#46f08a; --neon2:#2ff3e0; --accent:#ffe14d; --glow:.98; --txt:#e8eaff; --txt-body:#c4c9e4; --txt-mut:#9aa0c0; --txt-faint:#7e86a8; --warn:#ffb23d; --error:#ff6b9d; --line:rgba(255,255,255,.1); --line-neon:rgba(70,240,138,.3); --r-card:14px; --r-btn:10px; --r-input:10px; --fz-disp:'DotGothic16',monospace; --fz-body:'Zen Kaku Gothic New',system-ui,sans-serif; --fz-mono:'Space Mono',monospace; } /* テーマ：等で切替。--glow は inline か別ルールで */ [data-theme="cyan"] {--neon:#2ff3e0;--neon2:#ff3df0;--accent:#ffe14d;} [data-theme="magenta"]{--neon:#ff3df0;--neon2:#2ff3e0;--accent:#ffe14d;} [data-theme="amber"] {--neon:#ffb23d;--neon2:#ff3df0;--accent:#2ff3e0;} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--fz-body);-webkit-font-smoothing:antialiased} img{display:block} a{color:inherit;-webkit-tap-highlight-color:transparent} /* CRT スキャンライン（全面）。OFF: */ body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999; background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);opacity:.5} body[data-scan="0"]::after{display:none} /* レイアウト */ .nz-container{max-width:1180px;margin:0 auto;padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)} .nz-container--read{max-width:780px} .nz-section-pad{padding-top:clamp(24px,4vw,44px);padding-bottom:clamp(40px,6vw,72px)} .nz-kicker{font:400 11px var(--fz-disp);letter-spacing:.16em;color:var(--neon2)} .nz-h1{margin:9px 0 0;font:400 clamp(28px,5.6vw,46px) var(--fz-disp);line-height:1.1;color:#fff; text-shadow:0 0 calc(20px*var(--glow)) rgba(70,240,138,.5)} .nz-h2{margin:0;font:400 clamp(22px,4vw,30px) var(--fz-disp);color:#fff} /* ヘッダー */ .nz-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px; padding:13px clamp(16px,4vw,40px);background:rgba(7,7,14,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(47,243,224,.22)} .nz-logo{display:flex;align-items:center;gap:11px;text-decoration:none} .nz-logo__mark{width:40px;height:40px;border:1.6px solid var(--neon);border-radius:9px;display:flex;align-items:center;justify-content:center; font:400 22px var(--fz-disp);color:var(--neon);text-shadow:0 0 calc(11px*var(--glow)) var(--neon)} .nz-logo__name{font:400 19px var(--fz-disp);color:#fff;line-height:1.05} .nz-logo__sub{font:400 9px var(--fz-disp);letter-spacing:.16em;color:var(--neon2)} .nz-nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px)} .nz-nav a{font:500 13px var(--fz-body);color:#aeb4d0;text-decoration:none} .nz-nav a.is-active{color:var(--neon);text-shadow:0 0 calc(9px*var(--glow)) var(--neon);border-bottom:2px solid var(--neon);padding-bottom:2px} .nz-burger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;justify-content:center; background:transparent;border:1px solid rgba(47,243,224,.35);border-radius:10px;cursor:pointer} .nz-burger span{width:20px;height:2px;background:var(--neon);box-shadow:0 0 6px var(--neon)} @media(max-width:879px){.nz-nav{display:none}.nz-burger{display:flex}} /* ボタン */ .nz-btn{display:inline-flex;align-items:center;gap:9px;font:400 15px var(--fz-disp);color:#07070e;background:var(--neon); border:none;padding:13px 24px;border-radius:var(--r-btn);cursor:pointer;text-decoration:none; box-shadow:0 0 calc(20px*var(--glow)) -6px var(--neon);transition:box-shadow .2s,transform .2s} .nz-btn:hover{box-shadow:0 0 calc(30px*var(--glow)) -2px var(--neon)} .nz-btn--ghost{color:#dfe3f5;background:transparent;border:1px solid rgba(255,255,255,.2);box-shadow:none;font:500 14px var(--fz-body)} .nz-btn--sm{font:700 12px var(--fz-body);padding:9px 17px;border-radius:8px} .nz-btn--amber{color:#ffc266;background:transparent;border:1px solid rgba(255,178,61,.45);box-shadow:none;font:500 14px var(--fz-body)} .nz-btn:disabled,.nz-btn.is-disabled{color:#5a607e;background:rgba(255,255,255,.05);border:1px solid var(--line);box-shadow:none;cursor:not-allowed} /* フォーム */ .nz-field{display:block} .nz-field__label{font:400 10px var(--fz-disp);letter-spacing:.1em;color:var(--neon2)} .nz-input,.nz-textarea,.nz-select{width:100%;margin-top:7px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.16); border-radius:var(--r-input);color:#fff;font:500 14px var(--fz-body);padding:12px 14px;outline:none} .nz-textarea{resize:vertical;line-height:1.7} .nz-input:focus,.nz-textarea:focus,.nz-select:focus{border-color:var(--neon);box-shadow:0 0 calc(12px*var(--glow)) -4px var(--neon)} .nz-input.is-error{border-color:var(--error);background:rgba(255,107,157,.06)} .nz-input:disabled{background:rgba(255,255,255,.03);border-color:var(--line);color:#5a607e} .nz-search{display:flex;align-items:center;gap:11px;border:1.5px solid var(--neon);border-radius:13px;background:rgba(0,0,0,.35); padding:13px 16px;box-shadow:0 0 calc(22px*var(--glow)) -12px var(--neon)} .nz-search input{flex:1;min-width:0;background:transparent;border:none;color:#fff;font:500 14px var(--fz-body);outline:none} /* 謎カードグリッド */ .nz-grid{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:repeat(2,1fr)} @media(min-width:540px){.nz-grid{grid-template-columns:repeat(3,1fr)}} @media(min-width:820px){.nz-grid{grid-template-columns:repeat(4,1fr)}} @media(min-width:1080px){.nz-grid{grid-template-columns:repeat(5,1fr)}} .nz-card{position:relative;display:block;border:1px solid rgba(255,255,255,.09);border-radius:13px;overflow:hidden; background:var(--panel);text-decoration:none;color:inherit;transition:transform .18s,box-shadow .18s,border-color .18s} .nz-card:hover{transform:translateY(-4px);border-color:var(--neon);box-shadow:0 0 calc(22px*var(--glow)) -6px var(--neon)} .nz-card__thumb{aspect-ratio:4/3;overflow:hidden;background:#000} .nz-card__thumb img{width:100%;height:100%;object-fit:cover} .nz-card__body{padding:11px 12px 13px} .nz-card__title{font:700 13px var(--fz-body);color:#eef;line-height:1.4;height:37px;overflow:hidden} .nz-card__meta{margin-top:9px;display:flex;align-items:center;justify-content:space-between;gap:8px; font:500 10.5px var(--fz-body);color:var(--txt-mut)} .nz-card__score{font:400 11px var(--fz-disp);color:var(--accent)} /* アバター */ .nz-ava{border-radius:50%;background:linear-gradient(135deg,var(--neon),var(--neon2));flex:none} .nz-ava--sm{width:28px;height:28px}.nz-ava--md{width:38px;height:38px}.nz-ava--lg{width:56px;height:56px} /* チップ・バッジ */ .nz-chip{display:inline-flex;align-items:center;gap:7px;font:700 13px var(--fz-body);color:var(--txt); border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);border-radius:30px;padding:8px 14px;text-decoration:none} .nz-chip .hash{color:var(--neon2)} .nz-chip .count{font-size:.7em;color:var(--accent)} .nz-badge{font:400 11px var(--fz-disp);padding:3px 9px;border-radius:5px;color:#07070e;background:var(--accent)} .nz-badge--neon{background:var(--neon);box-shadow:0 0 calc(12px*var(--glow)) -3px var(--neon)} .nz-badge--draft{color:var(--warn);background:transparent;border:1px solid var(--warn);border-radius:20px;padding:4px 11px} .nz-badge--shown{color:var(--neon2);background:transparent;border:1px solid rgba(47,243,224,.4);border-radius:20px;padding:4px 11px} .nz-badge--title{color:var(--accent);background:transparent;border:1px solid rgba(255,225,77,.5);border-radius:20px;padding:4px 12px;font:500 11px var(--fz-body)} /* ページネーション */ .nz-pager{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:clamp(28px,4vw,40px)} .nz-pager a,.nz-pager span{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center; font:400 13px var(--fz-disp);color:#aeb4d0;border:1px solid rgba(255,255,255,.12);border-radius:9px;text-decoration:none} .nz-pager .is-current{color:#07070e;background:var(--neon);border-color:var(--neon);box-shadow:0 0 calc(14px*var(--glow)) -3px var(--neon)} /* フラッシュ */ .nz-flash{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--neon2);border-left-width:4px;border-radius:11px; background:rgba(47,243,224,.06);padding:13px 15px;font:500 13px var(--fz-body);color:#cdeaf0} .nz-flash--result{border-color:var(--neon);background:rgba(70,240,138,.07);color:#dffbe9;box-shadow:0 0 calc(20px*var(--glow)) -12px var(--neon)} .nz-flash--error{border-color:var(--error);background:rgba(255,107,157,.07);color:#ffd0e0} /* トースト・モーダル */ .nz-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:10px; border:1px solid var(--neon);border-radius:12px;background:rgba(10,12,20,.95);padding:13px 20px; box-shadow:0 0 calc(30px*var(--glow)) -10px var(--neon);animation:nz-toast .25s ease-out} .nz-modal__overlay{position:fixed;inset:0;z-index:80;background:rgba(5,5,11,.8);backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center;padding:24px} .nz-modal{width:100%;max-width:400px;border:1.5px solid var(--neon);border-radius:18px;background:#0c0c16;padding:26px 24px; box-shadow:0 0 calc(44px*var(--glow)) -16px var(--neon);animation:nz-correct .35s ease-out} /* フッター */ .nz-footer{border-top:1px solid rgba(47,243,224,.18);background:var(--bg-sink);padding:clamp(30px,5vw,52px) clamp(16px,4vw,40px)} @keyframes nz-pulse{0%,100%{box-shadow:0 0 calc(16px*var(--glow)) -2px var(--neon)}50%{box-shadow:0 0 calc(30px*var(--glow)) 2px var(--neon)}} @keyframes nz-blink{0%,100%{opacity:1}50%{opacity:.3}} @keyframes nz-correct{0%{transform:scale(.85);opacity:0}45%{transform:scale(1.04);opacity:1}100%{transform:scale(1);opacity:1}} @keyframes nz-toast{0%{transform:translateY(20px);opacity:0}100%{transform:translateY(0);opacity:1}} @keyframes nz-flash{0%{opacity:0}25%{opacity:.45}100%{opacity:0}} /* トースト：上部固定スタック（Ajax操作の通知） */ .nz-toasts{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:9000;display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:92vw;pointer-events:none} .nz-toast--top{position:relative;left:auto;bottom:auto;transform:none;animation:nz-toast-top .28s ease-out;pointer-events:auto;transition:opacity .3s,transform .3s} .nz-toast--top.is-leaving{opacity:0;transform:translateY(-12px)} .nz-toast--result{border-color:var(--neon)} .nz-toast--error{border-color:var(--error);box-shadow:0 0 calc(24px*var(--glow)) -10px var(--error)} @keyframes nz-toast-top{0%{transform:translateY(-14px);opacity:0}100%{transform:translateY(0);opacity:1}} /* 解答済みスタンプ（挿絵/サムネに重ねる。回転させたリボン風） */ .nz-stamp{position:absolute;top:14px;right:-30px;z-index:2;transform:rotate(28deg); font:400 13px var(--fz-disp);letter-spacing:.14em;color:#07070e;padding:4px 38px;pointer-events:none; box-shadow:0 2px 10px rgba(0,0,0,.4)} .nz-stamp--clear{background:var(--neon)} .nz-stamp--giveup{background:var(--warn)} .nz-stamp--sm{top:8px;right:-26px;font-size:10px;padding:2px 30px} /* 前後の謎へ：画面端の矢印タブ（常時薄く見え、直感的にスワイプ/クリックを誘う） */ .nz-navedge{position:fixed;top:50%;transform:translateY(-50%);z-index:60; display:flex;align-items:center;justify-content:center;width:38px;height:64px; color:var(--neon);background:rgba(15,16,24,.55);border:1px solid rgba(70,240,138,.28); backdrop-filter:blur(3px);text-decoration:none;transition:background .18s,width .18s,opacity .18s;opacity:.6} .nz-navedge:hover{opacity:1;width:46px;background:rgba(70,240,138,.14);box-shadow:0 0 calc(20px*var(--glow)) -6px var(--neon)} .nz-navedge--prev{left:0;border-radius:0 14px 14px 0;border-left:none} .nz-navedge--next{right:0;border-radius:14px 0 0 14px;border-right:none} @media(max-width:640px){.nz-navedge{width:26px;height:52px;opacity:.4}.nz-navedge:hover{width:26px}} /* 正解/ギブアップの全画面演出 */ .nz-celebrate{position:fixed;inset:0;z-index:10500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px; background:rgba(6,6,13,.88);backdrop-filter:blur(3px);animation:nz-cel-in .3s ease-out;cursor:pointer} .nz-celebrate.is-leaving{animation:nz-cel-out .24s ease-in forwards} .nz-celebrate__text{font:400 clamp(36px,9vw,64px) var(--fz-disp);color:var(--neon); text-shadow:0 0 30px var(--neon),0 0 70px var(--neon);letter-spacing:.05em;text-align:center} .nz-celebrate--giveup .nz-celebrate__text{color:var(--warn);text-shadow:0 0 26px var(--warn)} .nz-celebrate__sub{font:500 14px var(--fz-body);color:#dfe3f5;text-align:center;padding:0 24px} .nz-celebrate__hint{margin-top:6px;font:400 10.5px var(--fz-disp);color:#5a607e;letter-spacing:.1em} .nz-celebrate__burst{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center} .nz-celebrate__burst span{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--neon); box-shadow:0 0 10px var(--neon);animation:nz-burst .95s ease-out forwards} @keyframes nz-cel-in{0%{opacity:0}100%{opacity:1}} @keyframes nz-cel-out{0%{opacity:1}100%{opacity:0}} @keyframes nz-burst{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(.25);opacity:0}} @media (prefers-reduced-motion: reduce){ .nz-celebrate,.nz-celebrate.is-leaving{animation:none !important} .nz-celebrate__burst{display:none} } /* 左右スワイプ：前後の謎を画面いっぱいでスライドさせるカルーセル演出（JSが動的に生成） */ .nz-carousel{position:fixed;inset:0;z-index:20000;overflow:hidden;background:var(--bg);pointer-events:none} .nz-carousel__panel{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg);will-change:transform}