/* /oncasi/ theme , jyanken-poker.com Palette measured from the site's own archived stylesheets. Deliberately dimensional and vivid: this market rewards bright and celebratory. Flat bordered cards with an accent stripe read as a template. */ :root{ --mint:#7CE0D8; --mint-lt:#A8F0EA; --teal:#3FC7BC; --teal-deep:#1E9E95; --teal-ink:#0E4C48; --cream:#FFFBF3; --cream-2:#FFF1D9; --purple:#b98dea; --lime:#b0d679; --gold:#ffd14a; --cta:#fc8510; --cta-lt:#ffa544; --cta-dk:#d96b04; --ink:#16211F; --ink-soft:#3E4B48; --ink-faint:#6D7B78; --surface:#fff; --rule:#e6dcc9; --r-lg:20px; --r-md:15px; --r-sm:5px; --display:"Hiragino Maru Gothic ProN","Avenir Next Rounded","Avenir Next",system-ui,sans-serif; --body:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace; --wrap:75rem; } *{box-sizing:border-box} body{margin:0;font-family:var(--body);font-size:16px;line-height:1.8;color:var(--ink); background:var(--cream);-webkit-text-size-adjust:100%} img{max-width:100%;display:block} a{color:var(--teal-deep)} /* ── ground: flat and pale, like the real site. The sunburst is a header device only, never behind body copy, or the text stops being readable. */ body::before{content:"";position:fixed;inset:0;z-index:-1; background:linear-gradient(180deg,#EAF9F7 0,var(--cream) 42%,var(--cream) 100%)} /* ── header ── */ header.site{background:linear-gradient(165deg,var(--teal-deep) 0,var(--teal-ink) 100%); border-bottom:4px solid var(--gold)} header.site .bar{max-width:var(--wrap);margin:0 auto;padding:.6rem 1rem; display:flex;align-items:center;gap:.7rem} header.site .mark{width:46px;height:46px;flex:none;border-radius:var(--r-md); background:var(--cream);border:3px solid var(--teal-ink);overflow:hidden; display:grid;place-items:center;box-shadow:3px 3px 0 var(--teal-ink)} header.site .mark img{width:100%;height:100%;object-fit:contain;padding:3px} header.site .wordmark{font-family:var(--display);font-weight:800;font-size:1.1rem; color:#fff;line-height:1.2;text-shadow:2px 2px 0 var(--teal-ink)} header.site .wordmark small{display:block;font-size:.62rem;letter-spacing:.14em; font-weight:600;color:var(--teal-ink);text-shadow:none} nav.site{background:var(--teal-ink);overflow-x:auto;-webkit-overflow-scrolling:touch} nav.site ul{max-width:var(--wrap);margin:0 auto;padding:0 1rem;list-style:none; display:flex;gap:1.3rem;white-space:nowrap} nav.site a{display:block;padding:.55rem 0;font-family:var(--display);font-weight:700; font-size:.83rem;text-decoration:none;color:#bfe6e2} nav.site a[aria-current="page"]{color:#fff;box-shadow:inset 0 -4px 0 var(--cta)} /* ── layout ── */ .page{max-width:var(--wrap);margin:0 auto;padding:1rem .7rem 5.5rem} @media(min-width:46rem){.page{padding:1rem 1rem 5.5rem}} /* text sits on a solid card, never straight on the sunburst */ main.col{background:var(--surface);border:2px solid var(--rule); border-radius:var(--r-lg);padding:1rem .9rem 1.4rem} @media(min-width:46rem){main.col{padding:1.3rem 1.4rem 1.8rem}} .cols{display:flex;flex-direction:column;gap:1.9rem} @media(min-width:60rem){ .cols{flex-direction:row;align-items:flex-start;gap:2.1rem} main.col{flex:1 1 auto;min-width:0} aside.col{flex:0 0 19rem;position:sticky;top:.9rem} } /* ── hero ── */ .hero{border-radius:var(--r-lg);overflow:hidden;border:3px solid var(--teal-ink); box-shadow:5px 5px 0 var(--teal-deep);margin:0 0 1.1rem;background:var(--mint)} .hero img{width:100%;height:auto} /* ── type: JP poster weight, outlined ── */ h1{font-family:var(--display);font-weight:800;font-size:clamp(1.35rem,5.2vw,2.05rem); line-height:1.3;margin:.3rem 0 .6rem;color:var(--teal-ink);text-wrap:balance} h1 em{font-style:normal;color:var(--cta)} /* ribbon heading: the generated ribbon sits behind the label */ h2{font-family:var(--display);font-weight:800;font-size:clamp(1.12rem,3.9vw,1.4rem); line-height:1.35;margin:2.2rem 0 .8rem;color:#fff;text-wrap:balance; background:var(--teal-deep);border:3px solid var(--teal-ink);border-radius:var(--r-md); padding:.42rem .85rem;box-shadow:4px 4px 0 var(--mint); display:flex;align-items:center;gap:.5rem} /* one real icon per section, chosen by what the section is */ h2::before{content:"";width:1.3rem;height:1.3rem;flex:none; background-repeat:no-repeat;background-position:center;background-size:contain} h2.ic-trophy::before {background-image:url("/assets/elements/icon-trophy.webp")} h2.ic-coin::before {background-image:url("/assets/elements/icon-coin.webp")} h2.ic-check::before {background-image:url("/assets/elements/icon-check.webp")} h2.ic-compare::before{background-image:url("/assets/elements/icon-compare.webp")} h2.ic-book::before {background-image:url("/assets/elements/icon-book.webp")} h2.ic-speed::before {background-image:url("/assets/elements/icon-speed.webp")} h2.ic-faq::before {background-image:url("/assets/elements/icon-faq.webp")} h3{font-family:var(--display);font-weight:700;font-size:1.05rem;margin:1.5rem 0 .4rem; color:var(--teal-ink)} p{margin:0 0 1rem;color:var(--ink)} .lede{font-size:1.02rem;color:var(--ink);font-weight:500} /* house byline, on every page */ .byline{display:flex;align-items:center;gap:.55rem;margin:0 0 .9rem; padding:.5rem .7rem;background:var(--surface);border:2px solid var(--teal-ink); border-radius:var(--r-md);box-shadow:3px 3px 0 var(--mint)} .byline .av{width:2.2rem;height:2.2rem;flex:none;border-radius:50%; background:var(--teal-deep) url("/assets/elements/icon-check.webp") center/62% no-repeat; border:2px solid var(--teal-ink)} .byline .who{display:flex;flex-direction:column;gap:0;min-width:0} .byline .nm{font-family:var(--display);font-weight:800;font-size:.88rem;color:var(--teal-ink)} .byline .meta{font-size:.68rem;color:var(--ink-faint);font-weight:600} /* ══════════════════════════════════════════════════════════════ TOPLIST , one component, four placements .tl-podium top 3 as a raised podium, above the fold .tl-list the full ranked list (default) .tl-inline mini 3, dropped mid-article .mini sidebar rail Mobile stacks. From 46rem the list becomes a scannable single-line row. ══════════════════════════════════════════════════════════════ */ .toplist{list-style:none;padding:0;margin:0;display:grid;gap:1rem} /* ── placement 1: podium, top 3, deliberately flashy ── */ .tl-podium{list-style:none;margin:1.2rem 0;padding:0;display:grid;gap:.7rem; grid-template-columns:1fr} @media(min-width:46rem){ .tl-podium{grid-template-columns:1fr 1.18fr 1fr;align-items:end;gap:.85rem} .tl-podium .pod:nth-child(1){order:2} .tl-podium .pod:nth-child(2){order:1} .tl-podium .pod:nth-child(3){order:3} } .pod{position:relative;background:var(--surface);border:3px solid var(--teal-ink); border-radius:var(--r-lg);padding:1.5rem .8rem .8rem;text-align:center; display:flex;flex-direction:column;align-items:center;gap:.5rem; box-shadow:4px 4px 0 var(--teal)} .pod.first{border-color:#c98a04;box-shadow:5px 5px 0 var(--gold); background:linear-gradient(180deg,#fffdf6 0,#fff6dd 100%);padding-top:2.1rem} /* Rank markers 1-3. The shipped medal-2/medal-3 artwork is the same laurel medal in two flat brand colours with no number on it, so 2nd and 3rd read as "orange badge" and "teal badge" rather than silver and bronze. Drawn in CSS instead: real metallic ramps, the number sitting in the middle, and no image request. */ .pod .crown,.pod .pmedal{position:absolute;left:50%;transform:translateX(-50%); display:grid;place-items:center;border-radius:50%; font-family:var(--display);font-weight:800;line-height:1; filter:drop-shadow(0 2px 2px rgba(0,0,0,.22))} .pod .crown b,.pod .pmedal b{font-weight:800} /* 1st: Mr Panda wearing the crown, and the crown carries the 1. The crown art is a solid orange body under three rings, so its lower half is a clean surface for the numeral. Panda sits behind and below it. */ .pod .crown{top:-2.05rem;width:3rem;height:3.5rem; background:url("/assets/mascots/boy.png") bottom center/auto 2.1rem no-repeat; border:0;border-radius:0;place-items:start center} .pod .crown::before{content:"";position:absolute;top:0;left:50%; transform:translateX(-50%);width:1.85rem;height:1.85rem; background:url("/assets/elements/icon-crown.webp") center/contain no-repeat} .pod .crown b{position:absolute;top:.72rem;left:50%;transform:translateX(-50%); font-size:.82rem;color:#7a3d00;line-height:1; text-shadow:0 1px 0 rgba(255,255,255,.35)} /* 2nd silver, 3rd bronze */ .pod .pmedal{top:-.9rem;width:2.3rem;height:2.3rem;font-size:1rem} .pod.p2 .pmedal{ background:linear-gradient(160deg,#ffffff 0,#dfe4e8 38%,#a8b0b8 70%,#79828b 100%); border:2.5px solid #6b747d;color:#3a4249; text-shadow:0 1px 0 rgba(255,255,255,.6)} .pod.p3 .pmedal{ background:linear-gradient(160deg,#ffdfc0 0,#e0a468 38%,#c07a33 70%,#8d5219 100%); border:2.5px solid #7a4614;color:#4a2a0a; text-shadow:0 1px 0 rgba(255,255,255,.4)} .pod .logo{width:100%;max-width:8.5rem} .pod .brand{font-family:var(--display);font-weight:800;font-size:1rem;color:var(--teal-ink)} .pod .fig{font-family:var(--display);font-weight:800;font-size:.98rem;color:var(--cta-dk); line-height:1.35;word-break:keep-all;text-wrap:balance; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; overflow:hidden;min-height:4.05em} .pod.first .fig{font-size:1.06rem} .pod .lbl{font-size:.66rem;color:var(--ink-faint);font-weight:700} .pod .cta{width:100%;margin-top:auto} /* sparkle only behind the winner, so it reads as emphasis not wallpaper */ .pod.first::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg); background:url("/assets/elements/decor-sparkle.webp") center/78% no-repeat; opacity:.16;pointer-events:none} /* ── placement 2 + 3 share the row card ── */ .pick{position:relative;background:var(--surface);border:3px solid var(--teal-ink); border-radius:var(--r-lg);padding:.85rem;display:grid;gap:.65rem; grid-template-columns:auto 1fr;align-items:center; box-shadow:4px 4px 0 var(--teal)} .pick.lead{box-shadow:5px 5px 0 var(--cta);border-color:var(--cta-dk)} /* ===== logo chip: ONE rule for every placement ================== Every wordmark asset is 150x80. Locking the chip to that aspect ratio and containing on both axes means no placement can clip. Size is set by width alone, never height. Three competing rules is what broke this before. */ .logo{aspect-ratio:150 / 80;flex:none;border-radius:var(--r-sm);overflow:hidden; background:linear-gradient(160deg,var(--teal) 0,var(--teal-deep) 100%); border:2px solid var(--teal-ink);display:grid;place-items:center;padding:.3rem} .logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain; display:block} .logo.none{font-family:var(--display);font-weight:800;color:#fff;text-align:center; line-height:1.15;font-size:.62rem;word-break:break-word;padding:.2rem} /* ================================================================ */ .pick .logo{width:6.2rem} .pick .body{min-width:0;display:flex;flex-direction:column;gap:.18rem} .pick .brand{font-family:var(--display);font-weight:800;font-size:1.04rem; color:var(--teal-ink);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap} /* figure leads, label supports. keep-all stops JP breaking mid-word. */ .pick .offer{display:flex;flex-direction:column;gap:0;word-break:keep-all} .pick .offer .lbl{font-size:.68rem;font-weight:700;color:var(--ink-faint);line-height:1.3} .pick .offer .fig{font-family:var(--display);font-weight:800;font-size:.96rem; color:var(--cta-dk);line-height:1.35;word-break:keep-all; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;min-height:2.7em} .pick .meta{display:flex;flex-wrap:wrap;gap:.25rem .6rem;font-size:.76rem;color:var(--ink-faint)} .stars{color:var(--gold);letter-spacing:.05em;-webkit-text-stroke:.4px var(--cta-dk)} .pick .cta{grid-column:1/-1} /* feature chips: real icons, not a cluster shrunk to mush */ .feats{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.1rem; align-content:flex-start} /* HARD rule: toplist boxes are the same size. Chip text length varies per brand, so reserve two chip rows and every card matches regardless. */ .pick .feats{min-height:3.45rem} @media(min-width:46rem){.tl-list .pick .feats{min-height:0}} .feat{display:inline-flex;align-items:center;gap:.24rem;font-size:.68rem; font-weight:700;color:var(--teal-ink);background:var(--cream-2); border:1.5px solid var(--teal);border-radius:var(--r-sm);padding:.1rem .38rem; white-space:nowrap} .feat::before{content:"";width:.82rem;height:.82rem;flex:none; background-repeat:no-repeat;background-position:center;background-size:contain} .feat.f-speed::before{background-image:url("/assets/elements/icon-speed.webp")} .feat.f-coin::before {background-image:url("/assets/elements/icon-coin.webp")} .feat.f-check::before{background-image:url("/assets/elements/icon-check.webp")} /* star rating built from the generated star, so no text glyph is involved */ .stars{display:inline-flex;gap:.06rem;vertical-align:-.12em} .stars i{width:.86rem;height:.86rem;display:block; background:url("/assets/elements/icon-star.webp") center/contain no-repeat} .stars i.half{clip-path:inset(0 50% 0 0)} .rate{font-family:var(--mono);font-size:.74rem;color:var(--ink-faint); font-variant-numeric:tabular-nums} /* the old 5-column desktop card was removed here: its markup (.body/.offer/.feats/.rating) no longer exists after the redesign. */ /* mobile keeps the rating inline under the figure */ .rating{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap} /* rank: real medal for 1-3, chip after that */ .rank{position:absolute;top:-.7rem;left:-.7rem;width:2.7rem;height:2.7rem; display:grid;place-items:center;font-family:var(--display);font-weight:800; font-size:.9rem;color:#fff;background:var(--teal-deep); border:3px solid var(--teal-ink);border-radius:50%;z-index:2} /* Rank badges, drawn not generated. The generated medal art was replaced: its colours were palette teal and orange, which do not read as first, second and third, and the numeral collided with the laurel at 48px. Metal colours plus a clear numeral do the one job this element has. */ .rank.medal{width:2.9rem;height:2.9rem;border-radius:50%; font-family:var(--display);font-weight:800;font-size:1.15rem; display:grid;place-items:center;line-height:1; border:3px solid var(--teal-ink);background-image:none} .rank.medal::after{content:"";position:absolute;inset:3px;border-radius:50%; background:linear-gradient(160deg,rgba(255,255,255,.55) 0, rgba(255,255,255,0) 46%, rgba(0,0,0,.10) 100%);pointer-events:none} .rank.m1{background:linear-gradient(165deg,#FFE9A8 0,#F5C242 52%,#C89111 100%); color:#6A4A00;box-shadow:0 3px 0 #A5760C} .rank.m2{background:linear-gradient(165deg,#F4F6F7 0,#C9D2D6 52%,#93A0A6 100%); color:#44525A;box-shadow:0 3px 0 #7C8A91} .rank.m3{background:linear-gradient(165deg,#F0C9A4 0,#CE8E5C 52%,#9A6134 100%); color:#5A3316;box-shadow:0 3px 0 #7E4E29} .seal{position:absolute;top:-1rem;right:-.7rem;width:4.2rem;height:4.2rem;z-index:2; background:url("/assets/elements/seal.webp") center/contain no-repeat; display:grid;place-items:center;font-family:var(--display);font-weight:800; font-size:.5rem;line-height:1.15;text-align:center;color:var(--teal-ink); padding:1.05rem;letter-spacing:-.02em} .badge.warn{background:#ffe0b8;color:#8a4a00;border-color:#d98514} .badge{font-family:var(--display);font-size:.62rem;letter-spacing:.06em; padding:.12rem .42rem;border-radius:var(--r-sm);background:var(--lime); color:#33471d;border:1.5px solid #7fa348;font-weight:700} /* ── one CTA treatment, dimensional ── */ .cta{display:block;text-align:center;text-decoration:none;color:#fff; font-family:var(--display);font-weight:800;font-size:1.02rem; background:linear-gradient(180deg,var(--cta-lt) 0,var(--cta) 55%,var(--cta-dk) 100%); border:2.5px solid #a85104;border-radius:var(--r-md);padding:.8rem 1rem; min-height:48px;line-height:1.55;box-shadow:0 4px 0 #a85104; text-shadow:0 1px 0 rgba(0,0,0,.22)} .cta:active{transform:translateY(3px);box-shadow:0 1px 0 #a85104} .cta.small{font-size:.9rem;padding:.6rem .9rem;min-height:44px;box-shadow:0 3px 0 #a85104} /* ── stat tiles ── */ .tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem;margin:1.15rem 0} @media(min-width:34rem){.tiles{grid-template-columns:repeat(4,1fr)}} .tile{position:relative;overflow:hidden;border:3px solid var(--teal-ink); border-radius:var(--r-md);padding:.65rem .5rem .55rem;text-align:center; display:flex;flex-direction:column;justify-content:center;gap:.05rem; min-height:5.4rem;box-shadow:4px 4px 0 var(--teal-deep); background:linear-gradient(180deg,var(--mint) 0,var(--teal) 100%)} /* diagonal banding, same device as the page head */ .tile::before{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(115deg,rgba(255,255,255,.22) 0 18px, rgba(255,255,255,0) 18px 36px)} /* the numeral carries a thick white stroke and a hard drop, poster style */ .tile b{position:relative;font-family:var(--display);font-weight:800; font-size:1.62rem;line-height:1.1;color:var(--cta-dk); -webkit-text-stroke:5px #fff;paint-order:stroke fill; text-shadow:0 3px 0 var(--teal-ink);font-variant-numeric:tabular-nums} .tile span{position:relative;font-family:var(--display);font-size:.7rem; font-weight:800;color:#fff;line-height:1.3;letter-spacing:.02em; text-shadow:0 1px 0 var(--teal-ink)} @media(min-width:34rem){.tile b{font-size:1.78rem}} /* ── sidebar ── */ .panel{background:var(--surface);border:2.5px solid var(--teal-ink);border-radius:var(--r-md); padding:.85rem .95rem;margin-bottom:.95rem;box-shadow:3px 3px 0 var(--teal)} .panel > h2{margin:0 0 .6rem;font-size:.92rem;padding:.3rem .6rem;box-shadow:none; border-width:2px} .panel > h2::before{width:.95rem;height:.95rem} .toc{list-style:none;margin:0;padding:0;counter-reset:t} .toc li{counter-increment:t;font-size:.85rem;padding:.24rem 0;border-bottom:1px dashed var(--rule)} .toc li:last-child{border-bottom:0} .toc a{text-decoration:none;display:flex;gap:.4rem} .toc a::before{content:counter(t);font-family:var(--mono);font-size:.72rem; color:#fff;background:var(--teal);border-radius:var(--r-sm); min-width:1.25rem;text-align:center;flex:none;font-weight:700} .trust{list-style:none;margin:0;padding:0;font-size:.84rem;color:var(--ink-soft)} .trust li{display:flex;gap:.45rem;padding:.22rem 0;align-items:flex-start} .trust li::before{content:"";width:1rem;height:1rem;flex:none;margin-top:.35rem; background:url("/assets/elements/icon-check.webp") center/contain no-repeat} /* sidebar rail: logo, bonus figure and its own CTA. A name on its own converts nothing, so the rail carries the same three things a row does. */ .mini{list-style:none;margin:0;padding:0;display:grid;gap:.6rem} .mini li{display:grid;grid-template-columns:auto 1fr;gap:.4rem .55rem; align-items:center;padding-bottom:.6rem;border-bottom:1px dashed var(--rule)} .mini li:last-child{border-bottom:0;padding-bottom:0} .mini .rk{width:1.5rem;height:1.5rem;border-radius:50%;flex:none; background:var(--teal-deep);color:#fff;font-family:var(--display);font-weight:800; font-size:.7rem;display:grid;place-items:center} .mini li:first-child .rk{background:var(--cta)} .mini .logo{width:4.6rem} .mini .logo.none{font-size:.55rem} .mini .info{grid-column:1/-1;display:flex;flex-direction:column;gap:.05rem} .mini .nm{font-family:var(--display);font-weight:800;font-size:.84rem;color:var(--teal-ink)} .mini .lbl{font-size:.6rem;color:var(--ink-faint);font-weight:700} .mini .fig{font-family:var(--display);font-weight:800;font-size:.78rem;color:var(--cta-dk); line-height:1.3;word-break:keep-all; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;min-height:2.6em} .mini .cta{grid-column:1/-1;font-size:.76rem;padding:.42rem .5rem;min-height:38px; box-shadow:0 3px 0 #a85104} /* ── table ── */ .tablewrap{overflow-x:auto;border:2.5px solid var(--teal-ink);border-radius:var(--r-md); background:var(--surface);margin:1.15rem 0;box-shadow:3px 3px 0 var(--teal)} table{border-collapse:collapse;width:100%;font-size:.86rem} /* min-width only inside a scroller, or it widens the document */ .tablewrap table{min-width:32rem} th,td{padding:.58rem .7rem;text-align:left;border-bottom:1px solid var(--rule)} th{background:var(--teal-deep);color:#fff;font-family:var(--display);font-weight:700; font-size:.75rem;white-space:nowrap;border-bottom:2px solid var(--teal-ink)} td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap} tbody tr:nth-child(even){background:var(--cream)} tbody tr:last-child td{border-bottom:0} /* ── faq ── */ .faq{display:grid;gap:.55rem;margin:1rem 0} details{background:var(--surface);border:2.5px solid var(--teal-ink);border-radius:var(--r-md); padding:.72rem .85rem;box-shadow:3px 3px 0 var(--mint)} details[open]{box-shadow:3px 3px 0 var(--cta)} summary{font-family:var(--display);font-weight:700;font-size:.93rem;cursor:pointer; list-style:none;display:flex;gap:.5rem;align-items:flex-start;color:var(--teal-ink)} summary::-webkit-details-marker{display:none} summary::before{content:"Q";flex:none;width:1.35rem;height:1.35rem;border-radius:50%; background:var(--cta);color:#fff;font-size:.78rem;display:grid;place-items:center} details p{margin:.6rem 0 0;font-size:.89rem;color:var(--ink-soft)} /* ── breadcrumb: bottom ── */ .crumbs{max-width:var(--wrap);margin:0 auto;padding:1rem 1rem 2rem;font-size:.77rem; color:var(--ink-faint)} .crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.32rem} .crumbs li:not(:last-child)::after{content:" ›";color:var(--teal)} .crumbs a{text-decoration:none} footer.site{background:var(--teal-ink);color:#c9e8e5;font-size:.82rem; border-top:4px solid var(--teal)} footer.site .inner{max-width:var(--wrap);margin:0 auto;padding:1.4rem 1rem 2.2rem; display:flex;flex-direction:column;gap:.45rem} footer.site a{color:var(--mint)} .disclosure{font-size:.75rem;color:var(--ink-soft);background:var(--cream-2); border:1.5px dashed var(--teal);border-radius:var(--r-sm);padding:.45rem .7rem;margin:.85rem 0} .sticky{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:.5rem .75rem; background:rgba(31,79,74,.94);border-top:3px solid var(--mint);backdrop-filter:blur(6px)} @media(min-width:60rem){.sticky{display:none}} .scaffold{background:#fff3d6;border:2px dashed var(--cta);border-radius:var(--r-sm); padding:.42rem .7rem;font-size:.75rem;color:#8a5200;margin:.55rem 0;font-weight:600} :focus-visible{outline:3px solid var(--cta);outline-offset:2px} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* hero bar. The art deliberately leaves its left 45 percent empty and the page title is laid over that space as REAL TEXT, never baked into the image. So a title change costs nothing and the copy stays translatable. */ .herobar{position:relative;border-radius:var(--r-lg);overflow:hidden; border:3px solid var(--teal-ink);box-shadow:5px 5px 0 var(--teal-deep); margin:.2rem 0 1.1rem;background:var(--mint);isolation:isolate} .herobar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:right center;z-index:-1} .herobar .cap{display:flex;flex-direction:column;gap:.35rem; padding:1.1rem 1rem;min-height:9.5rem;justify-content:center;max-width:56%} .herobar .eyebrow{font-family:var(--display);font-weight:800;font-size:.66rem; letter-spacing:.16em;color:var(--teal-ink);opacity:.85} .herobar .t{font-family:var(--display);font-weight:800; font-size:clamp(1.15rem,3.6vw,1.7rem);line-height:1.25;color:var(--teal-ink); text-wrap:balance;text-shadow:0 1px 0 rgba(255,255,255,.6)} .herobar .s{font-size:.8rem;font-weight:600;color:var(--teal-ink);opacity:.9; line-height:1.5} /* below 30rem the art has no room to read, so hide it and keep the plate */ @media(max-width:30rem){ .herobar img{opacity:.28} .herobar .cap{max-width:100%;min-height:7.5rem} } @media(min-width:60rem){.herobar .cap{min-height:11rem;padding:1.3rem 1.6rem}} /* brand name and logo both link through to the review */ .pick .brand a{color:inherit;text-decoration:none} .pick .brand a:hover{text-decoration:underline} a.logolink{display:block;text-decoration:none} @media(min-width:46rem){.tl-list .pick a.logolink{width:6.6rem}} /* provenance note under a data table */ .note{font-size:.76rem;color:var(--ink-faint);margin:.4rem 0 0;line-height:1.6} /* ===== page head band: radiating sunburst with floating objects ===== Drawn in CSS, not a picture, so it scales to any width and costs no request. Objects are the existing element set, scattered and rotated. */ .pagehead{position:relative;overflow:hidden;margin:0 0 1.2rem; border-radius:var(--r-lg);border:3px solid var(--teal-ink); box-shadow:5px 5px 0 var(--teal-deep); background: radial-gradient(ellipse 110% 85% at 50% -12%, rgba(255,255,255,.42) 0, rgba(255,255,255,0) 58%), repeating-conic-gradient(from 0deg at 50% -16%, rgba(255,255,255,.30) 0deg 1.7deg, rgba(255,255,255,0) 1.7deg 4.0deg), linear-gradient(165deg, var(--teal) 0, var(--teal-deep) 100%)} .pagehead .inner{position:relative;z-index:2;padding:2.1rem 1rem 1.9rem; text-align:center;display:flex;flex-direction:column;gap:.3rem} .pagehead .en{font-family:var(--display);font-weight:800; font-size:clamp(1.55rem,6.6vw,2.9rem);letter-spacing:.12em;color:#fff; line-height:1.1; text-shadow:0 2px 0 rgba(14,76,72,.55), 0 4px 14px rgba(14,76,72,.45)} .pagehead .jp{font-family:var(--display);font-weight:800; font-size:clamp(.9rem,2.9vw,1.1rem);color:#EAFFFD;letter-spacing:.14em; text-shadow:0 2px 0 rgba(14,76,72,.6), 0 3px 10px rgba(14,76,72,.4)} /* floating objects. Absolute, rotated, behind the text. */ .pagehead i{position:absolute;z-index:1;opacity:.55;display:block;background-repeat:no-repeat; background-position:center;background-size:contain; filter:drop-shadow(0 3px 3px rgba(31,79,74,.18))} .pagehead i.o1{width:4.6rem;height:4.6rem;left:2%;top:6%;transform:rotate(-18deg); background-image:url("/assets/elements/icon-cards.webp")} .pagehead i.o2{width:2.7rem;height:2.7rem;left:16%;bottom:8%;transform:rotate(14deg); background-image:url("/assets/elements/icon-coin.webp")} .pagehead i.o3{width:3.4rem;height:3.4rem;right:3%;top:10%;transform:rotate(22deg); background-image:url("/assets/elements/icon-dice.webp")} .pagehead i.o4{width:3rem;height:3rem;right:15%;bottom:6%;transform:rotate(-12deg); background-image:url("/assets/elements/icon-roulette.webp")} .pagehead i.o5{width:2.2rem;height:2.2rem;left:34%;top:4%;transform:rotate(-8deg); background-image:url("/assets/elements/icon-coin.webp");opacity:.7} .pagehead i.o6{width:2.4rem;height:2.4rem;right:33%;top:6%;transform:rotate(16deg); background-image:url("/assets/elements/icon-cards.webp");opacity:.65} /* below 34rem only the outer four stay, the rest crowd the type */ @media(max-width:34rem){.pagehead i.o5,.pagehead i.o6{display:none} .pagehead i.o1{width:3.2rem;height:3.2rem}.pagehead i.o3{width:2.6rem;height:2.6rem}} @media(min-width:60rem){.pagehead .inner{padding:2.9rem 1rem 2.6rem}} /* section body copy: readable weight and colour on the white card */ main.col section p, main.col section li{color:var(--ink);font-size:.96rem;line-height:1.85} main.col section h3{color:var(--teal-deep)} td{color:var(--ink)} /* sticky bar: logo, bonus figure, button. Three things, one line. */ .sbar{display:grid;grid-template-columns:auto 1fr auto;gap:.55rem;align-items:center; max-width:var(--wrap);margin:0 auto} .sbar .logo{width:3.6rem} .sbar .sinfo{display:flex;flex-direction:column;gap:0;min-width:0} .sbar .snm{font-family:var(--display);font-weight:800;font-size:.78rem;color:#fff; line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sbar .sfig{font-family:var(--display);font-weight:800;font-size:.72rem; color:var(--gold);line-height:1.25; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sbar .cta{font-size:.82rem;padding:.5rem .7rem;min-height:42px;white-space:nowrap} /* a real full-colour logo needs a light plate, not the teal chip */ /* The plate comes from tile_colours.json via an inline --lt, measured against the logo's own ink. Hardcoding #fff here made white-knockout logos invisible everywhere the component did not supply its own tile. */ .logo.real{background:var(--lt,#fff);border-color:transparent;padding:.22rem} /* removed: box around a white plate on a white card. */ .sbar .logo.real{background:var(--lt,#fff)} /* header wordmark: one asset, scales, reads on any ground because the glyphs carry their own dark and cream strokes. Replaces white text on a light bar. */ header.site .bar{justify-content:flex-start} header.site .brandlink{display:block;line-height:0} header.site .wm{height:2.5rem;width:auto;max-width:min(84vw,17rem)} @media(min-width:46rem){header.site .wm{height:3rem;max-width:21rem}} /* ============================================================= ONCASI DESIGN LANGUAGE, taken from the site's own logo The wordmark's construction is the reference: a warm gradient face, a cream inner stroke, a dark outer stroke, an eyebrow above, and chunky rounded geometry. Applying that same construction to headings is what makes the vertical read as one family rather than a theme with a logo bolted on. ============================================================= */ :root{ --oc-face-a:#FFE9A8; /* wordmark highlight */ --oc-face-b:#F5C242; /* wordmark body */ --oc-inner:#FFF9F0; /* cream inner stroke */ --oc-outer:#0E4C48; /* dark outer stroke */ --oc-stroke:5px; } /* the display construction, reusable */ .oc-puff{ font-family:var(--display);font-weight:800; color:var(--oc-face-b); -webkit-text-stroke:var(--oc-stroke) var(--oc-inner); paint-order:stroke fill; text-shadow:0 3px 0 var(--oc-outer), 0 5px 10px rgba(14,76,72,.30); } /* h1 keeps site-ink for legibility on the white card, but takes the wordmark's weight and the eyebrow device */ h1{position:relative} h1::before{content:attr(data-eyebrow);display:block; font-family:var(--display);font-weight:800;font-size:.6rem; letter-spacing:.22em;color:var(--teal-deep);margin-bottom:.25rem} /* h2: same construction as the wordmark, so headings and logo match. Sits on a teal plate the way the wordmark sits on the header. */ h2{background:linear-gradient(165deg,var(--teal-deep) 0,var(--oc-outer) 100%); border:3px solid var(--oc-outer);box-shadow:4px 4px 0 var(--mint); color:var(--oc-face-b); -webkit-text-stroke:3.5px var(--oc-outer);paint-order:stroke fill; text-shadow:none;padding:.5rem .9rem} .panel > h2{-webkit-text-stroke:2.5px var(--oc-outer);padding:.35rem .6rem} /* pagehead title now uses the identical construction, not plain white */ .pagehead .en{color:var(--oc-face-b); -webkit-text-stroke:5px var(--oc-inner);paint-order:stroke fill; text-shadow:0 4px 0 var(--oc-outer), 0 6px 16px rgba(14,76,72,.35)} .pagehead .jp{color:var(--oc-inner); -webkit-text-stroke:3.5px var(--oc-outer);paint-order:stroke fill; text-shadow:none} /* toplist figure and tier numerals inherit the same face */ .pick .offer .fig, .pod .fig{color:var(--cta-dk)} .pod.first .fig{color:var(--oc-face-b); -webkit-text-stroke:4px var(--oc-outer);paint-order:stroke fill} /* eyebrow device above each section, echoing AMUSEMENT above the wordmark */ main.col section{position:relative} /* Same-size rule: the 未確認 / データ未取得 badges wrap the brand line on some rows and not others, which desynced card heights. Reserve two lines. */ /* FIXED, not min: Konibet carries two badges and wraps to 62px while Casino.me carries one and sits at 43px. A floor cannot equalise that. */ .pick .brand{height:3.85em;overflow:hidden;align-content:flex-start} @media(min-width:46rem){ .tl-list .pick .brand{min-height:0;flex-wrap:nowrap;overflow:hidden} .tl-list .pick .brand a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} } /* ===== mobile navigation ===== Burger sits top right INSIDE the header bar, the way the venue site does it. Six items never fit a 375px strip, and a horizontal scroller hid items with no affordance. Pure CSS toggle, no JavaScript, so it cannot fail to load. */ .burger{display:none} @media(max-width:59.99rem){ header.site .bar{gap:.5rem} header.site .burger{display:flex;align-items:center;gap:.5rem;cursor:pointer; margin-left:auto;flex:none;padding:.45rem .6rem;border-radius:var(--r-sm); border:2px solid var(--gold);background:rgba(255,255,255,.07); font-family:var(--display);font-weight:800;font-size:.7rem; letter-spacing:.12em;color:var(--gold);min-height:44px} header.site .burger:active{background:rgba(255,255,255,.16)} /* three even bars in a fixed box, no absolute positioning */ header.site .burger .bars{display:flex;flex-direction:column; justify-content:space-between;width:1.3rem;height:.8rem;flex:none} header.site .burger .bars span{display:block;width:100%;height:3px; border-radius:2px;background:var(--gold); transition:transform .18s ease, opacity .18s ease} .navtoggle:checked ~ header.site .burger .bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .navtoggle:checked ~ header.site .burger .bars span:nth-child(2){opacity:0} .navtoggle:checked ~ header.site .burger .bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} /* the strip itself is gone until the burger opens it */ nav.site{display:none;overflow:visible} .navtoggle:checked ~ nav.site{display:block} nav.site ul{flex-direction:column;white-space:normal;gap:0;padding:0 0 .4rem} nav.site li{border-bottom:1px solid rgba(245,194,66,.18)} nav.site li:last-child{border-bottom:0} nav.site ul a{padding:.85rem 1rem;font-size:.94rem;min-height:46px; display:flex;align-items:center} nav.site ul a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--cta); background:rgba(255,255,255,.06)} } /* section index card grid */ .cardgrid{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.6rem; grid-template-columns:1fr} @media(min-width:34rem){.cardgrid{grid-template-columns:1fr 1fr}} @media(min-width:60rem){.cardgrid{grid-template-columns:repeat(3,1fr)}} .cardgrid a{display:flex;flex-direction:column;gap:.1rem;text-decoration:none; background:var(--cream-2);border:2.5px solid var(--teal-ink); border-radius:var(--r-md);padding:.75rem .85rem;min-height:4.2rem; justify-content:center;box-shadow:3px 3px 0 var(--teal)} .cardgrid a:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--teal)} .cg-t{font-family:var(--display);font-weight:800;font-size:1rem;color:var(--teal-ink)} .cg-s{font-size:.72rem;color:var(--ink-soft);font-weight:600} /* The 当サイト限定 seal is absolutely positioned over the top right of the first card, so the brand line and its badges ran underneath it. Reserve the seal's footprint on the lead card only. */ .pick.lead .brand{padding-right:3.6rem} .pick.lead .seal{z-index:3} @media(min-width:46rem){ .tl-list .pick.lead .brand{padding-right:3.2rem} } /* the podium winner has the crown above it, so no seal collision there */ /* ===== intro collapse ===== The lede ran 9 lines on a phone and pushed the first pick below the fold, which is the one thing that has to be visible. Clamp to 3 lines with a toggle. Pure CSS, and the full text stays in the DOM for crawlers. */ .ledewrap{position:relative;margin:0 0 .9rem} .more{display:none} @media(max-width:59.99rem){ .ledewrap .lede{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; overflow:hidden;margin:0} .moretoggle:checked ~ .ledewrap .lede{display:block;-webkit-line-clamp:unset} .ledewrap .more{display:inline-flex;align-items:center;gap:.3rem;cursor:pointer; margin-top:.35rem;font-family:var(--display);font-weight:800;font-size:.8rem; color:var(--teal-deep);min-height:32px} .ledewrap .more::after{content:"";width:.5rem;height:.5rem; border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor; transform:rotate(45deg);margin-top:-.25rem} .moretoggle:checked ~ .ledewrap .more::after{transform:rotate(-135deg);margin-top:.2rem} .ledewrap .more .off{display:none} .moretoggle:checked ~ .ledewrap .more .on{display:none} .moretoggle:checked ~ .ledewrap .more .off{display:inline} /* tighten what sits between the title and the first pick */ .byline{margin-bottom:.6rem;padding:.4rem .6rem} .disclosure{margin:.5rem 0;padding:.35rem .6rem;font-size:.7rem} .tiles{margin:.7rem 0;gap:.45rem} .tile{min-height:4.4rem} main.col section:first-of-type h2{margin-top:1rem} } /* ===== above-the-fold budget (mobile) ===== The 2x2 tile grid cost ~360px between the title and the first pick, which is the one element that must be visible. Collapse to a single compact strip and slim the disclosure to one line. Same information, a fifth of the space. */ @media(max-width:59.99rem){ .tiles{grid-template-columns:repeat(4,1fr);gap:.3rem;margin:.6rem 0} .tile{min-height:0;padding:.35rem .15rem;border-width:2px; box-shadow:2px 2px 0 var(--teal-deep);border-radius:var(--r-sm);gap:0} .tile b{font-size:.95rem;-webkit-text-stroke:3px #fff;text-shadow:0 2px 0 var(--teal-ink)} .tile span{font-size:.54rem;letter-spacing:0;line-height:1.25} .disclosure{margin:.4rem 0;padding:.3rem .55rem;font-size:.66rem;line-height:1.45; border-width:1px} } /* ===== comparison matrix ===== Label column frozen, brand columns scroll sideways. Fifteen brands will not fit a phone otherwise without shrinking type past readable. */ .cmpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch; border:3px solid var(--teal-ink);border-radius:var(--r-md); background:var(--surface);margin:1.1rem 0;box-shadow:4px 4px 0 var(--teal)} table.cmp{border-collapse:separate;border-spacing:0;min-width:0;width:auto} table.cmp th[scope=row]{position:sticky;left:0;z-index:2;background:var(--cream-2); border-right:3px solid var(--teal-ink);border-bottom:1px solid var(--rule); font-family:var(--display);font-weight:800;font-size:.76rem;color:var(--teal-ink); text-align:left;padding:.55rem .6rem;white-space:nowrap;min-width:6.2rem} table.cmp td{border-bottom:1px solid var(--rule);border-right:1px solid var(--rule); padding:.5rem .55rem;text-align:center;vertical-align:middle; min-width:8.6rem;font-size:.82rem} table.cmp tr:last-child th, table.cmp tr:last-child td{border-bottom:0} /* brand header cell: the brand's own colour, so a white logo reads on it */ .mhead{display:flex;flex-direction:column;align-items:center;gap:.3rem; background:var(--bc);margin:-.5rem -.55rem;padding:.6rem .5rem;min-height:5.4rem; justify-content:center} .mhead .logo{width:5.4rem;background:transparent;border:0;padding:0} .mnm{font-family:var(--display);font-weight:800;font-size:.78rem;color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35)} .mscore{display:flex;flex-direction:column;align-items:center;gap:.1rem} .mscore b{font-family:var(--display);font-size:1rem;color:var(--teal-ink)} .mbonus{font-family:var(--display);font-weight:800;font-size:.78rem; color:var(--cta-dk);line-height:1.35;display:block} table.cmp td img{display:inline-block;margin:0 1px;vertical-align:middle} table.cmp .cta{font-size:.74rem;padding:.45rem .5rem;min-height:38px} /* ===== toplist card, brand-banner pattern ===== The banner takes the brand's own accent colour, which is what makes a white-knockout logo correct rather than a stand-in. Rank sits on the banner, score opposite it, then the spec rows, the bonus block, and one CTA. */ .pick{padding:0;overflow:hidden;display:block} .bhead{position:relative;background:var(--bc);padding:1.5rem .8rem .7rem; display:flex;flex-direction:column;align-items:center;gap:.35rem;min-height:6.4rem; justify-content:center} .bhead .rank{position:absolute;top:.5rem;left:.5rem;margin:0; background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.55); color:#fff;box-shadow:none;text-shadow:0 1px 2px rgba(0,0,0,.3)} .bhead .rank.medal{border:3px solid rgba(255,255,255,.6)} .ratepill{position:absolute;top:.5rem;right:.5rem;display:flex;align-items:center; gap:.3rem;background:#fff;border-radius:999px;padding:.28rem .6rem; box-shadow:0 2px 5px rgba(0,0,0,.18)} .ratepill b{font-family:var(--display);font-size:.9rem;color:var(--teal-ink); font-variant-numeric:tabular-nums} .bhead .bmark{display:block;text-decoration:none} .bhead .logo{width:8.6rem;background:transparent;border:0;padding:0;aspect-ratio:150/80} .bhead .logo.real{background:var(--lt,#fff);border:2px solid transparent;padding:.25rem} .bhead .logo.none{color:#fff;font-size:.9rem} .bjp{font-family:var(--display);font-weight:800;font-size:.9rem;color:#fff; display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;justify-content:center; text-shadow:0 1px 2px rgba(0,0,0,.32);height:auto;padding:0} /* spec rows: label left, value right */ .specs{display:grid;grid-template-columns:auto 1fr;gap:.3rem .7rem; padding:.7rem .8rem;align-items:center} .sk{font-family:var(--display);font-weight:800;font-size:.74rem;color:var(--ink-soft); white-space:nowrap} .sv{font-family:var(--display);font-weight:800;font-size:.86rem;color:var(--teal-ink)} .payrow{display:flex;flex-wrap:wrap;gap:.2rem;align-items:center} .payrow img{width:2rem;height:1.3rem;object-fit:contain} .paynote{grid-column:1/-1;font-size:.62rem;color:var(--ink-faint);line-height:1.4} /* bonus block: tab label, big figure, wagering, code panel */ .bblock{margin:.2rem .8rem .8rem;border:2.5px solid var(--teal-ink); border-radius:var(--r-md);background:var(--cream-2);padding:1rem .7rem .7rem; position:relative;display:flex;flex-direction:column;align-items:center;gap:.15rem} .btab{position:absolute;top:-.75rem;left:.6rem;background:var(--teal-deep); color:var(--gold);font-family:var(--display);font-weight:800;font-size:.68rem; padding:.18rem .55rem;border-radius:var(--r-sm);border:2px solid var(--teal-ink)} .bfig{font-family:var(--display);font-weight:800;font-size:1.1rem;color:var(--cta-dk); text-align:center;line-height:1.35;word-break:keep-all} .bwager{font-size:.74rem;color:var(--ink-soft);font-weight:700} .bcode{display:flex;flex-direction:column;align-items:center;gap:.05rem;width:100%; margin-top:.45rem;border:1.5px dashed var(--teal-deep);border-radius:var(--r-sm); padding:.35rem .5rem;background:#fff} .bcl{font-size:.64rem;color:var(--ink-faint);font-weight:700} .bcode b{font-family:var(--mono);font-size:.82rem;color:var(--teal-ink)} .pick > .cta{margin:0 .8rem .8rem} /* ===== desktop card ===== THREE columns, with the CTA stacked under the bonus block in the third. The previous four-column version summed 55.5rem of tracks inside a ~52rem main column, so the CTA was clipped off the right edge. Three columns with one flexible track cannot overflow regardless of viewport. */ @media(min-width:46rem){ .tl-list .pick{display:grid; grid-template-columns:10.5rem minmax(0,1fr) 15rem; align-items:stretch;gap:0;padding:0;overflow:hidden} .tl-list .pick .bhead{min-height:0;padding:1.5rem .6rem .7rem;gap:.3rem} .tl-list .pick .bhead .logo{width:7.2rem} .tl-list .pick .bhead .rank{top:.4rem;left:.4rem;width:2.1rem;height:2.1rem;font-size:.82rem} .tl-list .pick .ratepill{top:.4rem;right:.4rem;padding:.2rem .45rem} .tl-list .pick .ratepill b{font-size:.76rem} .tl-list .pick .bjp{font-size:.8rem} /* specs: the flexible track, so it absorbs any leftover width */ .tl-list .pick .specs{display:grid;grid-template-columns:1fr;gap:.4rem; padding:.85rem 1rem;align-content:center;min-width:0} .tl-list .pick .sk{font-size:.64rem;color:var(--ink-faint)} .tl-list .pick .sv{font-size:.82rem;margin-bottom:.1rem} .tl-list .pick .payrow{flex-wrap:wrap;gap:.16rem} .tl-list .pick .payrow img{width:1.6rem;height:1.05rem} .tl-list .pick .paynote{font-size:.58rem} /* third column: bonus block with the CTA directly beneath it */ .tl-list .pick .bblock{margin:.8rem .8rem .4rem;padding:.95rem .6rem .6rem} .tl-list .pick .bfig{font-size:.9rem;height:2.6em} .tl-list .pick .bwager{font-size:.68rem} .tl-list .pick .bcode{margin-top:.3rem;padding:.26rem .4rem} .tl-list .pick .bcode b{font-size:.72rem} .tl-list .pick > .cta{grid-column:3;margin:0 .8rem .8rem;font-size:.8rem; padding:.55rem .5rem;min-height:42px} } /* ===== comparison matrix ===== Label column frozen, brand columns scroll sideways. Fifteen brands will not fit a phone otherwise without shrinking type past readable. */ .cmpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch; border:3px solid var(--teal-ink);border-radius:var(--r-md); background:var(--surface);margin:1.1rem 0;box-shadow:4px 4px 0 var(--teal)} table.cmp{border-collapse:separate;border-spacing:0;min-width:0;width:auto} table.cmp th[scope=row]{position:sticky;left:0;z-index:2;background:var(--cream-2); border-right:3px solid var(--teal-ink);border-bottom:1px solid var(--rule); font-family:var(--display);font-weight:800;font-size:.76rem;color:var(--teal-ink); text-align:left;padding:.55rem .6rem;white-space:nowrap;min-width:6.2rem} table.cmp td{border-bottom:1px solid var(--rule);border-right:1px solid var(--rule); padding:.5rem .55rem;text-align:center;vertical-align:middle; min-width:8.6rem;font-size:.82rem} table.cmp tr:last-child th, table.cmp tr:last-child td{border-bottom:0} /* brand header cell: the brand's own colour, so a white logo reads on it */ .mhead{display:flex;flex-direction:column;align-items:center;gap:.3rem; background:var(--bc);margin:-.5rem -.55rem;padding:.6rem .5rem;min-height:5.4rem; justify-content:center} .mhead .logo{width:5.4rem;background:transparent;border:0;padding:0} .mnm{font-family:var(--display);font-weight:800;font-size:.78rem;color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35)} .mscore{display:flex;flex-direction:column;align-items:center;gap:.1rem} .mscore b{font-family:var(--display);font-size:1rem;color:var(--teal-ink)} .mbonus{font-family:var(--display);font-weight:800;font-size:.78rem; color:var(--cta-dk);line-height:1.35;display:block} table.cmp td img{display:inline-block;margin:0 1px;vertical-align:middle} table.cmp .cta{font-size:.74rem;padding:.45rem .5rem;min-height:38px} /* ===== toplist card, brand-banner pattern ===== The banner takes the brand's own accent colour, which is what makes a white-knockout logo correct rather than a stand-in. Rank sits on the banner, score opposite it, then the spec rows, the bonus block, and one CTA. */ .pick{padding:0;overflow:hidden;display:block} .bhead{position:relative;background:var(--bc);padding:1.5rem .8rem .7rem; display:flex;flex-direction:column;align-items:center;gap:.35rem;min-height:6.4rem; justify-content:center} .bhead .rank{position:absolute;top:.5rem;left:.5rem;margin:0; background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.55); color:#fff;box-shadow:none;text-shadow:0 1px 2px rgba(0,0,0,.3)} .bhead .rank.medal{border:3px solid rgba(255,255,255,.6)} .ratepill{position:absolute;top:.5rem;right:.5rem;display:flex;align-items:center; gap:.3rem;background:#fff;border-radius:999px;padding:.28rem .6rem; box-shadow:0 2px 5px rgba(0,0,0,.18)} .ratepill b{font-family:var(--display);font-size:.9rem;color:var(--teal-ink); font-variant-numeric:tabular-nums} .bhead .bmark{display:block;text-decoration:none} .bhead .logo{width:8.6rem;background:transparent;border:0;padding:0;aspect-ratio:150/80} .bhead .logo.real{background:var(--lt,#fff);border:2px solid transparent;padding:.25rem} .bhead .logo.none{color:#fff;font-size:.9rem} .bjp{font-family:var(--display);font-weight:800;font-size:.9rem;color:#fff; display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;justify-content:center; text-shadow:0 1px 2px rgba(0,0,0,.32);height:auto;padding:0} /* spec rows: label left, value right */ .specs{display:grid;grid-template-columns:auto 1fr;gap:.3rem .7rem; padding:.7rem .8rem;align-items:center} .sk{font-family:var(--display);font-weight:800;font-size:.74rem;color:var(--ink-soft); white-space:nowrap} .sv{font-family:var(--display);font-weight:800;font-size:.86rem;color:var(--teal-ink)} .payrow{display:flex;flex-wrap:wrap;gap:.2rem;align-items:center} .payrow img{width:2rem;height:1.3rem;object-fit:contain} .paynote{grid-column:1/-1;font-size:.62rem;color:var(--ink-faint);line-height:1.4} /* bonus block: tab label, big figure, wagering, code panel */ .bblock{margin:.2rem .8rem .8rem;border:2.5px solid var(--teal-ink); border-radius:var(--r-md);background:var(--cream-2);padding:1rem .7rem .7rem; position:relative;display:flex;flex-direction:column;align-items:center;gap:.15rem} .btab{position:absolute;top:-.75rem;left:.6rem;background:var(--teal-deep); color:var(--gold);font-family:var(--display);font-weight:800;font-size:.68rem; padding:.18rem .55rem;border-radius:var(--r-sm);border:2px solid var(--teal-ink)} .bfig{font-family:var(--display);font-weight:800;font-size:1.1rem;color:var(--cta-dk); text-align:center;line-height:1.35;word-break:keep-all} .bwager{font-size:.74rem;color:var(--ink-soft);font-weight:700} .bcode{display:flex;flex-direction:column;align-items:center;gap:.05rem;width:100%; margin-top:.45rem;border:1.5px dashed var(--teal-deep);border-radius:var(--r-sm); padding:.35rem .5rem;background:#fff} .bcl{font-size:.64rem;color:var(--ink-faint);font-weight:700} .bcode b{font-family:var(--mono);font-size:.82rem;color:var(--teal-ink)} .pick > .cta{margin:0 .8rem .8rem} /* Desktop card layout lives in the single @media(min-width:46rem) block above: three tracks (banner, specs, bonus) with the CTA sitting directly under the bonus block in track three. A second competing copy of this block used to sit here with four tracks and the CTA in its own column; because it came later in the file it silently overrode the three-track rule above 52rem and pushed the CTA past the card edge whenever a sidebar narrowed the card. Removed. */ /* ===== comparison matrix ===== Label column frozen, brand columns scroll sideways. Fifteen brands will not fit a phone otherwise without shrinking type past readable. */ .cmpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch; border:3px solid var(--teal-ink);border-radius:var(--r-md); background:var(--surface);margin:1.1rem 0;box-shadow:4px 4px 0 var(--teal)} table.cmp{border-collapse:separate;border-spacing:0;min-width:0;width:auto} table.cmp th[scope=row]{position:sticky;left:0;z-index:2;background:var(--cream-2); border-right:3px solid var(--teal-ink);border-bottom:1px solid var(--rule); font-family:var(--display);font-weight:800;font-size:.76rem;color:var(--teal-ink); text-align:left;padding:.55rem .6rem;white-space:nowrap;min-width:6.2rem} table.cmp td{border-bottom:1px solid var(--rule);border-right:1px solid var(--rule); padding:.5rem .55rem;text-align:center;vertical-align:middle; min-width:8.6rem;font-size:.82rem} table.cmp tr:last-child th, table.cmp tr:last-child td{border-bottom:0} /* brand header cell: the brand's own colour, so a white logo reads on it */ .mhead{display:flex;flex-direction:column;align-items:center;gap:.3rem; background:var(--bc);margin:-.5rem -.55rem;padding:.6rem .5rem;min-height:5.4rem; justify-content:center} .mhead .logo{width:5.4rem;background:transparent;border:0;padding:0} .mnm{font-family:var(--display);font-weight:800;font-size:.78rem;color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35)} .mscore{display:flex;flex-direction:column;align-items:center;gap:.1rem} .mscore b{font-family:var(--display);font-size:1rem;color:var(--teal-ink)} .mbonus{font-family:var(--display);font-weight:800;font-size:.78rem; color:var(--cta-dk);line-height:1.35;display:block} table.cmp td img{display:inline-block;margin:0 1px;vertical-align:middle} table.cmp .cta{font-size:.74rem;padding:.45rem .5rem;min-height:38px} /* ===== toplist card, brand-banner pattern ===== The banner takes the brand's own accent colour, which is what makes a white-knockout logo correct rather than a stand-in. Rank sits on the banner, score opposite it, then the spec rows, the bonus block, and one CTA. */ .pick{padding:0;overflow:hidden;display:block} .bhead{position:relative;background:var(--bc);padding:1.5rem .8rem .7rem; display:flex;flex-direction:column;align-items:center;gap:.35rem;min-height:6.4rem; justify-content:center} .bhead .rank{position:absolute;top:.5rem;left:.5rem;margin:0; background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.55); color:#fff;box-shadow:none;text-shadow:0 1px 2px rgba(0,0,0,.3)} .bhead .rank.medal{border:3px solid rgba(255,255,255,.6)} .ratepill{position:absolute;top:.5rem;right:.5rem;display:flex;align-items:center; gap:.3rem;background:#fff;border-radius:999px;padding:.28rem .6rem; box-shadow:0 2px 5px rgba(0,0,0,.18)} .ratepill b{font-family:var(--display);font-size:.9rem;color:var(--teal-ink); font-variant-numeric:tabular-nums} .bhead .bmark{display:block;text-decoration:none} .bhead .logo{width:8.6rem;background:transparent;border:0;padding:0;aspect-ratio:150/80} .bhead .logo.real{background:var(--lt,#fff);border:2px solid transparent;padding:.25rem} .bhead .logo.none{color:#fff;font-size:.9rem} .bjp{font-family:var(--display);font-weight:800;font-size:.9rem;color:#fff; display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;justify-content:center; text-shadow:0 1px 2px rgba(0,0,0,.32);height:auto;padding:0} /* spec rows: label left, value right */ .specs{display:grid;grid-template-columns:auto 1fr;gap:.3rem .7rem; padding:.7rem .8rem;align-items:center} .sk{font-family:var(--display);font-weight:800;font-size:.74rem;color:var(--ink-soft); white-space:nowrap} .sv{font-family:var(--display);font-weight:800;font-size:.86rem;color:var(--teal-ink)} .payrow{display:flex;flex-wrap:wrap;gap:.2rem;align-items:center} .payrow img{width:2rem;height:1.3rem;object-fit:contain} .paynote{grid-column:1/-1;font-size:.62rem;color:var(--ink-faint);line-height:1.4} /* bonus block: tab label, big figure, wagering, code panel */ .bblock{margin:.2rem .8rem .8rem;border:2.5px solid var(--teal-ink); border-radius:var(--r-md);background:var(--cream-2);padding:1rem .7rem .7rem; position:relative;display:flex;flex-direction:column;align-items:center;gap:.15rem} .btab{position:absolute;top:-.75rem;left:.6rem;background:var(--teal-deep); color:var(--gold);font-family:var(--display);font-weight:800;font-size:.68rem; padding:.18rem .55rem;border-radius:var(--r-sm);border:2px solid var(--teal-ink)} .bfig{font-family:var(--display);font-weight:800;font-size:1.1rem;color:var(--cta-dk); text-align:center;line-height:1.35;word-break:keep-all} .bwager{font-size:.74rem;color:var(--ink-soft);font-weight:700} .bcode{display:flex;flex-direction:column;align-items:center;gap:.05rem;width:100%; margin-top:.45rem;border:1.5px dashed var(--teal-deep);border-radius:var(--r-sm); padding:.35rem .5rem;background:#fff} .bcl{font-size:.64rem;color:var(--ink-faint);font-weight:700} .bcode b{font-family:var(--mono);font-size:.82rem;color:var(--teal-ink)} .pick > .cta{margin:0 .8rem .8rem} /* Same-size rule: bonus strings run one or two lines depending on the brand, which desyncs card heights. Pin the figure to two lines. */ .bfig{height:2.7em;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden;align-content:center} /* TOC numbers: the badge is a flex child, so it inherited `stretch` and grew tall whenever its label wrapped to two lines. Fixed square, top aligned. */ .toc a{align-items:flex-start;gap:.5rem} .toc a::before{flex:0 0 auto;width:1.5rem;height:1.5rem;min-width:0; display:grid;place-items:center;align-self:flex-start; margin-top:.15rem;font-size:.7rem;line-height:1;border-radius:var(--r-sm)} /* Page head hierarchy: Japanese leads, English is a small eyebrow. The original venue site put big English over small Japanese, which reads as decoration on a shop site. On a Japanese-market search page the Japanese is the headline and the English is a label, so the sizes swap. */ .pagehead .inner{gap:.15rem} .pagehead .en{order:1;font-size:clamp(.62rem,2vw,.78rem);letter-spacing:.22em; -webkit-text-stroke:2.5px var(--oc-outer);paint-order:stroke fill; color:var(--oc-face-b);text-shadow:none;line-height:1.3;opacity:.95} .pagehead .jp{order:2;font-size:clamp(1.35rem,5.6vw,2.4rem);letter-spacing:.04em; line-height:1.2;-webkit-text-stroke:5px var(--oc-outer);paint-order:stroke fill; color:var(--oc-inner); text-shadow:0 3px 0 rgba(14,76,72,.45), 0 5px 14px rgba(14,76,72,.35)} /* A tinted wordmark carries the brand's own accent colour, so it needs a light plate rather than the coloured banner it used to sit on. */ .logo.tint{background:var(--lt,#fff);border:2px solid rgba(255,255,255,.75);padding:.3rem} .bhead .logo.tint{background:var(--lt,#fff);border:2px solid transparent} .mini .logo.tint, .mhead .logo.tint{background:var(--lt,#fff)} .sbar .logo.tint{background:var(--lt,#fff)} /* A brand whose real nav is white needs dark type on its banner. Assuming white text made the name invisible on Konibet and StealthBet. */ .bhead.onlight .bjp{color:var(--ink);text-shadow:none} .bhead.onlight .rank{background:rgba(0,0,0,.10);border-color:rgba(0,0,0,.25); color:var(--ink);text-shadow:none} /* removed: rule under the logo block. Existed to divide a coloured tile from the card; with every tile white it drew a line across nothing. */ /* ------------------------------------------------------------------ * * LIGHT BRAND TILES * * A brand tile is no longer always the brand's nav colour, because some * brands (Konibet, StealthBet) ship a white nav AND a pale logo, which * rendered white on white and lost the logo completely. tile_colours.py now * measures the logo's own ink and hands the build either the brand's deep * colour or a white plate, whichever the logo can be seen on. * * That means a tile can now be light, so everything that assumed a dark tile * and used white type needs a dark counterpart. Specificity here is deliberate: * .mnm and friends are each declared more than once earlier in this file, so * these have to out-rank them rather than rely on coming last. * ------------------------------------------------------------------ */ .mhead.onlight{border-bottom:1px solid var(--rule)} .mhead.onlight .mnm{color:var(--teal-ink);text-shadow:none} .bhead.onlight .ratepill{background:rgba(0,0,0,.06);border:1px solid var(--rule)} .bhead.onlight .badge{background:rgba(0,0,0,.07);color:var(--teal-ink); border-color:rgba(0,0,0,.18)} .bhead.onlight .badge.warn{background:#fdf0d8;color:#8a5a12;border-color:#e8c98d} /* A white tile against the cream card would otherwise have no edge at all. */ /* removed: 1px inset outline. This was the vertical line down the side of the logo column. Same reason: no coloured tile left to separate. */ /* ------------------------------------------------------------------ * * MASCOTS — グー太 (Gūta) and パー子 (Pāko) * * The figures are BAKED image files, not composed here. The outfits used to be * assembled from CSS positioning plus SVG overlays, which is fine for one * preview but would have every page re-composing the characters at its own * layout size, letting them drift apart across 51 pages. One render, one file, * no drift. * ------------------------------------------------------------------ */ /* Header bar. The pair of heads is a ~2.4:1 strip, so it gets a WIDE chip. Forcing it into a square would letterbox it down to a sliver. */ header.site .brandlink{display:flex;align-items:center;gap:.5rem} header.site .markchip{flex:none;display:block;line-height:0; width:4.4rem;height:2.1rem} header.site .markchip img{width:100%;height:100%;object-fit:contain;display:block} @media(min-width:46rem){ header.site .markchip{width:5.6rem;height:2.6rem} } /* Byline avatar. The art is square-padded when baked, so the circle can never slice a face; object-fit only has to centre it. */ .byline .av{background:var(--mint);overflow:hidden;display:grid;place-items:center} .byline .av img{width:100%;height:100%;object-fit:contain;display:block} /* Page-head mascot. Sits bottom-right of the sunburst band, behind nothing and clipped by the band itself. Hidden on the narrowest phones, where the band is only tall enough for its own two lines of type. */ .pagehead .phmascot{position:absolute;right:.5rem;bottom:-.15rem; width:auto;height:74%;max-height:5.2rem;pointer-events:none; z-index:1;display:none} .pagehead .inner{position:relative;z-index:2} @media(min-width:30rem){ .pagehead .phmascot{display:block} } @media(min-width:46rem){ .pagehead .phmascot{height:88%;max-height:7.4rem;right:1.1rem} } /* Inline mascot note: a small aside where one of the pair makes a point. */ .mascotnote{display:flex;align-items:flex-end;gap:.6rem;margin:1rem 0; padding:.7rem .8rem .7rem .7rem;background:var(--surface); border:2px solid var(--teal-ink);border-radius:var(--r-md); box-shadow:3px 3px 0 var(--mint)} .mascotnote img{flex:none;width:3.4rem;height:auto;display:block} .mascotnote .say{font-size:.82rem;line-height:1.6} .mascotnote .say b{display:block;font-family:var(--display);font-size:.76rem; color:var(--teal-deep);margin-bottom:.15rem} @media(min-width:46rem){.mascotnote img{width:4.4rem}} /* Header overflow fix. Adding the mark chip pushed the MENU button off the right edge on a 375px phone: chip 4.4rem + wordmark max 17rem + burger exceeded the 23.4rem viewport. The wordmark now yields width to make room for the chip, and the row is allowed to shrink rather than overflow. */ header.site .bar{min-width:0} header.site .brandlink{min-width:0;flex:1 1 auto} header.site .wm{max-width:min(56vw,12.5rem)} header.site .markchip{width:3.2rem;height:1.6rem} @media(min-width:26rem){ header.site .wm{max-width:min(62vw,15rem)} header.site .markchip{width:3.8rem;height:1.9rem} } @media(min-width:46rem){ header.site .wm{max-width:21rem} header.site .markchip{width:5.6rem;height:2.6rem} } header.site .burger{flex:none} /* Show the pair in the band on phones too: the band is tall enough and its bottom-right corner is empty. Smaller so it does not crowd the title. */ .pagehead .phmascot{display:block;height:52%;max-height:4rem;right:.35rem} @media(min-width:30rem){ .pagehead .phmascot{height:70%;max-height:5.2rem;right:.5rem} } @media(min-width:46rem){ .pagehead .phmascot{height:88%;max-height:7.4rem;right:1.1rem} } /* Reserve the mascot's corner so band text can never run under it. Measured: the title box already reached 361px against a mascot starting at 288px on a 375px phone. It did not visibly collide with THIS title, but a longer one would. */ .pagehead .inner{padding-right:5.6rem} @media(min-width:30rem){.pagehead .inner{padding-right:6.4rem}} @media(min-width:46rem){.pagehead .inner{padding-right:9rem}} /* ------------------------------------------------------------------ * * ONE-LINE HEADER * * The nav used to be its own full-width band under the logo bar, which cost a * whole extra row of vertical space for six short links. It now lives INSIDE * .bar, so on desktop the brand lockup and the nav share one line. * * On phones the nav still collapses behind the burger. Because it is now a flex * item rather than a sibling band, "revealed" means wrapping onto its own row * inside the bar, which is what flex-wrap plus width:100% does. * ------------------------------------------------------------------ */ header.site .bar{flex-wrap:wrap;row-gap:0} /* Desktop: inline, transparent, no band of its own. */ @media(min-width:46rem){ header.site nav.site{background:transparent;overflow:visible;flex:1 1 auto; min-width:0;display:flex;justify-content:flex-end} header.site nav.site ul{max-width:none;margin:0;padding:0;gap:1.15rem; flex-wrap:wrap;justify-content:flex-end} header.site nav.site a{padding:.3rem 0} /* the underline for the current page sits tight to the text on one line */ header.site nav.site a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--cta)} } /* Phones: hidden until the burger opens it, then a full-width row inside the bar. The reveal selector has to reach INSIDE header.site now that the nav is nested; the old `.navtoggle:checked ~ nav.site` no longer matches anything. */ @media(max-width:45.99rem){ header.site nav.site{display:none;width:100%;order:3;background:transparent; margin-top:.45rem;border-top:1px solid rgba(245,194,66,.22)} .navtoggle:checked ~ header.site nav.site{display:block} } /* Mobile header, wrap fix. Allowing .bar to wrap so the nav could drop to its own row also let the BURGER wrap, which pushed MENU onto a second line under the logo. Only the nav should ever wrap. The brand lockup must therefore be the thing that yields width, which needs min-width:0 on the flex chain, since an will not shrink below its intrinsic size without it. */ header.site .brandlink{flex:1 1 auto;min-width:0} header.site .wm{min-width:0} header.site .burger{flex:0 0 auto} @media(max-width:45.99rem){ /* nav is the only wrapping item */ header.site nav.site{flex:0 0 100%} header.site .bar{padding:.5rem .7rem} header.site .burger{padding:.3rem .5rem;font-size:.72rem;gap:.35rem} header.site .burger .bars{width:1.1rem;height:.7rem} header.site .markchip{width:2.9rem;height:1.5rem} header.site .wm{max-width:min(46vw,10.5rem)} } /* ------------------------------------------------------------------ * * ABOVE THE FOLD ON A PHONE * * Measured on a 812px viewport: the first casino card started at 751px and its * button at 1064px, so the ranking this page exists for was entirely below the * fold. Moving the intro copy and the stat tiles BELOW the ranking recovered * 193px. This block takes the rest out of the header stack: the H1 runs to * three lines now that it carries the keyword, and the byline was sized for a * desktop rail. Phone only, the desktop proportions are unchanged. * ------------------------------------------------------------------ */ /* h1::before draws the eyebrow from data-eyebrow. With the attribute gone it would still lay out an empty block and its margin, so hide it outright. */ h1:not([data-eyebrow])::before{display:none} /* Byline. The old markup ran the English team name and the date together in one string, so "2026年8月11日" broke across lines mid-date on a phone. Two separate spans now, and the date is kept whole. */ .byline .meta{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem} .byline .team{white-space:nowrap} .byline .upd{white-space:nowrap;font-weight:700;color:var(--teal-deep)} .byline .upd::before{content:"";display:inline-block;width:.28rem;height:.28rem; border-radius:50%;background:currentColor;vertical-align:.18em; margin-right:.42rem;opacity:.55} @media(max-width:30rem){ /* narrow phones: stack the two lines instead of wrapping mid-phrase */ .byline .meta{flex-direction:column;align-items:flex-start;gap:.1rem} .byline .upd::before{display:none} } @media(max-width:45.99rem){ /* The H1 runs to three lines now that it carries the keyword, so it is sized down a step here. Spacing stays generous on purpose: an earlier pass squeezed these margins to claw back pixels and the header stack ended up cramped against the ranking. The fold was fixed structurally instead, by moving the intro copy and stat tiles below the ranking (193px). */ main.col h1{font-size:1.3rem;line-height:1.4;margin:.35rem 0 .7rem} .byline{padding:.5rem .65rem;margin-bottom:1rem} .byline .meta{font-size:.66rem;line-height:1.4} /* The intro stays ABOVE the ranking: it is the only body copy between the H1 and the toplist, and every competing page has text in that slot. It is the collapsed height that was the problem, not the paragraph, so the clamp goes from 3 lines to 2 and the type tightens. The stat tiles moved below the ranking instead, since they carry no such signal. */ .ledewrap{margin-bottom:.7rem} .ledewrap .lede{-webkit-line-clamp:2} .lede{font-size:.92rem;line-height:1.62} /* The spec pairs moved into the detail panel, so on a phone the collapsed card drops them rather than printing them twice. This pays for the toggle: the card is the same height it was before the panel existed, and payout speed and licence are one tap away. The desktop row keeps them inline, where there is horizontal room for a column. */ .tl-rank .pod .podspec{display:none} } /* ------------------------------------------------------------------ * * EXPANDING ROW DETAIL (.dtoggle / .detail) * * The collapsed row carries the decision fields and the panel carries the rest, * which is how the strongest page in this market (oncasitown) does it. Every * value is labelled with where it came from, and a field we do not hold renders * as 未確認 rather than being quietly omitted, so a thin brand looks thin * instead of looking equivalent to a complete one. * ------------------------------------------------------------------ */ .dtoggle{grid-column:1/-1;justify-self:stretch;margin-top:.35rem; display:inline-flex;align-items:center;justify-content:center;gap:.35rem; background:none;border:0;padding:.35rem .2rem;cursor:pointer; font-family:var(--display);font-weight:800;font-size:.76rem; color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px} .dtoggle::after{content:"";width:.42rem;height:.42rem;flex:none; border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor; transform:rotate(45deg);margin-top:-.2rem;transition:transform .15s} .dtoggle .off{display:none} /* keyboard focus has to be visible, since the real control is a hidden input */ .dchk:focus-visible + .dtoggle{outline:3px solid var(--cta);outline-offset:2px; border-radius:.25rem} .dchk:checked + .dtoggle::after{transform:rotate(-135deg);margin-top:.14rem} .dchk:checked + .dtoggle .on{display:none} .dchk:checked + .dtoggle .off{display:inline} /* The panel sits inside the winner's card, which carries a sparkle behind it, so it needs its own solid ground or the whole thing greys out. Mint cells on a cream page with faint grey labels was too washed out to read at a glance. */ .detail{grid-column:1/-1;width:100%;margin-top:.7rem;padding:.85rem .8rem .8rem; text-align:left;display:none;position:relative;z-index:1; background:var(--surface);border:2.5px solid var(--teal-ink); border-radius:var(--r-lg);box-shadow:3px 3px 0 var(--teal)} .dchk:checked ~ .detail{display:block} .dgrid{display:grid;gap:.5rem;grid-template-columns:1fr 1fr} @media(min-width:46rem){.dgrid{grid-template-columns:repeat(4,1fr)}} .dcell{background:var(--mint-lt);border:2px solid var(--teal-deep); border-radius:var(--r-sm,.55rem); padding:.55rem .6rem;display:flex;flex-direction:column;gap:.15rem;min-width:0} /* the label was faint grey on mint, about 2:1. Teal ink on light mint is ~9:1 */ .dk{font-size:.66rem;font-weight:800;color:var(--teal-ink);opacity:.82; letter-spacing:.02em} .dv{font-family:var(--display);font-weight:800;font-size:1rem; color:var(--teal-ink);line-height:1.28;word-break:break-word} /* a missing value is stated, not hidden, and it should look different on purpose */ .dv.unk{color:var(--ink-soft);font-weight:700;font-size:.88rem} .dn{font-size:.62rem;color:var(--ink-soft);line-height:1.35} .dnote{font-size:.68rem;line-height:1.6;color:var(--ink-soft);margin:.7rem 0 .6rem} .dcta{width:100%} /* ------------------------------------------------------------------ * * BY PURPOSE (.purposes) * * The same 15 brands re-sorted by ONE stated criterion per card, which is the * structure five of the six ranking competitors use and this page did not have. * Each card names the rule it sorted by, because a second ranking that does not * say what changed just reads as a contradiction of the first one. * ------------------------------------------------------------------ */ .purposes{display:grid;gap:.9rem;margin:1rem 0 1.4rem} @media(min-width:46rem){.purposes{grid-template-columns:repeat(3,1fr);gap:.8rem}} .pcard{background:var(--surface);border:3px solid var(--teal-ink); border-radius:var(--r-lg);box-shadow:4px 4px 0 var(--teal); padding:.95rem .9rem 1rem;display:flex;flex-direction:column} .pcard h3{font-family:var(--display);font-weight:800;font-size:1rem; color:var(--teal-ink);margin:0 0 .3rem} .pcard .prule{font-size:.74rem;line-height:1.5;color:var(--ink-faint); font-weight:700;margin:0 0 .7rem} /* the note is the honest small print: what the card could NOT rank */ .pcard .pnote{font-size:.7rem;line-height:1.55;color:var(--ink-faint); margin:.7rem 0 0;padding-top:.6rem;border-top:1px dashed var(--teal); margin-top:auto} .plist{list-style:none;margin:0;padding:0;display:grid;gap:.55rem} .plist li{display:grid;grid-template-columns:1.5rem 4.4rem 1fr; align-items:center;gap:.3rem .5rem; padding-bottom:.55rem;border-bottom:1px solid var(--teal)} .plist li:last-child{border-bottom:0;padding-bottom:0} .plist .rk{width:1.5rem;height:1.5rem;border-radius:50%; background:var(--teal-deep);color:#fff;font-family:var(--display); font-weight:800;font-size:.78rem;display:grid;place-items:center} .plist li:first-child .rk{background:var(--cta)} .plist .logo{width:4.4rem;max-width:4.4rem} .plist .info{display:flex;flex-direction:column;gap:.05rem;min-width:0} .plist .nm{font-family:var(--display);font-weight:800;font-size:.82rem; color:var(--teal-ink)} .plist .fig{font-family:var(--display);font-weight:800;font-size:.74rem; color:var(--cta-dk);line-height:1.3} .plist .cta{grid-column:1/-1;width:100%;margin-top:.15rem} /* ------------------------------------------------------------------ * * ONE RANKED LIST (.tl-rank) * * Replaces the 3-card podium PLUS the separate 15-row toplist, which ranked the * same brands twice and looked like two different components. Every position now * uses the podium card, so the design carries the whole list. * * Reuses .pod for the card, but NOT .tl-podium's three-column ordering: that * deliberately put 1st in the middle, which is meaningless past three items. * ------------------------------------------------------------------ */ .tl-rank{list-style:none;margin:1.2rem 0;padding:0;display:grid;gap:1.5rem .7rem; grid-template-columns:1fr} @media(min-width:34rem){.tl-rank{grid-template-columns:1fr 1fr;gap:1.7rem .7rem}} /* Positions 4+ get a numbered chip where 1-3 get the crown and medals, so the rank is always in the same place on the card. */ .tl-rank .rknum{position:absolute;top:-.85rem;left:50%;transform:translateX(-50%); min-width:1.9rem;height:1.9rem;padding:0 .4rem;border-radius:999px; background:var(--teal-deep);border:2.5px solid var(--teal-ink);color:#fff; font-family:var(--display);font-weight:800;font-size:.92rem; display:grid;place-items:center;box-shadow:2px 2px 0 var(--teal-ink)} .tl-rank .pod{padding-top:1.75rem} .tl-rank .pod.first{padding-top:2.1rem} .tl-rank .podmark{display:block;width:100%;line-height:0;text-decoration:none} .tl-rank .rating{display:flex;align-items:center;gap:.35rem;justify-content:center} .tl-rank .rating b{font-family:var(--display);font-size:.92rem;color:var(--teal-ink)} /* The spec pairs the old row layout carried. Kept compact so the card stays a card rather than turning back into a table. */ .tl-rank .podspec{display:grid;grid-template-columns:auto 1fr;gap:.15rem .5rem; margin:.15rem 0 .1rem;width:100%;text-align:left;font-size:.72rem} .tl-rank .podspec dt{color:var(--ink-faint);font-weight:700;white-space:nowrap} .tl-rank .podspec dd{margin:0;font-weight:700;color:var(--teal-ink)} .tl-rank .podrev{font-size:.72rem;font-weight:700;color:var(--teal-deep); text-decoration:underline;text-underline-offset:2px} /* ── desktop: one brand per horizontal line ── Back to the original row read. A 3-across card grid makes the eye travel left-right-down, so the rank stops being the thing you follow. A stacked row keeps position, logo, rating, offer and CTA on one line, and 1 to 15 scans straight down. Cards stay below 46rem, where five columns will not fit. This block sits AFTER the base .tl-rank rules on purpose: they share its specificity, so it only wins by coming last. */ @media(min-width:46rem){ .tl-rank{grid-template-columns:1fr;gap:.7rem} /* Column widths are deliberately mean to everything except the offer. The main column is ~780px, so the four fixed columns plus gaps plus the rank gutter have to leave the offer text a readable measure: at 8.5rem/6rem/ 12.5rem/10rem it was left with 52px, about three Japanese characters. */ .tl-rank .pod{ display:grid; grid-template-columns:6.5rem 4.2rem minmax(0,1fr) 10.5rem 8rem; grid-template-rows:auto auto; align-items:center; justify-items:start; text-align:left; gap:.1rem .75rem; padding:.85rem 1rem .85rem 3.1rem; } /* the winner's marker is the crowned panda, which is wider than a medal disc, so row 1 gets a deeper left gutter to keep it clear of the logo */ .tl-rank .pod.first{padding:.95rem 1rem .95rem 3.75rem} /* rank marker moves from "on top of the card" to "start of the row" */ .tl-rank .rknum, .tl-rank .crown, .tl-rank .pmedal{top:50%;left:.8rem;transform:translateY(-50%)} /* the crowned panda scales down whole rather than being taken apart, so the row keeps the same mark the card shows */ .tl-rank .crown{width:2.5rem;height:2.9rem; background-size:auto 1.75rem} .tl-rank .crown::before{width:1.5rem;height:1.5rem} .tl-rank .crown b{top:.58rem;font-size:.68rem} .tl-rank .pmedal{width:1.85rem;height:1.85rem;font-size:.85rem} .tl-rank .logo{grid-column:1;grid-row:1/span 2;max-width:6.5rem} .tl-rank .rating{grid-column:2;grid-row:1/span 2;justify-content:flex-start} .tl-rank .lbl{grid-column:3;grid-row:1} /* every offer reserves two lines whether it needs them or not, so all 15 rows come out the same height instead of stepping 89/97/103px down the list */ .tl-rank .fig{grid-column:3;grid-row:2; min-height:2.7em;-webkit-line-clamp:2;text-wrap:pretty} .tl-rank .podspec{grid-column:4;grid-row:1/span 2;margin:0;width:auto} .tl-rank .cta{grid-column:5;grid-row:1/span 2;width:100%;margin-top:0} /* the winner's sparkle was sized for a tall card; across a wide row it would wash over the whole line, so it tucks in behind the CTA end instead */ .tl-rank .pod.first::before{ background-position:right 1.2rem center;background-size:auto 150%;opacity:.13} } /* ------------------------------------------------------------------ * * ROW TOPLIST SPACING * * Measured: a row was 268px tall, its logo column 207px holding a 61px logo, and * the specs column spreading six short lines across the same 207px. Three causes, * all about how the EXTRA height gets distributed rather than about padding: * * 1. the three columns stretch to the tallest, so the shortest ones inherit * height they have nothing to put in; * 2. .specs is a grid with no row packing, so its implicit rows grow to fill, * pushing the label/value pairs apart; * 3. .bhead centres its content, which parks a small logo in the middle of a * tall column and leaves a void above and below. * * Fixing the distribution, not the padding, is what actually tightens it. * ------------------------------------------------------------------ */ @media(min-width:46rem){ /* pack the spec pairs to the top instead of letting them spread */ .tl-list .pick .specs{align-content:start;gap:.22rem .7rem;padding:.85rem .8rem} /* logo near the top of its column, not floating in the middle of it */ .tl-list .pick .bhead{justify-content:flex-start;padding:2.15rem .6rem .55rem} /* the bonus panel is the tallest real content, so let it set the row height and keep its internals snug */ .tl-list .pick .bblock{padding:.75rem .7rem .6rem} } /* A little more air BETWEEN rows, now that each row is shorter. Cards read as separate objects; the previous 16px against a 268px row was invisible. */ .toplist.tl-list{gap:1.15rem} /* Second pass on row height. With .bhead no longer inflated, the remaining slack is the gap between the two grid rows (bonus panel above, CTA below) and the CTA's own margin. Measured cheap wins, no content removed. */ @media(min-width:46rem){ .tl-list .pick{row-gap:.45rem} .tl-list .pick .cta{margin:0 .8rem .8rem;grid-column:3} .tl-list .pick .bblock{margin-bottom:0} } /* The bonus panel and its CTA are now ONE grid item (.offer) in column three. Before, the CTA was a fourth grid item, so it wrapped to a second grid row and every card paid for a whole extra band beneath all three columns. Measured: .bhead only NEEDED 134px of its 192, so the height was never about padding, it was about that extra row. */ .offer{display:flex;flex-direction:column;gap:.45rem;padding:.55rem .6rem .6rem} .offer .bblock{margin:0} .offer .cta{margin:0;width:100%} @media(min-width:46rem){ .tl-list .pick .offer{padding:.6rem .7rem .7rem} .tl-list .pick .cta{margin:0} } /* Payment icons are SQUARE source art (512x512). The shared box must therefore be square too, with contain as a safety net: the matrix previously set 30x20 on a bare with no object-fit, which stretched every icon 50% wider than tall. */ .payrow img{width:1.4rem;height:1.4rem;object-fit:contain} table.cmp .payrow{justify-content:center;gap:.3rem} /* Toplist third column: the bonus panel and its CTA were touching (0px gap) and the CTA sat 26px wider than the panel, because .bblock carried its own side margins while the CTA did not. Both now sit in the same box. */ .tl-list .pick .offer{gap:.65rem} .tl-list .pick .offer .bblock{margin:0} .tl-list .pick .offer .cta{width:100%;margin:0} /* Logo: bigger, and centred in its column. It was pinned to the top by a justify-content:flex-start I added earlier while chasing row height. */ @media(min-width:46rem){ .tl-list .pick .bhead{justify-content:center;padding:2.15rem .6rem .8rem} .tl-list .pick .bhead .logo{width:9.6rem} }