/* 金ちゃんの無料ツール ゲーム風の見た目（2026-10-19 v3・カズ137）。土台はシャチクジラ体験版の色。
   ドット文字（DotGothic16）は見出しと得点表示だけ。本文は読みやすい書体のまま。 */
:root{
  --bg:#07121f; --bg2:#0b1828; --panel:#0f1b24; --panel2:#16283a; --frame:#2f5a7a; --frame-hi:#5cc2e6;
  --ink:#eef4f7; --ink2:#c9d6de; --mut:#93a9b8; --gold:#e8b84a; --gold-hi:#fff1c2; --gold-dk:#6b4a0a;
  --up:#4fd1a0; --up-dk:#13583f; --down:#ff7a6b; --down-dk:#6e1f1a; --line:#5cc2e6; --sea:#0d3b66; --sea2:#14558f;
  --f-dot:"DotGothic16","Hiragino Sans",sans-serif; --f-body:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif; --f-num:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);background-image:radial-gradient(1px 1px at 12% 18%,#ffffff22 50%,transparent 51%),radial-gradient(1px 1px at 72% 8%,#ffffff1c 50%,transparent 51%),radial-gradient(1px 1px at 38% 62%,#ffffff14 50%,transparent 51%),linear-gradient(180deg,#07121f,#0a1a2c 60%,#07121f);background-size:220px 220px,300px 300px,260px 260px,100% 100%;color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.6;min-width:0}
a{color:var(--line)}
.page{max-width:1240px;margin:0 auto;padding:14px 16px 28px;display:grid;gap:14px}
/* ドット絵の枠（段々の角） */
.px{position:relative;background:var(--panel);border:0;box-shadow:0 -4px 0 0 var(--frame),0 4px 0 0 var(--frame),-4px 0 0 0 var(--frame),4px 0 0 0 var(--frame),0 -8px 0 -4px var(--bg),inset 0 0 0 2px #0a141c;margin:4px}
.px.hi{box-shadow:0 -4px 0 0 var(--frame-hi),0 4px 0 0 var(--frame-hi),-4px 0 0 0 var(--frame-hi),4px 0 0 0 var(--frame-hi)}
.ttl{font-family:var(--f-dot);letter-spacing:.06em;margin:0;font-weight:400}
/* 上の帯 */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 14px}
.logo{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 300px}
.logo canvas{width:48px;height:32px;image-rendering:pixelated;flex:none}
.logo h1{font-family:var(--f-dot);font-size:28px;margin:0;line-height:1.1;letter-spacing:.04em;text-shadow:3px 3px 0 #000}
.logo h1 b{color:var(--gold);font-weight:400}
.logo .sub{display:block;font-size:12.5px;color:var(--ink2)}
.kp-by{font-family:var(--f-dot);font-size:12px;color:var(--mut);text-decoration:none;margin-left:8px}
.ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.ctl label{display:grid;gap:2px;font-size:12px;color:var(--mut)}
.ctl select,.ctl input{font:600 15px var(--f-num);background:#06101a;color:var(--ink);border:2px solid var(--frame);padding:6px 8px;min-width:0;border-radius:0}
.ctl input{width:120px}
.live{display:inline-flex;align-items:center;gap:6px;font:12px var(--f-dot);color:var(--ink2)}
.dot{width:10px;height:10px;background:#555;display:inline-block}.dot.on{background:var(--up);box-shadow:0 0 8px var(--up)}
/* ブロック風のボタン（ホバーで浮き上がり＋光が走る・押すと1段下がる） */
.btn{position:relative;overflow:hidden;font:15px var(--f-dot);letter-spacing:.04em;color:#2b1a00;background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,#c8860a);border:3px solid var(--gold-dk);box-shadow:0 4px 0 0 var(--gold-dk),inset -3px -3px 0 0 #b07508,inset 3px 3px 0 0 #fff8dc;padding:7px 14px;cursor:pointer;transition:transform .12s,box-shadow .12s,filter .12s;text-decoration:none;display:inline-block;border-radius:0}
.btn::after{content:"";position:absolute;top:-20%;left:-80%;width:45%;height:140%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);transition:left .5s}
.btn:hover{transform:translateY(-3px);box-shadow:0 7px 0 0 var(--gold-dk),0 10px 18px rgba(232,184,74,.35),inset -3px -3px 0 0 #b07508,inset 3px 3px 0 0 #fff8dc;filter:brightness(1.06)}
.btn:hover::after{left:130%}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 0 var(--gold-dk),inset -3px -3px 0 0 #b07508,inset 3px 3px 0 0 #fff8dc}
@keyframes sheen{from{left:-80%}to{left:130%}}.btn:active::after{animation:sheen .45s linear 1}
.btn.off{color:var(--ink2);background:linear-gradient(180deg,#2a3d4e,#1b2b3a);border-color:#0b1520;box-shadow:0 4px 0 0 #0b1520,inset -3px -3px 0 0 #142230,inset 3px 3px 0 0 #3b546a}
.btn.off:hover{box-shadow:0 7px 0 0 #0b1520,0 10px 18px rgba(92,194,230,.25),inset -3px -3px 0 0 #142230,inset 3px 3px 0 0 #3b546a}
.btn.blue{color:#04131f;background:linear-gradient(180deg,#d9f4ff,#5cc2e6 55%,#2b86b0);border-color:#0d3550;box-shadow:0 4px 0 0 #0d3550,inset -3px -3px 0 0 #2678a0,inset 3px 3px 0 0 #eafaff}
.btn.sm{font-size:13px;padding:4px 10px}
/* 本体と右の余白 */
.main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.col{display:grid;gap:14px;min-width:0}
/* 得点表示（HUD） */
.hud{display:grid;grid-template-columns:1fr 1fr 1.25fr auto;gap:12px;padding:12px}
.score{position:relative;overflow:hidden;background:#06101a;padding:8px 12px;box-shadow:inset 0 0 0 3px #0a141c,inset 0 0 0 5px var(--frame)}
.score .k{font:13px var(--f-dot);color:var(--mut);letter-spacing:.08em}
.score .v{font:34px/1.15 var(--f-dot);letter-spacing:.02em;text-shadow:3px 3px 0 #000;display:inline-block}
.score.buy .v{color:var(--up)}.score.sell .v{color:var(--down)}
.score .v.hop{animation:hop .35s steps(4) 1}
@keyframes hop{0%{transform:translateY(0)}40%{transform:translateY(-8px)}100%{transform:translateY(0)}}
.score.flash-buy{box-shadow:inset 0 0 0 3px #0a141c,inset 0 0 0 5px var(--up),0 0 24px rgba(79,209,160,.5)}
.score.flash-sell{box-shadow:inset 0 0 0 3px #0a141c,inset 0 0 0 5px var(--down),0 0 24px rgba(255,122,107,.5)}
.ratio{height:10px;background:var(--down);margin-top:6px;box-shadow:inset 0 0 0 2px #000}.ratio i{display:block;height:100%;background:var(--up);box-shadow:inset 0 0 0 2px #000;transition:width .3s steps(6)}
.sub2{display:flex;justify-content:space-between;font:12px var(--f-dot);color:var(--ink2)}
.combo{align-self:center;font:22px var(--f-dot);color:var(--gold);text-shadow:3px 3px 0 #000;min-width:120px;text-align:center;opacity:.5;transition:opacity .2s}
.combo.on{opacity:1;animation:hop .35s steps(4) 1}
.combo small{display:block;font-size:11px;color:var(--mut);text-shadow:none}
/* 落ちてくるコインと石（ドット絵） */
.drop{position:absolute;top:-12px;width:12px;height:12px;image-rendering:pixelated;pointer-events:none;animation:fall 1.1s steps(10) forwards}
@keyframes fall{to{transform:translateY(90px);opacity:0}}
/* グラフと海 */
.chart{padding:10px}
.chart canvas#cv{display:block;width:100%;height:auto}
.sea{display:block;width:100%;height:auto;image-rendering:pixelated;margin-top:6px;background:var(--sea)}
.legend{display:flex;flex-wrap:wrap;gap:14px;font:12.5px var(--f-dot);color:var(--ink2);margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;margin-right:4px;vertical-align:-1px}
.whalebig{position:absolute;left:50%;top:22%;transform:translate(-50%,-50%) scale(.6);font:clamp(22px,3.6vw,40px) var(--f-dot);letter-spacing:.06em;white-space:nowrap;pointer-events:none;opacity:0;background:rgba(4,10,18,.82);padding:6px 16px;box-shadow:0 0 0 3px var(--frame);text-shadow:3px 3px 0 #000}
.whalebig.buy{color:var(--up)}.whalebig.sell{color:var(--down)}
.whalebig.go{animation:wb 1.6s ease-out 1}
@keyframes wb{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%)}}
.empty{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font:15px var(--f-dot);color:var(--ink2);background:rgba(4,10,18,.85);padding:8px 14px;box-shadow:0 0 0 2px var(--frame);text-align:center}
.flash{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:40}.flash.buy{background:radial-gradient(ellipse at center,rgba(79,209,160,.3),transparent 70%)}.flash.sell{background:radial-gradient(ellipse at center,rgba(255,122,107,.3),transparent 70%)}.flash.go{animation:fl .7s ease-out 1}@keyframes fl{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
/* 大きな売買の流れ */
.tape{padding:10px 12px 0;position:relative;overflow:hidden}
.tape h2{font:15px var(--f-dot);margin:0 0 6px;color:var(--ink2);letter-spacing:.06em}
#tapeList{max-height:228px;overflow:auto;scrollbar-width:thin;padding-bottom:18px;font:600 15px var(--f-num)}
#tapeList p{margin:0;padding:5px 6px;display:grid;grid-template-columns:5.6em 1fr auto;gap:10px;border-bottom:1px dashed #1e3446}
#tapeList p.big{background:rgba(232,184,74,.1);box-shadow:inset 4px 0 0 var(--gold)}
#tapeList .t{color:var(--ink2);font-weight:400}#tapeList .b{color:var(--up)}#tapeList .s{color:var(--down)}#tapeList .p{color:var(--ink2);font-weight:400;text-align:right}
#tapeList p.wait{color:var(--mut);font:14px var(--f-body);display:block}
.tape::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;background:linear-gradient(transparent,var(--panel));pointer-events:none}
/* サウンドテスト */
.snd{padding:12px}
.snd h2{font-size:20px;margin:0 0 4px}
.snd .lead{font-size:13.5px;color:var(--ink2);margin:0 0 10px}
.pick{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:10px;align-items:center}
.pick label{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink2)}
.pick select{font:14px var(--f-body);background:#06101a;color:var(--ink);border:2px solid var(--frame);padding:4px 6px;border-radius:0}
.pick input[type=range]{width:120px;accent-color:var(--gold)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.card{position:relative;display:grid;grid-template-columns:32px 1fr;gap:2px 8px;align-items:center;text-align:left;background:#06101a;color:var(--ink);border:0;padding:10px 8px 8px;min-height:62px;cursor:pointer;box-shadow:inset 0 0 0 2px #0a141c,inset 0 0 0 4px var(--frame);transition:transform .12s,box-shadow .12s;font:inherit}
.card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 2px #0a141c,inset 0 0 0 4px var(--frame-hi),0 8px 14px rgba(0,0,0,.4)}
.card:active{transform:translateY(2px)}
.card canvas{width:32px;height:32px;image-rendering:pixelated;grid-row:1/3}
.card b{font:14px var(--f-dot);letter-spacing:.02em}
.card small{font-size:12px;color:var(--mut)}
.card .tag{position:absolute;top:-8px;right:6px;font:11px var(--f-dot);padding:0 5px;box-shadow:0 0 0 2px #06101a}
.card .tag.up{color:#04131f;background:var(--up)}.card .tag.dn{color:#1a0503;background:var(--down)}
.card.playing{box-shadow:inset 0 0 0 2px #0a141c,inset 0 0 0 4px var(--gold)}
.bgms{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:12px}
.bgm{display:grid;gap:2px;text-align:left;background:#06101a;color:var(--ink);border:0;padding:8px 10px;cursor:pointer;box-shadow:inset 0 0 0 2px #0a141c,inset 0 0 0 4px var(--frame);font:inherit;transition:transform .12s}
.bgm:hover{transform:translateY(-3px)}
.bgm.sel{box-shadow:inset 0 0 0 2px #0a141c,inset 0 0 0 4px var(--gold)}
.bgm b{font:14px var(--f-dot)}.bgm small{font-size:11.5px;color:var(--mut)}
/* 下のお断り */
.foot{font-size:12.5px;color:var(--mut);line-height:1.8;padding:4px 6px}
.foot p{margin:0}
.kbd{font:12px var(--f-num);border:1px solid var(--frame);padding:0 5px;margin:0 2px}
/* 最初の画面（音ありで始める） */
.start{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(3,8,14,.88);padding:16px}
.start .box{max-width:520px;padding:22px;text-align:center;display:grid;gap:12px}
.start .box h2{font:30px var(--f-dot);margin:0;text-shadow:3px 3px 0 #000}.start .box h2 b{color:var(--gold);font-weight:400}
.start .box p{margin:0;color:var(--ink2)}
.start .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media (max-width:980px){.main{grid-template-columns:minmax(0,1fr)}.hud{grid-template-columns:1fr 1fr}.hud .score.price{grid-column:1/-1}.combo{grid-column:1/-1}}
@media (max-width:560px){.cards{grid-template-columns:1fr 1fr}.card{grid-template-columns:24px 1fr}.card canvas{width:24px;height:24px}.card b{font-size:13px}.logo h1{font-size:22px}.score .v{font-size:26px}.ctl input{width:96px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* v3b：ニュースの帯・銘柄と取引所を選ぶ・ウォッチ一覧・お知らせ（2026-10-19 カズ138/139） */
.ticker{position:sticky;top:0;z-index:30;display:flex;align-items:stretch;background:#03080e;box-shadow:0 2px 0 #2f5a7a;font:14px var(--f-body);height:34px}
.tkh{flex:none;display:grid;place-items:center;padding:0 12px;font:15px var(--f-dot);color:#1a0503;background:var(--down);letter-spacing:.1em}
.tkw{flex:1;overflow:hidden;position:relative;min-width:0}
.tki{position:absolute;left:0;white-space:nowrap;display:flex;align-items:center;height:100%;gap:14px;padding-left:16px;animation:tkm 60s linear infinite}
.tkw:hover .tki{animation-play-state:paused}
@keyframes tkm{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{color:var(--ink);text-decoration:none}.tk:hover{color:var(--gold);text-decoration:underline}
.tki i{color:var(--gold);font-style:normal}
.sok{font:12px var(--f-dot);color:#fff;background:#d6332a;padding:1px 6px;margin-right:6px}
.toast{position:fixed;left:50%;top:44px;transform:translateX(-50%);z-index:70;background:#2a0d0b;color:#ffd9d4;font:14px var(--f-body);padding:8px 14px;box-shadow:0 0 0 3px var(--down)}
.mut{font-size:12.5px;color:var(--mut)}
.pick2{padding:10px 12px;display:grid;gap:8px}
.prow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.prow .ttl{font-size:16px;color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;font:600 13px var(--f-num);color:var(--ink2);background:#06101a;padding:4px 8px;cursor:pointer;box-shadow:inset 0 0 0 2px #1e3446;transition:transform .1s}
.chip:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--frame-hi)}
.chip.on{color:var(--ink);background:#10263a;box-shadow:inset 0 0 0 2px var(--gold)}
.chip input{position:absolute;opacity:0;pointer-events:none}
.ci{display:inline-block;vertical-align:middle;flex:none}.cb{border-radius:50%;color:#fff;font-family:var(--f-dot);display:inline-grid;place-items:center;line-height:1}
.es{width:8px;height:8px;background:#55606a;display:inline-block}.es.ok{background:var(--up);box-shadow:0 0 6px var(--up)}.es.wait{background:var(--gold)}.es.ng{background:var(--down)}.es.none{background:#333}
.watch{padding:6px 10px 10px}
.whead,.wrow{display:grid;grid-template-columns:1.2fr 1.2fr .9fr 1fr 1fr 1.2fr;gap:8px;align-items:center}
.whead{font:12px var(--f-dot);color:var(--mut);padding:4px 8px}
.wrow{width:100%;text-align:left;background:transparent;border:0;color:var(--ink);font:600 15px var(--f-num);padding:6px 8px;cursor:pointer;border-top:1px dashed #1e3446}
.wrow:hover{background:#0c1e2e}.wrow.on{background:#10263a;box-shadow:inset 4px 0 0 var(--gold)}
.wn{display:flex;align-items:center;gap:8px;font:16px var(--f-dot)}.wb{color:var(--up)}.ws{color:var(--down)}.wc.up{color:var(--up)}.wc.dn{color:var(--down)}
.wr{height:10px;background:var(--down);box-shadow:inset 0 0 0 2px #000}.wr i{display:block;height:100%;background:var(--up);box-shadow:inset 0 0 0 2px #000}
.mi{display:inline-flex;vertical-align:middle;margin-right:4px}
#tapeList p{grid-template-columns:5.2em 6.5em 1fr 6.5em auto}#tapeList .c{display:flex;align-items:center;gap:4px;font-family:var(--f-dot)}#tapeList .x{color:var(--mut);font:12px var(--f-body)}
details.snd>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}details.snd>summary::-webkit-details-marker{display:none}
details.snd>summary::before{content:"▶";color:var(--gold);font:14px var(--f-dot);transition:transform .2s}details.snd[open]>summary::before{transform:rotate(90deg)}
details.snd>summary .ttl{font-size:18px}details.snd[open]>summary{margin-bottom:10px}
.sh{font-size:15px;margin:14px 0 6px;color:var(--ink2)}
.card .tag.off{color:var(--ink2);background:#22313e}
@media (max-width:620px){.whead{display:none}.wrow{grid-template-columns:1fr 1fr .9fr;grid-template-rows:auto auto;font-size:13px;row-gap:4px}.wrow .wb,.wrow .ws{font-size:12px}.wrow .wr{grid-column:3}#tapeList p{grid-template-columns:4.6em 5em 1fr;font-size:13px;gap:6px}#tapeList .p{grid-column:2/4;text-align:left;font-size:12px}#tapeList .x{display:none}details.snd>summary{flex-wrap:wrap;gap:4px 10px}details.snd>summary .ttl{white-space:nowrap}.card small{font-size:11px}}
/* v3c（2026-10-19 カズ140） */
.cvw{position:relative}.kazu{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}
#coinSearch{font:600 14px var(--f-num);background:#06101a;color:var(--ink);border:2px solid var(--frame);padding:5px 8px;width:220px;border-radius:0}
.mood{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:12px}.mbox{display:grid;justify-items:center;gap:4px;text-align:center}.mbox h2{font-size:17px;margin:0;color:var(--gold)}.mbox canvas{width:100%;max-width:320px;height:auto}
.src{font-size:12px;color:var(--mut);margin:0}.src a{color:var(--line)}
.mret{padding:12px;display:grid;gap:8px}.mret h2{font-size:18px;margin:0;color:var(--gold)}
.mtabs,.mkinds{display:flex;flex-wrap:wrap;gap:6px}.mtab,.mkind{font:13px var(--f-dot);color:var(--ink2);background:#06101a;border:0;box-shadow:inset 0 0 0 2px #1e3446;padding:4px 10px;cursor:pointer}.mtab.on,.mkind.on{color:var(--ink);box-shadow:inset 0 0 0 2px var(--gold);background:#10263a}
.mwrap{overflow-x:auto}.mt{border-collapse:collapse;width:100%;font:600 13px var(--f-num);min-width:760px}.mt th,.mt td{padding:5px 6px;text-align:center;border:1px solid #0a141c;white-space:nowrap}.mt th{font:13px var(--f-dot);color:var(--ink2);background:#0b1828}.mt td{color:#fff}.mt tr.agg th{color:var(--gold)}
.idea{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px}.idea h2{font-size:18px;margin:0;color:var(--gold)}.idea p{margin:4px 0 0;color:var(--ink2);font-size:14px}
@media (max-width:620px){.mood{grid-template-columns:1fr}#coinSearch{width:100%}}
.shares{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.shl{font-size:13px;color:var(--ink2);margin-left:6px}
.sh{display:inline-grid;place-items:center;min-width:40px;height:38px;padding:0 10px;font:700 15px var(--f-body);color:#fff;text-decoration:none;border:0;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.45);transition:transform .12s}
.sh:hover{transform:translateY(-3px)}.sh:active{transform:translateY(2px)}
.sh.x{background:#000;box-shadow:0 3px 0 #333}.sh.fb{background:#1877f2;font-family:Georgia,serif;font-size:20px}.sh.line{background:#06c755;font-size:12px}.sh.th{background:#101010;box-shadow:0 3px 0 #444}.sh.bs{background:#1185fe}.sh.cp,.sh.os{background:#2a3d4e;font-size:13px}